add copy button for mint address (#133)

Author: 0xShuk

components/treasuryV2/Details/TokenDetails/Header.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import cx from 'classnames'
-import { PlusCircleIcon, ReplyIcon } from '@heroicons/react/outline'
+import { DocumentDuplicateIcon, PlusCircleIcon, ReplyIcon } from '@heroicons/react/outline'
 import {
   ASSOCIATED_TOKEN_PROGRAM_ID,
   Token as SplToken,
@@ -20,6 +20,8 @@ import Address from '@components/Address'
 
 import AddAssetModal from '../WalletDetails/AddAssetModal'
 import useLegacyConnectionContext from '@hooks/useLegacyConnectionContext'
+import Tooltip from '@components/Tooltip'
+import { notify } from '@utils/notifications'
 
 interface Props {
   className?: string
@@ -55,6 +57,20 @@ export default function Header(props: Props) {
     }
   }, [props.asset, props.wallet])
 
+  async function copyMintAddress() {
+    const mint = props.asset.raw.extensions.mint?.publicKey
+    const base58 = mint?.toBase58() || ''
+
+    try {
+      await navigator?.clipboard?.writeText(base58)
+    } catch {
+      notify({
+        type: 'error',
+        message: 'Could not copy address to clipboard',
+      })
+    }
+  }
+
   return (
     <div
       className={cx(
@@ -122,6 +138,11 @@ export default function Header(props: Props) {
                   ? 'SOL'
                   : props.asset.symbol}
               </span>
+              <span className="text-sm ml-2 inline-block relative top-1" onClick={copyMintAddress}>
+                <Tooltip content="Copy Mint Address">
+                  <DocumentDuplicateIcon className="cursor-pointer h-[1.25em] w-[1.25em]" />
+                </Tooltip>
+              </span>
             </div>
           </div>
         </div>