arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-29 02:18:06 +00:00
Code Issues Releases Wiki Activity

removed <SelectedAccount> from components

Browse Source
This commit is contained in:
Szymon Lesisz 2018-10-03 17:39:23 +02:00
parent b6843d0ad0
commit 8229317ccf
3 changed files with 293 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
src/views/Wallet/views/AccountReceive/index.js
View File

@ -11,8 +11,6 @@ import colors from 'config/colors';
import Tooltip from 'components/Tooltip'; import Tooltip from 'components/Tooltip';
import { QRCode } from 'react-qr-svg'; import { QRCode } from 'react-qr-svg';
import SelectedAccount from 'views/Wallet/components/SelectedAccount';
import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables'; import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables';
import type { Props } from './Container'; import type { Props } from './Container';
@ -124,9 +122,10 @@ const AccountReceive = (props: Props) => {
const { const {
account, account,
discovery, discovery,
shouldRender,
} = props.selectedAccount; } = props.selectedAccount;
if (!device || !account || !discovery) return null; if (!device || !account || !discovery || !shouldRender) return null;
const { const {
addressVerified, addressVerified,
@ -143,83 +142,81 @@ const AccountReceive = (props: Props) => {
const isAddressHidden = !isAddressVerifying && !addressVerified && !addressUnverified; const isAddressHidden = !isAddressVerifying && !addressVerified && !addressUnverified;
return ( return (
<SelectedAccount {...props}> <Content>
<Content> <Wrapper>
<Wrapper> <H2>Receive Ethereum or tokens</H2>
<H2>Receive Ethereum or tokens</H2> <AddressWrapper
<AddressWrapper isShowingQrCode={addressVerified || addressUnverified}
isShowingQrCode={addressVerified || addressUnverified} >
> {isAddressVerifying && (
{isAddressVerifying && ( <AddressInfoText>Confirm address on TREZOR</AddressInfoText>
<AddressInfoText>Confirm address on TREZOR</AddressInfoText> )}
)} {((addressVerified || addressUnverified) && !isAddressVerifying) && (
{((addressVerified || addressUnverified) && !isAddressVerifying) && ( <Tooltip
<Tooltip placement="bottomRight"
placement="bottomRight" content={(
content={( <React.Fragment>
<React.Fragment> {addressUnverified ? (
{addressUnverified ? ( <React.Fragment>
<React.Fragment> Unverified address.
Unverified address. <br />
<br /> {device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'}
{device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'} </React.Fragment>
</React.Fragment> ) : (
) : ( <React.Fragment>
<React.Fragment> {device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'}
{device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'} </React.Fragment>
</React.Fragment> )}
)} </React.Fragment>
</React.Fragment> )}
)}
>
<EyeButton
isTransparent
onClick={() => props.showAddress(account.addressPath)}
>
<Icon
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
/>
</EyeButton>
</Tooltip>
)}
<ValueWrapper
isHidden={isAddressHidden}
isVerifying={isAddressVerifying}
> >
{address} <EyeButton
</ValueWrapper> isTransparent
{isAddressVerifying && (
<AddressInfoText>{account.network} account #{account.index + 1}</AddressInfoText>
)}
{(addressVerified || addressUnverified) && (
<React.Fragment>
<Label>QR code</Label>
<StyledQRCode
bgColor="#FFFFFF"
fgColor="#000000"
level="Q"
style={{ width: 150 }}
value={account.address}
/>
</React.Fragment>
)}
{!(addressVerified || addressUnverified) && (
<ShowAddressButton
onClick={() => props.showAddress(account.addressPath)} onClick={() => props.showAddress(account.addressPath)}
isDisabled={device.connected && !discovery.completed}
> >
<ShowAddressIcon <Icon
icon={ICONS.EYE} icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
color={colors.WHITE} color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
/> />
Show full address </EyeButton>
</ShowAddressButton> </Tooltip>
)} )}
</AddressWrapper> <ValueWrapper
</Wrapper> isHidden={isAddressHidden}
</Content> isVerifying={isAddressVerifying}
</SelectedAccount> >
{address}
</ValueWrapper>
{isAddressVerifying && (
<AddressInfoText>{account.network} account #{account.index + 1}</AddressInfoText>
)}
{(addressVerified || addressUnverified) && (
<React.Fragment>
<Label>QR code</Label>
<StyledQRCode
bgColor="#FFFFFF"
fgColor="#000000"
level="Q"
style={{ width: 150 }}
value={account.address}
/>
</React.Fragment>
)}
{!(addressVerified || addressUnverified) && (
<ShowAddressButton
onClick={() => props.showAddress(account.addressPath)}
isDisabled={device.connected && !discovery.completed}
>
<ShowAddressIcon
icon={ICONS.EYE}
color={colors.WHITE}
/>
Show full address
</ShowAddressButton>
)}
</AddressWrapper>
</Wrapper>
</Content>
); );
}; };

282
src/views/Wallet/views/AccountSend/index.js
View File

@ -13,7 +13,6 @@ import colors from 'config/colors';
import P from 'components/Paragraph'; import P from 'components/Paragraph';
import { H2 } from 'components/Heading'; import { H2 } from 'components/Heading';
import Content from 'views/Wallet/components/Content'; import Content from 'views/Wallet/components/Content';
import SelectedAccount from 'views/Wallet/components/SelectedAccount';
import type { Token } from 'flowtype'; import type { Token } from 'flowtype';
import AdvancedForm from './components/AdvancedForm'; import AdvancedForm from './components/AdvancedForm';
import PendingTransactions from './components/PendingTransactions'; import PendingTransactions from './components/PendingTransactions';
@ -176,6 +175,7 @@ const AccountSend = (props: Props) => {
network, network,
discovery, discovery,
tokens, tokens,
shouldRender,
} = props.selectedAccount; } = props.selectedAccount;
const { const {
address, address,
@ -205,7 +205,7 @@ const AccountSend = (props: Props) => {
onSend, onSend,
} = props.sendFormActions; } = 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 isSendButtonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
let sendButtonText: string = 'Send'; let sendButtonText: string = 'Send';
@ -230,152 +230,150 @@ const AccountSend = (props: Props) => {
const isAdvancedSettingsHidden = !advanced; const isAdvancedSettingsHidden = !advanced;
return ( return (
<SelectedAccount {...props}> <Content>
<Content> <Wrapper>
<Wrapper> <H2>Send Ethereum or tokens</H2>
<H2>Send Ethereum or tokens</H2> <InputRow>
<InputRow> <Input
<Input state={getAddressInputState(address, errors.address, warnings.address)}
state={getAddressInputState(address, errors.address, warnings.address)} autoComplete="off"
autoComplete="off" autoCorrect="off"
autoCorrect="off" autoCapitalize="off"
autoCapitalize="off" spellCheck="false"
spellCheck="false" topLabel="Address"
topLabel="Address" bottomText={errors.address || warnings.address || infos.address}
bottomText={errors.address || warnings.address || infos.address} value={address}
value={address} onChange={event => onAddressChange(event.target.value)}
onChange={event => onAddressChange(event.target.value)} />
/> </InputRow>
</InputRow>
<InputRow> <InputRow>
<Input <Input
state={getAmountInputState(errors.amount, warnings.amount)} state={getAmountInputState(errors.amount, warnings.amount)}
autoComplete="off" autoComplete="off"
autoCorrect="off" autoCorrect="off"
autoCapitalize="off" autoCapitalize="off"
spellCheck="false" spellCheck="false"
topLabel="Amount" topLabel="Amount"
value={amount} value={amount}
onChange={event => onAmountChange(event.target.value)} onChange={event => onAmountChange(event.target.value)}
bottomText={errors.amount || warnings.amount || infos.amount} bottomText={errors.amount || warnings.amount || infos.amount}
sideAddons={[ sideAddons={[
( (
<SetMaxAmountButton <SetMaxAmountButton
key="icon" key="icon"
onClick={() => onSetMax()} onClick={() => onSetMax()}
isActive={setMax} isActive={setMax}
> >
{!setMax && ( {!setMax && (
<Icon <Icon
icon={ICONS.TOP} icon={ICONS.TOP}
size={25} size={25}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
/> />
)} )}
{setMax && ( {setMax && (
<Icon <Icon
icon={ICONS.CHECKED} icon={ICONS.CHECKED}
size={25} size={25}
color={colors.WHITE} color={colors.WHITE}
/> />
)} )}
Set max Set max
</SetMaxAmountButton> </SetMaxAmountButton>
), ),
( (
<CurrencySelect <CurrencySelect
key="currency" key="currency"
isSearchable={false} isSearchable={false}
isClearable={false} isClearable={false}
defaultValue={tokensSelectData[0]} defaultValue={tokensSelectData[0]}
isDisabled={tokensSelectData.length < 2} isDisabled={tokensSelectData.length < 2}
onChange={onCurrencyChange} onChange={onCurrencyChange}
options={tokensSelectData} options={tokensSelectData}
/> />
), ),
]} ]}
/> />
</InputRow> </InputRow>
<InputRow> <InputRow>
<FeeLabelWrapper> <FeeLabelWrapper>
<FeeLabel>Fee</FeeLabel> <FeeLabel>Fee</FeeLabel>
{gasPriceNeedsUpdate && ( {gasPriceNeedsUpdate && (
<UpdateFeeWrapper> <UpdateFeeWrapper>
<Icon <Icon
icon={ICONS.WARNING} icon={ICONS.WARNING}
color={colors.WARNING_PRIMARY} color={colors.WARNING_PRIMARY}
size={20} size={20}
/> />
Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink> Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
</UpdateFeeWrapper> </UpdateFeeWrapper>
)}
</FeeLabelWrapper>
<Select
isSearchable={false}
isClearable={false}
value={selectedFeeLevel}
onChange={onFeeLevelChange}
options={feeLevels}
formatOptionLabel={option => (
<FeeOptionWrapper>
<P>{option.value}</P>
<P>{option.label}</P>
</FeeOptionWrapper>
)}
/>
</InputRow>
<ToggleAdvancedSettingsWrapper
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
>
<ToggleAdvancedSettingsButton
isTransparent
onClick={toggleAdvanced}
>
Advanced settings
<AdvancedSettingsIcon
icon={ICONS.ARROW_DOWN}
color={colors.TEXT_SECONDARY}
size={24}
isActive={advanced}
canAnimate
/>
</ToggleAdvancedSettingsButton>
{isAdvancedSettingsHidden && (
<SendButton
isDisabled={isSendButtonDisabled}
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
)} )}
</ToggleAdvancedSettingsWrapper> </FeeLabelWrapper>
<Select
isSearchable={false}
isClearable={false}
value={selectedFeeLevel}
onChange={onFeeLevelChange}
options={feeLevels}
formatOptionLabel={option => (
<FeeOptionWrapper>
<P>{option.value}</P>
<P>{option.label}</P>
</FeeOptionWrapper>
)}
/>
</InputRow>
{advanced && ( <ToggleAdvancedSettingsWrapper
<AdvancedForm {...props}> isAdvancedSettingsHidden={isAdvancedSettingsHidden}
<SendButton >
isDisabled={isSendButtonDisabled} <ToggleAdvancedSettingsButton
onClick={() => onSend()} isTransparent
> onClick={toggleAdvanced}
{sendButtonText} >
</SendButton> Advanced settings
</AdvancedForm> <AdvancedSettingsIcon
)} icon={ICONS.ARROW_DOWN}
color={colors.TEXT_SECONDARY}
{props.selectedAccount.pending.length > 0 && ( size={24}
<PendingTransactions isActive={advanced}
pending={props.selectedAccount.pending} canAnimate
tokens={props.selectedAccount.tokens}
network={network}
/> />
</ToggleAdvancedSettingsButton>
{isAdvancedSettingsHidden && (
<SendButton
isDisabled={isSendButtonDisabled}
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
)} )}
</Wrapper> </ToggleAdvancedSettingsWrapper>
</Content>
</SelectedAccount> {advanced && (
<AdvancedForm {...props}>
<SendButton
isDisabled={isSendButtonDisabled}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
</AdvancedForm>
)}
{props.selectedAccount.pending.length > 0 && (
<PendingTransactions
pending={props.selectedAccount.pending}
tokens={props.selectedAccount.tokens}
network={network}
/>
)}
</Wrapper>
</Content>
); );
}; };

162
src/views/Wallet/views/AccountSummary/index.js
View File

@ -12,7 +12,6 @@ import Content from 'views/Wallet/components/Content';
import CoinLogo from 'components/images/CoinLogo'; import CoinLogo from 'components/images/CoinLogo';
import * as stateUtils from 'reducers/utils'; import * as stateUtils from 'reducers/utils';
import SelectedAccount from 'views/Wallet/components/SelectedAccount';
import Link from 'components/Link'; import Link from 'components/Link';
import AccountBalance from './components/Balance'; import AccountBalance from './components/Balance';
import AddedToken from './components/Token'; import AddedToken from './components/Token';
@ -67,98 +66,97 @@ const AccountSummary = (props: Props) => {
network, network,
tokens, tokens,
pending, pending,
shouldRender,
} = props.selectedAccount; } = props.selectedAccount;
// flow // flow
if (!device || !account || !network) return <SelectedAccount {...props} />; if (!device || !account || !network || !shouldRender) return null;
const explorerLink: string = `${network.explorer.address}${account.address}`; const explorerLink: string = `${network.explorer.address}${account.address}`;
const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, network.symbol); const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, network.symbol);
const balance: string = new BigNumber(account.balance).minus(pendingAmount).toString(10); const balance: string = new BigNumber(account.balance).minus(pendingAmount).toString(10);
return ( return (
<SelectedAccount {...props}> <Content>
<Content> <AccountHeading>
<AccountHeading> <AccountName>
<AccountName> <StyledCoinLogo coinNetwork={account.network} />
<StyledCoinLogo coinNetwork={account.network} /> <H2>Account #{parseInt(account.index, 10) + 1}</H2>
<H2>Account #{parseInt(account.index, 10) + 1}</H2> </AccountName>
</AccountName> <Link
<Link target="_blank"
target="_blank" rel="noreferrer noopener"
rel="noreferrer noopener" href={explorerLink}
href={explorerLink} isGray
isGray >See full transaction history
>See full transaction history </Link>
</Link> </AccountHeading>
</AccountHeading> <AccountBalance
<AccountBalance coin={network}
coin={network} summary={props.summary}
summary={props.summary} balance={balance}
balance={balance} network={network.network}
network={network.network} fiat={props.fiat}
fiat={props.fiat} localStorage={props.localStorage}
localStorage={props.localStorage} />
/> <H2Wrapper>
<H2Wrapper> <H2>Tokens</H2>
<H2>Tokens</H2> <StyledTooltip
<StyledTooltip maxWidth={200}
maxWidth={200} placement="top"
placement="top" content="Insert token name, symbol or address to be able to send it."
content="Insert token name, symbol or address to be able to send it." >
> <StyledIcon
<StyledIcon icon={ICONS.HELP}
icon={ICONS.HELP} color={colors.TEXT_SECONDARY}
color={colors.TEXT_SECONDARY} size={24}
size={24}
/>
</StyledTooltip>
</H2Wrapper>
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}
{/* TOOO: AsyncSelect is lagging when dropdown menu must show more than 200 items */}
{/* TODO: Input's box-shadow */}
<AsyncSelectWrapper>
<AsyncSelect
isSearchable
defaultOptions
value={null}
isMulti={false}
placeholder="Search for the token"
loadingMessage={() => '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}
/> />
</AsyncSelectWrapper> </StyledTooltip>
</H2Wrapper>
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}
<AddedTokensWrapper> {/* TOOO: AsyncSelect is lagging when dropdown menu must show more than 200 items */}
{tokens.map(token => ( {/* TODO: Input's box-shadow */}
<AddedToken <AsyncSelectWrapper>
key={token.symbol} <AsyncSelect
token={token} isSearchable
pending={pending} defaultOptions
removeToken={props.removeToken} value={null}
/> isMulti={false}
))} placeholder="Search for the token"
</AddedTokensWrapper> loadingMessage={() => 'Loading...'}
</Content> noOptionsMessage={() => 'Token not found'}
</SelectedAccount> 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}
/>
</AsyncSelectWrapper>
<AddedTokensWrapper>
{tokens.map(token => (
<AddedToken
key={token.symbol}
token={token}
pending={pending}
removeToken={props.removeToken}
/>
))}
</AddedTokensWrapper>
</Content>
); );
}; };