Feature/copy to clipboard

wallet-web/components/CopyToClipboard.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import { Button } from '@material-ui/core'
+import { Check } from '@material-ui/icons'
+import { green } from '@material-ui/core/colors'
+
+const copy = (text: string): Promise<{ success: boolean; value: string }> => {
+  return new Promise((resolve, reject) => {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => resolve({ success: true, value: text }))
+      .catch((e) => reject({ success: false, value: 'Failed to copy: ' + e }))
+  })
+}
+
+export const CopyToClipboard = ({ text }) => {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    setCopied(false)
+    const res = await copy(text)
+
+    if (res.success) {
+      setCopied(true)
+    } else {
+      console.log(res.value)
+    }
+  }
+
+  return (
+    <Button
+      size="small"
+      variant="outlined"
+      aria-label="save"
+      onClick={handleCopy}
+      endIcon={copied && <Check style={{ color: green[500] }} />}
+    >
+      {copied ? 'Copied' : 'Copy'}
+    </Button>
+  )
+}

wallet-web/pages/receive.tsx

@@ -1,14 +1,9 @@
 import { useMediaQuery } from '@material-ui/core'
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  Grid,
-  Typography,
-} from '@material-ui/core'
+import { Card, CardContent, Grid, Typography } from '@material-ui/core'
 import React from 'react'
 import { useContext } from 'react'
 import { Layout, NymCard } from '../components'
+import { CopyToClipboard } from '../components/CopyToClipboard'
 import MainNav from '../components/MainNav'
 import NoClientError from '../components/NoClientError'
 import { ValidatorClientContext } from '../contexts/ValidatorClient'
@@ -34,12 +29,22 @@ const Receive = () => {
               <Grid item>
                 <Card>
                   <CardContent>
-                    <Typography
-                      variant={matches ? 'h5' : 'subtitle1'}
-                      style={{ wordBreak: 'break-word' }}
+                    <div
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        flexWrap: 'wrap',
+                      }}
                     >
-                      {client?.address}
-                    </Typography>
+                      <Typography
+                        variant={matches ? 'h5' : 'subtitle1'}
+                        style={{ wordBreak: 'break-word' }}
+                      >
+                        {client?.address}
+                      </Typography>
+
+                      <CopyToClipboard text={client?.address} />
+                    </div>
                   </CardContent>
                 </Card>
               </Grid>