Add API key dialog to DashboardControls

src/App.tsx

@@ -24,6 +24,14 @@ function App() {
     }
   });
 
+  const [apiKey, setApiKey] = useState(() => {
+    try {
+      return localStorage.getItem('api-key') || '';
+    } catch {
+      return '';
+    }
+  });
+
   const {
     walletsData,
     isInitialized,
@@ -34,7 +42,7 @@ function App() {
     addWallet,
     removeWallet,
     updateWalletName
-  } = useWalletData(date);
+  } = useWalletData(date, apiKey);
 
   // Reset selected wallet if it's removed
   useEffect(() => {
@@ -126,10 +134,12 @@ function App() {
           isInitialized={isInitialized}
           showNames={showNames}
           onShowNamesChange={setShowNames}
+          apiKey={apiKey}
+          setApiKey={setApiKey}
         />
       </div>
     </div>
   );
 }
 
-export default App;
+export default App;

src/components/controls/DashboardControls.tsx

@@ -1,15 +1,21 @@
+import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
 import { RotateCw } from 'lucide-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogTrigger } from '@/components/ui/dialog';
+import { toast } from 'sonner';
 
 interface DashboardControlsProps {
   onRefresh: () => void;
   isRefreshing: boolean;
   isInitialized: boolean;
   showNames: boolean;
   onShowNamesChange: (value: boolean) => void;
+  apiKey: string;
+  setApiKey: (value: string) => void;
 }
 
 export function DashboardControls({
@@ -18,7 +24,25 @@ export function DashboardControls({
   isInitialized,
   showNames,
   onShowNamesChange,
+  apiKey,
+  setApiKey,
 }: DashboardControlsProps) {
+  const [apiKeyInput, setApiKeyInput] = useState(apiKey);
+
+  useEffect(() => {
+    const storedApiKey = localStorage.getItem('api-key');
+    if (storedApiKey) {
+      setApiKey(storedApiKey);
+      setApiKeyInput(storedApiKey);
+    }
+  }, [setApiKey]);
+
+  const handleSaveApiKey = () => {
+    localStorage.setItem('api-key', apiKeyInput);
+    setApiKey(apiKeyInput);
+    toast.success('API key saved successfully');
+  };
+
   return (
     <div className="flex flex-col wide:flex-row items-start wide:items-center gap-4">
       <Button
@@ -39,6 +63,31 @@ export function DashboardControls({
         />
         <Label htmlFor="show-names">Show node names</Label>
       </div>
+      <Separator className="hidden wide:block" orientation="vertical" />
+      <div className="flex items-center space-x-2 w-full wide:w-auto">
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline">Enter API Key</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>API Key</DialogTitle>
+              <DialogDescription>
+                Enter your API key to query api-sepolia.arbiscan.io.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-4">
+              <Input
+                type="text"
+                placeholder="Enter API Key"
+                value={apiKeyInput}
+                onChange={(e) => setApiKeyInput(e.target.value)}
+              />
+              <Button onClick={handleSaveApiKey}>Save API Key</Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
     </div>
   );
 }

src/constants/storage.ts

@@ -2,5 +2,6 @@ export const STORAGE = {
   KEYS: {
     SHOW_NAMES: 'show-names',
     WALLET_DATA: 'wallet-monitor-data',
+    API_KEY: 'api-key',
   },
-} as const;
+} as const;

src/hooks/useWalletData.ts

@@ -5,7 +5,7 @@ import { loadFromStorage, saveToStorage } from '@/lib/storage';
 import { TIME } from '@/constants';
 import type { WalletData, NodeMetrics, NodeStats } from '@/types';
 
-export function useWalletData(selectedDate: Date) {
+export function useWalletData(selectedDate: Date, apiKey: string) {
   const [walletsData, setWalletsData] = useState<Record<string, WalletData>>({});
   const [nodeMetricsData, setNodeMetricsData] = useState<Record<string, NodeMetrics>>({});
   const [nodeStatsData, setNodeStatsData] = useState<Record<string, NodeStats>>({});
@@ -99,7 +99,7 @@ export function useWalletData(selectedDate: Date) {
           }
 
           // Fetch new transactions
-          const newTransactions = await fetchWalletTransactions(normalizedAddress, startBlock);
+          const newTransactions = await fetchWalletTransactions(normalizedAddress, apiKey, startBlock);
 
           // Merge with existing transactions if any
           const mergedTransactions = existingWallet?.transactions 
@@ -153,7 +153,7 @@ export function useWalletData(selectedDate: Date) {
       setIsRefreshing(false);
       setRefreshingWallet(null);
     }
-  }, [walletsData, selectedDate, isRefreshing]);
+  }, [walletsData, selectedDate, isRefreshing, apiKey]);
 
   // Initial data loading
   useEffect(() => {
@@ -257,7 +257,7 @@ export function useWalletData(selectedDate: Date) {
       }));
 
       try {
-        const transactions = await fetchWalletTransactions(normalizedAddress);
+        const transactions = await fetchWalletTransactions(normalizedAddress, apiKey);
         const transactionsByDate = groupTransactionsByDate(transactions);
         const hours = getHourlyTransactions(transactions, selectedDate);
 

src/lib/api/transactions.ts

@@ -3,6 +3,7 @@ import { API_CONFIG, ApiError } from './config';
 
 export async function fetchWalletTransactions(
   address: string,
+  apiKey: string,
   startBlock?: string
 ): Promise<WalletTransaction[]> {
   const allResults: WalletTransaction[] = [];
@@ -11,7 +12,7 @@ export async function fetchWalletTransactions(
   let hasMore = true;
 
   while (hasMore) {
-    const uri = `${API_CONFIG.BASE_URL}?module=account&action=txlist&address=${address}&startblock=${effectiveStartBlock}&endblock=${endBlock}&offset=${API_CONFIG.BATCH_SIZE}&sort=desc`;
+    const uri = `${API_CONFIG.BASE_URL}?module=account&action=txlist&address=${address}&startblock=${effectiveStartBlock}&endblock=${endBlock}&offset=${API_CONFIG.BATCH_SIZE}&sort=desc&apikey=${apiKey}`;
 
     try {
       const response = await fetch(uri);
@@ -103,4 +104,4 @@ export function getHourlyTransactions(
       transactions: hourTransactions,
     };
   });
-}
+}