fix: improve session handling and withdrawal UI

- Add specific handling for 'Invalid session' error
- Clear session and update state when invalid session is detected
- Add countdown timer for pending withdrawals
- Fix status text to properly show Ready/Pending states
- Update Disable Force Withdraw button to use blue (#3B82F6)
- Fix TypeScript errors

frontend/src/components/BalanceDisplay.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useAccount } from 'wagmi';
 import { useBalances } from '../hooks/useBalances';
 import { useResourceLocks } from '../hooks/useResourceLocks';
@@ -17,6 +17,24 @@ interface SelectedLockData {
   symbol: string;
 }
 
+// Helper function to format time remaining
+function formatTimeRemaining(expiryTimestamp: number): string {
+  const now = Math.floor(Date.now() / 1000);
+  const diff = expiryTimestamp - now;
+
+  if (diff <= 0) return 'Ready';
+
+  const days = Math.floor(diff / (24 * 60 * 60));
+  const hours = Math.floor((diff % (24 * 60 * 60)) / (60 * 60));
+  const minutes = Math.floor((diff % (60 * 60)) / 60);
+  const seconds = diff % 60;
+
+  if (days > 0) return `${days}d ${hours}h ${minutes}m`;
+  if (hours > 0) return `${hours}h ${minutes}m ${seconds}s`;
+  if (minutes > 0) return `${minutes}m ${seconds}s`;
+  return `${seconds}s`;
+}
+
 // Utility function to format reset period
 const formatResetPeriod = (seconds: number): string => {
   if (seconds < 60) return `${seconds} seconds`;
@@ -36,6 +54,15 @@ export function BalanceDisplay(): JSX.Element | null {
   const [selectedLock, setSelectedLock] = useState<SelectedLockData | null>(
     null
   );
+  const [, setUpdateTrigger] = useState(0);
+
+  // Update countdown every second
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setUpdateTrigger((t) => t + 1);
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
 
   if (!isConnected) return null;
 
@@ -105,6 +132,7 @@ export function BalanceDisplay(): JSX.Element | null {
           const withdrawableAt = parseInt(balance.withdrawableAt || '0');
           const canExecuteWithdrawal =
             balance.withdrawalStatus === 2 && withdrawableAt <= now;
+          const withdrawalTimeRemaining = formatTimeRemaining(withdrawableAt);
 
           return (
             <div
@@ -149,7 +177,9 @@ export function BalanceDisplay(): JSX.Element | null {
                 >
                   {balance.withdrawalStatus === 0
                     ? 'Active'
-                    : 'Withdrawal Pending'}
+                    : withdrawableAt <= now
+                      ? 'Withdrawal Ready'
+                      : `Withdrawal Pending (${withdrawalTimeRemaining})`}
                 </span>
               </div>
 

frontend/src/components/Transfer.tsx

@@ -92,7 +92,7 @@ export function Transfer({
         {withdrawalStatus !== 0 && (
           <button
             onClick={() => handleAction('disable')}
-            className="mt-2 py-2 px-4 bg-[#00ff00] text-gray-900 rounded-lg font-medium hover:bg-[#00dd00] transition-colors"
+            className="mt-2 py-2 px-4 bg-[#3B82F6] text-white rounded-lg font-medium hover:opacity-90 transition-colors"
           >
             Disable Force Withdraw
           </button>

frontend/src/hooks/useSessionPoller.ts

@@ -44,12 +44,16 @@ export function useSessionPoller(
           },
         });
 
-        if (!response.ok) {
-          throw new Error('Session invalid');
-        }
-
         const data: SessionResponse = await response.json();
 
+        // Check for invalid session error
+        if (data.error === 'Invalid session' || !response.ok) {
+          // Clear the session and update state
+          localStorage.removeItem(`session-${address}`);
+          onSessionUpdate(null);
+          return;
+        }
+
         // Verify session belongs to current address
         if (data.session?.address.toLowerCase() !== address.toLowerCase()) {
           throw new Error('Session address mismatch');
@@ -60,7 +64,7 @@ export function useSessionPoller(
         if (expiryTime < Date.now()) {
           throw new Error('Session expired');
         }
-      } catch {
+      } catch (error) {
         // On any error, clear the session
         localStorage.removeItem(`session-${address}`);
         onSessionUpdate(null);