coin specific advanced form components

src/views/Wallet/views/Account/Send/ethereum/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 '../../ethereum/Container';
+import type { Props as BaseProps } from '../../Container';
 
 type Props = BaseProps & {
     children: React.Node,

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

@@ -14,7 +14,7 @@ import Title from 'views/Wallet/components/Title';
 import P from 'components/Paragraph';
 import Content from 'views/Wallet/components/Content';
 import type { Token } from 'flowtype';
-import AdvancedForm from '../components/AdvancedForm';
+import AdvancedForm from './components/AdvancedForm';
 import PendingTransactions from '../components/PendingTransactions';
 
 import type { Props } from './Container';

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

@@ -0,0 +1,144 @@
+/* @flow */
+
+import * as React from 'react';
+import styled from 'styled-components';
+import colors from 'config/colors';
+
+import Input from 'components/inputs/Input';
+import Tooltip from 'components/Tooltip';
+import Icon from 'components/Icon';
+import ICONS from 'config/icons';
+
+import type { Props as BaseProps } from '../../Container';
+
+type Props = BaseProps & {
+    children: React.Node,
+}
+
+// TODO: Decide on a small screen width for the whole app
+// and put it inside config/variables.js
+// same variable also in "AccountSend/index.js"
+const SmallScreenWidth = '850px';
+
+const InputLabelWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+`;
+
+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.div`
+    width: 100%;
+    display: flex;
+
+    @media screen and (max-width: ${SmallScreenWidth}) {
+        flex-direction: column;
+    }
+`;
+
+const GasInput = styled(Input)`
+    /* min-height: 85px; */
+    padding-bottom: 28px;
+    &:first-child {
+        padding-right: 20px;
+    }
+
+    @media screen and (max-width: ${SmallScreenWidth}) {
+        &:first-child {
+            padding-right: 0;
+        }
+    }
+`;
+
+const AdvancedSettingsSendButtonWrapper = styled.div`
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+`;
+
+const getFeeInputState = (feeErrors: string, feeWarnings: string): string => {
+    let state = '';
+    if (feeWarnings && !feeErrors) {
+        state = 'warning';
+    }
+    if (feeErrors) {
+        state = 'error';
+    }
+    return state;
+};
+
+const Left = styled.div`
+    display: flex;
+    align-items: center;
+`;
+
+// stateless component
+const AdvancedForm = (props: Props) => {
+    const {
+        network,
+    } = props.selectedAccount;
+    if (!network) return null;
+    const {
+        errors,
+        warnings,
+        infos,
+        fee,
+    } = props.sendForm;
+    const {
+        onFeeChange,
+    } = props.sendFormActions;
+
+    return (
+        <AdvancedSettingsWrapper>
+            <GasInputRow>
+                <GasInput
+                    state={getFeeInputState(errors.fee, warnings.fee)}
+                    autoComplete="off"
+                    autoCorrect="off"
+                    autoCapitalize="off"
+                    spellCheck="false"
+                    topLabel={(
+                        <InputLabelWrapper>
+                            <Left>
+                            Fee
+                                <Tooltip
+                                    content={(
+                                        <React.Fragment>
+                                        TODO: explain fee in XRP drops
+                                        </React.Fragment>
+                                    )}
+                                    maxWidth={410}
+                                    readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_limit"
+                                    placement="top"
+                                >
+                                    <Icon
+                                        icon={ICONS.HELP}
+                                        color={colors.TEXT_SECONDARY}
+                                        size={24}
+                                    />
+                                </Tooltip>
+                            </Left>
+                        </InputLabelWrapper>
+                    )}
+                    bottomText={errors.fee || warnings.fee || infos.fee}
+                    value={fee}
+                    onChange={event => onFeeChange(event.target.value)}
+                />
+            </GasInputRow>
+
+            <AdvancedSettingsSendButtonWrapper>
+                { props.children }
+            </AdvancedSettingsSendButtonWrapper>
+        </AdvancedSettingsWrapper>
+    );
+};
+
+export default AdvancedForm;

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

@@ -6,12 +6,15 @@ 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 Title from 'views/Wallet/components/Title';
+import P from 'components/Paragraph';
 import Content from 'views/Wallet/components/Content';
 import PendingTransactions from '../components/PendingTransactions';
+import AdvancedForm from './components/AdvancedForm';
 
 import type { Props } from './Container';
 
@@ -66,6 +69,34 @@ const CurrencySelect = styled(Select)`
     flex: 0.2;
 `;
 
+const FeeOptionWrapper = styled.div`
+    display: flex;
+    justify-content: space-between;
+`;
+
+const FeeLabelWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    padding-bottom: 10px;
+`;
+
+const FeeLabel = styled.span`
+    color: ${colors.TEXT_SECONDARY};
+`;
+
+const UpdateFeeWrapper = styled.span`
+    margin-left: 8px;
+    display: flex;
+    align-items: center;
+    font-size: ${FONT_SIZE.SMALL};
+    color: ${colors.WARNING_PRIMARY};
+`;
+
+const StyledLink = styled(Link)`
+    margin-left: 4px;
+    white-space: nowrap;
+`;
+
 const ToggleAdvancedSettingsWrapper = styled.div`
     min-height: 40px;
     margin-bottom: 20px;
@@ -80,6 +111,14 @@ const ToggleAdvancedSettingsWrapper = styled.div`
     }
 `;
 
+const ToggleAdvancedSettingsButton = styled(Button)`
+    min-height: 40px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    font-weight: ${FONT_WEIGHT.SEMIBOLD};
+`;
+
 const SendButton = styled(Button)`
     min-width: ${props => (props.isAdvancedSettingsHidden ? '50%' : '100%')};
     word-break: break-all;
@@ -89,6 +128,10 @@ const SendButton = styled(Button)`
     }
 `;
 
+const AdvancedSettingsIcon = styled(Icon)`
+    margin-left: 10px;
+`;
+
 // render helpers
 const getAddressInputState = (address: string, addressErrors: string, addressWarnings: string): string => {
     let state = '';
@@ -128,6 +171,9 @@ const AccountSend = (props: Props) => {
         address,
         amount,
         setMax,
+        feeLevels,
+        selectedFeeLevel,
+        feeNeedsUpdate,
         total,
         errors,
         warnings,
@@ -137,9 +183,12 @@ const AccountSend = (props: Props) => {
     } = props.sendForm;
 
     const {
+        toggleAdvanced,
         onAddressChange,
         onAmountChange,
         onSetMax,
+        onFeeLevelChange,
+        updateFeeLevels,
         onSend,
     } = props.sendFormActions;
 
@@ -231,18 +280,74 @@ const AccountSend = (props: Props) => {
                 />
             </InputRow>
 
+            <InputRow>
+                <FeeLabelWrapper>
+                    <FeeLabel>Fee</FeeLabel>
+                    {feeNeedsUpdate && (
+                        <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}
             >
-                <SendButton
-                    isDisabled={isSendButtonDisabled}
-                    isAdvancedSettingsHidden={isAdvancedSettingsHidden}
-                    onClick={() => onSend()}
+                <ToggleAdvancedSettingsButton
+                    isTransparent
+                    onClick={toggleAdvanced}
                 >
-                    {sendButtonText}
-                </SendButton>
+                    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