mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-26 00:48:35 +00:00
add Tittle to receive component
This commit is contained in:
parent
076bba4ba3
commit
ebce4562df
@ -4,7 +4,7 @@ import { QRCode } from 'react-qr-svg';
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import media from 'styled-media-query';
|
import media from 'styled-media-query';
|
||||||
|
|
||||||
import { H2 } from 'components/Heading';
|
import Title from 'views/Wallet/components/Title';
|
||||||
import Button from 'components/Button';
|
import Button from 'components/Button';
|
||||||
import Icon from 'components/Icon';
|
import Icon from 'components/Icon';
|
||||||
import Tooltip from 'components/Tooltip';
|
import Tooltip from 'components/Tooltip';
|
||||||
@ -113,66 +113,64 @@ const AccountReceive = (props: Props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Content>
|
<Content>
|
||||||
<React.Fragment>
|
<Title>Receive Ethereum or tokens</Title>
|
||||||
<H2>Receive Ethereum or tokens</H2>
|
<AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>
|
||||||
<AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>
|
<Label>Address</Label>
|
||||||
<Label>Address</Label>
|
<Row>
|
||||||
<Row>
|
<Input
|
||||||
<Input
|
type="text"
|
||||||
type="text"
|
readOnly
|
||||||
readOnly
|
autoSelect
|
||||||
autoSelect
|
value={address}
|
||||||
value={address}
|
isPartiallyHidden={isAddressHidden}
|
||||||
isPartiallyHidden={isAddressHidden}
|
trezorAction={isAddressVerifying ? (
|
||||||
trezorAction={isAddressVerifying ? (
|
<React.Fragment>
|
||||||
<React.Fragment>
|
<Icon
|
||||||
<Icon
|
icon={ICONS.T1}
|
||||||
icon={ICONS.T1}
|
color={colors.WHITE}
|
||||||
color={colors.WHITE}
|
/>
|
||||||
|
Check address on your Trezor
|
||||||
|
</React.Fragment>
|
||||||
|
) : null}
|
||||||
|
icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
|
||||||
|
<Tooltip
|
||||||
|
placement="left"
|
||||||
|
content={(
|
||||||
|
<VerifyAddressTooltip
|
||||||
|
isConnected={device.connected}
|
||||||
|
isAvailable={device.available}
|
||||||
|
addressUnverified={addressUnverified}
|
||||||
/>
|
/>
|
||||||
Check address on your Trezor
|
)}
|
||||||
</React.Fragment>
|
>
|
||||||
) : null}
|
<EyeButton onClick={() => props.showAddress(account.addressPath)}>
|
||||||
icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
|
<Icon
|
||||||
<Tooltip
|
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
|
||||||
placement="left"
|
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
|
||||||
content={(
|
/>
|
||||||
<VerifyAddressTooltip
|
</EyeButton>
|
||||||
isConnected={device.connected}
|
</Tooltip>
|
||||||
isAvailable={device.available}
|
|
||||||
addressUnverified={addressUnverified}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<EyeButton onClick={() => props.showAddress(account.addressPath)}>
|
|
||||||
<Icon
|
|
||||||
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
|
|
||||||
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
|
|
||||||
/>
|
|
||||||
</EyeButton>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{!(addressVerified || addressUnverified) && (
|
|
||||||
<ShowAddressButton onClick={() => props.showAddress(account.addressPath)} isDisabled={device.connected && !discovery.completed}>
|
|
||||||
<ShowAddressIcon icon={ICONS.EYE} color={colors.WHITE} />Show full address
|
|
||||||
</ShowAddressButton>
|
|
||||||
)}
|
)}
|
||||||
</Row>
|
/>
|
||||||
{(addressVerified || addressUnverified) && !isAddressVerifying && (
|
{!(addressVerified || addressUnverified) && (
|
||||||
<QrWrapper>
|
<ShowAddressButton onClick={() => props.showAddress(account.addressPath)} isDisabled={device.connected && !discovery.completed}>
|
||||||
<Label>QR code</Label>
|
<ShowAddressIcon icon={ICONS.EYE} color={colors.WHITE} />Show full address
|
||||||
<StyledQRCode
|
</ShowAddressButton>
|
||||||
bgColor="#FFFFFF"
|
|
||||||
fgColor="#000000"
|
|
||||||
level="Q"
|
|
||||||
style={{ width: 150 }}
|
|
||||||
value={account.address}
|
|
||||||
/>
|
|
||||||
</QrWrapper>
|
|
||||||
)}
|
)}
|
||||||
</AddressWrapper>
|
</Row>
|
||||||
</React.Fragment>
|
{(addressVerified || addressUnverified) && !isAddressVerifying && (
|
||||||
|
<QrWrapper>
|
||||||
|
<Label>QR code</Label>
|
||||||
|
<StyledQRCode
|
||||||
|
bgColor="#FFFFFF"
|
||||||
|
fgColor="#000000"
|
||||||
|
level="Q"
|
||||||
|
style={{ width: 150 }}
|
||||||
|
value={account.address}
|
||||||
|
/>
|
||||||
|
</QrWrapper>
|
||||||
|
)}
|
||||||
|
</AddressWrapper>
|
||||||
</Content>
|
</Content>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -4,7 +4,7 @@ import { QRCode } from 'react-qr-svg';
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import media from 'styled-media-query';
|
import media from 'styled-media-query';
|
||||||
|
|
||||||
import { H2 } from 'components/Heading';
|
import Title from 'views/Wallet/components/Title';
|
||||||
import Button from 'components/Button';
|
import Button from 'components/Button';
|
||||||
import Icon from 'components/Icon';
|
import Icon from 'components/Icon';
|
||||||
import Tooltip from 'components/Tooltip';
|
import Tooltip from 'components/Tooltip';
|
||||||
@ -113,66 +113,64 @@ const AccountReceive = (props: Props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Content>
|
<Content>
|
||||||
<React.Fragment>
|
<Title>Receive Ripple</Title>
|
||||||
<H2>Receive Ripple</H2>
|
<AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>
|
||||||
<AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>
|
<Label>Address</Label>
|
||||||
<Label>Address</Label>
|
<Row>
|
||||||
<Row>
|
<Input
|
||||||
<Input
|
type="text"
|
||||||
type="text"
|
readOnly
|
||||||
readOnly
|
autoSelect
|
||||||
autoSelect
|
value={address}
|
||||||
value={address}
|
isPartiallyHidden={isAddressHidden}
|
||||||
isPartiallyHidden={isAddressHidden}
|
trezorAction={isAddressVerifying ? (
|
||||||
trezorAction={isAddressVerifying ? (
|
<React.Fragment>
|
||||||
<React.Fragment>
|
<Icon
|
||||||
<Icon
|
icon={ICONS.T1}
|
||||||
icon={ICONS.T1}
|
color={colors.WHITE}
|
||||||
color={colors.WHITE}
|
/>
|
||||||
|
Check address on your Trezor
|
||||||
|
</React.Fragment>
|
||||||
|
) : null}
|
||||||
|
icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
|
||||||
|
<Tooltip
|
||||||
|
placement="left"
|
||||||
|
content={(
|
||||||
|
<VerifyAddressTooltip
|
||||||
|
isConnected={device.connected}
|
||||||
|
isAvailable={device.available}
|
||||||
|
addressUnverified={addressUnverified}
|
||||||
/>
|
/>
|
||||||
Check address on your Trezor
|
)}
|
||||||
</React.Fragment>
|
>
|
||||||
) : null}
|
<EyeButton onClick={() => props.showAddress(account.addressPath)}>
|
||||||
icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
|
<Icon
|
||||||
<Tooltip
|
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
|
||||||
placement="left"
|
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
|
||||||
content={(
|
/>
|
||||||
<VerifyAddressTooltip
|
</EyeButton>
|
||||||
isConnected={device.connected}
|
</Tooltip>
|
||||||
isAvailable={device.available}
|
|
||||||
addressUnverified={addressUnverified}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<EyeButton onClick={() => props.showAddress(account.addressPath)}>
|
|
||||||
<Icon
|
|
||||||
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
|
|
||||||
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
|
|
||||||
/>
|
|
||||||
</EyeButton>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{!(addressVerified || addressUnverified) && (
|
|
||||||
<ShowAddressButton onClick={() => props.showAddress(account.addressPath)} isDisabled={device.connected && !discovery.completed}>
|
|
||||||
<ShowAddressIcon icon={ICONS.EYE} color={colors.WHITE} />Show full address
|
|
||||||
</ShowAddressButton>
|
|
||||||
)}
|
)}
|
||||||
</Row>
|
/>
|
||||||
{(addressVerified || addressUnverified) && !isAddressVerifying && (
|
{!(addressVerified || addressUnverified) && (
|
||||||
<QrWrapper>
|
<ShowAddressButton onClick={() => props.showAddress(account.addressPath)} isDisabled={device.connected && !discovery.completed}>
|
||||||
<Label>QR code</Label>
|
<ShowAddressIcon icon={ICONS.EYE} color={colors.WHITE} />Show full address
|
||||||
<StyledQRCode
|
</ShowAddressButton>
|
||||||
bgColor="#FFFFFF"
|
|
||||||
fgColor="#000000"
|
|
||||||
level="Q"
|
|
||||||
style={{ width: 150 }}
|
|
||||||
value={account.address}
|
|
||||||
/>
|
|
||||||
</QrWrapper>
|
|
||||||
)}
|
)}
|
||||||
</AddressWrapper>
|
</Row>
|
||||||
</React.Fragment>
|
{(addressVerified || addressUnverified) && !isAddressVerifying && (
|
||||||
|
<QrWrapper>
|
||||||
|
<Label>QR code</Label>
|
||||||
|
<StyledQRCode
|
||||||
|
bgColor="#FFFFFF"
|
||||||
|
fgColor="#000000"
|
||||||
|
level="Q"
|
||||||
|
style={{ width: 150 }}
|
||||||
|
value={account.address}
|
||||||
|
/>
|
||||||
|
</QrWrapper>
|
||||||
|
)}
|
||||||
|
</AddressWrapper>
|
||||||
</Content>
|
</Content>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user