Sync the etherscan key local storage with the state

Author: kuzdogan

app/components/verification/ImportFromEtherscan.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { fetchFromEtherscan, processEtherscanResult } from "../../utils/etherscanApi";
-import { hasEtherscanApiKey, getEtherscanApiKey } from "../../utils/etherscanStorage";
+import { useEtherscanApiKey, getEtherscanApiKey } from "../../utils/etherscanStorage";
 
 interface ImportFromEtherscanProps {
   chainId: string;
@@ -24,7 +24,10 @@ export default function ImportFromEtherscan({ chainId, address, onImportSuccess
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
 
-  const canImport = hasEtherscanApiKey() && chainId && address;
+  // Use the custom hook to reactively track API key changes
+  const hasApiKey = useEtherscanApiKey();
+  
+  const canImport = hasApiKey && chainId && address;
 
   const handleImport = async () => {
     if (!canImport) return;
@@ -58,7 +61,7 @@ export default function ImportFromEtherscan({ chainId, address, onImportSuccess
 
   const getButtonText = () => {
     if (isImporting) return "Importing...";
-    if (!hasEtherscanApiKey()) return "Add API key in settings";
+    if (!hasApiKey) return "Add API key in settings";
     if (!chainId || !address) return "Select chain and address";
     return "Import from Etherscan";
   };
@@ -99,7 +102,7 @@ export default function ImportFromEtherscan({ chainId, address, onImportSuccess
         </div>
       )}
 
-      {!hasEtherscanApiKey() && (
+      {!hasApiKey && (
         <p className="text-xs text-gray-500">
           Add your Etherscan API key in settings to import verified contracts
         </p>

app/utils/etherscanStorage.ts

@@ -1,4 +1,7 @@
+import { useState, useEffect } from "react";
+
 const ETHERSCAN_API_KEY_STORAGE_KEY = "etherscan-api-key";
+const ETHERSCAN_API_KEY_CHANGED_EVENT = "etherscan-api-key-changed";
 
 export const getEtherscanApiKey = (): string | null => {
   if (typeof window === "undefined") return null;
@@ -8,14 +11,37 @@ export const getEtherscanApiKey = (): string | null => {
 export const setEtherscanApiKey = (apiKey: string): void => {
   if (typeof window === "undefined") return;
   localStorage.setItem(ETHERSCAN_API_KEY_STORAGE_KEY, apiKey);
+  // Dispatch custom event to notify components
+  window.dispatchEvent(new CustomEvent(ETHERSCAN_API_KEY_CHANGED_EVENT));
 };
 
 export const removeEtherscanApiKey = (): void => {
   if (typeof window === "undefined") return;
   localStorage.removeItem(ETHERSCAN_API_KEY_STORAGE_KEY);
+  // Dispatch custom event to notify components
+  window.dispatchEvent(new CustomEvent(ETHERSCAN_API_KEY_CHANGED_EVENT));
 };
 
 export const hasEtherscanApiKey = (): boolean => {
   const apiKey = getEtherscanApiKey();
   return apiKey !== null && apiKey.trim().length > 0;
+};
+
+// Custom hook to listen for API key changes
+export const useEtherscanApiKey = () => {
+  const [hasApiKey, setHasApiKey] = useState(hasEtherscanApiKey());
+
+  useEffect(() => {
+    const handleApiKeyChange = () => {
+      setHasApiKey(hasEtherscanApiKey());
+    };
+
+    window.addEventListener(ETHERSCAN_API_KEY_CHANGED_EVENT, handleApiKeyChange);
+    
+    return () => {
+      window.removeEventListener(ETHERSCAN_API_KEY_CHANGED_EVENT, handleApiKeyChange);
+    };
+  }, []);
+
+  return hasApiKey;
 };