[core-v2.3.2-alpha.3 , react-v2.2.2-alpha.2, vue-v2.1.2-alpha.2]: Feature - copy address to clipboard (#1112)

* copy to clipboard

* clipboard copy

* clipboard copy

* moved to utils

* core package bump

* refactor

* refactor

* refactor

* package bump

* package bump

* remove unused

Author: mahmud-bn

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.4.0-alpha.2",
+  "version": "2.4.0-alpha.3",
   "repository": "blocknative/web3-onboard",
   "scripts": {
     "build": "rollup -c",

packages/core/src/i18n/en.json

@@ -70,7 +70,8 @@
     "poweredBy": "powered by",
     "addAccount": "Add Account",
     "setPrimaryAccount": "Set Primary Account",
-    "disconnectWallet": "Disconnect Wallet"
+    "disconnectWallet": "Disconnect Wallet",
+    "copyAddress": "Copy Wallet address"
   },
   "notify": {
     "transaction": {

packages/core/src/utils.ts

@@ -83,6 +83,15 @@ export function shortenEns(ens: string): string {
   return ens.length > 11 ? `${ens.slice(0, 4)}...${ens.slice(-6)}` : ens
 }
 
+export async function copyWalletAddress(text: string): Promise<void> {
+  try {
+   const copy = await navigator.clipboard.writeText(text);
+   return copy
+  } catch (err) {
+    console.error('Failed to copy: ', err)
+  }
+}
+
 export const chainIdToLabel: Record<string, string> = {
   '0x1': 'Ethereum',
   '0x3': 'Ropsten',

packages/core/src/views/account-center/WalletRow.svelte

@@ -3,7 +3,7 @@
   import { fade } from 'svelte/transition'
   import { ProviderRpcErrorCode } from '@web3-onboard/common'
   import type { WalletState } from '../../types'
-  import { shortenAddress, shortenEns } from '../../utils'
+  import { shortenAddress, shortenEns, copyWalletAddress } from '../../utils'
   import en from '../../i18n/en.json'
   import SuccessStatusIcon from '../shared/SuccessStatusIcon.svelte'
   import WalletAppBadge from '../shared/WalletAppBadge.svelte'
@@ -48,6 +48,14 @@
       }
     }
   }
+
+  function changeText() {
+    en.accountCenter.copyAddress = 'Copied Successfully'
+    setTimeout(hideMenu, 500)
+    setTimeout(() => {
+      en.accountCenter.copyAddress = 'Copy Wallet address'
+    }, 700)
+  }
 </script>
 
 <style>
@@ -225,6 +233,15 @@
             default: en.accountCenter.disconnectWallet
           })}
         </li>
+        <li
+          on:click|stopPropagation={() => {
+            copyWalletAddress(ens ? ens.name : address).then(() => {
+              changeText()
+            })
+          }}
+        >
+          {en.accountCenter.copyAddress}
+        </li>
       </ul>
     {/if}
   </div>

packages/demo/src/App.svelte

@@ -213,8 +213,7 @@
           // }
         },
         position: 'topRight'
-      },
-
+      }
     },
     // Sign up for your free api key at www.Blocknative.com
     apiKey: 'xxxxxx-bf21-42ec-a093-9d37e426xxxx'

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.2.2",
+  "version": "2.2.3-alpha.1",
   "description": "Collection of React Hooks for web3-onboard",
   "repository": "blocknative/web3-onboard",
   "module": "dist/index.js",
@@ -24,7 +24,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.3.2",
+    "@web3-onboard/core": "^2.4.0-alpha.3",
     "@web3-onboard/common": "^2.1.4",
     "use-sync-external-store": "1.0.0"
   },

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.1.2",
+  "version": "2.1.3-alpha.1",
   "description": "Vue Composable for web3-onboard",
   "repository": "blocknative/web3-onboard",
   "module": "dist/index.js",
@@ -25,7 +25,7 @@
     "@vueuse/core": "^8.4.2",
     "@vueuse/rxjs": "^8.2.0",
     "@web3-onboard/common": "^2.1.4",
-    "@web3-onboard/core": "^2.3.2",
+    "@web3-onboard/core": "^2.4.0-alpha.3",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {