Add copy on click on account, and show shortened address (#353)

project-serum · Aug 4, 2021 · c887be8 · c887be8
1 parent eda316d
commit c887be8
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "qrcode.react": "^1.0.0",
     "react": "^17.0.1",
     "react-async-hook": "^3.6.2",
+    "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",
     "tweetnacl": "^1.0.3",
@@ -90,6 +91,7 @@
     }
   },
   "devDependencies": {
+    "@types/react-copy-to-clipboard": "^5.0.1",
     "gh-pages": "^3.1.0",
     "git-format-staged": "^2.1.0",
     "husky": "^4.3.6",

diff --git a/src/components/BalancesList.js b/src/components/BalancesList.js
@@ -45,12 +45,14 @@ import {
   refreshAccountInfo,
   useSolanaExplorerUrlSuffix,
 } from '../utils/connection';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { serumMarkets, priceStore } from '../utils/markets';
 import { swapApiRequest } from '../utils/swap/api';
 import { showSwapAddress } from '../utils/config';
 import { useAsyncData } from '../utils/fetch-loop';
 import { showTokenInfoDialog } from '../utils/config';
 import { useConnection } from '../utils/connection';
+import { shortenAddress } from '../utils/utils';
 import CloseTokenAccountDialog from './CloseTokenAccountButton';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import TokenIcon from './TokenIcon';
@@ -112,6 +114,7 @@ export default function BalancesList() {
   const [sortAccounts, setSortAccounts] = useState(SortAccounts.None);
   const [showDomains, setShowDomains] = useState(false);
   const { accounts, setAccountName } = useWalletSelector();
+  const [isCopied, setIsCopied] = useState(false);
   const isExtensionWidth = useIsExtensionWidth();
   // Dummy var to force rerenders on demand.
   const [, setForceUpdate] = useState(false);
@@ -195,17 +198,39 @@ export default function BalancesList() {
     <Paper>
       <AppBar position="static" color="default" elevation={1}>
         <Toolbar>
-          <Typography
-            variant="h6"
-            style={{ flexGrow: 1, fontSize: isExtensionWidth && '1rem' }}
-            component="h2"
+          <CopyToClipboard
+            text={selectedAccount.address.toBase58()}
+            onCopy={() => {
+              setIsCopied(true)
+              setTimeout(() => {
+                setIsCopied(false)
+              }, 1000)
+            }}
           >
-            {selectedAccount && selectedAccount.name}
-            {isExtensionWidth ? '' : ' Balances'}{' '}
-            {allTokensLoaded && (
-              <>({numberFormat.format(totalUsdValue.toFixed(2))})</>
-            )}
-          </Typography>
+            <Tooltip
+              title={
+                <Typography>
+                  {isCopied
+                  ? 'Copied'
+                  : 'Copy to clipboard'}
+                </Typography>
+              }
+              style={{fontSize: '10rem'}}
+            >
+              <Typography
+                variant="h6"
+                style={{ flexGrow: 1, fontSize: isExtensionWidth && '1rem', cursor: 'pointer' }}
+                hover={true}
+                component="h2"
+              >
+                {selectedAccount && selectedAccount.name}
+                {isExtensionWidth ? '' : ` (${shortenAddress(selectedAccount.address.toBase58())})`}{' '}
+                {allTokensLoaded && (
+                  <>({numberFormat.format(totalUsdValue.toFixed(2))})</>
+                )}
+              </Typography>
+            </Tooltip>
+          </CopyToClipboard>
           {selectedAccount &&
             selectedAccount.name !== 'Main account' &&
             selectedAccount.name !== 'Hardware wallet' && (

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -111,3 +111,8 @@ export const decodeAccount = (privateKey: string) => {
     }
   }
 }
+
+// shorten the checksummed version of the input address to have 4 characters at start and end
+export function shortenAddress(address: string, chars = 4): string {
+  return `${address.slice(0, chars)}...${address.slice(-chars)}`;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -2511,6 +2511,13 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
   integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==
 
+"@types/react-copy-to-clipboard@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz#7d9c2c0af52e2e8106ebe2b9fde4f02859af7a3d"
+  integrity sha512-CDuRrJWEIdfKFC4vbwpXT3vk0O4gA/I/Kxu/1npUvGc2Yey5swPvsgO3JEnQkIUwdnYUbwUYDE/fTFQVgqr4oA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@^17.0.0":
   version "17.0.0"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.0.tgz#b3b691eb956c4b3401777ee67b900cb28415d95a"
@@ -4528,6 +4535,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.6.2:
   version "3.6.5"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.5.tgz#2a51d9a4e25dfd6e690251aa81f99e3c05481f1c"
@@ -10948,7 +10962,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
-prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -11147,6 +11161,14 @@ react-async-hook@^3.6.2:
   resolved "https://registry.yarnpkg.com/react-async-hook/-/react-async-hook-3.6.2.tgz#360018e5cd6ecc8841152a79875841b9e49dbdba"
   integrity sha512-RkwHCJ8V7I6umKZLHneapuTRWf+eO4LOj0qUwUDsSn27jrAOcW6ClbV3x22Z4hVxH9bA0zb7y+ozDJDJ8PnZoA==
 
+react-copy-to-clipboard@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.3.tgz#2a0623b1115a1d8c84144e9434d3342b5af41ab4"
+  integrity sha512-9S3j+m+UxDZOM0Qb8mhnT/rMR0NGSrj9A/073yz2DSxPMYhmYFBMYIdI2X4o8AjOjyFsSNxDRnCX6s/gRxpriw==
+  dependencies:
+    copy-to-clipboard "^3"
+    prop-types "^15.5.8"
+
 react-dev-utils@^11.0.1:
   version "11.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.1.tgz#30106c2055acfd6b047d2dc478a85c356e66fe45"
@@ -13015,6 +13037,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 [email protected]:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"