diff --git a/src/actions/BlockchainActions.js b/src/actions/BlockchainActions.js index c3a5a0b1..f3e31755 100644 --- a/src/actions/BlockchainActions.js +++ b/src/actions/BlockchainActions.js @@ -19,6 +19,9 @@ export type BlockchainAction = { type: typeof BLOCKCHAIN.UPDATE_FEE, shortcut: string, feeLevels: Array, +} | { + type: typeof BLOCKCHAIN.START_SUBSCRIBE, + shortcut: string, } // Conditionally subscribe to blockchain backend @@ -52,6 +55,11 @@ export const subscribe = (networkName: string): PromiseAction => async (di const network = config.networks.find(c => c.shortcut === networkName); if (!network) return; + dispatch({ + type: BLOCKCHAIN.START_SUBSCRIBE, + shortcut: network.shortcut, + }); + switch (network.type) { case 'ethereum': await dispatch(EthereumBlockchainActions.subscribe(networkName)); diff --git a/src/actions/SendFormActions.js b/src/actions/SendFormActions.js index 16c6230a..6116c403 100644 --- a/src/actions/SendFormActions.js +++ b/src/actions/SendFormActions.js @@ -18,11 +18,11 @@ import * as EthereumSendFormActions from './ethereum/SendFormActions'; import * as RippleSendFormActions from './ripple/SendFormActions'; export type SendFormAction = { - type: typeof SEND.INIT | typeof SEND.VALIDATION | typeof SEND.CHANGE, + type: typeof SEND.INIT | typeof SEND.VALIDATION | typeof SEND.CHANGE | typeof SEND.CLEAR, networkType: 'ethereum', state: EthereumState, } | { - type: typeof SEND.INIT | typeof SEND.VALIDATION | typeof SEND.CHANGE, + type: typeof SEND.INIT | typeof SEND.VALIDATION | typeof SEND.CHANGE | typeof SEND.CLEAR, networkType: 'ripple', state: RippleState, } | { diff --git a/src/actions/constants/blockchain.js b/src/actions/constants/blockchain.js index 9e19d3e3..7e1baeab 100644 --- a/src/actions/constants/blockchain.js +++ b/src/actions/constants/blockchain.js @@ -1,4 +1,5 @@ /* @flow */ +export const START_SUBSCRIBE: 'blockchain__start_subscribe' = 'blockchain__start_subscribe'; export const READY: 'blockchain__ready' = 'blockchain__ready'; export const UPDATE_FEE: 'blockchain__update_fee' = 'blockchain__update_fee'; \ No newline at end of file diff --git a/src/actions/constants/send.js b/src/actions/constants/send.js index a5d12906..577bdac2 100644 --- a/src/actions/constants/send.js +++ b/src/actions/constants/send.js @@ -7,3 +7,4 @@ export const TX_SENDING: 'send__tx_sending' = 'send__tx_sending'; export const TX_COMPLETE: 'send__tx_complete' = 'send__tx_complete'; export const TX_ERROR: 'send__tx_error' = 'send__tx_error'; export const TOGGLE_ADVANCED: 'send__toggle_advanced' = 'send__toggle_advanced'; +export const CLEAR: 'send__clear' = 'send__clear'; \ No newline at end of file diff --git a/src/actions/ethereum/SendFormActions.js b/src/actions/ethereum/SendFormActions.js index 82f4a25d..52894fd0 100644 --- a/src/actions/ethereum/SendFormActions.js +++ b/src/actions/ethereum/SendFormActions.js @@ -152,6 +152,41 @@ export const toggleAdvanced = (): Action => ({ networkType: 'ethereum', }); +/* +* Called from UI from "clear" button +*/ +export const onClear = (): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise => { + const { network } = getState().selectedAccount; + const { advanced } = getState().sendFormEthereum; + + if (!network) return; + + // clear transaction draft from session storage + dispatch(SessionStorageActions.clear()); + + const gasPrice: BigNumber = await dispatch(BlockchainActions.getGasPrice(network.shortcut, network.defaultGasPrice)); + const gasLimit = network.defaultGasLimit.toString(); + const feeLevels = ValidationActions.getFeeLevels(network.symbol, gasPrice, gasLimit); + const selectedFeeLevel = ValidationActions.getSelectedFeeLevel(feeLevels, initialState.selectedFeeLevel); + + dispatch({ + type: SEND.CLEAR, + networkType: 'ethereum', + state: { + ...initialState, + networkName: network.shortcut, + networkSymbol: network.symbol, + currency: network.symbol, + feeLevels, + selectedFeeLevel, + recommendedGasPrice: gasPrice.toString(), + gasLimit, + gasPrice: gasPrice.toString(), + advanced, + }, + }); +}; + /* * Called from UI on "address" field change */ @@ -613,4 +648,5 @@ export default { onNonceChange, onDataChange, onSend, + onClear, }; \ No newline at end of file diff --git a/src/actions/ripple/SendFormActions.js b/src/actions/ripple/SendFormActions.js index 562326a4..fc34916a 100644 --- a/src/actions/ripple/SendFormActions.js +++ b/src/actions/ripple/SendFormActions.js @@ -119,6 +119,38 @@ export const toggleAdvanced = (): Action => ({ networkType: 'ripple', }); +/* +* Called from UI from "clear" button +*/ +export const onClear = (): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise => { + const { network } = getState().selectedAccount; + const { advanced } = getState().sendFormRipple; + + if (!network) return; + + // clear transaction draft from session storage + dispatch(SessionStorageActions.clear()); + + const blockchainFeeLevels = dispatch(BlockchainActions.getFeeLevels(network)); + const feeLevels = dispatch(ValidationActions.getFeeLevels(blockchainFeeLevels)); + const selectedFeeLevel = ValidationActions.getSelectedFeeLevel(feeLevels, initialState.selectedFeeLevel); + + dispatch({ + type: SEND.CLEAR, + networkType: 'ripple', + state: { + ...initialState, + networkName: network.shortcut, + networkSymbol: network.symbol, + feeLevels, + selectedFeeLevel, + fee: network.fee.defaultFee, + sequence: '1', + advanced, + }, + }); +}; + /* * Called from UI on "address" field change */ @@ -368,4 +400,5 @@ export default { onFeeChange, onDestinationTagChange, onSend, + onClear, }; \ No newline at end of file diff --git a/src/components/Button/index.js b/src/components/Button/index.js index c0704b56..a5f3931d 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -37,6 +37,11 @@ const Wrapper = styled.button` background: ${colors.GREEN_TERTIARY}; } + &:focus { + border-color: ${colors.INPUT_FOCUSED_BORDER}; + box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}; + } + ${props => props.isDisabled && css` pointer-events: none; color: ${colors.TEXT_SECONDARY}; @@ -48,6 +53,10 @@ const Wrapper = styled.button` color: ${colors.TEXT_SECONDARY}; border: 1px solid ${colors.DIVIDER}; + &:focus { + border-color: ${colors.INPUT_FOCUSED_BORDER}; + } + &:hover { color: ${colors.TEXT_PRIMARY}; background: ${colors.DIVIDER}; @@ -64,6 +73,11 @@ const Wrapper = styled.button` border: 0px; color: ${colors.TEXT_SECONDARY}; + &:focus { + color: ${colors.TEXT_PRIMARY}; + box-shadow: none; + } + &:hover, &:active { color: ${colors.TEXT_PRIMARY}; diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index cba457cc..211c30cc 100644 --- a/src/components/DeviceHeader/index.js +++ b/src/components/DeviceHeader/index.js @@ -15,6 +15,7 @@ const Wrapper = styled.div` position: relative; height: 70px; width: 320px; + z-index: 10; display: flex; align-items: center; background: ${props => (props.disabled ? colors.GRAY_LIGHT : 'transparent')}; diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js index 6eade847..a8622de7 100644 --- a/src/components/Notification/index.js +++ b/src/components/Notification/index.js @@ -27,14 +27,20 @@ type Props = { const Wrapper = styled.div` width: 100%; position: relative; - padding: 24px 48px 9px 24px; + display: flex; + justify-content: center; + color: ${props => getPrimaryColor(props.type)}; + background: ${props => getSecondaryColor(props.type)}; +`; + +const Content = styled.div` + width: 100%; + max-width: 1170px; + padding: 24px; display: flex; flex-direction: row; text-align: left; - justify-content: center; align-items: center; - color: ${props => getPrimaryColor(props.type)}; - background: ${props => getSecondaryColor(props.type)}; `; const Body = styled.div` @@ -42,7 +48,6 @@ const Body = styled.div` `; const Message = styled.div` - padding-bottom: 13px; font-size: ${FONT_SIZE.SMALL}; `; @@ -56,7 +61,9 @@ const CloseClick = styled.div` position: absolute; right: 0; top: 0; - padding: 20px 10px 0 0; + padding-right: inherit; + padding-top: inherit; + cursor: pointer; `; const StyledIcon = styled(Icon)` @@ -86,7 +93,6 @@ const ActionContent = styled.div` display: flex; justify-content: right; align-items: flex-end; - padding-bottom: 14px; `; const Notification = (props: Props): React$Element => { @@ -94,43 +100,45 @@ const Notification = (props: Props): React$Element => { return ( - {props.loading && } - {props.cancelable && ( - close()}> - - - )} - - - - - - { props.title } - { props.message ? {props.message} : '' } - - - - {props.actions && props.actions.length > 0 && ( - - {props.actions.map(action => ( - { close(); action.callback(); }} - >{action.label} - - ))} - + + {props.loading && } + {props.cancelable && ( + close()}> + + )} - + + + + + + { props.title } + { props.message ? {props.message} : '' } + + + + {props.actions && props.actions.length > 0 && ( + + {props.actions.map(action => ( + { close(); action.callback(); }} + >{action.label} + + ))} + + )} + + ); }; diff --git a/src/components/Select/index.js b/src/components/Select/index.js index 1d7c020b..a3691964 100644 --- a/src/components/Select/index.js +++ b/src/components/Select/index.js @@ -11,17 +11,16 @@ const styles = isSearchable => ({ width: '100%', color: colors.TEXT_SECONDARY, }), - control: (base, { isDisabled }) => ({ + control: (base, { isDisabled, isFocused }) => ({ ...base, minHeight: 'initial', height: '40px', borderRadius: '2px', - borderColor: colors.DIVIDER, - boxShadow: 'none', + borderColor: isFocused ? colors.INPUT_FOCUSED_BORDER : colors.DIVIDER, + boxShadow: isFocused ? `0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}` : 'none', background: isDisabled ? colors.LANDING : colors.WHITE, '&:hover': { cursor: isSearchable ? 'text' : 'pointer', - borderColor: colors.DIVIDER, }, }), indicatorSeparator: () => ({ diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index b0dbad2c..b5064ee7 100644 --- a/src/components/Textarea/index.js +++ b/src/components/Textarea/index.js @@ -67,6 +67,11 @@ const StyledTextarea = styled(Textarea)` color: ${colors.TEXT_SECONDARY}; } + &:focus { + border-color: ${colors.INPUT_FOCUSED_BORDER}; + box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}; + } + &:disabled { pointer-events: none; background: ${colors.GRAY_LIGHT}; diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js index 5bda40dd..ee2aa96a 100644 --- a/src/components/inputs/Input/index.js +++ b/src/components/inputs/Input/index.js @@ -59,6 +59,11 @@ const StyledInput = styled.input` background-color: ${colors.WHITE}; transition: ${TRANSITION.HOVER}; + &:focus { + border-color: ${colors.INPUT_FOCUSED_BORDER}; + box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}; + } + &:disabled { pointer-events: none; background: ${colors.GRAY_LIGHT}; diff --git a/src/components/notifications/Context/components/Account/index.js b/src/components/notifications/Context/components/Account/index.js index a4924900..59d87299 100644 --- a/src/components/notifications/Context/components/Account/index.js +++ b/src/components/notifications/Context/components/Account/index.js @@ -8,6 +8,7 @@ import type { Props } from '../../index'; export default (props: Props) => { const { network, notification } = props.selectedAccount; if (!network || !notification) return null; + const blockchain = props.blockchain.find(b => b.shortcut === network.shortcut); if (notification.type === 'backend') { // special case: backend is down @@ -17,6 +18,7 @@ export default (props: Props) => { type="error" title={notification.title} message={notification.message} + isActionInProgress={blockchain && blockchain.connecting} actions={ [{ label: 'Connect', diff --git a/src/config/animations.js b/src/config/animations.js index 950ea9e2..c7fee813 100644 --- a/src/config/animations.js +++ b/src/config/animations.js @@ -71,4 +71,13 @@ export const FADE_IN = keyframes` 100% { opacity: 1; } +`; + +export const SLIDE_DOWN = keyframes` + 0% { + transform: translateY(-100%); + } + 100% { + transform: translateY(0%); + } `; \ No newline at end of file diff --git a/src/config/colors.js b/src/config/colors.js index efca1cda..23140583 100644 --- a/src/config/colors.js +++ b/src/config/colors.js @@ -34,4 +34,7 @@ export default { LABEL_COLOR: '#A9A9A9', TOOLTIP_BACKGROUND: '#333333', + + INPUT_FOCUSED_BORDER: '#A9A9A9', + INPUT_FOCUSED_SHADOW: '#d6d7d7', }; \ No newline at end of file diff --git a/src/reducers/BlockchainReducer.js b/src/reducers/BlockchainReducer.js index 3831eb51..c5cc44ab 100644 --- a/src/reducers/BlockchainReducer.js +++ b/src/reducers/BlockchainReducer.js @@ -16,6 +16,7 @@ export type BlockchainNetwork = { feeTimestamp: number, feeLevels: Array, connected: boolean, + connecting: boolean, block: number, }; @@ -23,6 +24,26 @@ export type State = Array; export const initialState: State = []; +const onStartSubscribe = (state: State, shortcut: string): State => { + const network = state.find(b => b.shortcut === shortcut); + if (network) { + const others = state.filter(b => b !== network); + return others.concat([{ + ...network, + connecting: true, + }]); + } + + return state.concat([{ + shortcut, + connected: false, + connecting: true, + block: 0, + feeTimestamp: 0, + feeLevels: [], + }]); +}; + const onConnect = (state: State, action: BlockchainConnect): State => { const shortcut = action.payload.coin.shortcut.toLowerCase(); const network = state.find(b => b.shortcut === shortcut); @@ -31,13 +52,16 @@ const onConnect = (state: State, action: BlockchainConnect): State => { const others = state.filter(b => b !== network); return others.concat([{ ...network, + block: info.block, connected: true, + connecting: false, }]); } return state.concat([{ shortcut, connected: true, + connecting: false, block: info.block, feeTimestamp: 0, feeLevels: [], @@ -52,12 +76,14 @@ const onError = (state: State, action: BlockchainError): State => { return others.concat([{ ...network, connected: false, + connecting: false, }]); } return state.concat([{ shortcut, connected: false, + connecting: false, block: 0, feeTimestamp: 0, feeLevels: [], @@ -93,6 +119,8 @@ const updateFee = (state: State, shortcut: string, feeLevels: Array { switch (action.type) { + case BLOCKCHAIN_ACTION.START_SUBSCRIBE: + return onStartSubscribe(state, action.shortcut); case BLOCKCHAIN_EVENT.CONNECT: return onConnect(state, action); case BLOCKCHAIN_EVENT.ERROR: diff --git a/src/reducers/SendFormEthereumReducer.js b/src/reducers/SendFormEthereumReducer.js index 5053f673..58b8e11d 100644 --- a/src/reducers/SendFormEthereumReducer.js +++ b/src/reducers/SendFormEthereumReducer.js @@ -82,6 +82,7 @@ export default (state: State = initialState, action: Action): State => { case SEND.INIT: case SEND.CHANGE: case SEND.VALIDATION: + case SEND.CLEAR: return action.state; case SEND.TOGGLE_ADVANCED: diff --git a/src/reducers/SendFormRippleReducer.js b/src/reducers/SendFormRippleReducer.js index f1c34ed3..6a77eb4c 100644 --- a/src/reducers/SendFormRippleReducer.js +++ b/src/reducers/SendFormRippleReducer.js @@ -77,6 +77,7 @@ export default (state: State = initialState, action: Action): State => { case SEND.INIT: case SEND.CHANGE: case SEND.VALIDATION: + case SEND.CLEAR: return action.state; case SEND.TOGGLE_ADVANCED: diff --git a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js index 202632b5..a89f980a 100644 --- a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js @@ -71,24 +71,6 @@ const AddAccountIconWrapper = styled.div` margin-right: 12px; `; -const DiscoveryStatusWrapper = styled.div` - display: flex; - flex-direction: column; - width: 100%; - font-size: ${FONT_SIZE.BASE}; - padding: ${LEFT_NAVIGATION_ROW.PADDING}; - white-space: nowrap; - border-top: 1px solid ${colors.DIVIDER}; -`; - -const DiscoveryStatusText = styled.div` - display: block; - font-size: ${FONT_SIZE.SMALL}; - color: ${colors.TEXT_SECONDARY}; - overflow: hidden; - text-overflow: ellipsis; -`; - const DiscoveryLoadingWrapper = styled.div` display: flex; align-items: center; @@ -162,7 +144,28 @@ const AccountMenu = (props: Props) => { if (discovery && discovery.completed) { const lastAccount = deviceAccounts[deviceAccounts.length - 1]; - if (lastAccount && !lastAccount.empty) { + if (!selected.connected) { + discoveryStatus = ( + + + + + + + Add account + + + + ); + } else if (lastAccount && !lastAccount.empty) { discoveryStatus = ( @@ -199,17 +202,6 @@ const AccountMenu = (props: Props) => { ); } - } else if (!selected.connected) { - discoveryStatus = ( - - - Accounts could not be loaded - - {`Connect ${selected.instanceLabel} device`} - - - - ); } else { discoveryStatus = ( diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js index 91c04dac..6035fd20 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js @@ -8,18 +8,20 @@ import colors from 'config/colors'; import { FONT_SIZE } from 'config/variables'; const Wrapper = styled.div` - padding: 0px 24px 8px 19px; - border-bottom: 1px solid ${colors.DIVIDER}; background: ${colors.WHITE}; `; const Item = styled.div` - padding: 4px 2px; + padding: 6px 24px; display: flex; align-items: center; font-size: ${FONT_SIZE.BASE}; cursor: pointer; - color: ${colors.TEXT_SECONDARY}; + color: ${colors.TEXT_SECONDARY}; + + &:hover { + background: ${colors.GRAY_LIGHT}; + } `; const Label = styled.div` diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index 3b87b8d9..19fa5f3a 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -2,6 +2,11 @@ import React, { PureComponent } from 'react'; import styled from 'styled-components'; import TrezorConnect from 'trezor-connect'; + +import COLORS from 'config/colors'; +import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; +import { SLIDE_DOWN } from 'config/animations'; + import Button from 'components/Button'; import * as deviceUtils from 'utils/device'; import MenuItems from './components/MenuItems'; @@ -9,11 +14,20 @@ import DeviceList from './components/DeviceList'; import type { Props } from '../common'; -import AsideDivider from '../Divider'; +import Divider from '../Divider'; + +const Wrapper = styled.div` + position: absolute; + width: 100%; + padding-bottom: 8px; + border-bottom: 1px solid #E3E3E3; + background: white; + box-shadow: 0 3px 8px rgba(0,0,0,0.06); + animation: ${SLIDE_DOWN} 0.25s cubic-bezier(0.17, 0.04, 0.03, 0.94) forwards; +`; -const Wrapper = styled.div``; const ButtonWrapper = styled.div` - margin-top: 10px; + margin: 10px 0; padding: 0 10px; display: flex; `; @@ -21,11 +35,20 @@ const StyledButton = styled(Button)` flex: 1; `; +const StyledDivider = styled(Divider)` + background: #fff; + color: ${COLORS.TEXT_PRIMARY}; + font-weight: ${FONT_WEIGHT.MEDIUM}; + font-size: ${FONT_SIZE.BASE}; + border: none; +`; + class DeviceMenu extends PureComponent { constructor(props: Props) { super(props); this.mouseDownHandler = this.mouseDownHandler.bind(this); this.blurHandler = this.blurHandler.bind(this); + this.myRef = React.createRef(); } componentDidMount(): void { @@ -44,6 +67,10 @@ class DeviceMenu extends PureComponent { window.removeEventListener('mousedown', this.mouseDownHandler, false); } + getMenuHeight(): number { + return this.myRef.current ? this.myRef.current.getBoundingClientRect().height : 0; + } + blurHandler(): void { this.props.toggleDeviceDropdown(false); } @@ -77,26 +104,28 @@ class DeviceMenu extends PureComponent { return deviceUtils.isDeviceAccessible(this.props.wallet.selectedDevice); } + myRef: { current: ?HTMLDivElement } + render() { const { devices, onSelectDevice, forgetDevice } = this.props; const { transport } = this.props.connect; const { selectedDevice } = this.props.wallet; return ( - + {this.showMenuItems() && } - {this.showDivider() && } + {this.showDivider() && } - - {deviceUtils.isWebUSB(transport) && ( + {deviceUtils.isWebUSB(transport) && ( + Check for devices - )} - + + )} ); } diff --git a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js b/src/views/Wallet/components/LeftNavigation/components/Divider/index.js index 8f29337e..0a46446f 100644 --- a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/Divider/index.js @@ -19,10 +19,11 @@ const Wrapper = styled.div` `; const Divider = ({ - textLeft, textRight, hasBorder = false, + textLeft, textRight, hasBorder = false, className, }) => (

{textLeft}

{textRight}

@@ -30,6 +31,7 @@ const Divider = ({ ); Divider.propTypes = { + className: PropTypes.string, textLeft: PropTypes.string, textRight: PropTypes.string, hasBorder: PropTypes.bool, diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index 68860474..310c583e 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -60,6 +60,7 @@ const Footer = styled.div.attrs(props => ({ const Body = styled.div` width: 320px; + min-height: ${props => (props.minHeight ? `${props.minHeight}px` : '0px')}; `; const Help = styled.div` @@ -113,42 +114,48 @@ const TransitionMenu = (props: TransitionMenuProps): React$Element { constructor(props: Props) { super(props); + this.deviceMenuRef = React.createRef(); const { location } = this.props.router; const hasNetwork = location && location.state && location.state.network; this.state = { animationType: hasNetwork ? 'slide-left' : null, - shouldRenderDeviceSelection: false, clicked: false, + bodyMinHeight: 0, }; } + componentDidMount() { + this.recalculateBodyMinHeight(); + } + componentWillReceiveProps(nextProps: Props) { - const { dropdownOpened, selectedDevice } = nextProps.wallet; + const { selectedDevice } = nextProps.wallet; const { location } = nextProps.router; const hasNetwork = location && location.state.network; const deviceReady = selectedDevice && selectedDevice.features && selectedDevice.mode === 'normal'; - if (dropdownOpened) { - this.setState({ shouldRenderDeviceSelection: true }); - } else if (hasNetwork) { + + if (hasNetwork) { this.setState({ - shouldRenderDeviceSelection: false, animationType: 'slide-left', }); } else { this.setState({ - shouldRenderDeviceSelection: false, animationType: deviceReady ? 'slide-right' : null, }); } } + componentDidUpdate() { + this.recalculateBodyMinHeight(); + } + shouldRenderAccounts() { const { selectedDevice } = this.props.wallet; const { location } = this.props.router; @@ -156,7 +163,6 @@ class LeftNavigation extends React.PureComponent { && location && location.state && location.state.network - && !this.state.shouldRenderDeviceSelection && this.state.animationType === 'slide-left'; } @@ -166,9 +172,19 @@ class LeftNavigation extends React.PureComponent { } shouldRenderCoins() { - return !this.state.shouldRenderDeviceSelection && this.state.animationType !== 'slide-left'; + return this.state.animationType !== 'slide-left'; } + recalculateBodyMinHeight() { + if (this.deviceMenuRef.current) { + this.setState({ + bodyMinHeight: this.deviceMenuRef.current.getMenuHeight(), + }); + } + } + + deviceMenuRef: { current: any }; + render() { const { props } = this; let menu; @@ -186,7 +202,7 @@ class LeftNavigation extends React.PureComponent { ); } - const { selectedDevice } = props.wallet; + const { selectedDevice, dropdownOpened } = props.wallet; const isDeviceAccessible = deviceUtils.isDeviceAccessible(selectedDevice); const walletType = selectedDevice && !selectedDevice.useEmptyPassphrase ? 'hidden' : 'standard'; const showWalletType = selectedDevice && selectedDevice.features && selectedDevice.features.passphrase_protection; @@ -263,8 +279,8 @@ class LeftNavigation extends React.PureComponent { )} {...this.props} /> - - {this.state.shouldRenderDeviceSelection && } + + {dropdownOpened && } {isDeviceAccessible && menu}