From ac765c3966920a6e01513b07cda3cdea64016a99 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 26 Sep 2018 11:48:56 +0200 Subject: [PATCH] Unified paddings in wallet views --- src/views/Wallet/index.js | 1 + .../Receive}/Container.js | 0 .../Receive}/index.js | 11 +- .../Send}/Container.js | 0 .../Send}/components/AdvancedForm/index.js | 0 .../components/PendingTransactions/index.js | 0 .../{AccountSend => Account/Send}/index.js | 12 +- .../SignVerify}/index.js | 1 - .../Summary}/Container.js | 0 .../Summary/components/Balance}/index.js | 0 .../Summary/components/Token}/index.js | 4 +- .../Wallet/views/Account/Summary/index.js | 162 +++++++++++++++++ .../Wallet/views/AccountSummary/index.js | 170 ------------------ src/views/index.js | 8 +- 14 files changed, 174 insertions(+), 195 deletions(-) rename src/views/Wallet/views/{AccountReceive => Account/Receive}/Container.js (100%) rename src/views/Wallet/views/{AccountReceive => Account/Receive}/index.js (97%) rename src/views/Wallet/views/{AccountSend => Account/Send}/Container.js (100%) rename src/views/Wallet/views/{AccountSend => Account/Send}/components/AdvancedForm/index.js (100%) rename src/views/Wallet/views/{AccountSend => Account/Send}/components/PendingTransactions/index.js (100%) rename src/views/Wallet/views/{AccountSend => Account/Send}/index.js (98%) rename src/views/Wallet/views/{AccountSignVerify => Account/SignVerify}/index.js (96%) rename src/views/Wallet/views/{AccountSummary => Account/Summary}/Container.js (100%) rename src/views/Wallet/views/{AccountSummary/components/AccountBalance => Account/Summary/components/Balance}/index.js (100%) rename src/views/Wallet/views/{AccountSummary/components/AddedToken => Account/Summary/components/Token}/index.js (96%) create mode 100644 src/views/Wallet/views/Account/Summary/index.js delete mode 100644 src/views/Wallet/views/AccountSummary/index.js diff --git a/src/views/Wallet/index.js b/src/views/Wallet/index.js index ff9777d9..772a8db6 100644 --- a/src/views/Wallet/index.js +++ b/src/views/Wallet/index.js @@ -77,6 +77,7 @@ const Body = styled.div` display: flex; flex: 1; flex-direction: column; + padding: 40px 35px 20px 35px; `; const Wallet = (props: WalletContainerProps) => ( diff --git a/src/views/Wallet/views/AccountReceive/Container.js b/src/views/Wallet/views/Account/Receive/Container.js similarity index 100% rename from src/views/Wallet/views/AccountReceive/Container.js rename to src/views/Wallet/views/Account/Receive/Container.js diff --git a/src/views/Wallet/views/AccountReceive/index.js b/src/views/Wallet/views/Account/Receive/index.js similarity index 97% rename from src/views/Wallet/views/AccountReceive/index.js rename to src/views/Wallet/views/Account/Receive/index.js index a197fb3f..fd3694ed 100644 --- a/src/views/Wallet/views/AccountReceive/index.js +++ b/src/views/Wallet/views/Account/Receive/index.js @@ -16,22 +16,17 @@ import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables'; import type { Props } from './Container'; -const Wrapper = styled.div` - padding-top: 20px; -`; +const Wrapper = styled.div``; const Label = styled.div` padding: 25px 0 5px 0; color: ${colors.TEXT_SECONDARY}; `; -const StyledH2 = styled(H2)` - padding: 20px 48px; -`; const AddressWrapper = styled.div` position: relative; - padding: 0px 48px; display: flex; + margin-top: 20px; flex-wrap: wrap; flex-direction: ${props => (props.isShowingQrCode ? 'column' : 'row')}; `; @@ -148,7 +143,7 @@ const AccountReceive = (props: Props) => { return ( - Receive Ethereum or tokens +

Receive Ethereum or tokens

diff --git a/src/views/Wallet/views/AccountSend/Container.js b/src/views/Wallet/views/Account/Send/Container.js similarity index 100% rename from src/views/Wallet/views/AccountSend/Container.js rename to src/views/Wallet/views/Account/Send/Container.js diff --git a/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js b/src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js similarity index 100% rename from src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js rename to src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js diff --git a/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js b/src/views/Wallet/views/Account/Send/components/PendingTransactions/index.js similarity index 100% rename from src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js rename to src/views/Wallet/views/Account/Send/components/PendingTransactions/index.js diff --git a/src/views/Wallet/views/AccountSend/index.js b/src/views/Wallet/views/Account/Send/index.js similarity index 98% rename from src/views/Wallet/views/AccountSend/index.js rename to src/views/Wallet/views/Account/Send/index.js index fbeeac63..520129a9 100644 --- a/src/views/Wallet/views/AccountSend/index.js +++ b/src/views/Wallet/views/Account/Send/index.js @@ -23,16 +23,10 @@ import type { Props } from './Container'; // and put it inside config/variables.js const SmallScreenWidth = '850px'; -const Wrapper = styled.section` - padding: 20px 48px; -`; - -const StyledH2 = styled(H2)` - padding: 20px 0; -`; +const Wrapper = styled.section``; const InputRow = styled.div` - margin-bottom: 20px; + margin: 20px 0; `; const SetMaxAmountButton = styled(Button)` @@ -237,7 +231,7 @@ const AccountSend = (props: Props) => { return ( - Send Ethereum or tokens +

Send Ethereum or tokens

{ const textColor = new ColorHash(); return ( - + { + const device = props.wallet.selectedDevice; + const { + account, + network, + tokens, + pending, + } = props.selectedAccount; + + // flow + if (!device || !account || !network) return ; + + const explorerLink: string = `${network.explorer.address}${account.address}`; + const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, network.symbol); + const balance: string = new BigNumber(account.balance).minus(pendingAmount).toString(10); + + 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} + /> + + + + {tokens.map(token => ( + + ))} + + + ); +}; + +export default AccountSummary; diff --git a/src/views/Wallet/views/AccountSummary/index.js b/src/views/Wallet/views/AccountSummary/index.js deleted file mode 100644 index 2fe45352..00000000 --- a/src/views/Wallet/views/AccountSummary/index.js +++ /dev/null @@ -1,170 +0,0 @@ -/* @flow */ -import styled from 'styled-components'; -import React from 'react'; -import { H2 } from 'components/Heading'; -import BigNumber from 'bignumber.js'; -import Icon from 'components/Icon'; -import { AsyncSelect } from 'components/Select'; -import ICONS from 'config/icons'; -import colors from 'config/colors'; -import Tooltip from 'components/Tooltip'; - -import CoinLogo from 'components/images/CoinLogo'; -import * as stateUtils from 'reducers/utils'; -import SelectedAccount from 'views/Wallet/components/SelectedAccount'; -import Link from 'components/Link'; -import AccountBalance from './components/AccountBalance'; -import AddedToken from './components/AddedToken'; - -import type { Props } from './Container'; - -const Content = styled.div` - padding: 0 35px; -`; - -const AccountHeading = styled.div` - padding: 30px 48px 30px 0; - display: flex; - justify-content: space-between; - align-items: center; -`; - -const H2Wrapper = styled.div` - display: flex; - align-items: center; - padding: 20px 0; -`; - -const StyledTooltip = styled(Tooltip)` - position: relative; - top: 2px; -`; - -const AccountName = styled.div` - display: flex; - align-items: center; -`; - -const StyledCoinLogo = styled(CoinLogo)` - margin-right: 10px; -`; - -const StyledIcon = styled(Icon)` - position: relative; - top: -1px; - &:hover { - cursor: pointer; - } -`; - -const AsyncSelectWrapper = styled.div` - padding-bottom: 32px; -`; - -const AddedTokensWrapper = styled.div``; - -const AccountSummary = (props: Props) => { - const device = props.wallet.selectedDevice; - const { - account, - network, - tokens, - pending, - } = props.selectedAccount; - - // flow - if (!device || !account || !network) return ; - - const explorerLink: string = `${network.explorer.address}${account.address}`; - const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, network.symbol); - const balance: string = new BigNumber(account.balance).minus(pendingAmount).toString(10); - - 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} - /> - - - - {tokens.map(token => ( - - ))} - - - - ); -}; - -export default AccountSummary; diff --git a/src/views/index.js b/src/views/index.js index 11fa8bed..f102050f 100644 --- a/src/views/index.js +++ b/src/views/index.js @@ -11,10 +11,10 @@ import LandingContainer from 'views/Landing/Container'; // wallet views import WalletContainer from 'views/Wallet'; -import AccountSummary from 'views/Wallet/views/AccountSummary/Container'; -import AccountSend from 'views/Wallet/views/AccountSend/Container'; -import AccountReceive from 'views/Wallet/views/AccountReceive/Container'; -import AccountSignVerify from 'views/Wallet/views/AccountSignVerify'; +import AccountSummary from 'views/Wallet/views/Account/Summary/Container'; +import AccountSend from 'views/Wallet/views/Account/Send/Container'; +import AccountReceive from 'views/Wallet/views/Account/Receive/Container'; +import AccountSignVerify from 'views/Wallet/views/Account/SignVerify'; import WalletDashboard from 'views/Wallet/views/Dashboard'; import WalletDeviceSettings from 'views/Wallet/views/DeviceSettings';