/* @flow */
import React from 'react';
import { QRCode } from 'react-qr-svg';
import styled from 'styled-components';
import { FormattedMessage } from 'react-intl';
import Title from 'views/Wallet/components/Title';
import Button from 'components/Button';
import Icon from 'components/Icon';
import Tooltip from 'components/Tooltip';
import Input from 'components/inputs/Input';
import DeviceIcon from 'components/images/DeviceIcon';
import ICONS from 'config/icons';
import colors from 'config/colors';
import { CONTEXT_DEVICE } from 'actions/constants/modal';
import Content from 'views/Wallet/components/Content';
import VerifyAddressTooltip from '../components/VerifyAddressTooltip';
import l10nMessages from './index.messages';
import l10nCommonMessages 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)`
min-width: 195px;
padding: 0;
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 ShowAddressIcon = styled(Icon)`
margin-right: 7px;
position: relative;
top: 2px;
`;
const EyeButton = styled(Button)`
z-index: 10001;
padding: 0;
width: 30px;
background: transparent;
top: 5px;
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 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 ;
}
const {
addressVerified,
addressUnverified,
} = props.receive;
const isAddressVerifying = props.modal.context === CONTEXT_DEVICE && props.modal.windowType === 'ButtonRequest_Address';
const isAddressHidden = !isAddressVerifying && !addressVerified && !addressUnverified;
let address = `${account.descriptor.substring(0, 20)}...`;
if (addressVerified || addressUnverified || isAddressVerifying) {
address = account.descriptor;
}
return (
) : null}
icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
)}
>
props.showAddress(account.accountPath)}>
)}
/>
{!(addressVerified || addressUnverified) && (
props.showAddress(account.accountPath)} isDisabled={device.connected && !discovery.completed}>
)}
{(addressVerified || addressUnverified) && !isAddressVerifying && (
)}
);
};
export default AccountReceive;