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,

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;
 
@@ -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;
@@ -41,7 +38,6 @@ const CoinName = ({
             <p>{text}</p>
         </CoinNameWrapper>
     );
-
 CoinName.propTypes = {
     coinImg: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired,
@@ -75,9 +71,11 @@ const RowCoin = ({
             </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>
             )}