diff --git a/src/components/WalletViewContainer/index.js b/src/components/WalletViewContainer/index.js deleted file mode 100644 index a9f47e61..00000000 --- a/src/components/WalletViewContainer/index.js +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import styled from 'styled-components'; -import colors from 'config/colors'; -import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables'; - -const Wrapper = styled.div` - padding: -`; - -const Textarea = ({ - className, - placeholder = '', - value, - customStyle = {}, - onFocus, - onBlur, - isDisabled, - onChange, - isError, - topLabel, -}) => ( - - {topLabel && ( - {topLabel} - )} - - -); - -Textarea.propTypes = { - className: PropTypes.string, - isError: PropTypes.bool, - onFocus: PropTypes.func, - onBlur: PropTypes.func, - onChange: PropTypes.func, - customStyle: PropTypes.string, - placeholder: PropTypes.string, - value: PropTypes.string, - isDisabled: PropTypes.bool, - topLabel: PropTypes.node, -}; - -export default Textarea; diff --git a/src/views/Wallet/components/Content/index.js b/src/views/Wallet/components/Content/index.js new file mode 100644 index 00000000..1b2ef54e --- /dev/null +++ b/src/views/Wallet/components/Content/index.js @@ -0,0 +1,24 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; + +const Wrapper = styled.div` + display: flex; + flex: 1; + flex-direction: column; + padding: 40px 35px 40px 35px; +`; + +const Content = ({ + children, +}) => ( + + {children} + +); + +Content.propTypes = { + children: PropTypes.element, +}; + +export default Content; diff --git a/src/views/Wallet/index.js b/src/views/Wallet/index.js index 29b76ca9..ff9777d9 100644 --- a/src/views/Wallet/index.js +++ b/src/views/Wallet/index.js @@ -77,7 +77,6 @@ const Body = styled.div` display: flex; flex: 1; flex-direction: column; - padding: 40px 35px 40px 35px; `; const Wallet = (props: WalletContainerProps) => ( diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js index fd3694ed..ec173725 100644 --- a/src/views/Wallet/views/Account/Receive/index.js +++ b/src/views/Wallet/views/Account/Receive/index.js @@ -5,6 +5,7 @@ import { H2 } from 'components/Heading'; import Button from 'components/Button'; import Icon from 'components/Icon'; import ICONS from 'config/icons'; +import Content from 'views/Wallet/components/Content'; import colors from 'config/colors'; import Tooltip from 'components/Tooltip'; @@ -142,79 +143,81 @@ const AccountReceive = (props: Props) => { return ( - -

Receive Ethereum or tokens

- - {isAddressVerifying && ( - Confirm address on TREZOR - )} - {((addressVerified || addressUnverified) && !isAddressVerifying) && ( - - {addressUnverified ? ( - + + +

Receive Ethereum or tokens

+ + {isAddressVerifying && ( + Confirm address on TREZOR + )} + {((addressVerified || addressUnverified) && !isAddressVerifying) && ( + + {addressUnverified ? ( + Unverified address. -
- {device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'} -
- ) : ( - - {device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'} - - )} -
- )} +
+ {device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'} + + ) : ( + + {device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'} + + )} + + )} + > + props.showAddress(account.addressPath)} + > + + +
+ )} + - + {isAddressVerifying && ( + {account.network} account #{account.index + 1} + )} + {(addressVerified || addressUnverified) && ( + + + + + )} + {!(addressVerified || addressUnverified) && ( + props.showAddress(account.addressPath)} + isDisabled={device.connected && !discovery.completed} > - - - - )} - - {address} - - {isAddressVerifying && ( - {account.network} account #{account.index + 1} - )} - {(addressVerified || addressUnverified) && ( - - - - - )} - {!(addressVerified || addressUnverified) && ( - props.showAddress(account.addressPath)} - isDisabled={device.connected && !discovery.completed} - > - Show full address - - )} -
-
+ + )} + + +
); }; diff --git a/src/views/Wallet/views/Account/Send/index.js b/src/views/Wallet/views/Account/Send/index.js index 520129a9..4a659e5f 100644 --- a/src/views/Wallet/views/Account/Send/index.js +++ b/src/views/Wallet/views/Account/Send/index.js @@ -12,6 +12,7 @@ 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 SelectedAccount from 'views/Wallet/components/SelectedAccount'; import type { Token } from 'flowtype'; import AdvancedForm from './components/AdvancedForm'; @@ -230,148 +231,150 @@ const AccountSend = (props: Props) => { return ( - -

Send Ethereum or tokens

- - onAddressChange(event.target.value)} - /> - - - - onAmountChange(event.target.value)} - bottomText={errors.amount || warnings.amount || infos.amount} - sideAddons={[ - ( - onSetMax()} - isActive={setMax} - > - {!setMax && ( - - )} - {setMax && ( - - )} + + +

Send Ethereum or tokens

+ + onAddressChange(event.target.value)} + /> + + + + onAmountChange(event.target.value)} + bottomText={errors.amount || warnings.amount || infos.amount} + sideAddons={[ + ( + onSetMax()} + isActive={setMax} + > + {!setMax && ( + + )} + {setMax && ( + + )} Set max - - ), - ( - - ), - ]} - /> - - - - - Fee - {gasPriceNeedsUpdate && ( - - +
+ ), + ( + + ), + ]} + /> +
+ + + + Fee + {gasPriceNeedsUpdate && ( + + Recommended fees updated. Click here to use them - - )} - - ( + +

{option.value}

+

{option.label}

+
+ )} /> - +
- {isAdvancedSettingsHidden && ( - onSend()} + + - {sendButtonText} - + Advanced settings + + + + {isAdvancedSettingsHidden && ( + onSend()} + > + {sendButtonText} + + )} + + + {advanced && ( + + onSend()} + > + {sendButtonText} + + )} - - {advanced && ( - - onSend()} - > - {sendButtonText} - - - )} - - {props.selectedAccount.pending.length > 0 && ( - - )} -
+ {props.selectedAccount.pending.length > 0 && ( + + )} + +
); }; diff --git a/src/views/Wallet/views/Account/SignVerify/index.js b/src/views/Wallet/views/Account/SignVerify/index.js index 9e9bf142..d04e3b4f 100644 --- a/src/views/Wallet/views/Account/SignVerify/index.js +++ b/src/views/Wallet/views/Account/SignVerify/index.js @@ -2,6 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import Input from 'components/inputs/Input'; import Textarea from 'components/Textarea'; +import Content from 'views/Wallet/components/Content'; import { H2 } from 'components/Heading'; import colors from 'config/colors'; @@ -35,26 +36,28 @@ const Label = styled.div` `; const AccountSignVerify = () => ( - - - Sign message - -