diff --git a/src/views/Wallet/views/AccountReceive/index.js b/src/views/Wallet/views/AccountReceive/index.js index 0424dc74..6c52f7f0 100644 --- a/src/views/Wallet/views/AccountReceive/index.js +++ b/src/views/Wallet/views/AccountReceive/index.js @@ -11,8 +11,6 @@ import colors from 'config/colors'; import Tooltip from 'components/Tooltip'; import { QRCode } from 'react-qr-svg'; -import SelectedAccount from 'views/Wallet/components/SelectedAccount'; - import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables'; import type { Props } from './Container'; @@ -124,9 +122,10 @@ const AccountReceive = (props: Props) => { const { account, discovery, + shouldRender, } = props.selectedAccount; - if (!device || !account || !discovery) return null; + if (!device || !account || !discovery || !shouldRender) return null; const { addressVerified, @@ -143,83 +142,81 @@ const AccountReceive = (props: Props) => { const isAddressHidden = !isAddressVerifying && !addressVerified && !addressUnverified; return ( - - - -

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.'} - - )} - - )} - > - props.showAddress(account.addressPath)} - > - - - - )} - + +

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.'} + + )} + + )} > - {address} - - {isAddressVerifying && ( - {account.network} account #{account.index + 1} - )} - {(addressVerified || addressUnverified) && ( - - - - - )} - {!(addressVerified || addressUnverified) && ( - props.showAddress(account.addressPath)} - isDisabled={device.connected && !discovery.completed} > - - Show full address - - )} - - - - + + + )} + + {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/AccountSend/index.js b/src/views/Wallet/views/AccountSend/index.js index 7c33a95c..eeb9dbd8 100644 --- a/src/views/Wallet/views/AccountSend/index.js +++ b/src/views/Wallet/views/AccountSend/index.js @@ -13,7 +13,6 @@ 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'; import PendingTransactions from './components/PendingTransactions'; @@ -176,6 +175,7 @@ const AccountSend = (props: Props) => { network, discovery, tokens, + shouldRender, } = props.selectedAccount; const { address, @@ -205,7 +205,7 @@ const AccountSend = (props: Props) => { onSend, } = props.sendFormActions; - if (!device || !account || !discovery || !network) return null; + if (!device || !account || !discovery || !network || !shouldRender) return null; let isSendButtonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending; let sendButtonText: string = 'Send'; @@ -230,152 +230,150 @@ const AccountSend = (props: Props) => { const isAdvancedSettingsHidden = !advanced; return ( - - - -

Send Ethereum or tokens

- - onAddressChange(event.target.value)} - /> - + + +

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

{option.value}

+

{option.label}

+ + )} + /> + - {advanced && ( - - onSend()} - > - {sendButtonText} - - - )} - - {props.selectedAccount.pending.length > 0 && ( - + + Advanced settings + + + + {isAdvancedSettingsHidden && ( + onSend()} + > + {sendButtonText} + )} - - - + + + {advanced && ( + + onSend()} + > + {sendButtonText} + + + )} + + {props.selectedAccount.pending.length > 0 && ( + + )} + + ); }; diff --git a/src/views/Wallet/views/AccountSummary/index.js b/src/views/Wallet/views/AccountSummary/index.js index bccf787f..5857fd4b 100644 --- a/src/views/Wallet/views/AccountSummary/index.js +++ b/src/views/Wallet/views/AccountSummary/index.js @@ -12,7 +12,6 @@ import Content from 'views/Wallet/components/Content'; 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/Balance'; import AddedToken from './components/Token'; @@ -67,98 +66,97 @@ const AccountSummary = (props: Props) => { network, tokens, pending, + shouldRender, } = props.selectedAccount; // flow - if (!device || !account || !network) return ; + if (!device || !account || !network || !shouldRender) return null; 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} + + + + +

Account #{parseInt(account.index, 10) + 1}

+ + See full transaction history + + + + +

Tokens

+ + - + + + {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */} + {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */} - - {tokens.map(token => ( - - ))} - - - + {/* 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 => ( + + ))} + + ); };