Michael/agora 1686 copy addresses when clicking on 0x5f4 shorten addresses UI

src/components/Delegates/DelegateCard/DelegateCard.tsx

@@ -14,6 +14,7 @@ export default function DelegateCard({ delegate }: { delegate: Delegate }) {
             address={delegate.address}
             citizen={delegate.citizen}
             votingPower={delegate.votingPower}
+            copyable={true}
           />
         </VStack>
 

src/components/Delegates/DelegateCard/DelegateProfileImage.tsx

@@ -2,7 +2,8 @@
 
 import ENSAvatar from "../../shared/ENSAvatar";
 import { HStack, VStack } from "@/components/Layout/Stack";
-import HumanAddress from "../../shared/HumanAddress";
+import HumanAddress from "@/components/shared/HumanAddress";
+import CopyableHumanAddress from "../../shared/CopyableHumanAddress";
 import { useEnsName } from "wagmi";
 import { formatNumber } from "@/lib/tokenUtils";
 import { useMemo } from "react";
@@ -18,10 +19,12 @@ export function DelegateProfileImage({
   address,
   votingPower,
   citizen,
+  copyable = false,
 }: {
   address: string;
   votingPower: string;
   citizen?: boolean;
+  copyable?: boolean;
 }) {
   const { refetchDelegate, setRefetchDelegate } = useConnectButtonContext();
   const { token } = Tenant.current();
@@ -77,7 +80,11 @@ export function DelegateProfileImage({
 
       <VStack>
         <div className={styles.address}>
-          <HumanAddress address={address} />
+          {copyable ? (
+            <CopyableHumanAddress address={address} />
+          ) : (
+            <HumanAddress address={address} />
+          )}
         </div>
         <div className={styles.token}>
           {formattedNumber} {token.symbol}

src/components/Delegates/DelegateCard/delegateCard.module.scss

@@ -49,6 +49,10 @@
 .address {
   font-size: $font-size-base;
   font-weight: $font-weight-semibold;
+
+  :hover {
+    opacity: 0.9;
+  }
 }
 
 .token {

src/components/Layout/Stack.tsx

@@ -21,6 +21,7 @@ type Props = {
     | "items-start"
     | "items-end"
     | "items-baseline";
+  onClick?: (e?: any) => void;
   children: ReactNode;
 };
 
@@ -45,7 +46,8 @@ function Stack({
 }
 
 export function VStack(props: Props) {
-  const { className, gap, alignItems, justifyContent, children } = props;
+  const { className, gap, alignItems, justifyContent, children, onClick } =
+    props;
 
   const classes = [
     "flex",
@@ -58,11 +60,16 @@ export function VStack(props: Props) {
     .filter(Boolean)
     .join(" ");
 
-  return <div className={classes}>{children}</div>;
+  return (
+    <div className={classes} onClick={onClick}>
+      {children}
+    </div>
+  );
 }
 
 export function HStack(props: Props) {
-  const { className, gap, alignItems, justifyContent, children } = props;
+  const { className, gap, alignItems, justifyContent, children, onClick } =
+    props;
 
   const classes = [
     "flex",
@@ -75,5 +82,9 @@ export function HStack(props: Props) {
     .filter(Boolean)
     .join(" ");
 
-  return <div className={classes}>{children}</div>;
+  return (
+    <div className={classes} onClick={onClick}>
+      {children}
+    </div>
+  );
 }

src/components/shared/CopyableHumanAddress.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import Image from "next/image";
+import ENSName from "./ENSName"; // adjust the import path as per your project structure
+import { HStack } from "@/components/Layout/Stack";
+import { CheckCircleIcon } from "@heroicons/react/20/solid";
+import { icons } from "@/icons/icons";
+
+// This component will display the ENS name for a given address
+// It will also be copyable, meaning that when clicked, it will copy the address to the clipboard
+// It will also show a checkmark when the address has been copied
+function CopyableHumanAddress({ address }: { address: string }) {
+  const [isInCopiedState, setIsInCopiedState] = useState<boolean>(false);
+
+  useEffect(() => {
+    let id: NodeJS.Timeout | number | null = null;
+    if (isInCopiedState) {
+      id = setTimeout(() => {
+        setIsInCopiedState(false);
+      }, 750);
+    }
+    return () => {
+      if (id) clearTimeout(id);
+    };
+  }, [isInCopiedState]);
+
+  return (
+    <HStack
+      alignItems="items-center"
+      className="cursor-pointer group"
+      gap={1}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        navigator.clipboard.writeText(address);
+        setIsInCopiedState(true);
+      }}
+    >
+      <ENSName address={address} />
+      {isInCopiedState ? (
+        <CheckCircleIcon className="text-green-600 w-4 h-4" />
+      ) : (
+        <Image
+          src={icons.clipboard}
+          alt={"clipboard icon"}
+          className="w-4 h-4 hidden group-hover:block group-hover:opacity-90"
+        />
+      )}
+    </HStack>
+  );
+}
+
+export default CopyableHumanAddress;

src/icons/icons.ts

@@ -27,6 +27,7 @@ import shareCard from "./shareCard.svg";
 import scroll from "./scroll.svg";
 import github from "./github.svg";
 import world from "./world.svg";
+import clipboard from "./clipboard.svg";
 
 export const icons = {
   badge,
@@ -58,4 +59,5 @@ export const icons = {
   scroll,
   github,
   world,
+  clipboard,
 };