use new /health endpoint in FE

frontend/src/App.tsx

@@ -12,7 +12,7 @@ import HealthCheck from './components/HealthCheck';
 import { DepositForm } from './components/DepositForm';
 import { NotificationProvider } from './context/NotificationProvider';
 import { ChainConfigProvider } from './contexts/ChainConfigContext';
-import { ChainConfig } from './types/chain';
+import { SupportedChains } from './types/chain';
 import APISection from './components/APISection';
 
 // Create a client
@@ -36,7 +36,7 @@ const customTheme = darkTheme({
 function AppContent() {
   const [sessionToken, setSessionToken] = useState<string | null>(null);
   const [isHealthy, setIsHealthy] = useState(true);
-  const [, setChainConfig] = useState<ChainConfig | null>(null);
+  const [, setChainConfig] = useState<SupportedChains | null>(null);
 
   return (
     <div className="h-screen flex flex-col bg-[#0a0a0a]">
@@ -133,7 +133,7 @@ function App() {
       <QueryClientProvider client={queryClient}>
         <RainbowKitProvider theme={customTheme}>
           <NotificationProvider>
-            <ChainConfigProvider value={{ chainConfig: null }}>
+            <ChainConfigProvider value={{ supportedChains: null }}>
               <AppContent />
             </ChainConfigProvider>
           </NotificationProvider>

frontend/src/components/DepositForm.tsx

@@ -7,7 +7,7 @@ import { useERC20 } from '../hooks/useERC20';
 import { useAllocatorAPI } from '../hooks/useAllocatorAPI';
 import { useChainConfig } from '../hooks/use-chain-config';
 import { formatResetPeriod } from '../utils/formatting';
-import { ChainConfig } from '../types/chain';
+import { SupportedChain } from '../types/chain';
 
 // Chain name mapping
 const chainNames: Record<string, string> = {
@@ -21,7 +21,7 @@ export function DepositForm() {
   const { address, isConnected } = useAccount();
   const { data: ethBalance } = useBalance({ address });
   const chainId = useChainId();
-  const { chainConfig } = useChainConfig();
+  const { supportedChains } = useChainConfig();
   const [amount, setAmount] = useState('');
   const [tokenType, setTokenType] = useState<TokenType>('native');
   const [tokenAddress, setTokenAddress] = useState('');
@@ -237,24 +237,22 @@ export function DepositForm() {
     return null;
   }
 
+  const chainSpecific = supportedChains?.find(
+    (chain: SupportedChain) => chain.chainId === chainId.toString()
+  );
+
   return (
     <div className="mx-auto p-6 bg-[#0a0a0a] rounded-lg shadow-xl border border-gray-800">
       <div className="border-b border-gray-800 pb-4 mb-6">
         <h2 className="text-xl font-semibold text-gray-100">Deposit</h2>
         <p className="mt-1 text-sm text-gray-400">
           Deposit Ether or ERC20 tokens into a reusable resource lock.
         </p>
-        {chainConfig && (
+        {chainSpecific && (
           <p className="mt-1 text-sm text-gray-400">
             Deposits on {chainNames[chainId.toString()] || `Chain ${chainId}`}{' '}
             will be considered finalized and available to allocate{' '}
-            {formatResetPeriod(
-              chainConfig.supportedChains.find(
-                (chain: ChainConfig['supportedChains'][0]) =>
-                  chain.chainId === chainId.toString()
-              )?.finalizationThresholdSeconds ??
-                chainConfig.defaultFinalizationThresholdSeconds
-            )}{' '}
+            {formatResetPeriod(chainSpecific.finalizationThresholdSeconds)}{' '}
             after a successful deposit transaction.
           </p>
         )}

frontend/src/components/FinalizationThreshold.tsx

@@ -1,28 +1,26 @@
 import { useChainConfig } from '../hooks/use-chain-config';
 import { formatResetPeriod } from '../utils/formatting';
-import { ChainConfig } from '../types/chain';
+import { SupportedChain } from '../types/chain';
 
 interface FinalizationThresholdProps {
   chainId: number;
 }
 
 export function FinalizationThreshold({ chainId }: FinalizationThresholdProps) {
-  const { chainConfig } = useChainConfig();
+  const { supportedChains } = useChainConfig();
 
-  if (!chainConfig) return null;
+  if (!supportedChains) return null;
 
-  const chainSpecific = chainConfig.supportedChains.find(
-    (chain: ChainConfig['supportedChains'][0]) =>
-      chain.chainId === chainId.toString()
+  const chainSpecific = supportedChains.find(
+    (chain: SupportedChain) => chain.chainId === chainId.toString()
   );
 
-  const threshold =
-    chainSpecific?.finalizationThresholdSeconds ??
-    chainConfig.defaultFinalizationThresholdSeconds;
+  if (!chainSpecific) return null;
 
   return (
     <span className="px-2 py-1 text-xs bg-[#00ff00]/10 text-[#00ff00] rounded">
-      Finalization: {formatResetPeriod(threshold)}
+      Finalization:{' '}
+      {formatResetPeriod(chainSpecific.finalizationThresholdSeconds)}
     </span>
   );
 }

frontend/src/components/HealthCheck.tsx

@@ -1,18 +1,18 @@
 import React, { useEffect, useState } from 'react';
 import { ChainConfigProvider } from '../contexts/ChainConfigContext';
-import { ChainConfig } from '../types/chain';
+import { SupportedChains } from '../types/chain';
 
 interface HealthStatus {
   status: string;
   allocatorAddress: string;
   signingAddress: string;
   timestamp: string;
-  chainConfig: ChainConfig;
+  supportedChains: SupportedChains;
 }
 
 interface HealthCheckProps {
   onHealthStatusChange?: (isHealthy: boolean) => void;
-  onChainConfigUpdate?: (chainConfig: ChainConfig) => void;
+  onChainConfigUpdate?: (supportedChains: SupportedChains) => void;
 }
 
 const HealthCheck: React.FC<HealthCheckProps> = ({
@@ -31,7 +31,7 @@ const HealthCheck: React.FC<HealthCheckProps> = ({
         setHealthData(data);
         setError(null);
         onHealthStatusChange?.(data.status === 'healthy');
-        onChainConfigUpdate?.(data.chainConfig);
+        onChainConfigUpdate?.(data.supportedChains);
       } catch (error) {
         console.error('Error fetching health status:', error);
         setError('Allocator server unavailable');
@@ -81,7 +81,7 @@ const HealthCheck: React.FC<HealthCheckProps> = ({
 
   return (
     <ChainConfigProvider
-      value={{ chainConfig: healthData?.chainConfig || null }}
+      value={{ supportedChains: healthData?.supportedChains || null }}
     >
       <div className="space-y-2">
         {/* Allocator Address and Status */}

frontend/src/contexts/chain-config-context.ts

@@ -1,10 +1,10 @@
 import { createContext } from 'react';
-import { ChainConfig } from '../types/chain';
+import { SupportedChains } from '../types/chain';
 
 export interface ChainConfigContextType {
-  chainConfig: ChainConfig | null;
+  supportedChains: SupportedChains | null;
 }
 
 export const ChainConfigContext = createContext<ChainConfigContextType>({
-  chainConfig: null,
+  supportedChains: null,
 });

frontend/src/types/chain.ts

@@ -1,7 +1,7 @@
-export interface ChainConfig {
-  defaultFinalizationThresholdSeconds: number;
-  supportedChains: Array<{
-    chainId: string;
-    finalizationThresholdSeconds: number;
-  }>;
-}
+export type SupportedChain = {
+  chainId: string;
+  allocatorId: string;
+  finalizationThresholdSeconds: number;
+};
+
+export type SupportedChains = Array<SupportedChain>;