mirror of https://github.com/trezor/trezor-wallet
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
202 lines
7.6 KiB
202 lines
7.6 KiB
/* @flow */
|
|
import React from 'react';
|
|
import { QRCode } from 'react-qr-svg';
|
|
import styled from 'styled-components';
|
|
import { FormattedMessage } from 'react-intl';
|
|
import { Button, Icon, Tooltip, Input, colors, icons as ICONS } from 'trezor-ui-components';
|
|
import Title from 'views/Wallet/components/Title';
|
|
import DeviceIcon from 'components/images/DeviceIcon';
|
|
import Content from 'views/Wallet/components/Content';
|
|
import { CONTEXT_DEVICE } from 'actions/constants/modal';
|
|
import l10nCommonMessages from 'views/common.messages';
|
|
import VerifyAddressTooltip from '../components/VerifyAddressTooltip';
|
|
import l10nMessages from './index.messages';
|
|
import l10nReceiveMessages from '../common.messages';
|
|
|
|
import type { Props } from './Container';
|
|
|
|
const Label = styled.div`
|
|
padding-bottom: 10px;
|
|
color: ${colors.TEXT_SECONDARY};
|
|
`;
|
|
|
|
const AddressWrapper = styled.div`
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
`;
|
|
|
|
const StyledQRCode = styled(QRCode)`
|
|
padding: 15px;
|
|
margin-top: 0 25px;
|
|
border: 1px solid ${colors.BODY};
|
|
`;
|
|
|
|
const ShowAddressButton = styled(Button)`
|
|
white-space: nowrap;
|
|
display: flex;
|
|
height: 40px;
|
|
align-items: center;
|
|
align-self: flex-end;
|
|
justify-content: center;
|
|
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
|
|
@media screen and (max-width: 795px) {
|
|
margin-top: 10px;
|
|
align-self: auto;
|
|
border-radius: 3px;
|
|
}
|
|
`;
|
|
|
|
const EyeButton = styled(Button)`
|
|
z-index: 10001;
|
|
padding: 0;
|
|
top: 10px;
|
|
position: absolute;
|
|
right: 10px;
|
|
|
|
&:hover {
|
|
background: transparent;
|
|
}
|
|
`;
|
|
|
|
const Row = styled.div`
|
|
display: flex;
|
|
width: 100%;
|
|
padding-bottom: 28px;
|
|
|
|
@media screen and (max-width: 795px) {
|
|
flex-direction: column;
|
|
}
|
|
`;
|
|
|
|
const QrWrapper = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
`;
|
|
|
|
const StyledDeviceIcon = styled(DeviceIcon)`
|
|
margin: 0 6px;
|
|
`;
|
|
|
|
const AccountReceive = (props: Props) => {
|
|
const device = props.wallet.selectedDevice;
|
|
const { account, discovery, shouldRender } = props.selectedAccount;
|
|
|
|
if (!device || !account || !discovery || !shouldRender) {
|
|
const { loader, exceptionPage } = props.selectedAccount;
|
|
return <Content loader={loader} exceptionPage={exceptionPage} isLoading />;
|
|
}
|
|
|
|
const { addressVerified, addressUnverified } = props.receive;
|
|
|
|
const isAddressVerifying =
|
|
props.modal.context === CONTEXT_DEVICE &&
|
|
props.modal.windowType === 'ButtonRequest_Address';
|
|
const isAddressHidden =
|
|
!isAddressVerifying && !addressVerified && !addressUnverified && !account.imported;
|
|
|
|
let address = `${account.descriptor.substring(0, 20)}...`;
|
|
if (addressVerified || addressUnverified || isAddressVerifying || account.imported) {
|
|
address = account.descriptor;
|
|
}
|
|
|
|
return (
|
|
<Content>
|
|
<React.Fragment>
|
|
<Title>
|
|
<FormattedMessage {...l10nMessages.TR_RECEIVE_ETHEREUM_OR_TOKENS} />
|
|
</Title>
|
|
<AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>
|
|
<Row>
|
|
<Input
|
|
type="text"
|
|
readOnly
|
|
autoSelect
|
|
topLabel={props.intl.formatMessage(l10nCommonMessages.TR_ADDRESS)}
|
|
value={address}
|
|
isPartiallyHidden={isAddressHidden}
|
|
trezorAction={
|
|
isAddressVerifying ? (
|
|
<React.Fragment>
|
|
<StyledDeviceIcon
|
|
size={16}
|
|
device={device}
|
|
color={colors.WHITE}
|
|
/>
|
|
<FormattedMessage
|
|
{...l10nReceiveMessages.TR_CHECK_ADDRESS_ON_TREZOR}
|
|
/>
|
|
</React.Fragment>
|
|
) : null
|
|
}
|
|
icon={
|
|
(addressVerified || addressUnverified) &&
|
|
!isAddressVerifying && (
|
|
<EyeButton
|
|
isTransparent
|
|
onClick={() => props.showAddress(account.accountPath)}
|
|
>
|
|
<Tooltip
|
|
placement="top"
|
|
content={
|
|
<VerifyAddressTooltip
|
|
isConnected={device.connected}
|
|
isAvailable={device.available}
|
|
addressUnverified={addressUnverified}
|
|
/>
|
|
}
|
|
>
|
|
<Icon
|
|
size={16}
|
|
icon={
|
|
addressUnverified
|
|
? ICONS.EYE_CROSSED
|
|
: ICONS.EYE
|
|
}
|
|
color={
|
|
addressUnverified
|
|
? colors.ERROR_PRIMARY
|
|
: colors.TEXT_PRIMARY
|
|
}
|
|
/>
|
|
</Tooltip>
|
|
</EyeButton>
|
|
)
|
|
}
|
|
/>
|
|
{!(addressVerified || addressUnverified) && !account.imported && (
|
|
<ShowAddressButton
|
|
icon={ICONS.EYE}
|
|
onClick={() => props.showAddress(account.accountPath)}
|
|
isDisabled={device.connected && !discovery.completed}
|
|
>
|
|
<FormattedMessage {...l10nReceiveMessages.TR_SHOW_FULL_ADDRESS} />
|
|
</ShowAddressButton>
|
|
)}
|
|
</Row>
|
|
{(((addressVerified || addressUnverified) && !isAddressVerifying) ||
|
|
account.imported) && (
|
|
<QrWrapper>
|
|
<Label>
|
|
<FormattedMessage {...l10nReceiveMessages.TR_QR_CODE} />
|
|
</Label>
|
|
<StyledQRCode
|
|
bgColor="#FFFFFF"
|
|
fgColor="#000000"
|
|
level="Q"
|
|
style={{ width: 150 }}
|
|
value={account.descriptor}
|
|
/>
|
|
</QrWrapper>
|
|
)}
|
|
</AddressWrapper>
|
|
</React.Fragment>
|
|
</Content>
|
|
);
|
|
};
|
|
|
|
export default AccountReceive;
|