Add ability to copy account address

wallets/react-wallet-v2/package.json

@@ -16,18 +16,18 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-qr-reader-es6": "2.2.1-2",
-    "framer-motion": "6.2.6",
+    "framer-motion": "6.2.7",
     "ethers": "5.5.4",
     "valtio": "1.3.0",
     "react-code-blocks": "0.0.9-0"
   },
   "devDependencies": {
     "@walletconnect/types": "2.0.0-beta.22",
-    "@types/node": "17.0.18",
+    "@types/node": "17.0.19",
     "@types/react": "17.0.39",
     "eslint": "8.9.0",
     "eslint-config-next": "12.1.0",
-    "eslint-config-prettier": "8.3.0",
+    "eslint-config-prettier": "8.4.0",
     "prettier": "2.5.1",
     "typescript": "4.5.5"
   }

wallets/react-wallet-v2/public/icons/checkmark-icon.svg

@@ -0,0 +1,3 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M416 128L192 384L96 288" stroke="white" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

wallets/react-wallet-v2/public/icons/copy-icon.svg

@@ -0,0 +1,4 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M336 64H368C380.73 64 392.939 69.0571 401.941 78.0589C410.943 87.0606 416 99.2696 416 112V432C416 444.73 410.943 456.939 401.941 465.941C392.939 474.943 380.73 480 368 480H144C131.27 480 119.061 474.943 110.059 465.941C101.057 456.939 96 444.73 96 432V112C96 99.2696 101.057 87.0606 110.059 78.0589C119.061 69.0571 131.27 64 144 64H176" stroke="white" stroke-width="32" stroke-linejoin="round"/>
+<path d="M309.87 32H202.13C187.699 32 176 43.6988 176 58.13V69.87C176 84.3012 187.699 96 202.13 96H309.87C324.301 96 336 84.3012 336 69.87V58.13C336 43.6988 324.301 32 309.87 32Z" stroke="white" stroke-width="32" stroke-linejoin="round"/>
+</svg>

wallets/react-wallet-v2/src/components/AccountCard.tsx

@@ -1,5 +1,7 @@
 import { truncate } from '@/utils/HelperUtil'
-import { Avatar, Card, Text } from '@nextui-org/react'
+import { Avatar, Button, Card, Text, Tooltip } from '@nextui-org/react'
+import Image from 'next/image'
+import { useState } from 'react'
 
 interface Props {
   name: string
@@ -9,6 +11,14 @@ interface Props {
 }
 
 export default function AccountCard({ name, logo, rgb, address }: Props) {
+  const [copied, setCopied] = useState(false)
+
+  function onCopy() {
+    navigator?.clipboard?.writeText(address)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1000)
+  }
+
   return (
     <Card
       bordered
@@ -38,6 +48,21 @@ export default function AccountCard({ name, logo, rgb, address }: Props) {
             {truncate(address, 19)}
           </Text>
         </div>
+
+        <Tooltip content="Copy" color="invert" placement="left">
+          <Button
+            size="sm"
+            css={{ minWidth: 'auto', backgroundColor: 'rgba(255, 255, 255, 0.2)' }}
+            onClick={onCopy}
+          >
+            <Image
+              src={copied ? '/icons/checkmark-icon.svg' : '/icons/copy-icon.svg'}
+              width={15}
+              height={15}
+              alt="copy icon"
+            />
+          </Button>
+        </Tooltip>
       </Card.Body>
     </Card>
   )

wallets/react-wallet-v2/yarn.lock

@@ -805,10 +805,10 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
-"@types/node@17.0.18":
+"@types/node@17.0.19":
-  version "17.0.18"
+  version "17.0.19"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.18.tgz#3b4fed5cfb58010e3a2be4b6e74615e4847f1074"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.19.tgz#726171367f404bfbe8512ba608a09ebad810c7e6"
-  integrity sha512-eKj4f/BsN/qcculZiRSujogjvp5O/k4lOW5m35NopjZM/QwLOR075a8pJW5hD+Rtdm2DaCVPENS6KtSQnUD6BA==
+  integrity sha512-PfeQhvcMR4cPFVuYfBN4ifG7p9c+Dlh3yUZR6k+5yQK7wX3gDgVxBly4/WkBRs9x4dmcy1TVl08SY67wwtEvmA==
 
 "@types/prop-types@*":
   version "15.7.4"
@@ -1626,10 +1626,10 @@ eslint-config-next@12.1.0:
     eslint-plugin-react "^7.27.0"
     eslint-plugin-react-hooks "^4.3.0"
 
-eslint-config-prettier@8.3.0:
+eslint-config-prettier@8.4.0:
-  version "8.3.0"
+  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.4.0.tgz#8e6d17c7436649e98c4c2189868562921ef563de"
-  integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==
+  integrity sha512-CFotdUcMY18nGRo5KGsnNxpznzhkopOcOo0InID+sgQssPrzjvsyKZPvOgymTFeHrFuC3Tzdf2YndhXtULK9Iw==
 
 eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.6:
   version "0.3.6"
@@ -1964,10 +1964,10 @@ format@^0.2.0:
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
   integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
 
-framer-motion@6.2.6:
+framer-motion@6.2.7:
-  version "6.2.6"
+  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.2.6.tgz#75277b4944a1234beaf7453da19028bbf4f75cce"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.2.7.tgz#14e71ca933b63dc85327b3ea9ba2f1564f116dd3"
-  integrity sha512-7eGav5MxEEzDHozQTDY6+psTIOw2i2kM1QVoJOC3bCp9VOKoo+mKR5n7aT5JPh7ksEKFYJYz0GJDils/9S+oLA==
+  integrity sha512-RExmZCFpJ3OCakoXmZz8iW8ZI5MoaHmVadydetvTSrNaKmZ7ZC/JDQpNyw1NoDG+fchRGP86lXoiTFSQuin+Cg==
   dependencies:
     framesync "6.0.1"
     hey-listen "^1.0.8"