Feat: added copyaddress component and conditional showCopyIcon

src/components/DisplayAddress.tsx

@@ -2,13 +2,16 @@ import { useQuery } from '@tanstack/react-query';
 import { getDegenOrEnsName } from '@/utils/web3';
 import Link from 'next/link';
 import { Chain } from '@/utils/types';
+import CopyAddressIcon from '@/components/global/CopyAddressIcon';
 
 export default function DisplayAddress({
   chain,
   address,
+  showCopyIcon,
 }: {
   chain: Chain;
   address: string;
+  showCopyIcon?: boolean;
 }) {
   const walletDisplayName = useQuery({
     queryKey: ['getWalletDisplayName', address, chain.slug],
@@ -18,6 +21,19 @@ export default function DisplayAddress({
         chainName: chain.slug,
       }),
   });
+  if (showCopyIcon) {
+    return (
+      <div className='flex items-center lg:w-[29ch] w-[15ch]'>
+        <Link
+          href={`/${chain.slug}/account/${address}`}
+          className='hover:text-gray-200 max-w-[29ch] truncate mr-2'
+        >
+          {walletDisplayName.data ?? address}
+        </Link>
+        <CopyAddressIcon address={address} size={20} />
+      </div>
+    );
+  }
 
   return (
     <Link

src/components/bounty/BountyMultiplayer.tsx

@@ -74,6 +74,7 @@ export default function BountyMultiplayer({
                     <DisplayAddress
                       address={participant.user_address}
                       chain={chain}
+                      showCopyIcon={true}
                     />
                     &nbsp;
                     {`${formatEther(BigInt(participant.amount))} ${

src/components/global/CopyAddressIcon.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { toast } from 'react-toastify';
+import { CopyDoneIcon, CopyIcon } from '@/components/global/Icons';
+
+interface CopyAddressIconProps {
+  address: string;
+  size?: number;
+}
+
+const CopyAddressIcon: React.FC<CopyAddressIconProps> = ({
+  address,
+  size = 20,
+}) => {
+  const [isCopied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    setCopied(true);
+    navigator.clipboard.writeText(address);
+    toast.success('Address copied to clipboard');
+    setTimeout(() => {
+      setCopied(false);
+    }, 1000);
+  };
+
+  return (
+    <span onClick={handleCopy} className='cursor-pointer hover:text-gray-200'>
+      {isCopied ? (
+        <CopyDoneIcon width={size} height={size} />
+      ) : (
+        <CopyIcon width={size} height={size} />
+      )}
+    </span>
+  );
+};
+
+export default CopyAddressIcon;