Skip to content

Commit

Permalink
pass through finalization threshold properly in FE
Browse files Browse the repository at this point in the history
  • Loading branch information
@0age
0age committed Dec 11, 2024
1 parent c4ada3b commit 6a3eb85
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 127 deletions.
158 changes: 79 additions & 79 deletions frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,94 +36,96 @@ const customTheme = darkTheme({
function AppContent() {
const [sessionToken, setSessionToken] = useState<string | null>(null);
const [isHealthy, setIsHealthy] = useState(true);
const [, setChainConfig] = useState<SupportedChains | null>(null);
const [supportedChains, setSupportedChains] = useState<SupportedChains | null>(null);

return (
<div className="h-screen flex flex-col bg-[#0a0a0a]">
<header className="flex-none bg-[#0a0a0a] border-b border-gray-800">
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
<div>
<h1 className="text-3xl font-black font-monaco">
<span className="text-white">Sm</span>
<span className="text-[#00ff00]">all</span>
<span className="text-[#00ff00]">ocator</span>
<span className="text-white"> 🤏</span>
</h1>
<p className="text-gray-400 text-sm mt-1">
A minimalistic server-based allocator for{' '}
<ChainConfigProvider value={{ supportedChains }}>
<div className="h-screen flex flex-col bg-[#0a0a0a]">
<header className="flex-none bg-[#0a0a0a] border-b border-gray-800">
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
<div>
<h1 className="text-3xl font-black font-monaco">
<span className="text-white">Sm</span>
<span className="text-[#00ff00]">all</span>
<span className="text-[#00ff00]">ocator</span>
<span className="text-white"> 🤏</span>
</h1>
<p className="text-gray-400 text-sm mt-1">
A minimalistic server-based allocator for{' '}
<a
href="https://github.com/Uniswap/the-compact"
target="_blank"
rel="noopener noreferrer"
className="text-[#00ff00] hover:underline"
>
The Compact
</a>{' '}
🤝
</p>
</div>
<div className="flex items-center gap-4">
<a
href="https://github.com/Uniswap/the-compact"
href="https://github.com/Uniswap/smallocator"
target="_blank"
rel="noopener noreferrer"
className="text-[#00ff00] hover:underline"
>
The Compact
</a>{' '}
🤝
</p>
</div>
<div className="flex items-center gap-4">
<a
href="https://github.com/Uniswap/smallocator"
target="_blank"
rel="noopener noreferrer"
className="text-gray-400 hover:text-[#00ff00] transition-colors"
>
<svg
viewBox="0 0 24 24"
width="24"
height="24"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
className="text-gray-400 hover:text-[#00ff00] transition-colors"
>
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
</a>
<WalletConnect hasSession={!!sessionToken} />
<SessionManager
sessionToken={sessionToken}
onSessionUpdate={setSessionToken}
isServerHealthy={isHealthy}
/>
</div>
</div>
</header>

<main className="flex-1 overflow-y-auto">
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<div className="space-y-6">
{/* Health Check Status */}
<div className="mx-auto p-4 bg-[#0a0a0a] rounded-lg shadow-xl border border-gray-800">
<HealthCheck
onHealthStatusChange={setIsHealthy}
onChainConfigUpdate={setChainConfig}
<svg
viewBox="0 0 24 24"
width="24"
height="24"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
</a>
<WalletConnect hasSession={!!sessionToken} />
<SessionManager
sessionToken={sessionToken}
onSessionUpdate={setSessionToken}
isServerHealthy={isHealthy}
/>
</div>
</div>
</header>

{/* Only show these components if the server is healthy */}
{isHealthy && (
<>
{/* Deposit Form */}
{sessionToken && <DepositForm />}
<main className="flex-1 overflow-y-auto">
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<div className="space-y-6">
{/* Health Check Status */}
<div className="mx-auto p-4 bg-[#0a0a0a] rounded-lg shadow-xl border border-gray-800">
<HealthCheck
onHealthStatusChange={setIsHealthy}
onChainConfigUpdate={setSupportedChains}
/>
</div>

{/* Balance Display */}
{sessionToken && (
<div className="mx-auto p-6 bg-[#0a0a0a] rounded-lg shadow-xl border border-gray-800">
<BalanceDisplay sessionToken={sessionToken} />
</div>
)}
</>
)}
{/* Only show these components if the server is healthy */}
{isHealthy && (
<>
{/* Deposit Form */}
{sessionToken && <DepositForm />}

{/* API Section - always visible */}
<APISection />
{/* Balance Display */}
{sessionToken && (
<div className="mx-auto p-6 bg-[#0a0a0a] rounded-lg shadow-xl border border-gray-800">
<BalanceDisplay sessionToken={sessionToken} />
</div>
)}
</>
)}

{/* API Section - always visible */}
<APISection />
</div>
</div>
</div>
</main>
</div>
</main>
</div>
</ChainConfigProvider>
);
}

Expand All @@ -133,9 +135,7 @@ function App() {
<QueryClientProvider client={queryClient}>
<RainbowKitProvider theme={customTheme}>
<NotificationProvider>
<ChainConfigProvider value={{ supportedChains: null }}>
<AppContent />
</ChainConfigProvider>
<AppContent />
</NotificationProvider>
</RainbowKitProvider>
</QueryClientProvider>
Expand Down
8 changes: 6 additions & 2 deletions frontend/src/components/FinalizationThreshold.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,22 @@ 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>
);
}
87 changes: 41 additions & 46 deletions frontend/src/components/HealthCheck.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { useEffect, useState } from 'react';
import { ChainConfigProvider } from '../contexts/ChainConfigContext';
import { SupportedChains } from '../types/chain';

interface HealthStatus {
Expand Down Expand Up @@ -80,55 +79,51 @@ const HealthCheck: React.FC<HealthCheckProps> = ({
}

return (
<ChainConfigProvider
value={{ supportedChains: healthData?.supportedChains || null }}
>
<div className="space-y-2">
{/* Allocator Address and Status */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="text-sm text-gray-400">Allocator:</span>
<span className="text-lg font-mono text-[#00ff00]">
{healthData.allocatorAddress}
</span>
</div>
<div className="flex items-center gap-2 w-[180px] justify-end">
<span className="text-gray-400 text-sm pr-2">Status:</span>
<span
className={`px-2 py-0.5 text-xs rounded ${
healthData.status === 'healthy'
? 'bg-[#00ff00]/10 text-[#00ff00]'
: 'bg-red-500/10 text-red-500'
}`}
>
{healthData.status.charAt(0).toUpperCase() +
healthData.status.slice(1)}
</span>
</div>
<div className="space-y-2">
{/* Allocator Address and Status */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="text-sm text-gray-400">Allocator:</span>
<span className="text-lg font-mono text-[#00ff00]">
{healthData.allocatorAddress}
</span>
</div>
<div className="flex items-center gap-2 w-[180px] justify-end">
<span className="text-gray-400 text-sm pr-2">Status:</span>
<span
className={`px-2 py-0.5 text-xs rounded ${
healthData.status === 'healthy'
? 'bg-[#00ff00]/10 text-[#00ff00]'
: 'bg-red-500/10 text-red-500'
}`}
>
{healthData.status.charAt(0).toUpperCase() +
healthData.status.slice(1)}
</span>
</div>
</div>

{/* Signer and Last Checked */}
<div className="flex items-center justify-between text-sm">
<div className="flex items-center gap-2">
<span className="text-gray-400">Signer:</span>
<span className="font-mono text-[#00ff00]">
{healthData.signingAddress}
</span>
</div>
<div className="flex items-center gap-2 w-[180px] justify-end whitespace-nowrap">
<span className="text-gray-400">Last Checked:</span>
<span className="font-mono text-[#00ff00]">
{new Date(healthData.timestamp).toLocaleTimeString(undefined, {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
})}
</span>
</div>
{/* Signer and Last Checked */}
<div className="flex items-center justify-between text-sm">
<div className="flex items-center gap-2">
<span className="text-gray-400">Signer:</span>
<span className="font-mono text-[#00ff00]">
{healthData.signingAddress}
</span>
</div>
<div className="flex items-center gap-2 w-[180px] justify-end whitespace-nowrap">
<span className="text-gray-400">Last Checked:</span>
<span className="font-mono text-[#00ff00]">
{new Date(healthData.timestamp).toLocaleTimeString(undefined, {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
})}
</span>
</div>
</div>
</ChainConfigProvider>
</div>
);
};

Expand Down

0 comments on commit 6a3eb85

Please sign in to comment.