split SendForm into networks

src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js

@@ -11,7 +11,7 @@ import Icon from 'components/Icon';
 import ICONS from 'config/icons';
 import { FONT_SIZE } from 'config/variables';
 
-import type { Props as BaseProps } from '../../Container';
+import type { Props as BaseProps } from '../../ethereum/Container';
 
 type Props = BaseProps & {
     children: React.Node,

src/views/Wallet/views/Account/Send/components/PendingTransactions/index.js

@@ -9,7 +9,7 @@ import ScaleText from 'react-scale-text';
 
 import type { Network } from 'reducers/LocalStorageReducer';
 import type { Token } from 'reducers/TokensReducer';
-import type { Props as BaseProps } from '../../Container';
+import type { BaseProps } from '../../index';
 
 type Props = {
     pending: $PropertyType<$ElementType<BaseProps, 'selectedAccount'>, 'pending'>,

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

@@ -0,0 +1,406 @@
+/* @flow */
+
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Select } from 'components/Select';
+import Button from 'components/Button';
+import Input from 'components/inputs/Input';
+import Icon from 'components/Icon';
+import Link from 'components/Link';
+import ICONS from 'config/icons';
+import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
+import colors from 'config/colors';
+import P from 'components/Paragraph';
+import { H2 } from 'components/Heading';
+import Content from 'views/Wallet/components/Content';
+import type { Token } from 'flowtype';
+import AdvancedForm from '../components/AdvancedForm';
+import PendingTransactions from '../components/PendingTransactions';
+
+import type { Props } from './Container';
+
+// TODO: Decide on a small screen width for the whole app
+// and put it inside config/variables.js
+const SmallScreenWidth = '850px';
+
+const AmountInputLabelWrapper = styled.div`
+    display: flex;
+    justify-content: space-between;
+`;
+
+const AmountInputLabel = styled.span`
+    text-align: right;
+    color: ${colors.TEXT_SECONDARY};
+`;
+
+const InputRow = styled.div`
+    margin: 20px 0;
+`;
+
+const SetMaxAmountButton = styled(Button)`
+    height: 40px;
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: ${FONT_SIZE.SMALLER};
+    font-weight: ${FONT_WEIGHT.SMALLEST};
+    color: ${colors.TEXT_SECONDARY};
+
+    border-radius: 0;
+    border: 1px solid ${colors.DIVIDER};
+    border-right: 0;
+    border-left: 0;
+    background: transparent;
+    transition: ${TRANSITION.HOVER};
+
+    &:hover {
+        background: ${colors.GRAY_LIGHT};
+    }
+
+    ${props => props.isActive && css`
+        color: ${colors.WHITE};
+        background: ${colors.GREEN_PRIMARY};
+        border-color: ${colors.GREEN_PRIMARY};
+
+        &:hover {
+            background: ${colors.GREEN_SECONDARY};
+        }
+
+        &:active {
+            background: ${colors.GREEN_TERTIARY};
+        }
+    `}
+`;
+
+const CurrencySelect = styled(Select)`
+    min-width: 77px;
+    height: 40px;
+    flex: 0.2;
+`;
+
+const FeeOptionWrapper = styled.div`
+    display: flex;
+    justify-content: space-between;
+`;
+
+const FeeLabelWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    margin-bottom: 4px;
+`;
+
+const FeeLabel = styled.span`
+    color: ${colors.TEXT_SECONDARY};
+`;
+
+const UpdateFeeWrapper = styled.span`
+    margin-left: 8px;
+    display: flex;
+    align-items: center;
+    font-size: ${FONT_SIZE.SMALLER};
+    color: ${colors.WARNING_PRIMARY};
+`;
+
+const StyledLink = styled(Link)`
+    margin-left: 4px;
+    white-space: nowrap;
+`;
+
+const ToggleAdvancedSettingsWrapper = styled.div`
+    min-height: 40px;
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    @media screen and (max-width: ${SmallScreenWidth}) {
+        ${props => (props.isAdvancedSettingsHidden && css`
+            flex-direction: column;
+        `)}
+    }
+`;
+
+const ToggleAdvancedSettingsButton = styled(Button)`
+    min-height: 40px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    font-weight: ${FONT_WEIGHT.BIGGER};
+`;
+
+const SendButton = styled(Button)`
+    min-width: ${props => (props.isAdvancedSettingsHidden ? '50%' : '100%')};
+    font-size: 13px;
+
+    @media screen and (max-width: ${SmallScreenWidth}) {
+        margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)};
+    }
+`;
+
+const AdvancedSettingsIcon = styled(Icon)`
+    margin-left: 10px;
+`;
+
+// render helpers
+const getAddressInputState = (address: string, addressErrors: string, addressWarnings: string): string => {
+    let state = '';
+    if (address && !addressErrors) {
+        state = 'success';
+    }
+    if (addressWarnings && !addressErrors) {
+        state = 'warning';
+    }
+    if (addressErrors) {
+        state = 'error';
+    }
+    return state;
+};
+
+const getAmountInputState = (amountErrors: string, amountWarnings: string): string => {
+    let state = '';
+    if (amountWarnings && !amountErrors) {
+        state = 'warning';
+    }
+    if (amountErrors) {
+        state = 'error';
+    }
+    return state;
+};
+
+const getTokensSelectData = (tokens: Array<Token>, accountNetwork: any): Array<{ value: string, label: string }> => {
+    const tokensSelectData: Array<{ value: string, label: string }> = tokens.map(t => ({ value: t.symbol, label: t.symbol }));
+    tokensSelectData.unshift({ value: accountNetwork.symbol, label: accountNetwork.symbol });
+
+    return tokensSelectData;
+};
+
+// stateless component
+const AccountSend = (props: Props) => {
+    const device = props.wallet.selectedDevice;
+    const {
+        account,
+        network,
+        discovery,
+        tokens,
+        shouldRender,
+        loader,
+    } = props.selectedAccount;
+    const {
+        address,
+        amount,
+        setMax,
+        networkSymbol,
+        currency,
+        feeLevels,
+        selectedFeeLevel,
+        gasPriceNeedsUpdate,
+        total,
+        errors,
+        warnings,
+        infos,
+        sending,
+        advanced,
+    } = props.sendForm;
+
+    const {
+        toggleAdvanced,
+        onAddressChange,
+        onAmountChange,
+        onSetMax,
+        onCurrencyChange,
+        onFeeLevelChange,
+        updateFeeLevels,
+        onSend,
+    } = props.sendFormActions;
+    const { type, title, message } = loader;
+    if (!device || !account || !discovery || !network || !shouldRender) return <Content type={type} title={title} message={message} isLoading />;
+
+    const isCurrentCurrencyToken = networkSymbol !== currency;
+
+    let selectedTokenBalance = 0;
+    const selectedToken = tokens.find(t => t.symbol === currency);
+    if (selectedToken) {
+        selectedTokenBalance = selectedToken.balance;
+    }
+
+    let isSendButtonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
+    let sendButtonText: string = 'Send';
+    if (networkSymbol !== currency && amount.length > 0 && !errors.amount) {
+        sendButtonText += ` ${amount} ${currency.toUpperCase()}`;
+    } else if (networkSymbol === currency && total !== '0') {
+        sendButtonText += ` ${total} ${network.symbol}`;
+    }
+
+    if (!device.connected) {
+        sendButtonText = 'Device is not connected';
+        isSendButtonDisabled = true;
+    } else if (!device.available) {
+        sendButtonText = 'Device is unavailable';
+        isSendButtonDisabled = true;
+    } else if (!discovery.completed) {
+        sendButtonText = 'Loading accounts';
+        isSendButtonDisabled = true;
+    }
+
+    const tokensSelectData = getTokensSelectData(tokens, network);
+    const tokensSelectValue = tokensSelectData.find(t => t.value === currency);
+    const isAdvancedSettingsHidden = !advanced;
+
+    return (
+        <Content>
+            <React.Fragment>
+                <H2>Send Ethereum or tokens</H2>
+                <InputRow>
+                    <Input
+                        state={getAddressInputState(address, errors.address, warnings.address)}
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        topLabel="Address"
+                        bottomText={errors.address || warnings.address || infos.address}
+                        value={address}
+                        onChange={event => onAddressChange(event.target.value)}
+                    />
+                </InputRow>
+
+                <InputRow>
+                    <Input
+                        state={getAmountInputState(errors.amount, warnings.amount)}
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        topLabel={(
+                            <AmountInputLabelWrapper>
+                                <AmountInputLabel>Amount</AmountInputLabel>
+                                {(isCurrentCurrencyToken && selectedToken) && (
+                                    <AmountInputLabel>You have: {selectedTokenBalance} {selectedToken.symbol}</AmountInputLabel>
+                                )}
+                            </AmountInputLabelWrapper>
+                        )}
+                        value={amount}
+                        onChange={event => onAmountChange(event.target.value)}
+                        bottomText={errors.amount || warnings.amount || infos.amount}
+                        sideAddons={[
+                            (
+                                <SetMaxAmountButton
+                                    key="icon"
+                                    onClick={() => onSetMax()}
+                                    isActive={setMax}
+                                >
+                                    {!setMax && (
+                                        <Icon
+                                            icon={ICONS.TOP}
+                                            size={25}
+                                            color={colors.TEXT_SECONDARY}
+                                        />
+                                    )}
+                                    {setMax && (
+                                        <Icon
+                                            icon={ICONS.CHECKED}
+                                            size={25}
+                                            color={colors.WHITE}
+                                        />
+                                    )}
+                                Set max
+                                </SetMaxAmountButton>
+                            ),
+                            (
+                                <CurrencySelect
+                                    key="currency"
+                                    isSearchable={false}
+                                    isClearable={false}
+                                    value={tokensSelectValue}
+                                    isDisabled={tokensSelectData.length < 2}
+                                    onChange={onCurrencyChange}
+                                    options={tokensSelectData}
+                                />
+                            ),
+                        ]}
+                    />
+                </InputRow>
+
+                <InputRow>
+                    <FeeLabelWrapper>
+                        <FeeLabel>Fee</FeeLabel>
+                        {gasPriceNeedsUpdate && (
+                            <UpdateFeeWrapper>
+                                <Icon
+                                    icon={ICONS.WARNING}
+                                    color={colors.WARNING_PRIMARY}
+                                    size={20}
+                                />
+                            Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
+                            </UpdateFeeWrapper>
+                        )}
+                    </FeeLabelWrapper>
+                    <Select
+                        isSearchable={false}
+                        isClearable={false}
+                        value={selectedFeeLevel}
+                        onChange={onFeeLevelChange}
+                        options={feeLevels}
+                        formatOptionLabel={option => (
+                            <FeeOptionWrapper>
+                                <P>{option.value}</P>
+                                <P>{option.label}</P>
+                            </FeeOptionWrapper>
+                        )}
+                    />
+                </InputRow>
+
+                <ToggleAdvancedSettingsWrapper
+                    isAdvancedSettingsHidden={isAdvancedSettingsHidden}
+                >
+                    <ToggleAdvancedSettingsButton
+                        isTransparent
+                        onClick={toggleAdvanced}
+                    >
+                    Advanced settings
+                        <AdvancedSettingsIcon
+                            icon={ICONS.ARROW_DOWN}
+                            color={colors.TEXT_SECONDARY}
+                            size={24}
+                            isActive={advanced}
+                            canAnimate
+                        />
+                    </ToggleAdvancedSettingsButton>
+
+                    {isAdvancedSettingsHidden && (
+                        <SendButton
+                            isDisabled={isSendButtonDisabled}
+                            isAdvancedSettingsHidden={isAdvancedSettingsHidden}
+                            onClick={() => onSend()}
+                        >
+                            {sendButtonText}
+                        </SendButton>
+                    )}
+                </ToggleAdvancedSettingsWrapper>
+
+                {advanced && (
+                    <AdvancedForm {...props}>
+                        <SendButton
+                            isDisabled={isSendButtonDisabled}
+                            onClick={() => onSend()}
+                        >
+                            {sendButtonText}
+                        </SendButton>
+                    </AdvancedForm>
+                )}
+
+                {props.selectedAccount.pending.length > 0 && (
+                    <PendingTransactions
+                        pending={props.selectedAccount.pending}
+                        tokens={props.selectedAccount.tokens}
+                        network={network}
+                    />
+                )}
+            </React.Fragment>
+        </Content>
+    );
+};
+
+export default AccountSend;

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

@@ -1,6 +1,6 @@
 /* @flow */
-
 import React from 'react';
+<<<<<<< HEAD
 import styled, { css } from 'styled-components';
 import { Select } from 'components/Select';
 import Button from 'components/Button';
@@ -401,3 +401,31 @@ const AccountSend = (props: Props) => {
 };
 
 export default AccountSend;
+=======
+import { connect } from 'react-redux';
+
+import type { State } from 'flowtype';
+import EthereumSend from './ethereum/Container';
+import RippleSend from './ripple/Container';
+
+export type BaseProps = {
+    selectedAccount: $ElementType<State, 'selectedAccount'>,
+}
+
+// return container for requested network type
+export default connect((state: State): BaseProps => ({
+    selectedAccount: state.selectedAccount,
+}), null)((props) => {
+    const { network } = props.selectedAccount;
+    if (!network) return null;
+
+    switch (network.type) {
+        case 'ethereum':
+            return <EthereumSend />;
+        case 'ripple':
+            return <RippleSend />;
+        default:
+            return null;
+    }
+});
+>>>>>>> split SendForm into networks

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

@@ -0,0 +1,39 @@
+/* @flow */
+
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import SendFormActions from 'actions/SendFormActions';
+import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
+import type { State, Dispatch } from 'flowtype';
+import AccountSend from './index';
+
+type OwnProps = { }
+
+export type StateProps = {
+    selectedAccount: $ElementType<State, 'selectedAccount'>,
+    sendForm: $ElementType<State, 'sendForm'>,
+    wallet: $ElementType<State, 'wallet'>,
+    fiat: $ElementType<State, 'fiat'>,
+    localStorage: $ElementType<State, 'localStorage'>,
+}
+
+export type DispatchProps = {
+    sendFormActions: typeof SendFormActions,
+}
+
+export type Props = StateProps & DispatchProps;
+
+const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
+    selectedAccount: state.selectedAccount,
+    sendForm: state.sendForm,
+    wallet: state.wallet,
+    fiat: state.fiat,
+    localStorage: state.localStorage,
+});
+
+const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
+    sendFormActions: bindActionCreators(SendFormActions, dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(AccountSend);

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

@@ -0,0 +1,406 @@
+/* @flow */
+
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Select } from 'components/Select';
+import Button from 'components/Button';
+import Input from 'components/inputs/Input';
+import Icon from 'components/Icon';
+import Link from 'components/Link';
+import ICONS from 'config/icons';
+import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
+import colors from 'config/colors';
+import P from 'components/Paragraph';
+import { H2 } from 'components/Heading';
+import Content from 'views/Wallet/components/Content';
+import type { Token } from 'flowtype';
+import AdvancedForm from '../components/AdvancedForm';
+import PendingTransactions from '../components/PendingTransactions';
+
+import type { Props } from './Container';
+
+// TODO: Decide on a small screen width for the whole app
+// and put it inside config/variables.js
+const SmallScreenWidth = '850px';
+
+const AmountInputLabelWrapper = styled.div`
+    display: flex;
+    justify-content: space-between;
+`;
+
+const AmountInputLabel = styled.span`
+    text-align: right;
+    color: ${colors.TEXT_SECONDARY};
+`;
+
+const InputRow = styled.div`
+    margin: 20px 0;
+`;
+
+const SetMaxAmountButton = styled(Button)`
+    height: 40px;
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: ${FONT_SIZE.SMALLER};
+    font-weight: ${FONT_WEIGHT.SMALLEST};
+    color: ${colors.TEXT_SECONDARY};
+
+    border-radius: 0;
+    border: 1px solid ${colors.DIVIDER};
+    border-right: 0;
+    border-left: 0;
+    background: transparent;
+    transition: ${TRANSITION.HOVER};
+
+    &:hover {
+        background: ${colors.GRAY_LIGHT};
+    }
+
+    ${props => props.isActive && css`
+        color: ${colors.WHITE};
+        background: ${colors.GREEN_PRIMARY};
+        border-color: ${colors.GREEN_PRIMARY};
+
+        &:hover {
+            background: ${colors.GREEN_SECONDARY};
+        }
+
+        &:active {
+            background: ${colors.GREEN_TERTIARY};
+        }
+    `}
+`;
+
+const CurrencySelect = styled(Select)`
+    min-width: 77px;
+    height: 40px;
+    flex: 0.2;
+`;
+
+const FeeOptionWrapper = styled.div`
+    display: flex;
+    justify-content: space-between;
+`;
+
+const FeeLabelWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    margin-bottom: 4px;
+`;
+
+const FeeLabel = styled.span`
+    color: ${colors.TEXT_SECONDARY};
+`;
+
+const UpdateFeeWrapper = styled.span`
+    margin-left: 8px;
+    display: flex;
+    align-items: center;
+    font-size: ${FONT_SIZE.SMALLER};
+    color: ${colors.WARNING_PRIMARY};
+`;
+
+const StyledLink = styled(Link)`
+    margin-left: 4px;
+    white-space: nowrap;
+`;
+
+const ToggleAdvancedSettingsWrapper = styled.div`
+    min-height: 40px;
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    @media screen and (max-width: ${SmallScreenWidth}) {
+        ${props => (props.isAdvancedSettingsHidden && css`
+            flex-direction: column;
+        `)}
+    }
+`;
+
+const ToggleAdvancedSettingsButton = styled(Button)`
+    min-height: 40px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    font-weight: ${FONT_WEIGHT.BIGGER};
+`;
+
+const SendButton = styled(Button)`
+    min-width: ${props => (props.isAdvancedSettingsHidden ? '50%' : '100%')};
+    font-size: 13px;
+
+    @media screen and (max-width: ${SmallScreenWidth}) {
+        margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)};
+    }
+`;
+
+const AdvancedSettingsIcon = styled(Icon)`
+    margin-left: 10px;
+`;
+
+// render helpers
+const getAddressInputState = (address: string, addressErrors: string, addressWarnings: string): string => {
+    let state = '';
+    if (address && !addressErrors) {
+        state = 'success';
+    }
+    if (addressWarnings && !addressErrors) {
+        state = 'warning';
+    }
+    if (addressErrors) {
+        state = 'error';
+    }
+    return state;
+};
+
+const getAmountInputState = (amountErrors: string, amountWarnings: string): string => {
+    let state = '';
+    if (amountWarnings && !amountErrors) {
+        state = 'warning';
+    }
+    if (amountErrors) {
+        state = 'error';
+    }
+    return state;
+};
+
+const getTokensSelectData = (tokens: Array<Token>, accountNetwork: any): Array<{ value: string, label: string }> => {
+    const tokensSelectData: Array<{ value: string, label: string }> = tokens.map(t => ({ value: t.symbol, label: t.symbol }));
+    tokensSelectData.unshift({ value: accountNetwork.symbol, label: accountNetwork.symbol });
+
+    return tokensSelectData;
+};
+
+// stateless component
+const AccountSend = (props: Props) => {
+    const device = props.wallet.selectedDevice;
+    const {
+        account,
+        network,
+        discovery,
+        tokens,
+        shouldRender,
+        loader,
+    } = props.selectedAccount;
+    const {
+        address,
+        amount,
+        setMax,
+        networkSymbol,
+        currency,
+        feeLevels,
+        selectedFeeLevel,
+        gasPriceNeedsUpdate,
+        total,
+        errors,
+        warnings,
+        infos,
+        sending,
+        advanced,
+    } = props.sendForm;
+
+    const {
+        toggleAdvanced,
+        onAddressChange,
+        onAmountChange,
+        onSetMax,
+        onCurrencyChange,
+        onFeeLevelChange,
+        updateFeeLevels,
+        onSend,
+    } = props.sendFormActions;
+    const { type, title, message } = loader;
+    if (!device || !account || !discovery || !network || !shouldRender) return <Content type={type} title={title} message={message} isLoading />;
+
+    const isCurrentCurrencyToken = networkSymbol !== currency;
+
+    let selectedTokenBalance = 0;
+    const selectedToken = tokens.find(t => t.symbol === currency);
+    if (selectedToken) {
+        selectedTokenBalance = selectedToken.balance;
+    }
+
+    let isSendButtonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
+    let sendButtonText: string = 'Send';
+    if (networkSymbol !== currency && amount.length > 0 && !errors.amount) {
+        sendButtonText += ` ${amount} ${currency.toUpperCase()}`;
+    } else if (networkSymbol === currency && total !== '0') {
+        sendButtonText += ` ${total} ${network.symbol}`;
+    }
+
+    if (!device.connected) {
+        sendButtonText = 'Device is not connected';
+        isSendButtonDisabled = true;
+    } else if (!device.available) {
+        sendButtonText = 'Device is unavailable';
+        isSendButtonDisabled = true;
+    } else if (!discovery.completed) {
+        sendButtonText = 'Loading accounts';
+        isSendButtonDisabled = true;
+    }
+
+    const tokensSelectData = getTokensSelectData(tokens, network);
+    const tokensSelectValue = tokensSelectData.find(t => t.value === currency);
+    const isAdvancedSettingsHidden = !advanced;
+
+    return (
+        <Content>
+            <React.Fragment>
+                <H2>Send Ethereum or tokens</H2>
+                <InputRow>
+                    <Input
+                        state={getAddressInputState(address, errors.address, warnings.address)}
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        topLabel="Address"
+                        bottomText={errors.address || warnings.address || infos.address}
+                        value={address}
+                        onChange={event => onAddressChange(event.target.value)}
+                    />
+                </InputRow>
+
+                <InputRow>
+                    <Input
+                        state={getAmountInputState(errors.amount, warnings.amount)}
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        topLabel={(
+                            <AmountInputLabelWrapper>
+                                <AmountInputLabel>Amount</AmountInputLabel>
+                                {(isCurrentCurrencyToken && selectedToken) && (
+                                    <AmountInputLabel>You have: {selectedTokenBalance} {selectedToken.symbol}</AmountInputLabel>
+                                )}
+                            </AmountInputLabelWrapper>
+                        )}
+                        value={amount}
+                        onChange={event => onAmountChange(event.target.value)}
+                        bottomText={errors.amount || warnings.amount || infos.amount}
+                        sideAddons={[
+                            (
+                                <SetMaxAmountButton
+                                    key="icon"
+                                    onClick={() => onSetMax()}
+                                    isActive={setMax}
+                                >
+                                    {!setMax && (
+                                        <Icon
+                                            icon={ICONS.TOP}
+                                            size={25}
+                                            color={colors.TEXT_SECONDARY}
+                                        />
+                                    )}
+                                    {setMax && (
+                                        <Icon
+                                            icon={ICONS.CHECKED}
+                                            size={25}
+                                            color={colors.WHITE}
+                                        />
+                                    )}
+                                Set max
+                                </SetMaxAmountButton>
+                            ),
+                            (
+                                <CurrencySelect
+                                    key="currency"
+                                    isSearchable={false}
+                                    isClearable={false}
+                                    value={tokensSelectValue}
+                                    isDisabled={tokensSelectData.length < 2}
+                                    onChange={onCurrencyChange}
+                                    options={tokensSelectData}
+                                />
+                            ),
+                        ]}
+                    />
+                </InputRow>
+
+                <InputRow>
+                    <FeeLabelWrapper>
+                        <FeeLabel>Fee</FeeLabel>
+                        {gasPriceNeedsUpdate && (
+                            <UpdateFeeWrapper>
+                                <Icon
+                                    icon={ICONS.WARNING}
+                                    color={colors.WARNING_PRIMARY}
+                                    size={20}
+                                />
+                            Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
+                            </UpdateFeeWrapper>
+                        )}
+                    </FeeLabelWrapper>
+                    <Select
+                        isSearchable={false}
+                        isClearable={false}
+                        value={selectedFeeLevel}
+                        onChange={onFeeLevelChange}
+                        options={feeLevels}
+                        formatOptionLabel={option => (
+                            <FeeOptionWrapper>
+                                <P>{option.value}</P>
+                                <P>{option.label}</P>
+                            </FeeOptionWrapper>
+                        )}
+                    />
+                </InputRow>
+
+                <ToggleAdvancedSettingsWrapper
+                    isAdvancedSettingsHidden={isAdvancedSettingsHidden}
+                >
+                    <ToggleAdvancedSettingsButton
+                        isTransparent
+                        onClick={toggleAdvanced}
+                    >
+                    Advanced settings
+                        <AdvancedSettingsIcon
+                            icon={ICONS.ARROW_DOWN}
+                            color={colors.TEXT_SECONDARY}
+                            size={24}
+                            isActive={advanced}
+                            canAnimate
+                        />
+                    </ToggleAdvancedSettingsButton>
+
+                    {isAdvancedSettingsHidden && (
+                        <SendButton
+                            isDisabled={isSendButtonDisabled}
+                            isAdvancedSettingsHidden={isAdvancedSettingsHidden}
+                            onClick={() => onSend()}
+                        >
+                            {sendButtonText}
+                        </SendButton>
+                    )}
+                </ToggleAdvancedSettingsWrapper>
+
+                {advanced && (
+                    <AdvancedForm {...props}>
+                        <SendButton
+                            isDisabled={isSendButtonDisabled}
+                            onClick={() => onSend()}
+                        >
+                            {sendButtonText}
+                        </SendButton>
+                    </AdvancedForm>
+                )}
+
+                {props.selectedAccount.pending.length > 0 && (
+                    <PendingTransactions
+                        pending={props.selectedAccount.pending}
+                        tokens={props.selectedAccount.tokens}
+                        network={network}
+                    />
+                )}
+            </React.Fragment>
+        </Content>
+    );
+};
+
+export default AccountSend;