From 1d2f2628408077ef4a6978795fe056e736887973 Mon Sep 17 00:00:00 2001
From: 0age <37939117+0age@users.noreply.github.com>
Date: Tue, 10 Dec 2024 20:59:12 -0800
Subject: [PATCH] ensure forced withdrawal labels are shown too

---
 frontend/src/App.tsx                              |  3 ++-
 frontend/src/components/BalanceDisplay.tsx        | 13 +++++++++++++
 frontend/src/components/FinalizationThreshold.tsx |  8 ++------
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 33959ef..404b65e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -36,7 +36,8 @@ const customTheme = darkTheme({
 function AppContent() {
   const [sessionToken, setSessionToken] = useState<string | null>(null);
   const [isHealthy, setIsHealthy] = useState(true);
-  const [supportedChains, setSupportedChains] = useState<SupportedChains | null>(null);
+  const [supportedChains, setSupportedChains] =
+    useState<SupportedChains | null>(null);
 
   return (
     <ChainConfigProvider value={{ supportedChains }}>
diff --git a/frontend/src/components/BalanceDisplay.tsx b/frontend/src/components/BalanceDisplay.tsx
index 3897b62..c2b6659 100644
--- a/frontend/src/components/BalanceDisplay.tsx
+++ b/frontend/src/components/BalanceDisplay.tsx
@@ -119,6 +119,19 @@ export function BalanceDisplay({
                       Active
                     </span>
                   )}
+                  {balance.withdrawalStatus !== 0 && (
+                    <span
+                      className={`px-2 py-1 text-xs rounded ${
+                        canExecuteWithdrawal
+                          ? 'bg-[#F97316]/10 text-[#F97316]'
+                          : 'bg-yellow-500/10 text-yellow-500'
+                      }`}
+                    >
+                      {canExecuteWithdrawal
+                        ? 'Forced Withdrawal Ready'
+                        : `Forced Withdrawal Ready in ${balance.timeRemaining}`}
+                    </span>
+                  )}
                 </div>
 
                 {/* Balances Grid */}
diff --git a/frontend/src/components/FinalizationThreshold.tsx b/frontend/src/components/FinalizationThreshold.tsx
index 7f93630..4024e64 100644
--- a/frontend/src/components/FinalizationThreshold.tsx
+++ b/frontend/src/components/FinalizationThreshold.tsx
@@ -9,22 +9,18 @@ interface FinalizationThresholdProps {
 export function FinalizationThreshold({ chainId }: FinalizationThresholdProps) {
   const { supportedChains } = useChainConfig();
 
-  console.log('FinalizationThreshold - chainId:', chainId);
-  console.log('FinalizationThreshold - supportedChains:', supportedChains);
-
   if (!supportedChains) return null;
 
   const chainSpecific = supportedChains.find(
     (chain: SupportedChain) => chain.chainId === chainId.toString()
   );
 
-  console.log('FinalizationThreshold - chainSpecific:', chainSpecific);
-
   if (!chainSpecific) return null;
 
   return (
     <span className="px-2 py-1 text-xs bg-[#00ff00]/10 text-[#00ff00] rounded">
-      Finalization: {formatResetPeriod(chainSpecific.finalizationThresholdSeconds)}
+      Finalization:{' '}
+      {formatResetPeriod(chainSpecific.finalizationThresholdSeconds)}
     </span>
   );
 }