Add Copy button to dashboard persona information

src/app/Dashboard/DashboardScreen.tsx

@@ -5,7 +5,6 @@ import { Token } from '../state/reducers/tokens'
 import DataVaultSummary from './panels/DataVaultSummary'
 import { screens } from '../Authenticated/components/Navigation'
 import { DataVaultStorageState } from '../state/reducers/datavault'
-import { createDidFormat } from '../../formatters'
 
 interface DashboardScreenInterface {
   chainId?: number | null
@@ -23,9 +22,7 @@ const DashboardScreen: React.FC<DashboardScreenInterface> = ({
 }) => {
   return (
     <div className="content dashboard">
-      <IdentitySummary
-        did={(address && chainId) ? createDidFormat(address, chainId) : undefined}
-      />
+      {address && chainId && <IdentitySummary address={address} chainId={chainId} />}
       <div className="container">
         <div className="column">
           <Balance tokens={tokens} addCustomToken={addCustomToken} />

src/app/Dashboard/panels/IdentitySummary.tsx

@@ -1,33 +1,43 @@
 import React from 'react'
-import LoadingComponent from '../../../components/Loading/LoadingComponent'
+import CopyButton from '../../../components/CopyButton/CopyButton'
 import Panel from '../../../components/Panel/Panel'
 import ToolTip from '../../../components/Tooltip/Tooltip'
-import { truncateAddressDid } from '../../../formatters'
+import { createDidFormat, truncateAddressDid } from '../../../formatters'
 
 interface IdentityInformationPanelI {
-  did?: string
+  address: string
+  chainId: number
 }
 
-const IdentityInformationPanel: React.FC<IdentityInformationPanelI> = ({ did }) =>
-  !did ? <LoadingComponent />
-    : (
-      <div className="container">
-        <div className="column">
-          <Panel
-            title="Persona information"
-            className="identity-information"
-          >
-            <div className="container">
-              <div className="column">
-                <h2>Persona Address</h2>
-                <p className="value">
-                  <ToolTip hoverContent={did}>{truncateAddressDid(did)}</ToolTip>
-                </p>
-              </div>
+const IdentityInformationPanel: React.FC<IdentityInformationPanelI> = ({ address, chainId }) => {
+  const did = createDidFormat(address, chainId)
+  return (
+    <div className="container">
+      <div className="column">
+        <Panel
+          title="Persona information"
+          className="identity-information"
+        >
+          <div className="container">
+            <div className="column">
+              <h2>Persona DID</h2>
+              <p className="value">
+                <ToolTip hoverContent={did}>{truncateAddressDid(did)}</ToolTip>
+                <CopyButton value={did} />
+              </p>
             </div>
-          </Panel>
-        </div>
+            <div className="column">
+              <h2>Persona Address</h2>
+              <p className="value">
+                {address}
+                <CopyButton value={address} />
+              </p>
+            </div>
+          </div>
+        </Panel>
       </div>
-    )
+    </div>
+  )
+}
 
 export default IdentityInformationPanel

src/components/CopyButton/CopyButton.tsx

@@ -0,0 +1,38 @@
+import React, { useRef, useState } from 'react'
+import CopyIcon from '../../assets/images/icons/copy.svg'
+
+interface CopyButtonInterface {
+  value: string
+}
+
+const CopyButton: React.FC<CopyButtonInterface> = ({ value }) => {
+  const [showResponse, setShowResponse] = useState<boolean>(false)
+  const copyTextField = useRef<HTMLInputElement>(null)
+
+  const handleClick = () => {
+    setShowResponse(true)
+    copyTextField.current && copyTextField.current.select()
+    document.execCommand('copy')
+    setTimeout(() => {
+      setShowResponse(false)
+    }, 1000)
+  }
+
+  return (
+    <span className="copyButton">
+      <button type="button" onClick={handleClick} className="icon">
+        <img src={CopyIcon} alt="Copy text" />
+      </button>
+      {showResponse && <span className="response">Copied to clipboard.</span>}
+      <input
+        type="text"
+        className="copyText"
+        defaultValue={value}
+        ref={copyTextField}
+        style={{ position: 'absolute', left: '-10000px' }}
+      />
+    </span>
+  )
+}
+
+export default CopyButton