1
0
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:
Szymon Lesisz 2018-12-05 10:58:54 +01:00
parent 076bba4ba3
commit ebce4562df
2 changed files with 112 additions and 116 deletions

View File

@ -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>
); );
}; };

View File

@ -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>
); );
}; };