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) && ( + + QR code + + + )} + {!(addressVerified || addressUnverified) && ( + props.showAddress(account.addressPath)} + isDisabled={device.connected && !discovery.completed} > - - - - )} - - {address} - - {isAddressVerifying && ( - {account.network} account #{account.index + 1} - )} - {(addressVerified || addressUnverified) && ( - - QR code - - - )} - {!(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} - - )} - /> - - - - - Advanced settings - + )} + + ( + + {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 - Message - - Address - - Signature - - - - Verify message - Message - - Address - - Signature - - - + + + + Sign message + Message + + Address + + Signature + + + + Verify message + Message + + Address + + Signature + + + + ); export default AccountSignVerify; \ No newline at end of file diff --git a/src/views/Wallet/views/Account/Summary/index.js b/src/views/Wallet/views/Account/Summary/index.js index 889e8c92..bccf787f 100644 --- a/src/views/Wallet/views/Account/Summary/index.js +++ b/src/views/Wallet/views/Account/Summary/index.js @@ -8,6 +8,7 @@ import { AsyncSelect } from 'components/Select'; import ICONS from 'config/icons'; import colors from 'config/colors'; import Tooltip from 'components/Tooltip'; +import Content from 'views/Wallet/components/Content'; import CoinLogo from 'components/images/CoinLogo'; import * as stateUtils from 'reducers/utils'; @@ -77,84 +78,86 @@ const AccountSummary = (props: Props) => { return ( - - - - Account #{parseInt(account.index, 10) + 1} - - See full transaction history - - - - - Tokens - - - - - {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */} - {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */} - - {/* TOOO: AsyncSelect is lagging when dropdown menu must show more than 200 items */} - {/* TODO: Input's box-shadow */} - - 'Loading...'} - noOptionsMessage={() => 'Token not found'} - onChange={(token) => { - const isAdded = tokens.find(t => t.symbol === token.symbol); - if (!isAdded) { - props.addToken(token, account); - } - }} - loadOptions={input => props.loadTokens(input, account.network)} - formatOptionLabel={(option) => { - const isAdded = tokens.find(t => t.symbol === option.symbol); - if (isAdded) { - return `${option.name} (Already added)`; - } - return option.name; - }} - getOptionLabel={option => option.name} - getOptionValue={option => option.symbol} + + + + + Account #{parseInt(account.index, 10) + 1} + + See full transaction history + + + - - - - {tokens.map(token => ( - + Tokens + + + + + {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */} + {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */} + + {/* TOOO: AsyncSelect is lagging when dropdown menu must show more than 200 items */} + {/* TODO: Input's box-shadow */} + + 'Loading...'} + noOptionsMessage={() => 'Token not found'} + onChange={(token) => { + const isAdded = tokens.find(t => t.symbol === token.symbol); + if (!isAdded) { + props.addToken(token, account); + } + }} + loadOptions={input => props.loadTokens(input, account.network)} + formatOptionLabel={(option) => { + const isAdded = tokens.find(t => t.symbol === option.symbol); + if (isAdded) { + return `${option.name} (Already added)`; + } + return option.name; + }} + getOptionLabel={option => option.name} + getOptionValue={option => option.symbol} /> - ))} - + + + + {tokens.map(token => ( + + ))} + + ); }; diff --git a/src/views/Wallet/views/Dashboard/index.js b/src/views/Wallet/views/Dashboard/index.js index ac811dee..3fde163b 100644 --- a/src/views/Wallet/views/Dashboard/index.js +++ b/src/views/Wallet/views/Dashboard/index.js @@ -1,6 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import { connect } from 'react-redux'; +import Content from 'views/Wallet/components/Content'; import { H2 } from 'components/Heading'; import DashboardImg from 'images/dashboard.png'; @@ -27,14 +28,16 @@ const P = styled.p` `; const Dashboard = () => ( - - Dashboard - - Please select your coin - You will gain access to recieving & sending selected coin - - - + + + Dashboard + + Please select your coin + You will gain access to recieving & sending selected coin + + + + ); export default connect(null, null)(Dashboard); diff --git a/src/views/Wallet/views/DeviceSettings/index.js b/src/views/Wallet/views/DeviceSettings/index.js index c35ce3aa..b557c944 100644 --- a/src/views/Wallet/views/DeviceSettings/index.js +++ b/src/views/Wallet/views/DeviceSettings/index.js @@ -7,6 +7,7 @@ import Button from 'components/Button'; import P from 'components/Paragraph'; import Link from 'components/Link'; import ICONS from 'config/icons'; +import Content from 'views/Wallet/components/Content'; import { connect } from 'react-redux'; const Section = styled.section` @@ -30,20 +31,22 @@ const StyledP = styled(P)` `; const DeviceSettings = () => ( - - - - Device settings is under construction - Please use Bitcoin wallet interface to change your device settings - - Take me to the Bitcoin wallet - - - + + + + + Device settings is under construction + Please use Bitcoin wallet interface to change your device settings + + Take me to the Bitcoin wallet + + + + ); export default connect(null, null)(DeviceSettings); diff --git a/src/views/Wallet/views/WalletSettings/index.js b/src/views/Wallet/views/WalletSettings/index.js index 2ea20ad3..dead180e 100644 --- a/src/views/Wallet/views/WalletSettings/index.js +++ b/src/views/Wallet/views/WalletSettings/index.js @@ -1,13 +1,16 @@ import styled from 'styled-components'; import React from 'react'; import { connect } from 'react-redux'; +import Content from 'views/Wallet/components/Content'; const Wrapper = styled.div``; const WalletSettings = () => ( - - Wallet settings - + + + Wallet settings + + ); export default connect(null, null)(WalletSettings); diff --git a/webpack/production.babel.js b/webpack/production.babel.js index bc6919f1..63294226 100644 --- a/webpack/production.babel.js +++ b/webpack/production.babel.js @@ -65,7 +65,7 @@ module.exports = { plugins: [ new webpack.DefinePlugin({ 'process.env.BUILD': JSON.stringify(process.env.BUILD), - COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash()) + COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash()), }), new HtmlWebpackPlugin({ chunks: ['index'],
{option.value}
{option.label}
You will gain access to recieving & sending selected coin