From 025e7856cd8a0d7eebf8e91bc5f57618d0f7ce2c Mon Sep 17 00:00:00 2001 From: Szymon Lesisz Date: Fri, 28 Dec 2018 16:06:26 +0100 Subject: [PATCH] coin specific advanced form components --- .../components/AdvancedForm/index.js | 2 +- .../views/Account/Send/ethereum/index.js | 2 +- .../ripple/components/AdvancedForm/index.js | 144 ++++++++++++++++++ .../Wallet/views/Account/Send/ripple/index.js | 117 +++++++++++++- 4 files changed, 257 insertions(+), 8 deletions(-) rename src/views/Wallet/views/Account/Send/{ => ethereum}/components/AdvancedForm/index.js (99%) create mode 100644 src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js 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 + + )} + +