feat: copy addresses and ids (#84)

Author: PatrickDinh

.gitignore

@@ -19,3 +19,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.idea

src/features/accounts/components/account-link.tsx

@@ -1,28 +1,38 @@
+import { CopyButton } from '@/features/common/components/copy-button'
 import { cn } from '@/features/common/utils'
 import { TemplatedNavLink } from '@/features/routing/components/templated-nav-link/templated-nav-link'
 import { Urls } from '@/routes/urls'
 import { ellipseAddress } from '@/utils/ellipse-address'
 import { fixedForwardRef } from '@/utils/fixed-forward-ref'
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, useCallback } from 'react'
+import { toast } from 'react-toastify'
 
 type Props = PropsWithChildren<{
   address: string
   short?: boolean
   className?: string
+  showCopyButton?: boolean
 }>
 
 export const AccountLink = fixedForwardRef(
-  ({ address, short, className, children, ...rest }: Props, ref?: React.LegacyRef<HTMLAnchorElement>) => {
+  ({ address, short, className, children, showCopyButton, ...rest }: Props, ref?: React.LegacyRef<HTMLAnchorElement>) => {
+    const copyClipboard = useCallback(async () => {
+      await navigator.clipboard.writeText(address)
+      toast.success('Address copied to clipboard')
+    }, [address])
     return (
-      <TemplatedNavLink
-        className={cn(!children && 'text-primary underline', className)}
-        urlTemplate={Urls.Explore.Account.ByAddress}
-        urlParams={{ address }}
-        ref={ref}
-        {...rest}
-      >
-        {children ? children : short ? <abbr title={address}>{ellipseAddress(address)}</abbr> : address}
-      </TemplatedNavLink>
+      <div className={cn('inline-flex gap-2 items-center')}>
+        <TemplatedNavLink
+          className={cn(!children && 'text-primary underline', className)}
+          urlTemplate={Urls.Explore.Account.ByAddress}
+          urlParams={{ address }}
+          ref={ref}
+          {...rest}
+        >
+          {children ? children : short ? <abbr title={address}>{ellipseAddress(address)}</abbr> : address}
+        </TemplatedNavLink>
+        {showCopyButton && <CopyButton onClick={copyClipboard} />}
+      </div>
     )
   }
 )

src/features/assets/components/asset-link.tsx

@@ -1,13 +1,16 @@
 import { cn } from '@/features/common/utils'
 import { TemplatedNavLink } from '@/features/routing/components/templated-nav-link/templated-nav-link'
 import { Urls } from '@/routes/urls'
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, useCallback } from 'react'
 import { AssetSummary } from '../models'
 import { AsyncMaybeAtom } from '@/features/common/data/types'
 import { RenderInlineAsyncAtom } from '@/features/common/components/render-inline-async-atom'
+import { CopyButton } from '@/features/common/components/copy-button.tsx'
+import { toast } from 'react-toastify'
 
 type CommonProps = {
   className?: string
+  showCopyButton?: boolean
 }
 
 type AssetIdLinkProps = PropsWithChildren<
@@ -30,8 +33,13 @@ type AssetLinkProps = PropsWithChildren<
 >
 
 function Link(props: AssetIdLinkProps | AssetIdAndNameLinkProps) {
+  const copyClipboard = useCallback(async () => {
+    await navigator.clipboard.writeText(props.assetId.toString())
+    toast.success('Asset ID copied to clipboard')
+  }, [props.assetId])
+
   return (
-    <span>
+    <div className={cn('inline-flex gap-2 items-center')}>
       <TemplatedNavLink
         className={cn(!props.children && 'text-primary underline', props.className)}
         urlTemplate={Urls.Explore.Asset.ById}
@@ -40,7 +48,8 @@ function Link(props: AssetIdLinkProps | AssetIdAndNameLinkProps) {
         {props.children ? props.children : props.assetId}
       </TemplatedNavLink>
       {'assetName' in props && props.assetName && ` (${props.assetName})`}
-    </span>
+      {props.showCopyButton && <CopyButton onClick={copyClipboard} />}
+    </div>
   )
 }
 

src/features/common/components/button.tsx

@@ -15,12 +15,14 @@ const buttonVariants = cva(
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
+        ['no-style']: '',
       },
       size: {
         default: 'h-10 px-4 py-2',
         sm: 'h-9 rounded-md px-3',
         lg: 'h-11 rounded-md px-8',
         icon: 'size-10',
+        ['sm-icon']: 'size-4',
       },
     },
     defaultVariants: {

src/features/common/components/copy-button.tsx

@@ -0,0 +1,16 @@
+import { CopyIcon } from 'lucide-react'
+import { Button } from './button'
+
+type Props = {
+  onClick: () => void
+}
+
+export const copyButtonLabel = 'Copy'
+
+export function CopyButton({ onClick }: Props) {
+  return (
+    <Button onClick={onClick} variant="no-style" size="sm-icon" aria-label={copyButtonLabel} className="hover:bg-transparent">
+      <CopyIcon className="size-4" />
+    </Button>
+  )
+}