1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 08:28:08 +00:00

Merge branch 'styled-components-refactor' of github.com:satoshilabs/trezor-wallet into styled-components-refactor

This commit is contained in:
Vladimir Volek 2018-08-16 16:29:26 +02:00
commit b165bdebb7
10 changed files with 114 additions and 114 deletions

View File

@ -30,4 +30,14 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
esproposal.decorators=ignore
module.name_mapper='.*\(.less\)' -> 'CSSModule'
module.name_mapper='^\(~/\)' -> '<PROJECT_ROOT>/src/'
module.name_mapper='^universal' -> '<PROJECT_ROOT>/src/'
module.name_mapper='^config' -> '<PROJECT_ROOT>/src/js/config'
module.name_mapper='^constants' -> '<PROJECT_ROOT>/src/js/constants'
module.name_mapper='^components' -> '<PROJECT_ROOT>/src/js/components'
module.name_mapper='^actions' -> '<PROJECT_ROOT>/src/js/actions'
module.name_mapper='^reducers' -> '<PROJECT_ROOT>/src/js/reducers'
module.name_mapper='^support' -> '<PROJECT_ROOT>/src/js/support'
module.name_mapper='^utils' -> '<PROJECT_ROOT>/src/js/utils'
module.name_mapper='^services' -> '<PROJECT_ROOT>/src/js/services'
module.name_mapper='^views' -> '<PROJECT_ROOT>/src/js/views'
module.system=haste

View File

@ -8,35 +8,14 @@ import * as TrezorConnectActions from 'actions/TrezorConnectActions';
import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
import type { State, Dispatch } from 'flowtype';
import type { StateProps, DispatchProps } from './common';
import LeftNavigation from './index';
type OwnProps = {
}
type StateProps = {
connect: $ElementType<State, 'connect'>,
accounts: $ElementType<State, 'accounts'>,
router: $ElementType<State, 'router'>,
deviceDropdownOpened: boolean,
fiat: $ElementType<State, 'fiat'>,
localStorage: $ElementType<State, 'localStorage'>,
discovery: $ElementType<State, 'discovery'>,
wallet: $ElementType<State, 'wallet'>,
devices: $ElementType<State, 'devices'>,
pending: $ElementType<State, 'pending'>,
}
type DispatchProps = {
toggleDeviceDropdown: typeof toggleDeviceDropdown,
addAccount: typeof TrezorConnectActions.addAccount,
acquireDevice: typeof TrezorConnectActions.acquire,
forgetDevice: typeof TrezorConnectActions.forget,
duplicateDevice: typeof TrezorConnectActions.duplicateDevice,
gotoDeviceSettings: typeof TrezorConnectActions.gotoDeviceSettings,
onSelectDevice: typeof TrezorConnectActions.onSelectDevice,
}
const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State, own: OwnProps): StateProps => ({
connect: state.connect,
accounts: state.accounts,
@ -63,4 +42,4 @@ const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps>
export default withRouter(
connect(mapStateToProps, mapDispatchToProps)(LeftNavigation),
);
);

View File

@ -1,26 +1,22 @@
/* @flow */
import React, { PureComponent } from 'react';
import { Link, NavLink } from 'react-router-dom';
import BigNumber from 'bignumber.js';
import { findDeviceAccounts } from 'reducers/AccountsReducer';
import * as stateUtils from 'reducers/utils';
import colors from 'config/colors';
import Loader from 'components/LoaderCircle';
import PropTypes from 'prop-types';
import React from 'react';
import styled, { css } from 'styled-components';
import * as stateUtils from 'reducers/utils';
import Tooltip from 'rc-tooltip';
import colors from 'config/colors';
import { NavLink } from 'react-router-dom';
import { findDeviceAccounts } from 'reducers/AccountsReducer';
import { FONT_SIZE, BORDER_WIDTH } from 'config/variables';
import styled, { css } from 'styled-components';
import Row from '../Row';
import PropTypes from 'prop-types';
//import AsideRowAccount from './row/account/AsideRowAccount';
import type { TrezorDevice, Accounts } from 'flowtype';
import type { Accounts } from 'flowtype';
import type { Props } from './index';
import Row from '../Row';
const RowAccountWrapper = styled.div`
height: 64px;
@ -49,22 +45,22 @@ const RowAccountWrapper = styled.div`
const RowAccount = ({
accountIndex, balance, url, isSelected = false,
}) => (
<NavLink to={url}>
<RowAccountWrapper
to={url}
isSelected={isSelected}
>
<Row column>
Account #{accountIndex + 1}
{balance ? (
<span>{balance}</span>
) : (
<span>Loading...</span>
)}
</Row>
</RowAccountWrapper>
</NavLink>
);
<NavLink to={url}>
<RowAccountWrapper
to={url}
isSelected={isSelected}
>
<Row column>
Account #{accountIndex + 1}
{balance ? (
<span>{balance}</span>
) : (
<span>Loading...</span>
)}
</Row>
</RowAccountWrapper>
</NavLink>
);
RowAccount.propTypes = {
accountIndex: PropTypes.number.isRequired,
url: PropTypes.string.isRequired,
@ -72,7 +68,7 @@ RowAccount.propTypes = {
isSelected: PropTypes.bool,
};
const AccountSelection = (props: Props): ?React$Element<string> => {
const AccountMenu = (props: Props): ?React$Element<string> => {
const selected = props.wallet.selectedDevice;
if (!selected) return null;
@ -208,4 +204,4 @@ const AccountSelection = (props: Props): ?React$Element<string> => {
);
};
export default AccountSelection;
export default AccountMenu;

View File

@ -1,21 +1,18 @@
/* @flow */
import coins from 'constants/coins';
import colors from 'config/colors';
import { FONT_SIZE, ICON_SIZE } from 'config/variables';
import Icon from 'components/Icon';
import ICONS from 'config/icons';
import { NavLink } from 'react-router-dom';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import styled from 'styled-components';
import { coinProp } from '../common';
import { FONT_SIZE, ICON_SIZE } from 'config/variables';
import Divider from '../Divider';
import Row from '../Row';
import type { TrezorDevice } from 'flowtype';
import type { Props } from './index';
const CoinNameWrapper = styled.div`
display: flex;
align-items: center;
@ -34,14 +31,13 @@ const Logo = styled.div`
const CoinName = ({
coinImg, text,
}) => (
<CoinNameWrapper>
<Logo
coinImg={coinImg}
/>
<p>{text}</p>
</CoinNameWrapper>
);
<CoinNameWrapper>
<Logo
coinImg={coinImg}
/>
<p>{text}</p>
</CoinNameWrapper>
);
CoinName.propTypes = {
coinImg: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
@ -60,24 +56,26 @@ const RowCoinWrapper = styled.div`
const RowCoin = ({
coin, icon,
}) => (
<RowCoinWrapper>
<Row>
<CoinName
coinImg={coin.img}
text={coin.name}
/>
{icon && (
<Icon
icon={icon.type}
color={icon.color}
<RowCoinWrapper>
<Row>
<CoinName
coinImg={coin.img}
text={coin.name}
/>
)}
</Row>
</RowCoinWrapper>
);
{icon && (
<Icon
icon={icon.type}
color={icon.color}
/>
)}
</Row>
</RowCoinWrapper>
);
RowCoin.propTypes = {
...coinProp,
coin: PropTypes.shape({
img: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
}).isRequired,
icon: PropTypes.shape({
type: PropTypes.string.isRequired,
color: PropTypes.string.isRequired,
@ -85,7 +83,7 @@ RowCoin.propTypes = {
};
class CoinSelection extends Component {
class CoinMenu extends Component {
getBaseUrl() {
const { selectedDevice } = this.props.wallet;
let baseUrl = '';
@ -149,11 +147,11 @@ class CoinSelection extends Component {
}
}
CoinSelection.propTypes = {
CoinMenu.propTypes = {
config: PropTypes.object,
wallet: PropTypes.object,
selectedDevice: PropTypes.object,
localStorage: PropTypes.object,
};
export default CoinSelection;
export default CoinMenu;

View File

@ -1,14 +1,12 @@
/* @flow */
import React, { Component } from 'react';
import Select from 'react-select';
import TrezorConnect from 'trezor-connect';
import AsideDivider from '../Divider';
import type { TrezorDevice } from 'flowtype';
import type { Props } from './index';
import type { Props } from '../common';
import AsideDivider from '../Divider';
export const DeviceSelect = (props: Props) => {
const { devices } = props;

View File

@ -0,0 +1,4 @@
export { default as AccountMenu } from './AccountMenu';
export { default as CoinMenu } from './CoinMenu';
export { DeviceSelect } from './DeviceMenu';
export { DeviceDropdown } from './DeviceMenu';

View File

@ -2,7 +2,6 @@ import styled, { css } from 'styled-components';
import React from 'react';
import PropTypes from 'prop-types';
import colors from 'config/colors';
import { TRANSITION_TIME } from 'config/variables';
const Wrapper = styled.div`

View File

@ -1,4 +0,0 @@
export { default as AccountSelection } from './AccountSelection';
export { default as CoinSelection } from './CoinSelection';
export { DeviceSelect } from './DeviceSelection';
export { DeviceDropdown } from './DeviceSelection';

View File

@ -1,8 +1,28 @@
import PropTypes from 'prop-types';
/* @flow */
import * as TrezorConnectActions from 'actions/TrezorConnectActions';
import { toggleDeviceDropdown } from 'actions/WalletActions';
export const coinProp = {
coin: PropTypes.shape({
img: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
}).isRequired,
};
export type StateProps = {
connect: $ElementType<State, 'connect'>,
accounts: $ElementType<State, 'accounts'>,
router: $ElementType<State, 'router'>,
deviceDropdownOpened: boolean,
fiat: $ElementType<State, 'fiat'>,
localStorage: $ElementType<State, 'localStorage'>,
discovery: $ElementType<State, 'discovery'>,
wallet: $ElementType<State, 'wallet'>,
devices: $ElementType<State, 'devices'>,
pending: $ElementType<State, 'pending'>,
}
export type DispatchProps = {
toggleDeviceDropdown: typeof toggleDeviceDropdown,
addAccount: typeof TrezorConnectActions.addAccount,
acquireDevice: typeof TrezorConnectActions.acquire,
forgetDevice: typeof TrezorConnectActions.forget,
duplicateDevice: typeof TrezorConnectActions.duplicateDevice,
gotoDeviceSettings: typeof TrezorConnectActions.gotoDeviceSettings,
onSelectDevice: typeof TrezorConnectActions.onSelectDevice,
}
export type Props = StateProps & DispatchProps;

View File

@ -5,11 +5,11 @@ import styled from 'styled-components';
import type { TrezorDevice } from 'flowtype';
import {
AccountSelection,
CoinSelection,
AccountMenu,
CoinMenu,
DeviceSelect,
DeviceDropdown,
} from './Selection';
} from './Menu';
import StickyContainer from './StickyContainer';
import type { Props } from './index';
@ -72,7 +72,7 @@ const LeftNavigation = (props: Props): React$Element<typeof StickyContainer | st
animationType = 'slide-left';
// menu = (
// <TransitionMenu animationType="slide-left">
// <AccountSelection {...props} />
// <AccountMenu {...props} />
// </TransitionMenu>
// );
} else if (selected.features && !selected.features.bootloader_mode && selected.features.initialized) {
@ -81,7 +81,7 @@ const LeftNavigation = (props: Props): React$Element<typeof StickyContainer | st
animationType = 'slide-right';
// menu = (
// <TransitionMenu animationType="slide-right">
// <CoinSelection {...props} />
// <CoinMenu {...props} />
// </TransitionMenu>
// );
}
@ -97,8 +97,8 @@ const LeftNavigation = (props: Props): React$Element<typeof StickyContainer | st
<TransitionMenu
animationType={animationType}
>
{animationType === 'slide-left' && <AccountSelection key="accounts" {...props} />}
{animationType === 'slide-right' && <CoinSelection key="coins" {...props} />}
{animationType === 'slide-left' && <AccountMenu key="accounts" {...props} />}
{animationType === 'slide-right' && <CoinMenu key="coins" {...props} />}
</TransitionMenu>
)}