From b0870c3e5441e47674b4eb1cfbae0127efa063d4 Mon Sep 17 00:00:00 2001
From: Gabriel Temtsen <gabrieltemtsen@gmail.com>
Date: Thu, 21 Nov 2024 09:36:28 +0100
Subject: [PATCH 1/2] fix(contributor): copy address icons #353

---
 src/components/DisplayAddress.tsx | 36 +++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/DisplayAddress.tsx b/src/components/DisplayAddress.tsx
index 93e95f9..a1662eb 100644
--- a/src/components/DisplayAddress.tsx
+++ b/src/components/DisplayAddress.tsx
@@ -1,7 +1,10 @@
+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';
 
 export default function DisplayAddress({
   chain,
@@ -10,6 +13,8 @@ export default function DisplayAddress({
   chain: Chain;
   address: string;
 }) {
+  const [isCopied, setCopied] = useState(false);
+
   const walletDisplayName = useQuery({
     queryKey: ['getWalletDisplayName', address, chain.slug],
     queryFn: () =>
@@ -20,12 +25,31 @@ export default function DisplayAddress({
   });
 
   return (
-    <Link
-      href={`/${chain.slug}/account/${address}`}
-      className='overflow-hidden lg:w-[25ch] w-[15ch] overflow-ellipsis hover:text-gray-200'
-    >
-      {walletDisplayName.data ?? address}
-    </Link>
+    <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>
   );
 }
 

From bf5c1f95efe875aa10322aaffeabd13448cae0e9 Mon Sep 17 00:00:00 2001
From: Gabriel Temtsen <gabrieltemtsen@gmail.com>
Date: Sun, 24 Nov 2024 21:22:10 +0100
Subject: [PATCH 2/2] fix(contributor): added copyAddress component #353

---
 src/components/DisplayAddress.tsx           | 52 +++++++++------------
 src/components/bounty/BountyMultiplayer.tsx |  1 +
 src/components/global/CopyAddressIcon.tsx   | 36 ++++++++++++++
 3 files changed, 59 insertions(+), 30 deletions(-)
 create mode 100644 src/components/global/CopyAddressIcon.tsx

diff --git a/src/components/DisplayAddress.tsx b/src/components/DisplayAddress.tsx
index a1662eb..c8cf129 100644
--- a/src/components/DisplayAddress.tsx
+++ b/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>
   );
 }
 
diff --git a/src/components/bounty/BountyMultiplayer.tsx b/src/components/bounty/BountyMultiplayer.tsx
index e2a1e08..6eaa64d 100644
--- a/src/components/bounty/BountyMultiplayer.tsx
+++ b/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))} ${
diff --git a/src/components/global/CopyAddressIcon.tsx b/src/components/global/CopyAddressIcon.tsx
new file mode 100644
index 0000000..007c250
--- /dev/null
+++ b/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;