Refactorize AccountSend

src/views/Wallet/views/AccountSend/index.js

@@ -1,19 +1,178 @@
 /* @flow */
 
 import React, { Component } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
-import Select from 'react-select';
+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 Textarea from 'components/Textarea';
+import Tooltip from 'rc-tooltip';
+import TooltipContent from 'components/TooltipContent';
 import { calculate, validation } from 'actions/SendFormActions';
 import SelectedAccount from 'views/Wallet/components/SelectedAccount';
 import type { Token } from 'flowtype';
-import AdvancedForm from './components/AdvancedForm';
 import PendingTransactions from './components/PendingTransactions';
-import { FeeSelectValue, FeeSelectOption } from './components/FeeSelect';
 
 import type { Props } from './Container';
 
-export default class AccountSendContainer extends Component<Props> {
+type State = {
+    isAdvancedSettingsHidden: boolean,
+    shouldAnimateAdvancedSettingsToggle: boolean,
+};
+
+const Wrapper = styled.section`
+    padding: 0 48px;
+`;
+
+const StyledH2 = styled(H2)`
+    padding: 20px 0;
+`;
+
+const InputRow = styled.div`
+    margin-bottom: 20px;
+`;
+
+const SetMaxAmountButton = styled(Button)`
+    height: 34px;
+    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)`
+    height: 34px;
+    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;
+`;
+
+const ToggleAdvancedSettingsWrapper = styled.div`
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+`;
+
+const ToggleAdvancedSettingsButton = styled(Button)`
+    padding: 0;
+    display: flex;
+    align-items: center;
+    font-weight: ${FONT_WEIGHT.BIGGER};
+`;
+
+const SendButton = styled(Button)`
+    min-width: 50%;
+`;
+
+const AdvancedSettingsWrapper = styled.div`
+    padding: 20px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    border-top: 1px solid ${colors.DIVIDER};
+`;
+
+const GasInputRow = styled(InputRow)`
+    width: 100%;
+    display: flex;
+`;
+
+const GasInput = styled(Input)`
+    &:first-child {
+        padding-right: 20px;
+    }
+`;
+
+const AdvancedSettingsSendButtonWrapper = styled.div`
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+`;
+
+const StyledTextarea = styled(Textarea)`
+    margin-bottom: 20px;
+    height: 80px;
+`;
+
+const AdvancedSettingsIcon = styled(Icon)`
+    margin-left: 10px;
+`;
+
+const GreenSpan = styled.span`
+    color: ${colors.GREEN_PRIMARY};
+`;
+
+class AccountSend extends Component<Props, State> {
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            isAdvancedSettingsHidden: true,
+            shouldAnimateAdvancedSettingsToggle: false,
+        };
+    }
+
     componentWillReceiveProps(newProps: Props) {
         calculate(this.props, newProps);
         validation(newProps);
@@ -21,30 +180,84 @@ export default class AccountSendContainer extends Component<Props> {
         this.props.saveSessionStorage();
     }
 
-    render() {
+    getAddressInputState(address: string, addressErrors: string, addressWarnings: string) {
-        return (
+        let state = '';
-            <SelectedAccount {...this.props}>
+        if (address && !addressErrors) {
-                <Send {...this.props} />
+            state = 'success';
-            </SelectedAccount>
+        } else if (addressWarnings && !addressErrors) {
-        );
+            state = 'warning';
+        } else if (addressErrors) {
+            state = 'error';
+        }
+        return state;
     }
-}
 
-const StyledH2 = styled(H2)`
+    getAmountInputState(amountErrors: string, amountWarnings: string) {
-    padding: 20px 48px;
+        let state = '';
-`;
+        if (amountWarnings && !amountErrors) {
+            state = 'warning';
+        } else if (amountErrors) {
+            state = 'error';
+        }
+        return state;
+    }
 
-const Send = (props: Props) => {
+    getAmountInputBottomText(amountErrors: string, amountWarnings: string) {
-    const device = props.wallet.selectedDevice;
+        let text = '';
+        if (amountWarnings && !amountErrors) {
+            text = amountWarnings;
+        } else if (amountErrors) {
+            text = amountErrors;
+        }
+        return text;
+    }
+
+    getGasLimitInputState(gasLimitErrors: string, gasLimitWarnings: string) {
+        let state = '';
+        if (gasLimitWarnings && !gasLimitErrors) {
+            state = 'warning';
+        } else if (gasLimitErrors) {
+            state = 'error';
+        }
+        return state;
+    }
+
+    getGasPriceInputState(gasPriceErrors: string, gasPriceWarnings: string) {
+        let state = '';
+        if (gasPriceWarnings && !gasPriceErrors) {
+            state = 'warning';
+        } else if (gasPriceErrors) {
+            state = 'error';
+        }
+        return state;
+    }
+
+    getTokensSelectData(tokens: Array<Token>, accountNetwork: any) {
+        const tokensSelectData = tokens.map(t => ({ value: t.symbol, label: t.symbol }));
+        tokensSelectData.unshift({ value: accountNetwork.symbol, label: accountNetwork.symbol });
+
+        return tokensSelectData;
+    }
+
+    handleToggleAdvancedSettingsButton() {
+        this.toggleAdvancedSettings();
+    }
+
+    toggleAdvancedSettings() {
+        this.setState(previousState => ({
+            isAdvancedSettingsHidden: !previousState.isAdvancedSettingsHidden,
+            shouldAnimateAdvancedSettingsToggle: true,
+        }));
+    }
+
+    render() {
+        const device = this.props.wallet.selectedDevice;
         const {
             account,
             network,
             discovery,
             tokens,
-    } = props.selectedAccount;
+        } = this.props.selectedAccount;
-
-    if (!device || !account || !discovery || !network) return null;
-
         const {
             address,
             amount,
@@ -53,15 +266,16 @@ const Send = (props: Props) => {
             currency,
             feeLevels,
             selectedFeeLevel,
+            recommendedGasPrice,
             gasPriceNeedsUpdate,
             total,
             errors,
             warnings,
-        infos,
-        advanced,
             data,
             sending,
-    } = props.sendForm;
+            gasLimit,
+            gasPrice,
+        } = this.props.sendForm;
 
         const {
             onAddressChange,
@@ -71,134 +285,288 @@ const Send = (props: Props) => {
             onFeeLevelChange,
             updateFeeLevels,
             onSend,
-    } = props.sendFormActions;
+            onGasLimitChange,
+            onGasPriceChange,
+            onDataChange,
+        } = this.props.sendFormActions;
 
-    const fiatRate = props.fiat.find(f => f.network === network);
+        if (!device || !account || !discovery || !network) return null;
 
-    const tokensSelectData = tokens.map(t => ({ value: t.symbol, label: t.symbol }));
+        let isSendButtonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
-    tokensSelectData.unshift({ value: network.symbol, label: network.symbol });
+        let sendButtonText: string = 'Send';
-
-    const setMaxClassName: string = setMax ? 'set-max enabled' : 'set-max';
-
-    let updateFeeLevelsButton = null;
-    if (gasPriceNeedsUpdate) {
-        updateFeeLevelsButton = (
-            <span className="update-fee-levels">Recommended fees updated. <a onClick={updateFeeLevels}>Click here to use them</a></span>
-        );
-    }
-
-    let addressClassName: ?string;
-    if (errors.address) {
-        addressClassName = 'not-valid';
-    } else if (warnings.address) {
-        addressClassName = 'warning';
-    } else if (address.length > 0) {
-        addressClassName = 'valid';
-    }
-
-    let buttonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
-    let buttonLabel: string = 'Send';
         if (networkSymbol !== currency && amount.length > 0 && !errors.amount) {
-        buttonLabel += ` ${amount} ${currency.toUpperCase()}`;
+            sendButtonText += ` ${amount} ${currency.toUpperCase()}`;
         } else if (networkSymbol === currency && total !== '0') {
-        buttonLabel += ` ${total} ${network.symbol}`;
+            sendButtonText += ` ${total} ${network.symbol}`;
         }
 
         if (!device.connected) {
-        buttonLabel = 'Device is not connected';
+            sendButtonText = 'Device is not connected';
-        buttonDisabled = true;
+            isSendButtonDisabled = true;
         } else if (!device.available) {
-        buttonLabel = 'Device is unavailable';
+            sendButtonText = 'Device is unavailable';
-        buttonDisabled = true;
+            isSendButtonDisabled = true;
         } else if (!discovery.completed) {
-        buttonLabel = 'Loading accounts';
+            sendButtonText = 'Loading accounts';
-        buttonDisabled = true;
+            isSendButtonDisabled = true;
+        }
+
+        const tokensSelectData = this.getTokensSelectData(tokens, network);
+
+        let gasLimitTooltipCurrency: string;
+        let gasLimitTooltipValue: string;
+        if (networkSymbol !== currency) {
+            gasLimitTooltipCurrency = 'tokens';
+            gasLimitTooltipValue = network.defaultGasLimitTokens.toString(10);
+        } else {
+            gasLimitTooltipCurrency = networkSymbol;
+            gasLimitTooltipValue = network.defaultGasLimit.toString(10);
         }
 
         return (
-        <section className="send-form">
+            <SelectedAccount {...this.props}>
+                <Wrapper>
                     <StyledH2>Send Ethereum or tokens</StyledH2>
-            <div className="row address-input">
+                    <InputRow>
-                <label>Address</label>
+                        <Input
-                <input
+                            state={this.getAddressInputState(address, errors.address, warnings.address)}
-                    type="text"
                             autoComplete="off"
                             autoCorrect="off"
                             autoCapitalize="off"
                             spellCheck="false"
+                            topLabel="Address"
+                            bottomText={errors.address ? 'Wrong Address' : ''}
                             value={address}
-                    className={addressClassName}
                             onChange={event => onAddressChange(event.target.value)}
                         />
-                <span className="input-icon" />
+                    </InputRow>
-                { errors.address ? (<span className="error">{ errors.address }</span>) : null }
-                { warnings.address ? (<span className="warning">{ warnings.address }</span>) : null }
-                { infos.address ? (<span className="info">{ infos.address }</span>) : null }
-            </div>
 
-            <div className="row">
+                    <InputRow>
-                <label>Amount</label>
+                        <Input
-                <div className="amount-input">
+                            state={this.getAmountInputState(errors.amount, warnings.amount)}
-                    <input
-                        type="text"
                             autoComplete="off"
                             autoCorrect="off"
                             autoCapitalize="off"
                             spellCheck="false"
+                            topLabel="Amount"
                             value={amount}
-                        className={errors.amount ? 'not-valid' : null}
                             onChange={event => onAmountChange(event.target.value)}
+                            bottomText={this.getAmountInputBottomText(errors.amount, warnings.amount)}
+                            sideAddons={[
+                                (
+                                    <SetMaxAmountButton
+                                        key="icon"
+                                        onClick={() => onSetMax()}
+                                        isActive={setMax}
+                                    >
+                                        {!setMax && (
+                                            <Icon
+                                                icon={ICONS.TOP}
+                                                size={25}
+                                                color={colors.TEXT_SECONDARY}
                                             />
-
+                                        )}
-                    <a className={setMaxClassName} onClick={onSetMax}>Set max</a>
+                                        {setMax && (
-
+                                            <Icon
-                    <Select
+                                                icon={ICONS.CHECKED}
-                        name="currency"
+                                                size={25}
-                        className="currency"
+                                                color={colors.WHITE}
-                        searchable={false}
+                                            />
-                        clearable={false}
+                                        )}
-                        multi={false}
+                                        Set max
-                        value={currency}
+                                    </SetMaxAmountButton>
-                        disabled={tokensSelectData.length < 2}
+                                ),
+                                (
+                                    <CurrencySelect
+                                        key="currency"
+                                        isSearchable={false}
+                                        isClearable={false}
+                                        defaultValue={tokensSelectData[0]}
+                                        isDisabled={tokensSelectData.length < 2}
                                         onChange={onCurrencyChange}
                                         options={tokensSelectData}
                                     />
-                </div>
+                                ),
-                { errors.amount ? (<span className="error">{ errors.amount }</span>) : null }
+                            ]}
-                { warnings.amount ? (<span className="warning">{ warnings.amount }</span>) : null }
-            </div>
-
-            <div className="row">
-                <label>Fee{ updateFeeLevelsButton }</label>
-                <Select
-                    name="fee"
-                    className="fee"
-                    searchable={false}
-                    clearable={false}
-                    value={selectedFeeLevel}
-                    onChange={onFeeLevelChange}
-                    valueComponent={FeeSelectValue}
-                    optionComponent={FeeSelectOption}
-                    disabled={networkSymbol === currency && data.length > 0}
-                    optionClassName="fee-option"
-                    options={feeLevels}
                         />
-            </div>
+                    </InputRow>
 
-            <AdvancedForm
+                    <InputRow>
-                selectedAccount={props.selectedAccount}
+                        <FeeLabelWrapper>
-                sendForm={props.sendForm}
+                            <FeeLabel>Fee</FeeLabel>
-                sendFormActions={props.sendFormActions}
+                            {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={(option) => {
+                                if (option.value === 'Custom') {
+                                    this.toggleAdvancedSettings();
+                                }
+                                onFeeLevelChange(option);
+                            }}
+                            options={feeLevels}
+                            formatOptionLabel={option => (
+                                <FeeOptionWrapper>
+                                    <P>{option.value}</P>
+                                    <P>{option.label}</P>
+                                </FeeOptionWrapper>
+                            )}
+                        />
+                    </InputRow>
+
+                    <ToggleAdvancedSettingsWrapper>
+                        <ToggleAdvancedSettingsButton
+                            isTransparent
+                            onClick={() => this.handleToggleAdvancedSettingsButton()}
                         >
-                <button disabled={buttonDisabled} onClick={event => onSend()}>{ buttonLabel }</button>
+                            Advanced settings
-            </AdvancedForm>
+                            <AdvancedSettingsIcon
+                                icon={ICONS.ARROW_DOWN}
+                                color={colors.TEXT_SECONDARY}
+                                size={24}
+                                isActive={this.state.isAdvancedSettingsHidden}
+                                canAnimate={this.state.shouldAnimateAdvancedSettingsToggle}
+                            />
+                        </ToggleAdvancedSettingsButton>
+
+                        {this.state.isAdvancedSettingsHidden && (
+                            <SendButton
+                                isDisabled={isSendButtonDisabled}
+                                onClick={() => onSend()}
+                            >
+                                {sendButtonText}
+                            </SendButton>
+                        )}
+                    </ToggleAdvancedSettingsWrapper>
+
+                    {!this.state.isAdvancedSettingsHidden && (
+                        <AdvancedSettingsWrapper>
+                            <GasInputRow>
+                                <GasInput
+                                    state={this.getGasLimitInputState(errors.gasLimit, warnings.gasLimit)}
+                                    autoComplete="off"
+                                    autoCorrect="off"
+                                    autoCapitalize="off"
+                                    spellCheck="false"
+                                    topLabel={(
+                                        <React.Fragment>
+                                            Gas limit
+                                            <Tooltip
+                                                arrowContent={<div className="rc-tooltip-arrow-inner" />}
+                                                overlay={(
+                                                    <TooltipContent>
+                                                        Gas limit is the amount of gas to send with your transaction.<br />
+                                                        <GreenSpan>TX fee = gas price * gas limit</GreenSpan> &amp; is paid to miners for including your TX in a block.<br />
+                                                        Increasing this number will not get your TX mined faster.<br />
+                                                        Default value for sending {gasLimitTooltipCurrency} is <GreenSpan>{gasLimitTooltipValue}</GreenSpan>
+                                                    </TooltipContent>
+                                                )}
+                                                placement="top"
+                                            >
+                                                <Icon
+                                                    icon={ICONS.HELP}
+                                                    color={colors.TEXT_SECONDARY}
+                                                />
+                                            </Tooltip>
+                                        </React.Fragment>
+                                    )}
+                                    bottomText={errors.gasLimit ? errors.gasLimit : warnings.gasLimit}
+                                    value={gasLimit}
+                                    isDisabled={networkSymbol === currency && data.length > 0}
+                                    onChange={event => onGasLimitChange(event.target.value)}
+                                />
+
+                                <GasInput
+                                    state={this.getGasPriceInputState(errors.gasPrice, warnings.gasPrice)}
+                                    autoComplete="off"
+                                    autoCorrect="off"
+                                    autoCapitalize="off"
+                                    spellCheck="false"
+                                    topLabel={(
+                                        <React.Fragment>
+                                            Gas price
+                                            <Tooltip
+                                                arrowContent={<div className="rc-tooltip-arrow-inner" />}
+                                                overlay={(
+                                                    <TooltipContent>
+                                                        Gas Price is the amount you pay per unit of gas.<br />
+                                                        <GreenSpan>TX fee = gas price * gas limit</GreenSpan> &amp; is paid to miners for including your TX in a block.<br />
+                                                        Higher the gas price = faster transaction, but more expensive. Recommended is <GreenSpan>{recommendedGasPrice} GWEI.</GreenSpan><br />
+                                                        <Link href="https://myetherwallet.github.io/knowledge-base/gas/what-is-gas-ethereum.html" target="_blank" rel="noreferrer noopener" isGreen>Read more</Link>
+                                                    </TooltipContent>
+                                                )}
+                                                placement="top"
+                                            >
+                                                <Icon
+                                                    icon={ICONS.HELP}
+                                                    color={colors.TEXT_SECONDARY}
+                                                />
+                                            </Tooltip>
+                                        </React.Fragment>
+                                    )}
+                                    bottomText={errors.gasPrice ? errors.gasPrice : warnings.gasPrice}
+                                    value={gasPrice}
+                                    onChange={event => onGasPriceChange(event.target.value)}
+                                />
+                            </GasInputRow>
+
+                            <StyledTextarea
+                                topLabel={(
+                                    <React.Fragment>
+                                        Data
+                                        <Tooltip
+                                            arrowContent={<div className="rc-tooltip-arrow-inner" />}
+                                            overlay={(
+                                                <TooltipContent>
+                                                    Data is usually used when you send transactions to contracts.
+                                                </TooltipContent>
+                                            )}
+                                            placement="top"
+                                        >
+                                            <Icon
+                                                icon={ICONS.HELP}
+                                                color={colors.TEXT_SECONDARY}
+                                            />
+                                        </Tooltip>
+                                    </React.Fragment>
+                                )}
+                                disabled={networkSymbol !== currency}
+                                value={networkSymbol !== currency ? '' : data}
+                                onChange={event => onDataChange(event.target.value)}
+                            />
+
+                            <AdvancedSettingsSendButtonWrapper>
+                                <SendButton
+                                    isDisabled={isSendButtonDisabled}
+                                    onClick={() => onSend()}
+                                >
+                                    {sendButtonText}
+                                </SendButton>
+                            </AdvancedSettingsSendButtonWrapper>
+                        </AdvancedSettingsWrapper>
+                    )}
 
                     <PendingTransactions
-                pending={props.selectedAccount.pending}
+                        pending={this.props.selectedAccount.pending}
-                tokens={props.selectedAccount.tokens}
+                        tokens={this.props.selectedAccount.tokens}
                         network={network}
                     />
-
+                </Wrapper>
-        </section>
+            </SelectedAccount>
         );
-};
+    }
+}
+
+
+export default AccountSend;