|
|
|
@ -4,21 +4,31 @@ import React, { PureComponent } from 'react' |
|
|
|
import { translate } from 'react-i18next' |
|
|
|
import styled from 'styled-components' |
|
|
|
|
|
|
|
import noop from 'lodash/noop' |
|
|
|
|
|
|
|
import type { Account } from '@ledgerhq/wallet-common/lib/types' |
|
|
|
import type { T } from 'types/common' |
|
|
|
|
|
|
|
import { rgba } from 'styles/helpers' |
|
|
|
|
|
|
|
import Box from 'components/base/Box' |
|
|
|
import CopyToClipboard from 'components/base/CopyToClipboard' |
|
|
|
import Print from 'components/base/Print' |
|
|
|
import QRCode from 'components/base/QRCode' |
|
|
|
|
|
|
|
import IconCheck from 'icons/Check' |
|
|
|
import IconCopy from 'icons/Copy' |
|
|
|
import IconInfoCircle from 'icons/InfoCircle' |
|
|
|
import IconPrint from 'icons/Print' |
|
|
|
import IconShare from 'icons/Share' |
|
|
|
import IconShield from 'icons/Shield' |
|
|
|
|
|
|
|
const Container = styled(Box).attrs({ |
|
|
|
borderRadius: 1, |
|
|
|
alignItems: 'center', |
|
|
|
bg: p => (p.withQRCode ? 'lightGrey' : 'transparent'), |
|
|
|
p: 5, |
|
|
|
py: 5, |
|
|
|
px: 7, |
|
|
|
})`` |
|
|
|
|
|
|
|
const WrapperAddress = styled(Box).attrs({ |
|
|
|
@ -29,6 +39,7 @@ const WrapperAddress = styled(Box).attrs({ |
|
|
|
})` |
|
|
|
background: ${p => (p.notValid ? rgba(p.theme.colors.alertRed, 0.05) : 'transparent')}; |
|
|
|
border: ${p => (p.notValid ? `1px dashed ${rgba(p.theme.colors.alertRed, 0.26)}` : 'none')}; |
|
|
|
width: 100%; |
|
|
|
` |
|
|
|
|
|
|
|
const Address = styled(Box).attrs({ |
|
|
|
@ -55,29 +66,91 @@ const Label = styled(Box).attrs({ |
|
|
|
horizontal: true, |
|
|
|
})`` |
|
|
|
|
|
|
|
const Footer = styled(Box).attrs({ |
|
|
|
horizontal: true, |
|
|
|
mt: 5, |
|
|
|
})` |
|
|
|
text-transform: uppercase; |
|
|
|
width: 100%; |
|
|
|
` |
|
|
|
|
|
|
|
const FooterButtonWrapper = styled(Box).attrs({ |
|
|
|
color: 'grey', |
|
|
|
alignItems: 'center', |
|
|
|
justifyContent: 'center', |
|
|
|
grow: true, |
|
|
|
})` |
|
|
|
cursor: pointer; |
|
|
|
` |
|
|
|
|
|
|
|
const FooterButton = ({ |
|
|
|
icon, |
|
|
|
label, |
|
|
|
onClick, |
|
|
|
}: { |
|
|
|
icon: any, |
|
|
|
label: string, |
|
|
|
onClick: Function, |
|
|
|
}) => ( |
|
|
|
<FooterButtonWrapper onClick={onClick}> |
|
|
|
{icon} |
|
|
|
<Box fontSize={3} ff="Museo Sans|Bold" mt={1}> |
|
|
|
{label} |
|
|
|
</Box> |
|
|
|
</FooterButtonWrapper> |
|
|
|
) |
|
|
|
|
|
|
|
type Props = { |
|
|
|
account: Account, |
|
|
|
addressVerified: null | boolean, |
|
|
|
amount: null | string, |
|
|
|
onCopy: Function, |
|
|
|
onPrint: Function, |
|
|
|
onShare: Function, |
|
|
|
onVerify: Function, |
|
|
|
t: T, |
|
|
|
withBadge: boolean, |
|
|
|
withFooter: boolean, |
|
|
|
withQRCode: boolean, |
|
|
|
withVerify: boolean, |
|
|
|
} |
|
|
|
|
|
|
|
class CurrentAddress extends PureComponent<Props> { |
|
|
|
static defaultProps = { |
|
|
|
addressVerified: null, |
|
|
|
amount: null, |
|
|
|
onCopy: noop, |
|
|
|
onPrint: noop, |
|
|
|
onShare: noop, |
|
|
|
onVerify: noop, |
|
|
|
withBadge: false, |
|
|
|
withFooter: false, |
|
|
|
withQRCode: false, |
|
|
|
withVerify: false, |
|
|
|
} |
|
|
|
|
|
|
|
render() { |
|
|
|
const { amount, account, t, addressVerified, withQRCode } = this.props |
|
|
|
const { |
|
|
|
account, |
|
|
|
addressVerified, |
|
|
|
amount, |
|
|
|
onCopy, |
|
|
|
onPrint, |
|
|
|
onShare, |
|
|
|
onVerify, |
|
|
|
t, |
|
|
|
withBadge, |
|
|
|
withFooter, |
|
|
|
withQRCode, |
|
|
|
withVerify, |
|
|
|
...props |
|
|
|
} = this.props |
|
|
|
|
|
|
|
const notValid = addressVerified === false |
|
|
|
|
|
|
|
return ( |
|
|
|
<Container withQRCode={withQRCode} notValid={notValid}> |
|
|
|
<WrapperAddress notValid={notValid}> |
|
|
|
<Container withQRCode={withQRCode} notValid={notValid} {...props}> |
|
|
|
<WrapperAddress notValid={notValid} grow> |
|
|
|
{withQRCode && ( |
|
|
|
<Box mb={4}> |
|
|
|
<QRCode |
|
|
|
@ -94,6 +167,41 @@ class CurrentAddress extends PureComponent<Props> { |
|
|
|
{account.address} |
|
|
|
</Address> |
|
|
|
</WrapperAddress> |
|
|
|
{withBadge && ( |
|
|
|
<Box horizontal flow={2} mt={2} alignItems="center"> |
|
|
|
<Box color={notValid ? 'alertRed' : 'wallet'}> |
|
|
|
<IconShield height={32} width={28} /> |
|
|
|
</Box> |
|
|
|
<Box shrink fontSize={12} color={notValid ? 'alertRed' : 'dark'} ff="Open Sans"> |
|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit velit egestas leo |
|
|
|
tincidunt |
|
|
|
</Box> |
|
|
|
</Box> |
|
|
|
)} |
|
|
|
{withFooter && ( |
|
|
|
<Footer> |
|
|
|
{withVerify && ( |
|
|
|
<FooterButton icon={<IconCheck size={16} />} label="Verify" onClick={onVerify} /> |
|
|
|
)} |
|
|
|
<CopyToClipboard |
|
|
|
data={account.address} |
|
|
|
render={copy => ( |
|
|
|
<FooterButton icon={<IconCopy size={16} />} label="Copy" onClick={copy} /> |
|
|
|
)} |
|
|
|
/> |
|
|
|
<Print |
|
|
|
data={{ account, amount }} |
|
|
|
render={(print, isLoading) => ( |
|
|
|
<FooterButton |
|
|
|
icon={<IconPrint size={16} />} |
|
|
|
label={isLoading ? '...' : 'Print'} |
|
|
|
onClick={print} |
|
|
|
/> |
|
|
|
)} |
|
|
|
/> |
|
|
|
<FooterButton icon={<IconShare size={16} />} label="Share" onClick={onShare} /> |
|
|
|
</Footer> |
|
|
|
)} |
|
|
|
</Container> |
|
|
|
) |
|
|
|
} |
|
|
|
|
Loëck Vézien
7 years ago