diff --git a/src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js b/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js
similarity index 99%
rename from src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js
rename to src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js
index 348a0263..6341c8d6 100644
--- a/src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js
+++ b/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,
diff --git a/src/views/Wallet/views/Account/Send/ethereum/index.js b/src/views/Wallet/views/Account/Send/ethereum/index.js
index 603d27ca..dc699a6e 100644
--- a/src/views/Wallet/views/Account/Send/ethereum/index.js
+++ b/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';
diff --git a/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js b/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js
new file mode 100644
index 00000000..15d72a02
--- /dev/null
+++ b/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 (
+
+
+
+
+ Fee
+
+ TODO: explain fee in XRP drops
+
+ )}
+ maxWidth={410}
+ readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_limit"
+ placement="top"
+ >
+
+
+
+
+ )}
+ bottomText={errors.fee || warnings.fee || infos.fee}
+ value={fee}
+ onChange={event => onFeeChange(event.target.value)}
+ />
+
+
+
+ { props.children }
+
+
+ );
+};
+
+export default AdvancedForm;
\ No newline at end of file
diff --git a/src/views/Wallet/views/Account/Send/ripple/index.js b/src/views/Wallet/views/Account/Send/ripple/index.js
index c2bc10a4..cdc7fd3e 100644
--- a/src/views/Wallet/views/Account/Send/ripple/index.js
+++ b/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) => {
/>
+
+
+ Fee
+ {feeNeedsUpdate && (
+
+
+ Recommended fees updated. Click here to use them
+
+ )}
+
+
+
- onSend()}
+
- {sendButtonText}
-
+ Advanced settings
+
+
+
+ {isAdvancedSettingsHidden && (
+ onSend()}
+ >
+ {sendButtonText}
+
+ )}
+ {advanced && (
+
+ onSend()}
+ >
+ {sendButtonText}
+
+
+ )}
+
{props.selectedAccount.pending.length > 0 && (