merge master

src/actions/BlockchainActions.js

@@ -19,6 +19,9 @@ export type BlockchainAction = {
     type: typeof BLOCKCHAIN.UPDATE_FEE,
     shortcut: string,
     feeLevels: Array<BlockchainFeeLevel>,
+} | {
+    type: typeof BLOCKCHAIN.START_SUBSCRIBE,
+    shortcut: string,
 }
 
 // Conditionally subscribe to blockchain backend
@@ -52,6 +55,11 @@ export const subscribe = (networkName: string): PromiseAction<void> => 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));

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,
 } | {

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

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

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<void> => {
+    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,
 };

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<void> => {
+    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,
 };

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

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')};

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<string> => {
@@ -94,43 +100,45 @@ const Notification = (props: Props): React$Element<string> => {
 
     return (
         <Wrapper className={props.className} type={props.type}>
-            {props.loading && <Loader size={50} /> }
+            <Content>
-            {props.cancelable && (
+                {props.loading && <Loader size={50} /> }
-                <CloseClick onClick={() => close()}>
+                {props.cancelable && (
-                    <Icon
+                    <CloseClick onClick={() => close()}>
-                        color={getPrimaryColor(props.type)}
+                        <Icon
-                        icon={icons.CLOSE}
+                            color={getPrimaryColor(props.type)}
-                        size={20}
+                            icon={icons.CLOSE}
-                    />
+                            size={20}
-                </CloseClick>
+                        />
-            )}
+                    </CloseClick>
-            <Body>
-                <IconWrapper>
-                    <StyledIcon
-                        color={getPrimaryColor(props.type)}
-                        icon={getIcon(props.type)}
-                    />
-                </IconWrapper>
-                <Texts>
-                    <Title>{ props.title }</Title>
-                    { props.message ? <Message>{props.message}</Message> : '' }
-                </Texts>
-            </Body>
-            <AdditionalContent>
-                {props.actions && props.actions.length > 0 && (
-                    <ActionContent>
-                        {props.actions.map(action => (
-                            <NotificationButton
-                                key={action.label}
-                                type={props.type}
-                                isLoading={props.isActionInProgress}
-                                onClick={() => { close(); action.callback(); }}
-                            >{action.label}
-                            </NotificationButton>
-                        ))}
-                    </ActionContent>
                 )}
-            </AdditionalContent>
+                <Body>
+                    <IconWrapper>
+                        <StyledIcon
+                            color={getPrimaryColor(props.type)}
+                            icon={getIcon(props.type)}
+                        />
+                    </IconWrapper>
+                    <Texts>
+                        <Title>{ props.title }</Title>
+                        { props.message ? <Message>{props.message}</Message> : '' }
+                    </Texts>
+                </Body>
+                <AdditionalContent>
+                    {props.actions && props.actions.length > 0 && (
+                        <ActionContent>
+                            {props.actions.map(action => (
+                                <NotificationButton
+                                    key={action.label}
+                                    type={props.type}
+                                    isLoading={props.isActionInProgress}
+                                    onClick={() => { close(); action.callback(); }}
+                                >{action.label}
+                                </NotificationButton>
+                            ))}
+                        </ActionContent>
+                    )}
+                </AdditionalContent>
+            </Content>
         </Wrapper>
     );
 };

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,
+        borderColor: isFocused ? colors.INPUT_FOCUSED_BORDER : colors.DIVIDER,
-        boxShadow: 'none',
+        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: () => ({

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

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

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',

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%);
+    }
 `;

src/config/colors.js

@@ -34,4 +34,7 @@ export default {
 
     LABEL_COLOR: '#A9A9A9',
     TOOLTIP_BACKGROUND: '#333333',
+
+    INPUT_FOCUSED_BORDER: '#A9A9A9',
+    INPUT_FOCUSED_SHADOW: '#d6d7d7',
 };

src/reducers/BlockchainReducer.js

@@ -16,6 +16,7 @@ export type BlockchainNetwork = {
     feeTimestamp: number,
     feeLevels: Array<BlockchainFeeLevel>,
     connected: boolean,
+    connecting: boolean,
     block: number,
 };
 
@@ -23,6 +24,26 @@ export type State = Array<BlockchainNetwork>;
 
 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<BlockchainFe
 
 export default (state: State = initialState, action: Action): State => {
     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:

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:

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:

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 = (
+                <Tooltip
+                    maxWidth={200}
+                    content={`To add a new account, connect ${selected.instanceLabel} device.`}
+                    placement="bottom"
+                >
+                    <Row>
+                        <RowAddAccountWrapper disabled>
+                            <AddAccountIconWrapper>
+                                <Icon
+                                    icon={ICONS.PLUS}
+                                    size={24}
+                                    color={colors.TEXT_SECONDARY}
+                                />
+                            </AddAccountIconWrapper>
+                            Add account
+                        </RowAddAccountWrapper>
+                    </Row>
+                </Tooltip>
+            );
+        } else if (lastAccount && !lastAccount.empty) {
             discoveryStatus = (
                 <Row onClick={props.addAccount}>
                     <RowAddAccountWrapper>
@@ -199,17 +202,6 @@ const AccountMenu = (props: Props) => {
                 </Tooltip>
             );
         }
-    } else if (!selected.connected) {
-        discoveryStatus = (
-            <Row>
-                <DiscoveryStatusWrapper>
-                    Accounts could not be loaded
-                    <DiscoveryStatusText>
-                        {`Connect ${selected.instanceLabel} device`}
-                    </DiscoveryStatusText>
-                </DiscoveryStatusWrapper>
-            </Row>
-        );
     } else {
         discoveryStatus = (
             <Row>

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`

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<Props> {
     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<Props> {
         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<Props> {
         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 (
-            <Wrapper>
+            <Wrapper ref={this.myRef}>
                 {this.showMenuItems() && <MenuItems device={selectedDevice} {...this.props} />}
-                {this.showDivider() && <AsideDivider textLeft="Other devices" />}
+                {this.showDivider() && <StyledDivider hasBorder textLeft="Other devices" />}
                 <DeviceList
                     devices={devices}
                     selectedDevice={selectedDevice}
                     onSelectDevice={onSelectDevice}
                     forgetDevice={forgetDevice}
                 />
-                <ButtonWrapper>
+                {deviceUtils.isWebUSB(transport) && (
-                    {deviceUtils.isWebUSB(transport) && (
+                    <ButtonWrapper>
                         <StyledButton isWebUsb>Check for devices</StyledButton>
-                    )}
+                    </ButtonWrapper>
-                </ButtonWrapper>
+                )}
             </Wrapper>
         );
     }

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,
 }) => (
     <Wrapper
         hasBorder={hasBorder}
+        className={className}
     >
         <p>{textLeft}</p>
         <p>{textRight}</p>
@@ -30,6 +31,7 @@ const Divider = ({
 );
 
 Divider.propTypes = {
+    className: PropTypes.string,
     textLeft: PropTypes.string,
     textRight: PropTypes.string,
     hasBorder: PropTypes.bool,

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<TransitionGro
 
 type State = {
     animationType: ?string;
-    shouldRenderDeviceSelection: boolean;
     clicked: boolean;
+    bodyMinHeight: number;
 }
 
 class LeftNavigation extends React.PureComponent<Props, State> {
     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 });
+        if (hasNetwork) {
-        } else 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<Props, State> {
             && location
             && location.state
             && location.state.network
-            && !this.state.shouldRenderDeviceSelection
             && this.state.animationType === 'slide-left';
     }
 
@@ -166,9 +172,19 @@ class LeftNavigation extends React.PureComponent<Props, State> {
     }
 
     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<Props, State> {
             );
         }
 
-        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<Props, State> {
                     )}
                     {...this.props}
                 />
-                <Body>
+                <Body minHeight={this.state.bodyMinHeight}>
-                    {this.state.shouldRenderDeviceSelection && <DeviceMenu {...this.props} />}
+                    {dropdownOpened && <DeviceMenu ref={this.deviceMenuRef} {...this.props} />}
                     {isDeviceAccessible && menu}
                 </Body>
                 <Footer key="sticky-footer">

src/views/Wallet/views/Account/Send/ethereum/index.js

@@ -142,17 +142,33 @@ const ToggleAdvancedSettingsButton = styled(Button)`
     min-height: 40px;
     padding: 0;
     display: flex;
+    flex: 1 1 0;
     align-items: center;
     font-weight: ${FONT_WEIGHT.SEMIBOLD};
 `;
 
-const SendButton = styled(Button)`
+const FormButtons = styled.div`
-    min-width: ${props => (props.isAdvancedSettingsHidden ? '50%' : '100%')};
+    display: flex;
-    word-break: break-all;
+    flex: 1 1;
 
+    
     @media screen and (max-width: ${SmallScreenWidth}) {
         margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)};
     }
+
+    Button + Button {
+        margin-left: 5px;
+    }
+`;
+
+const SendButton = styled(Button)`
+    word-break: break-all;
+    flex: 1;
+
+`;
+
+const ClearButton = styled(Button)`
+
 `;
 
 const AdvancedSettingsIcon = styled(Icon)`
@@ -228,6 +244,7 @@ const AccountSend = (props: Props) => {
         onFeeLevelChange,
         updateFeeLevels,
         onSend,
+        onClear,
     } = props.sendFormActions;
 
     if (!device || !account || !discovery || !network || !shouldRender) {
@@ -387,24 +404,43 @@ const AccountSend = (props: Props) => {
                 </ToggleAdvancedSettingsButton>
 
                 {isAdvancedSettingsHidden && (
-                    <SendButton
+                    <FormButtons
-                        isDisabled={isSendButtonDisabled}
                         isAdvancedSettingsHidden={isAdvancedSettingsHidden}
-                        onClick={() => onSend()}
                     >
-                        {sendButtonText}
+                        <ClearButton
-                    </SendButton>
+                            isWhite
+                            onClick={() => onClear()}
+                        >
+                            Clear
+                        </ClearButton>
+                        <SendButton
+                            isDisabled={isSendButtonDisabled}
+                            onClick={() => onSend()}
+                        >
+                            {sendButtonText}
+                        </SendButton>
+                    </FormButtons>
                 )}
             </ToggleAdvancedSettingsWrapper>
 
             {advanced && (
                 <AdvancedForm {...props}>
-                    <SendButton
+                    <FormButtons
-                        isDisabled={isSendButtonDisabled}
+                        isAdvancedSettingsHidden={isAdvancedSettingsHidden}
-                        onClick={() => onSend()}
                     >
-                        {sendButtonText}
+                        <ClearButton
-                    </SendButton>
+                            isWhite
+                            onClick={() => onClear()}
+                        >
+                            Clear
+                        </ClearButton>
+                        <SendButton
+                            isDisabled={isSendButtonDisabled}
+                            onClick={() => onSend()}
+                        >
+                            {sendButtonText}
+                        </SendButton>
+                    </FormButtons>
                 </AdvancedForm>
             )}
 

src/views/Wallet/views/Account/Send/ripple/index.js

@@ -139,17 +139,33 @@ const ToggleAdvancedSettingsButton = styled(Button)`
     min-height: 40px;
     padding: 0;
     display: flex;
+    flex: 1 1 0;
     align-items: center;
     font-weight: ${FONT_WEIGHT.SEMIBOLD};
 `;
 
-const SendButton = styled(Button)`
+const FormButtons = styled.div`
-    min-width: ${props => (props.isAdvancedSettingsHidden ? '50%' : '100%')};
+    display: flex;
-    word-break: break-all;
+    flex: 1 1;
 
+    
     @media screen and (max-width: ${SmallScreenWidth}) {
         margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)};
     }
+
+    Button + Button {
+        margin-left: 5px;
+    }
+`;
+
+const SendButton = styled(Button)`
+    word-break: break-all;
+    flex: 1;
+
+`;
+
+const ClearButton = styled(Button)`
+
 `;
 
 const AdvancedSettingsIcon = styled(Icon)`
@@ -214,6 +230,7 @@ const AccountSend = (props: Props) => {
         onFeeLevelChange,
         updateFeeLevels,
         onSend,
+        onClear,
     } = props.sendFormActions;
 
     if (!device || !account || !discovery || !network || !shouldRender) {
@@ -359,24 +376,43 @@ const AccountSend = (props: Props) => {
                 </ToggleAdvancedSettingsButton>
 
                 {isAdvancedSettingsHidden && (
-                    <SendButton
+                    <FormButtons
-                        isDisabled={isSendButtonDisabled}
                         isAdvancedSettingsHidden={isAdvancedSettingsHidden}
-                        onClick={() => onSend()}
                     >
-                        {sendButtonText}
+                        <ClearButton
-                    </SendButton>
+                            isWhite
+                            onClick={() => onClear()}
+                        >
+                            Clear
+                        </ClearButton>
+                        <SendButton
+                            isDisabled={isSendButtonDisabled}
+                            onClick={() => onSend()}
+                        >
+                            {sendButtonText}
+                        </SendButton>
+                    </FormButtons>
                 )}
             </ToggleAdvancedSettingsWrapper>
 
             {advanced && (
                 <AdvancedForm {...props}>
-                    <SendButton
+                    <FormButtons
-                        isDisabled={isSendButtonDisabled}
+                        isAdvancedSettingsHidden={isAdvancedSettingsHidden}
-                        onClick={() => onSend()}
                     >
-                        {sendButtonText}
+                        <ClearButton
-                    </SendButton>
+                            isWhite
+                            onClick={() => onClear()}
+                        >
+                            Clear
+                        </ClearButton>
+                        <SendButton
+                            isDisabled={isSendButtonDisabled}
+                            onClick={() => onSend()}
+                        >
+                            {sendButtonText}
+                        </SendButton>
+                    </FormButtons>
                 </AdvancedForm>
             )}