diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 5011e6e..02c3639 100644 --- a/frontend/src/App.tsx +++ b/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(null); const [isHealthy, setIsHealthy] = useState(true); - const [, setChainConfig] = useState(null); + const [, setChainConfig] = useState(null); return (
@@ -133,7 +133,7 @@ function App() { - + diff --git a/frontend/src/components/DepositForm.tsx b/frontend/src/components/DepositForm.tsx index 4f89d5c..11900f9 100644 --- a/frontend/src/components/DepositForm.tsx +++ b/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 = { @@ -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('native'); const [tokenAddress, setTokenAddress] = useState(''); @@ -237,6 +237,10 @@ export function DepositForm() { return null; } + const chainSpecific = supportedChains?.find( + (chain: SupportedChain) => chain.chainId === chainId.toString() + ); + return (
@@ -244,17 +248,11 @@ export function DepositForm() {

Deposit Ether or ERC20 tokens into a reusable resource lock.

- {chainConfig && ( + {chainSpecific && (

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.

)} diff --git a/frontend/src/components/FinalizationThreshold.tsx b/frontend/src/components/FinalizationThreshold.tsx index ceb8e88..4024e64 100644 --- a/frontend/src/components/FinalizationThreshold.tsx +++ b/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 ( - Finalization: {formatResetPeriod(threshold)} + Finalization:{' '} + {formatResetPeriod(chainSpecific.finalizationThresholdSeconds)} ); } diff --git a/frontend/src/components/HealthCheck.tsx b/frontend/src/components/HealthCheck.tsx index 5ac9f3f..972f764 100644 --- a/frontend/src/components/HealthCheck.tsx +++ b/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 = ({ @@ -31,7 +31,7 @@ const HealthCheck: React.FC = ({ 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 = ({ return (
{/* Allocator Address and Status */} diff --git a/frontend/src/contexts/chain-config-context.ts b/frontend/src/contexts/chain-config-context.ts index b41c81d..fcc9c03 100644 --- a/frontend/src/contexts/chain-config-context.ts +++ b/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({ - chainConfig: null, + supportedChains: null, }); diff --git a/frontend/src/types/chain.ts b/frontend/src/types/chain.ts index 075e448..b699694 100644 --- a/frontend/src/types/chain.ts +++ b/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;