diff --git a/src/js/components/Icon/index.js b/src/js/components/Icon/index.js index 91f308fb..d36e8b76 100644 --- a/src/js/components/Icon/index.js +++ b/src/js/components/Icon/index.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -const Icon = ({ icon, size = 30, color = 'black' }) => { +const Icon = ({ icon, size = 32, color = 'black' }) => { const styles = { svg: { display: 'inline-block', @@ -17,7 +17,7 @@ const Icon = ({ icon, size = 30, color = 'black' }) => { style={styles.svg} width={`${size}`} height={`${size}`} - viewBox="0 0 16 16" + viewBox="0 0 1024 1024" > { switch (action.type) { case ACCOUNT.UPDATE_SELECTED_ACCOUNT: return action.payload; - default: return state; } diff --git a/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js index c8c5938a..fd907123 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js @@ -17,6 +17,11 @@ import type { Props } from '../common'; import Row from '../Row'; +const Text = styled.span` + font-size: ${FONT_SIZE.SMALLER}; + color: ${colors.TEXT_SECONDARY}; +`; + const RowAccountWrapper = styled.div` height: 64px; @@ -24,10 +29,6 @@ const RowAccountWrapper = styled.div` color: ${colors.TEXT_PRIMARY}; border-top: 1px solid ${colors.DIVIDER}; - span { - font-size: ${FONT_SIZE.SMALLER}; - color: ${colors.TEXT_SECONDARY}; - } ${props => props.isSelected && css` border-left: ${BORDER_WIDTH.SELECTED} solid ${colors.GREEN_PRIMARY}; @@ -42,6 +43,7 @@ const RowAccountWrapper = styled.div` } `} `; + const RowAccount = ({ accountIndex, balance, url, isSelected = false, }) => ( @@ -53,14 +55,15 @@ const RowAccount = ({ Account #{accountIndex + 1} {balance ? ( - {balance} + {balance} ) : ( - Loading... + Loading... )} ); + RowAccount.propTypes = { accountIndex: PropTypes.number.isRequired, url: PropTypes.string.isRequired, @@ -70,8 +73,6 @@ RowAccount.propTypes = { const AccountMenu = (props: Props): ?React$Element => { const selected = props.wallet.selectedDevice; - if (!selected) return null; - const { location } = props.router; const urlParams = location.state; const { accounts } = props; @@ -79,8 +80,6 @@ const AccountMenu = (props: Props): ?React$Element => { const { config } = props.localStorage; const selectedCoin = config.coins.find(c => c.network === location.state.network); - if (!selectedCoin) return; - const fiatRate = props.fiat.find(f => f.network === selectedCoin.network); const deviceAccounts: Accounts = findDeviceAccounts(accounts, selected, location.state.network); diff --git a/src/js/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/js/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js index dc848d29..ccdab5aa 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js @@ -65,6 +65,7 @@ const RowCoin = ({ {icon && ( )} @@ -129,14 +130,14 @@ class CoinMenu extends Component { textRight="(You will be redirected)" /> {coins.map(coin => ( - + diff --git a/src/js/views/Wallet/components/LeftNavigation/index.js b/src/js/views/Wallet/components/LeftNavigation/index.js index 01ebae80..72b617e2 100644 --- a/src/js/views/Wallet/components/LeftNavigation/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/index.js @@ -1,110 +1,165 @@ -/* @flow */ -import * as React from 'react'; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import colors from 'config/colors'; +import Icon from 'components/Icon'; +import icons from 'config/icons'; import { TransitionGroup, CSSTransition } from 'react-transition-group'; import styled from 'styled-components'; - -import type { TrezorDevice } from 'flowtype'; -import AccountMenu from './components/AccountMenu'; -import CoinMenu from './components/CoinMenu'; -import { DeviceDropdown, DeviceSelect } from './components/DeviceMenu'; -import StickyContainer from './components/StickyContainer'; - -import type { Props } from './components/common'; - -type TransitionMenuProps = { - animationType: string; - children?: React.Node; -} +import { + AccountMenu, CoinMenu, DeviceSelect, DeviceDropdown, +} from './NavigationMenu'; +import StickyContainer from './StickyContainer'; const TransitionGroupWrapper = styled(TransitionGroup)` width: 640px; `; + const TransitionContentWrapper = styled.div` width: 320px; display: inline-block; vertical-align: top; `; -const TransitionMenu = (props: TransitionMenuProps): React$Element => ( - - { window.dispatchEvent(new Event('resize')); }} - onExited={() => window.dispatchEvent(new Event('resize'))} - in - out - classNames={props.animationType} - appear={false} - timeout={300} - > - - {props.children} - - - -); - - -const LeftNavigation = (props: Props): React$Element => { - const selected: ?TrezorDevice = props.wallet.selectedDevice; - const { location } = props.router; - - if (location.pathname === '/' || !selected) return (