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

.flowconfig

@@ -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

src/js/views/Wallet/components/LeftNavigation/Container.js

@@ -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),
-);
+);

src/js/views/Wallet/components/LeftNavigation/NavigationMenu/AccountMenu/index.js

@@ -1,26 +1,22 @@
 /* @flow */
-
-
-import React, { PureComponent } from 'react';
-import { Link, NavLink } from 'react-router-dom';
 import BigNumber from 'bignumber.js';
-
+import colors from 'config/colors';
-import { findDeviceAccounts } from 'reducers/AccountsReducer';
-import * as stateUtils from 'reducers/utils';
 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 { Accounts } from 'flowtype';
-
-import type { TrezorDevice, 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}>
+        <NavLink to={url}>
-        <RowAccountWrapper
+            <RowAccountWrapper
-            to={url}
+                to={url}
-            isSelected={isSelected}
+                isSelected={isSelected}
-        >
+            >
-            <Row column>
+                <Row column>
-                Account #{accountIndex + 1}
+                    Account #{accountIndex + 1}
-                {balance ? (
+                    {balance ? (
-                    <span>{balance}</span>
+                        <span>{balance}</span>
-                ) : (
+                    ) : (
-                    <span>Loading...</span>
+                            <span>Loading...</span>
-                )}
+                        )}
-            </Row>
+                </Row>
-        </RowAccountWrapper>
+            </RowAccountWrapper>
-    </NavLink>
+        </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;

src/js/views/Wallet/components/LeftNavigation/NavigationMenu/CoinMenu/index.js

@@ -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>
+        <CoinNameWrapper>
-        <Logo
+            <Logo
-            coinImg={coinImg}
+                coinImg={coinImg}
-        />
+            />
-        <p>{text}</p>
+            <p>{text}</p>
-    </CoinNameWrapper>
+        </CoinNameWrapper>
-);
+    );
-
 CoinName.propTypes = {
     coinImg: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired,
@@ -60,24 +56,26 @@ const RowCoinWrapper = styled.div`
 const RowCoin = ({
     coin, icon,
 }) => (
-    <RowCoinWrapper>
+        <RowCoinWrapper>
-        <Row>
+            <Row>
-            <CoinName
+                <CoinName
-                coinImg={coin.img}
+                    coinImg={coin.img}
-                text={coin.name}
+                    text={coin.name}
-            />
-            {icon && (
-                <Icon
-                    icon={icon.type}
-                    color={icon.color}
                 />
-            )}
+                {icon && (
-        </Row>
+                    <Icon
-    </RowCoinWrapper>
+                        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;

src/js/views/Wallet/components/LeftNavigation/NavigationMenu/DeviceMenu/index.js

@@ -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;

src/js/views/Wallet/components/LeftNavigation/NavigationMenu/index.js

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

src/js/views/Wallet/components/LeftNavigation/Row/index.js

@@ -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`

src/js/views/Wallet/components/LeftNavigation/Selection/index.js

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

src/js/views/Wallet/components/LeftNavigation/common.js

@@ -1,8 +1,28 @@
-import PropTypes from 'prop-types';
+/* @flow */
+import * as TrezorConnectActions from 'actions/TrezorConnectActions';
+import { toggleDeviceDropdown } from 'actions/WalletActions';
 
-export const coinProp = {
+export type StateProps = {
-    coin: PropTypes.shape({
+    connect: $ElementType<State, 'connect'>,
-        img: PropTypes.string.isRequired,
+    accounts: $ElementType<State, 'accounts'>,
-        name: PropTypes.string.isRequired,
+    router: $ElementType<State, 'router'>,
-    }).isRequired,
+    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;

src/js/views/Wallet/components/LeftNavigation/index.js

@@ -5,11 +5,11 @@ import styled from 'styled-components';
 
 import type { TrezorDevice } from 'flowtype';
 import {
-    AccountSelection,
+    AccountMenu,
-    CoinSelection,
+    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-left' && <AccountMenu key="accounts" {...props} />}
-                    {animationType === 'slide-right' && <CoinSelection key="coins" {...props} />}
+                    {animationType === 'slide-right' && <CoinMenu key="coins" {...props} />}
                 </TransitionMenu>
             )}