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.
75 lines
1.5 KiB
75 lines
1.5 KiB
// @flow
|
|
|
|
import React from 'react'
|
|
import styled from 'styled-components'
|
|
|
|
import Box from 'components/base/Box'
|
|
import QRCode from 'components/base/QRCode'
|
|
import Icon from 'components/base/Icon'
|
|
import CopyToClipboard from 'components/base/CopyToClipboard'
|
|
import Text from 'components/base/Text'
|
|
|
|
type Props = {
|
|
address: string,
|
|
}
|
|
|
|
const AddressBox = styled(Box).attrs({
|
|
borderWidth: 1,
|
|
borderColor: 'mouse',
|
|
bg: 'cream',
|
|
p: 2,
|
|
})`
|
|
text-align: center;
|
|
word-break: break-all;
|
|
border-radius: 3px;
|
|
user-select: text;
|
|
`
|
|
|
|
const Action = styled(Box).attrs({
|
|
flow: 1,
|
|
flex: 1,
|
|
color: 'mouse',
|
|
fontSize: 0,
|
|
})`
|
|
font-weight: bold;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
text-transform: uppercase;
|
|
|
|
&:hover {
|
|
color: ${p => p.theme.colors.grey};
|
|
}
|
|
`
|
|
|
|
const ReceiveBox = ({ address }: Props) => (
|
|
<Box flow={3}>
|
|
<Box align="center">
|
|
<QRCode size={150} data={address} />
|
|
</Box>
|
|
<Box align="center" flow={2}>
|
|
<Text fontSize={1}>{'Current address'}</Text>
|
|
<AddressBox>{address}</AddressBox>
|
|
</Box>
|
|
<Box horizontal>
|
|
<CopyToClipboard
|
|
data={address}
|
|
render={copy => (
|
|
<Action onClick={copy}>
|
|
<Icon name="clone" />
|
|
<span>{'Copy'}</span>
|
|
</Action>
|
|
)}
|
|
/>
|
|
<Action>
|
|
<Icon name="print" />
|
|
<span>{'Print'}</span>
|
|
</Action>
|
|
<Action>
|
|
<Icon name="share-square-o" />
|
|
<span>{'Share'}</span>
|
|
</Action>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
|
|
export default ReceiveBox
|
|
|