feat: optimize wallet data refresh and improve loading states

- Add incremental transaction fetching using last known block
- Merge new transactions with existing data to reduce payload
- Improve loading indicators:
  - Show '>' prefix during wallet refresh
  - Display spinner only in current hour cell
  - Maintain existing data visibility during refresh
- Clean up redundant code:
  - Remove unused components
  - Consolidate API endpoints
  - Move WalletStatusGrid to wallet folder
- Fix date change not updating transaction grid
- Trim wallet address on input

Performance improvements reduce data transfer and provide better UX during updates.

src/App.tsx

@@ -1,12 +1,11 @@
 import { useState, useEffect } from 'react';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Toaster } from 'sonner';
-import { WalletStatusGrid } from '@/components/WalletStatusGrid';
+import { WalletStatusGrid } from '@/components/wallet/WalletStatusGrid';
 import { AddWalletForm } from '@/components/wallet/AddWalletForm';
 import { DashboardHeader } from '@/components/header/DashboardHeader';
 import { DashboardControls } from '@/components/controls/DashboardControls';
 import { useWalletData } from '@/hooks/useWalletData';
-import type { WalletStatus } from '@/types';
 
 function App() {
   const now = new Date();
@@ -15,7 +14,6 @@ function App() {
   );
 
   const [date, setDate] = useState<Date>(currentUTCDate);
-  const [availableDates, setAvailableDates] = useState<Date[]>([]);
   const [showNames, setShowNames] = useState(() => {
     try {
       return localStorage.getItem('show-names') === 'true';
@@ -28,27 +26,19 @@ function App() {
     walletsData,
     isInitialized,
     isRefreshing,
+    refreshWallets,
+    availableDates,
+    refreshingWallet,
     addWallet,
     removeWallet,
-    updateWalletName,
-    refreshWallets
+    updateWalletName
   } = useWalletData(date);
 
   useEffect(() => {
     localStorage.setItem('show-names', showNames.toString());
   }, [showNames]);
 
-  useEffect(() => {
-    const dates = new Set<string>();
-    Object.values(walletsData).forEach((wallet) => {
-      if (!wallet?.transactionsByDate) return;
-      Object.keys(wallet.transactionsByDate).forEach((date) => dates.add(date));
-    });
-
-    setAvailableDates(Array.from(dates).map((dateStr) => new Date(dateStr)));
-  }, [walletsData]);
-
-  const walletStatuses: WalletStatus[] = Object.values(walletsData)
+  const walletStatuses = Object.values(walletsData)
     .filter((wallet) => wallet && wallet.address)
     .map((wallet) => ({
       address: wallet.address,
@@ -90,6 +80,8 @@ function App() {
             onUpdateName={updateWalletName}
             showNames={showNames}
             selectedDate={date}
+            isRefreshing={isRefreshing}
+            refreshingWallet={refreshingWallet}
           />
         </ScrollArea>
 

src/components/wallet/AddWalletForm.tsx

@@ -13,7 +13,8 @@ export function AddWalletForm({ onAddWallet, isInitialized }: AddWalletFormProps
   const [newWallet, setNewWallet] = useState('');
 
   const handleSubmit = () => {
-    onAddWallet(newWallet);
+    const trimmedWallet = newWallet.trim();
+    onAddWallet(trimmedWallet);
     setNewWallet('');
   };
 

src/components/wallet/WalletHourCell.tsx

@@ -1,6 +1,6 @@
 import { Badge } from '@/components/ui/badge';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { CheckCircle2, XCircle, CircleDashed } from 'lucide-react';
+import { CheckCircle2, XCircle, CircleDashed, Loader2 } from 'lucide-react';
 import type { NodeStatus, TransactionHour, Transaction } from '@/types';
 
 interface WalletHourCellProps {
@@ -20,6 +20,7 @@ export function WalletHourCell({
 }: WalletHourCellProps) {
   const isFutureHour = isCurrentDate && hour.hour > currentUTCHour;
   const isCurrentHour = isCurrentDate && hour.hour === currentUTCHour;
+  const isRefreshing = wallet.isLoading || wallet.refreshingWallet === wallet.address;
 
   return (
     <TooltipProvider>
@@ -28,6 +29,15 @@ export function WalletHourCell({
           <div className="flex flex-col items-center gap-1 p-1 rounded-md bg-muted/50">
             {isFutureHour ? (
               <div className="text-center text-muted-foreground">--:--</div>
+            ) : isCurrentHour && isRefreshing ? (
+              <>
+                <div className="flex gap-1">
+                  <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                </div>
+                <Badge variant="secondary" className="text-[10px] h-4">
+                  WAIT
+                </Badge>
+              </>
             ) : isCurrentHour ? (
               <>
                 <div className="flex gap-1">
@@ -84,6 +94,8 @@ export function WalletHourCell({
             <p>Hour: {hour.hour.toString().padStart(2, '0')}:00 UTC</p>
             {isFutureHour ? (
               <p>Status: Pending - Hour not yet reached</p>
+            ) : isCurrentHour && isRefreshing ? (
+              <p>Status: Refreshing data...</p>
             ) : isCurrentHour ? (
               <>
                 <p>Status: {!hour.transactions.type1 ? 'Waiting for first transaction' : !hour.transactions.type2 ? 'Waiting for second transaction' : 'All transactions complete'}</p>

src/components/wallet/WalletRow.tsx

@@ -15,6 +15,8 @@ interface WalletRowProps {
   onUpdateName: (address: string, name: string) => void;
   currentUTCHour: number;
   isCurrentDate: boolean;
+  isRefreshing?: boolean;
+  refreshingWallet?: string | null;
 }
 
 export function WalletRow({
@@ -24,6 +26,8 @@ export function WalletRow({
   onUpdateName,
   currentUTCHour,
   isCurrentDate,
+  isRefreshing,
+  refreshingWallet,
 }: WalletRowProps) {
   const [editingAddress, setEditingAddress] = useState<string | null>(null);
   const [editName, setEditName] = useState('');
@@ -60,6 +64,10 @@ export function WalletRow({
       acc + hour.transactions.transactions.length, 0);
   };
 
+  const isCurrentlyRefreshing = isRefreshing && refreshingWallet === wallet.address;
+  const displayText = showNames && wallet.name ? wallet.name : wallet.address;
+  const displayValue = isCurrentlyRefreshing ? `> ${displayText}` : displayText;
+
   return (
     <div className="grid grid-cols-[250px_repeat(24,minmax(40px,1fr))] gap-2 items-center">
       <div className="flex items-center justify-between pr-4">
@@ -87,7 +95,7 @@ export function WalletRow({
             <HoverCard>
               <HoverCardTrigger asChild>
                 <Button variant="link" className="p-0 h-auto font-medium">
-                  {truncateText(showNames && wallet.name ? wallet.name : wallet.address)}
+                  {truncateText(displayValue)}
                 </Button>
               </HoverCardTrigger>
               <HoverCardContent className="w-96">

src/components/WalletStatusGrid.tsx → src/components/wallet/WalletStatusGrid.tsx

@@ -1,6 +1,6 @@
 import { Card, CardContent } from '@/components/ui/card';
-import { WalletGridHeader } from './wallet/WalletGridHeader';
-import { WalletRow } from './wallet/WalletRow';
+import { WalletGridHeader } from './WalletGridHeader';
+import { WalletRow } from './WalletRow';
 import type { NodeStatus } from '@/types';
 
 interface WalletStatusGridProps {
@@ -9,14 +9,18 @@ interface WalletStatusGridProps {
   onUpdateName: (address: string, name: string) => void;
   showNames: boolean;
   selectedDate: Date;
+  isRefreshing?: boolean;
+  refreshingWallet?: string | null;
 }
 
 export function WalletStatusGrid({ 
   wallets, 
   onRemoveWallet, 
   onUpdateName, 
   showNames, 
-  selectedDate 
+  selectedDate,
+  isRefreshing,
+  refreshingWallet
 }: WalletStatusGridProps) {
   const now = new Date();
   const currentUTCDate = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()));
@@ -46,6 +50,8 @@ export function WalletStatusGrid({
               onUpdateName={onUpdateName}
               currentUTCHour={currentUTCHour}
               isCurrentDate={isCurrentDate}
+              isRefreshing={isRefreshing}
+              refreshingWallet={refreshingWallet}
             />
           </CardContent>
         </Card>

src/constants/api.ts

@@ -1,7 +1,7 @@
 export const API = {
   ENDPOINTS: {
     BASE: 'https://api-sepolia.arbiscan.io/api',
-    METRICS: 'https://api-testnet.lilypad.tech/metrics-dashboard/nodes',
+    METRICS: 'https://jsondatapoint.blob.core.windows.net/jsondata/nodemetrics.json',
     STATS: 'https://jsondatapoint.blob.core.windows.net/jsondata/nodestats.json',
   },
   PARAMS: {