fix(contributor): added copyAddress component picsoritdidnthappen#353

src/components/DisplayAddress.tsx

@@ -1,20 +1,18 @@
-import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { getDegenOrEnsName } from '@/utils/web3';
 import Link from 'next/link';
 import { Chain } from '@/utils/types';
-import { toast } from 'react-toastify';
-import { CopyDoneIcon, CopyIcon } from '@/components/global/Icons';
+import CopyAddressIcon from '@/components/global/CopyAddressIcon';
 
 export default function DisplayAddress({
   chain,
   address,
+  showCopyIcon,
 }: {
   chain: Chain;
   address: string;
+  showCopyIcon?: boolean;
 }) {
-  const [isCopied, setCopied] = useState(false);
-
   const walletDisplayName = useQuery({
     queryKey: ['getWalletDisplayName', address, chain.slug],
     queryFn: () =>
@@ -23,33 +21,27 @@ 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 (
-    <div className='flex items-center lg:w-[29ch] w-[15ch]'>
-      <Link
-        href={`/${chain.slug}/account/${address}`}
-        className=' hover:text-gray-200 max-w-[29ch]'
-      >
-        {walletDisplayName.data ?? address}
-      </Link>
-      <span
-        onClick={() => {
-          setCopied(true);
-          navigator.clipboard.writeText(address);
-          toast.success('Address copied to clipboard');
-          setTimeout(() => {
-            setCopied(false);
-          }, 1000);
-        }}
-        className='ml-2 cursor-pointer hover:text-gray-200'
-      >
-        {isCopied ? (
-          <CopyDoneIcon width={20} height={20} />
-        ) : (
-          <CopyIcon width={20} height={20} />
-        )}
-      </span>
-    </div>
+    <Link
+      href={`/${chain.slug}/account/${address}`}
+      className='overflow-hidden lg:w-[25ch] w-[15ch] overflow-ellipsis hover:text-gray-200'
+    >
+      {walletDisplayName.data ?? address}
+    </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;