arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-02-17 18:42:01 +00:00
Code Issues Releases Wiki Activity

update old components

Browse Source
This commit is contained in:
Szymon Lesisz 2018-09-26 14:12:05 +02:00
parent 25083b5f19
commit 2804275ca9
4 changed files with 217 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/Wallet/index.js
View File

@ -12,13 +12,15 @@ import type { State } from 'flowtype';
import Header from 'components/Header'; import Header from 'components/Header';
import Footer from 'components/Footer'; import Footer from 'components/Footer';
import ModalContainer from 'components/modals'; import ModalContainer from 'components/modals';
import Notifications from 'components/Notification'; import ContextNotifications from 'components/notifications/Context';
import Log from 'components/Log'; import Log from 'components/Log';
import LeftNavigation from './components/LeftNavigation/Container'; import LeftNavigation from './components/LeftNavigation/Container';
import TopNavigationAccount from './components/TopNavigationAccount'; import TopNavigationAccount from './components/TopNavigationAccount';
import TopNavigationDeviceSettings from './components/TopNavigationDeviceSettings'; import TopNavigationDeviceSettings from './components/TopNavigationDeviceSettings';
type WalletContainerProps = { type WalletContainerProps = {
wallet: $ElementType<State, 'wallet'>, wallet: $ElementType<State, 'wallet'>,
children?: React.Node children?: React.Node
@ -89,7 +91,7 @@ const Wallet = (props: WalletContainerProps) => (
<Route path="/device/:device/network/:network/account/:account" component={TopNavigationAccount} /> <Route path="/device/:device/network/:network/account/:account" component={TopNavigationAccount} />
<Route path="/device/:device/device-settings" component={TopNavigationDeviceSettings} /> <Route path="/device/:device/device-settings" component={TopNavigationDeviceSettings} />
</Navigation> </Navigation>
<Notifications /> <ContextNotifications />
<Log /> <Log />
<Body> <Body>
{ props.children } { props.children }

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

@ -154,86 +154,75 @@ const AccountReceive = (props: Props) => {
const isAddressHidden = !isAddressVerifying && !addressVerified && !addressUnverified; const isAddressHidden = !isAddressVerifying && !addressVerified && !addressUnverified;
return ( return (
<SelectedAccount {...props}> <Wrapper>
<Wrapper> <StyledH2>Receive Ethereum or tokens</StyledH2>
<StyledH2>Receive Ethereum or tokens</StyledH2> <AddressWrapper
<AddressWrapper isShowingQrCode={addressVerified || addressUnverified}
isShowingQrCode={addressVerified || addressUnverified} >
> {isAddressVerifying && (
{((addressVerified || addressUnverified) && !isAddressVerifying) && ( <AddressInfoText>Confirm address on TREZOR</AddressInfoText>
<Tooltip )}
placement="bottomRight" {((addressVerified || addressUnverified) && !isAddressVerifying) && (
content={( <Tooltip
<React.Fragment> placement="bottomRight"
{addressUnverified ? ( content={(
<React.Fragment> <React.Fragment>
Unverified address. {addressUnverified ? (
<br /> <React.Fragment>
{device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'} Unverified address.
</React.Fragment> <br />
) : ( {device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'}
<React.Fragment> </React.Fragment>
{device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'} ) : (
</React.Fragment> <React.Fragment>
)} {device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'}
</React.Fragment> </React.Fragment>
)} )}
> </React.Fragment>
<EyeButton )}
isTransparent >
onClick={() => props.showAddress(account.addressPath)} <EyeButton
> isTransparent
<Icon
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
/>
</EyeButton>
</Tooltip>
)}
<ValueWrapper
isHidden={isAddressHidden}
isVerifying={isAddressVerifying}
>{address}
</ValueWrapper>
{isAddressVerifying && (
<React.Fragment>
<ArrowUp />
<AddressInfoText>
<Icon
icon={ICONS.T1}
color={colors.WHITE}
/>
Check address on your Trezor
</AddressInfoText>
</React.Fragment>
)}
{/* {isAddressVerifying && (
<AddressInfoText>{account.network} account #{account.index + 1}</AddressInfoText>
)} */}
{(addressVerified || addressUnverified) && (
<QRCode
bgColor="#FFFFFF"
fgColor="#000000"
level="Q"
style={qrCodeStyle}
value={account.address}
/>
)}
{!(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}
</SelectedAccount> isVerifying={isAddressVerifying}
>{address}
</ValueWrapper>
{isAddressVerifying && (
<AddressInfoText>{account.network} account #{account.index + 1}</AddressInfoText>
)}
{(addressVerified || addressUnverified) && (
<QRCode
bgColor="#FFFFFF"
fgColor="#000000"
level="Q"
style={qrCodeStyle}
value={account.address}
/>
)}
{!(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>
); );
}; };

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

@ -12,7 +12,6 @@ import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
import colors from 'config/colors'; 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 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';
@ -252,157 +251,155 @@ const AccountSend = (props: Props) => {
const isAdvancedSettingsHidden = !advanced; const isAdvancedSettingsHidden = !advanced;
return ( return (
<SelectedAccount {...props}> <Wrapper>
<Wrapper> <StyledH2>Send Ethereum or tokens</StyledH2>
<StyledH2>Send Ethereum or tokens</StyledH2> <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={( topLabel={(
<AmountInputLabelWrapper> <AmountInputLabelWrapper>
<AmountInputLabel>Amount</AmountInputLabel> <AmountInputLabel>Amount</AmountInputLabel>
{(isCurrentCurrencyToken && selectedToken) && ( {(isCurrentCurrencyToken && selectedToken) && (
<AmountInputLabel>You have: {selectedTokenBalance} {selectedToken.symbol}</AmountInputLabel> <AmountInputLabel>You have: {selectedTokenBalance} {selectedToken.symbol}</AmountInputLabel>
)} )}
</AmountInputLabelWrapper> </AmountInputLabelWrapper>
)}
value={amount}
onChange={event => onAmountChange(event.target.value)}
bottomText={errors.amount || warnings.amount || infos.amount}
sideAddons={[
(
<SetMaxAmountButton
key="icon"
onClick={() => onSetMax()}
isActive={setMax}
>
{!setMax && (
<Icon
icon={ICONS.TOP}
size={25}
color={colors.TEXT_SECONDARY}
/>
)}
{setMax && (
<Icon
icon={ICONS.CHECKED}
size={25}
color={colors.WHITE}
/>
)}
Set max
</SetMaxAmountButton>
),
(
<CurrencySelect
key="currency"
isSearchable={false}
isClearable={false}
defaultValue={tokensSelectData[0]}
isDisabled={tokensSelectData.length < 2}
onChange={onCurrencyChange}
options={tokensSelectData}
/>
),
]}
/>
</InputRow>
<InputRow>
<FeeLabelWrapper>
<FeeLabel>Fee</FeeLabel>
{gasPriceNeedsUpdate && (
<UpdateFeeWrapper>
<Icon
icon={ICONS.WARNING}
color={colors.WARNING_PRIMARY}
size={20}
/>
Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
</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> value={amount}
onChange={event => onAmountChange(event.target.value)}
bottomText={errors.amount || warnings.amount || infos.amount}
sideAddons={[
(
<SetMaxAmountButton
key="icon"
onClick={() => onSetMax()}
isActive={setMax}
>
{!setMax && (
<Icon
icon={ICONS.TOP}
size={25}
color={colors.TEXT_SECONDARY}
/>
)}
{setMax && (
<Icon
icon={ICONS.CHECKED}
size={25}
color={colors.WHITE}
/>
)}
Set max
</SetMaxAmountButton>
),
(
<CurrencySelect
key="currency"
isSearchable={false}
isClearable={false}
defaultValue={tokensSelectData[0]}
isDisabled={tokensSelectData.length < 2}
onChange={onCurrencyChange}
options={tokensSelectData}
/>
),
]}
/>
</InputRow>
{advanced && ( <InputRow>
<AdvancedForm {...props}> <FeeLabelWrapper>
<SendButton <FeeLabel>Fee</FeeLabel>
isDisabled={isSendButtonDisabled} {gasPriceNeedsUpdate && (
onClick={() => onSend()} <UpdateFeeWrapper>
> <Icon
{sendButtonText} icon={ICONS.WARNING}
</SendButton> color={colors.WARNING_PRIMARY}
</AdvancedForm> size={20}
)} />
Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
</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>
{props.selectedAccount.pending.length > 0 && ( <ToggleAdvancedSettingsWrapper
<PendingTransactions isAdvancedSettingsHidden={isAdvancedSettingsHidden}
pending={props.selectedAccount.pending} >
tokens={props.selectedAccount.tokens} <ToggleAdvancedSettingsButton
network={network} 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>
)} )}
</Wrapper> </ToggleAdvancedSettingsWrapper>
</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>
); );
}; };

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

@ -11,7 +11,6 @@ import Tooltip from 'components/Tooltip';
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/AccountBalance'; import AccountBalance from './components/AccountBalance';
import AddedToken from './components/AddedToken'; import AddedToken from './components/AddedToken';
@ -65,17 +64,18 @@ const AccountSummary = (props: Props) => {
network, network,
tokens, tokens,
pending, pending,
visible,
} = props.selectedAccount; } = props.selectedAccount;
// flow // flow
if (!device || !account || !network) return <SelectedAccount {...props} />; if (!device || !account || !network || !visible) 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}> <section>
<AccountHeading> <AccountHeading>
<AccountName> <AccountName>
<StyledCoinLogo coinNetwork={account.network} /> <StyledCoinLogo coinNetwork={account.network} />
@ -155,7 +155,7 @@ const AccountSummary = (props: Props) => {
/> />
))} ))}
</AddedTokensWrapper> </AddedTokensWrapper>
</SelectedAccount> </section>
); );
}; };