Fix resolve conflict

src/components/address-card.tsx

@@ -2,73 +2,29 @@ import Avatar from '@/components/avatar';
 import ClipboardIconButton from './clipboard-icon-button';
 import { toShortAddress } from '@/utils';
 import { useEffect, useState } from 'react';
-import { resolveEnsName } from '@/utils/ensName';
+import { getEnsName } from '@/utils/ensName';
 
 interface AddressCardProps {
   address?: `0x${string}`;
   copyable?: boolean;
 }
 
-const ensCache = new Map<string, string>();
-let currentRequestId = 0;
-const failedRequests = new Set<string>();
-const RETRY_DELAY = 1000; // 1 second delay
-
 const AddressCard = ({ address, copyable = true }: AddressCardProps) => {
   const [ensName, setEnsName] = useState<string | undefined>();
-  const [isLoading, setIsLoading] = useState(false);
-
-  const getEnsName = async (connectedAddress: string): Promise<void> => {
-    if (failedRequests.has(connectedAddress)) {
-      return;
-    }
-
-    if (ensCache.has(connectedAddress)) {
-      setEnsName(ensCache.get(connectedAddress));
-      return;
-    }
-
-    const requestId = ++currentRequestId;
-    setIsLoading(true);
-
-    try {
-      const name = await resolveEnsName(connectedAddress);
-      if (requestId !== currentRequestId) return;
-
-      const resolvedName = name || undefined;
-      if (resolvedName) {
-        ensCache.set(connectedAddress, resolvedName);
-        setEnsName(resolvedName);
-      }
-
-    } catch (error: unknown) {
-      if (error && typeof error === 'object' && 'message' in error) {
-        if (typeof error.message === 'string' && error.message.includes('429')) {
-          failedRequests.add(connectedAddress);
-
-          setTimeout(() => {
-            failedRequests.delete(connectedAddress);
-          }, RETRY_DELAY);
-        }
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
 
   useEffect(() => {
     if (address) {
-      getEnsName(address);
+      getEnsName(address).then(
+        name => setEnsName(name)
+      );
     }
   }, [address]);
 
   return (
     <div className="flex items-center gap-[0.31rem]">
       {address && <Avatar address={address} />}
       <span className="text-[0.875rem] text-foreground" title={address}>
-        {isLoading 
-          ? '...' 
-          : (ensName ? ensName : toShortAddress(address))}
+        {ensName ? ensName : toShortAddress(address)}
       </span>
       {copyable && (
         <div>

src/utils/ensName.ts

@@ -4,20 +4,68 @@ const ethereumProvider = new ethers.JsonRpcProvider(
   'https://mainnet.infura.io/v3/dfbe7a8f440b4342b6bada71dd3df498'
 );
 
-export const resolveEnsName = async (address) => {
-  try {
-    // Use the Ethereum provider to fetch the ENS name
-    const ensName = await ethereumProvider.lookupAddress(address);
-
-    if (ensName) {
-      console.log('ENS Name:', ensName);
-      return ensName;
-    } else {
-      console.log('No ENS name found for this address');
+const ensCache = new Map<string, string>();
+const failedRequests = new Set<string>();
+const RETRY_DELAY = 1000; // 1 second delay
+
+// Add a map to track pending promises
+const pendingRequests = new Map<string, Promise<string | null>>();
+
+export const getEnsName = async (connectedAddress: string) => {
+  console.log("Getting ENS name for:", connectedAddress);
+  if (!connectedAddress) return;
+
+  // Check cache first
+  if (ensCache.has(connectedAddress)) {
+    const name = ensCache.get(connectedAddress);
+    if (name === 'noName') return;
+    return name;
+  }
+
+  // Check if there's already a pending request for this address
+  if (pendingRequests.has(connectedAddress)) {
+    console.log("Using existing pending request for:", connectedAddress);
+    return pendingRequests.get(connectedAddress);
+  }
+
+  // Create new promise for this request
+  const promise = (async () => {
+    if (failedRequests.has(connectedAddress)) {
       return null;
     }
-  } catch (error) {
-    console.error('Error resolving ENS name:', error);
-    return null;
-  }
+
+    try {
+      const name = await resolveEnsName(connectedAddress);
+      ensCache.set(connectedAddress, name || 'noName');
+      console.log("ENS Cache updated:", ensCache);
+      return name;
+    } catch (error: unknown) {
+      if (error && typeof error === 'object' && 'message' in error) {
+        if (typeof error.message === 'string' && error.message.includes('429')) {
+          failedRequests.add(connectedAddress);
+          console.log("Failed Requests:", failedRequests);
+
+          setTimeout(() => {
+            failedRequests.delete(connectedAddress);
+          }, RETRY_DELAY);
+        }
+      }
+      return null;
+    } finally {
+      // Clean up the pending request
+      pendingRequests.delete(connectedAddress);
+    }
+  })();
+
+  // Store the promise
+  pendingRequests.set(connectedAddress, promise);
+
+  return promise;
+};
+
+export const resolveEnsName = async (address: string) => {
+  const ensName = await ethereumProvider.lookupAddress(address);
+  console.log('Address:', address);
+  console.log('ENS Name:', ensName);
+  return ensName;
 };