mirror of
https://github.com/trezor/trezor-wallet
synced 2024-11-24 09:18:09 +00:00
update old components
This commit is contained in:
Szymon Lesisz
parent
25083b5f19
commit
2804275ca9
@ -12,13 +12,15 @@ import type { State } from 'flowtype';
|
||||
import Header from 'components/Header';
|
||||
import Footer from 'components/Footer';
|
||||
import ModalContainer from 'components/modals';
|
||||
import Notifications from 'components/Notification';
|
||||
import ContextNotifications from 'components/notifications/Context';
|
||||
|
||||
import Log from 'components/Log';
|
||||
|
||||
import LeftNavigation from './components/LeftNavigation/Container';
|
||||
import TopNavigationAccount from './components/TopNavigationAccount';
|
||||
import TopNavigationDeviceSettings from './components/TopNavigationDeviceSettings';
|
||||
|
||||
|
||||
type WalletContainerProps = {
|
||||
wallet: $ElementType<State, 'wallet'>,
|
||||
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/device-settings" component={TopNavigationDeviceSettings} />
|
||||
</Navigation>
|
||||
<Notifications />
|
||||
<ContextNotifications />
|
||||
<Log />
|
||||
<Body>
|
||||
{ props.children }
|
||||
|
||||
@ -154,86 +154,75 @@ const AccountReceive = (props: Props) => {
|
||||
const isAddressHidden = !isAddressVerifying && !addressVerified && !addressUnverified;
|
||||
|
||||
return (
|
||||
<SelectedAccount {...props}>
|
||||
<Wrapper>
|
||||
<StyledH2>Receive Ethereum or tokens</StyledH2>
|
||||
<AddressWrapper
|
||||
isShowingQrCode={addressVerified || addressUnverified}
|
||||
>
|
||||
{((addressVerified || addressUnverified) && !isAddressVerifying) && (
|
||||
<Tooltip
|
||||
placement="bottomRight"
|
||||
content={(
|
||||
<React.Fragment>
|
||||
{addressUnverified ? (
|
||||
<React.Fragment>
|
||||
Unverified address.
|
||||
<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>
|
||||
)}
|
||||
>
|
||||
<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}
|
||||
</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
|
||||
<Wrapper>
|
||||
<StyledH2>Receive Ethereum or tokens</StyledH2>
|
||||
<AddressWrapper
|
||||
isShowingQrCode={addressVerified || addressUnverified}
|
||||
>
|
||||
{isAddressVerifying && (
|
||||
<AddressInfoText>Confirm address on TREZOR</AddressInfoText>
|
||||
)}
|
||||
{((addressVerified || addressUnverified) && !isAddressVerifying) && (
|
||||
<Tooltip
|
||||
placement="bottomRight"
|
||||
content={(
|
||||
<React.Fragment>
|
||||
{addressUnverified ? (
|
||||
<React.Fragment>
|
||||
Unverified address.
|
||||
<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>
|
||||
)}
|
||||
>
|
||||
<EyeButton
|
||||
isTransparent
|
||||
onClick={() => props.showAddress(account.addressPath)}
|
||||
isDisabled={device.connected && !discovery.completed}
|
||||
>
|
||||
<ShowAddressIcon
|
||||
icon={ICONS.EYE}
|
||||
color={colors.WHITE}
|
||||
<Icon
|
||||
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
|
||||
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
|
||||
/>
|
||||
Show full address
|
||||
</ShowAddressButton>
|
||||
)}
|
||||
</AddressWrapper>
|
||||
</Wrapper>
|
||||
</SelectedAccount>
|
||||
</EyeButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
<ValueWrapper
|
||||
isHidden={isAddressHidden}
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -12,7 +12,6 @@ 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 SelectedAccount from 'views/Wallet/components/SelectedAccount';
|
||||
import type { Token } from 'flowtype';
|
||||
import AdvancedForm from './components/AdvancedForm';
|
||||
import PendingTransactions from './components/PendingTransactions';
|
||||
@ -252,157 +251,155 @@ const AccountSend = (props: Props) => {
|
||||
const isAdvancedSettingsHidden = !advanced;
|
||||
|
||||
return (
|
||||
<SelectedAccount {...props}>
|
||||
<Wrapper>
|
||||
<StyledH2>Send Ethereum or tokens</StyledH2>
|
||||
<InputRow>
|
||||
<Input
|
||||
state={getAddressInputState(address, errors.address, warnings.address)}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck="false"
|
||||
topLabel="Address"
|
||||
bottomText={errors.address || warnings.address || infos.address}
|
||||
value={address}
|
||||
onChange={event => onAddressChange(event.target.value)}
|
||||
/>
|
||||
</InputRow>
|
||||
<Wrapper>
|
||||
<StyledH2>Send Ethereum or tokens</StyledH2>
|
||||
<InputRow>
|
||||
<Input
|
||||
state={getAddressInputState(address, errors.address, warnings.address)}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck="false"
|
||||
topLabel="Address"
|
||||
bottomText={errors.address || warnings.address || infos.address}
|
||||
value={address}
|
||||
onChange={event => onAddressChange(event.target.value)}
|
||||
/>
|
||||
</InputRow>
|
||||
|
||||
<InputRow>
|
||||
<Input
|
||||
state={getAmountInputState(errors.amount, warnings.amount)}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck="false"
|
||||
topLabel={(
|
||||
<AmountInputLabelWrapper>
|
||||
<AmountInputLabel>Amount</AmountInputLabel>
|
||||
{(isCurrentCurrencyToken && selectedToken) && (
|
||||
<AmountInputLabel>You have: {selectedTokenBalance} {selectedToken.symbol}</AmountInputLabel>
|
||||
)}
|
||||
</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>
|
||||
<InputRow>
|
||||
<Input
|
||||
state={getAmountInputState(errors.amount, warnings.amount)}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck="false"
|
||||
topLabel={(
|
||||
<AmountInputLabelWrapper>
|
||||
<AmountInputLabel>Amount</AmountInputLabel>
|
||||
{(isCurrentCurrencyToken && selectedToken) && (
|
||||
<AmountInputLabel>You have: {selectedTokenBalance} {selectedToken.symbol}</AmountInputLabel>
|
||||
)}
|
||||
</AmountInputLabelWrapper>
|
||||
)}
|
||||
</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 && (
|
||||
<AdvancedForm {...props}>
|
||||
<SendButton
|
||||
isDisabled={isSendButtonDisabled}
|
||||
onClick={() => onSend()}
|
||||
>
|
||||
{sendButtonText}
|
||||
</SendButton>
|
||||
</AdvancedForm>
|
||||
)}
|
||||
<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>
|
||||
|
||||
{props.selectedAccount.pending.length > 0 && (
|
||||
<PendingTransactions
|
||||
pending={props.selectedAccount.pending}
|
||||
tokens={props.selectedAccount.tokens}
|
||||
network={network}
|
||||
<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>
|
||||
)}
|
||||
</Wrapper>
|
||||
</SelectedAccount>
|
||||
</ToggleAdvancedSettingsWrapper>
|
||||
|
||||
{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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -11,7 +11,6 @@ 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';
|
||||
@ -65,17 +64,18 @@ const AccountSummary = (props: Props) => {
|
||||
network,
|
||||
tokens,
|
||||
pending,
|
||||
visible,
|
||||
} = props.selectedAccount;
|
||||
|
||||
// flow
|
||||
if (!device || !account || !network) return <SelectedAccount {...props} />;
|
||||
if (!device || !account || !network || !visible) 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 (
|
||||
<SelectedAccount {...props}>
|
||||
<section>
|
||||
<AccountHeading>
|
||||
<AccountName>
|
||||
<StyledCoinLogo coinNetwork={account.network} />
|
||||
@ -155,7 +155,7 @@ const AccountSummary = (props: Props) => {
|
||||
/>
|
||||
))}
|
||||
</AddedTokensWrapper>
|
||||
</SelectedAccount>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user