Display address as QR code, and ability to copy to clipboard

src/components/AccountPage.js

@@ -2,6 +2,7 @@
 
 import React, { PureComponent, Fragment } from 'react'
 import { connect } from 'react-redux'
+import styled from 'styled-components'
 
 import type { MapStateToProps } from 'react-redux'
 import type { Account, AccountData } from 'types/common'
@@ -12,6 +13,8 @@ import { getAccountById, getAccountData } from 'reducers/accounts'
 
 import Box, { Card } from 'components/base/Box'
 import Text from 'components/base/Text'
+import QRCode from 'components/base/QRCode'
+import CopyToClipboard from 'components/base/CopyToClipboard'
 
 type Props = {
   account: Account,
@@ -23,6 +26,32 @@ const mapStateToProps: MapStateToProps<*, *, *> = (state, props) => ({
   accountData: getAccountData(state, props.match.params.id),
 })
 
+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({
+  color: 'mouse',
+  fontSize: 0,
+})`
+  font-weight: bold;
+  text-align: center;
+  cursor: pointer;
+  text-transform: uppercase;
+
+  &:hover {
+    color: ${p => p.theme.colors.gray};
+  }
+`
+
 class AccountPage extends PureComponent<Props> {
   render() {
     const { account, accountData } = this.props
@@ -35,11 +64,32 @@ class AccountPage extends PureComponent<Props> {
         {accountData && (
           <Fragment>
             <Box horizontal flow={3}>
-              <Box flex={1}>
+              <Box grow>
                 <Card title="Balance">{format(accountData.balance)}</Card>
               </Box>
-              <Box flex={1}>
-                <Card title="Receive">{accountData.address}</Card>
+
+              <Box style={{ width: 300 }}>
+                <Card title="Receive" flow={3}>
+                  <Box align="center">
+                    <QRCode size={150} data={accountData.address} />
+                  </Box>
+                  <Box align="center" flow={2}>
+                    <Text fontSize={1}>{'Current address'}</Text>
+                    <AddressBox>{accountData.address}</AddressBox>
+                  </Box>
+                  <Box horizontal>
+                    <CopyToClipboard
+                      data={accountData.address}
+                      render={copy => (
+                        <Action flex={1} onClick={copy}>
+                          {'Copy'}
+                        </Action>
+                      )}
+                    />
+                    <Action flex={1}>{'Print'}</Action>
+                    <Action flex={1}>{'Share'}</Action>
+                  </Box>
+                </Card>
               </Box>
             </Box>
             <Card title="Last operations">

src/components/base/CopyToClipboard.js

@@ -0,0 +1,15 @@
+// @flow
+
+import { clipboard } from 'electron'
+
+type Props = {
+  data: string,
+  render: Function,
+}
+
+function CopyToClipboard(props: Props) {
+  const { render, data } = props
+  return render(() => clipboard.writeText(data))
+}
+
+export default CopyToClipboard