mirror of
https://github.com/luxfi/mpc.git
synced 2026-09-24 00:26:24 +00:00
zeekayandHanzo Dev
8b6850e316
Measured on the rendered pixels, not the source: the MPC dashboard's home page
carried 1.05% of every frame in hue at mean chroma 1.279, against explore's
0.004 next door. It came from four places, all literals no hostname could
retheme:
app/page.tsx violet→blue gradient wordmark (from-violet-500 to-blue-500)
feature headings text-violet-400 / text-blue-400 /
text-emerald-400, and ten chain chips on border-violet-500/20
bg-violet-500/10 text-violet-300 — the #ece7f7 wash that was
10,776 pixels of one screenshot
app/docs/page.tsx the same violet, plus border-violet/blue/emerald/purple-500/30
and 15 more files reaching for Tailwind's chromatic ramps directly. Those now
resolve through the tokens @luxfi/ui owns: green/emerald → --color-status-good,
red/rose → --color-status-bad, yellow/amber → --color-status-warn (achromatic —
attention is the loudest neutral in Lux, not a hue), everything else onto
foreground / muted / border.
After: warm 0%, tinted-neutral 0%, mean chroma 0.000 at 1440x900 and 390x844,
in light and dark. Distinction is carried by the LABEL, which already read
CGGMP21 / FROST / Bridge.
@luxfi/ui 7.4.5 -> 7.4.9.
Co-authored-by: Hanzo Dev <[email protected]>
98 lines
4.2 KiB
TypeScript
98 lines
4.2 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { Nav } from '@/components/layout/nav'
|
|
import { StatusBadge } from '@/components/common/status-badge'
|
|
import { api } from '@/lib/api'
|
|
import type { Settlement } from '@/lib/types'
|
|
|
|
const statusOptions = ['all', 'pending', 'hsm_signing', 'broadcast', 'confirming', 'finalized', 'verified', 'failed']
|
|
|
|
export default function SettlementsPage() {
|
|
const router = useRouter()
|
|
const [settlements, setSettlements] = useState<Settlement[]>([])
|
|
const [statusFilter, setStatusFilter] = useState('all')
|
|
const [error, setError] = useState('')
|
|
|
|
useEffect(() => {
|
|
const filters: { status?: string } = {}
|
|
if (statusFilter !== 'all') filters.status = statusFilter
|
|
api.listSettlements(filters).then(setSettlements).catch((e) => setError(e.message))
|
|
}, [statusFilter])
|
|
|
|
return (
|
|
<>
|
|
<Nav />
|
|
<main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
|
|
<div className="mb-8">
|
|
<h1 className="text-2xl font-semibold tracking-tight">Settlements</h1>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
Track settlement lifecycle: HSM signing, broadcast, finalization, and transfer agency verification.
|
|
</p>
|
|
</div>
|
|
|
|
{error && <p className="mb-4 text-sm text-destructive">{error}</p>}
|
|
|
|
{/* Filters */}
|
|
<div className="mb-6 flex flex-wrap items-center gap-3">
|
|
<select
|
|
value={statusFilter}
|
|
onChange={(e) => setStatusFilter(e.target.value)}
|
|
className="rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
|
>
|
|
{statusOptions.map((s) => (
|
|
<option key={s} value={s}>{s === 'all' ? 'All Status' : s.replace(/_/g, ' ')}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<div className="overflow-x-auto rounded-lg border border-border">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-border bg-muted/50">
|
|
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Settlement ID</th>
|
|
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Intent</th>
|
|
<th className="px-4 py-3 text-left font-medium text-muted-foreground">HSM Sigs</th>
|
|
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Verified</th>
|
|
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Status</th>
|
|
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{settlements.map((s) => (
|
|
<tr
|
|
key={s.id}
|
|
onClick={() => router.push(`/settlements/${s.id}`)}
|
|
className="cursor-pointer border-b border-border last:border-0 hover:bg-muted/30"
|
|
>
|
|
<td className="px-4 py-3 font-mono text-xs">{s.id.slice(0, 12)}...</td>
|
|
<td className="px-4 py-3 font-mono text-xs">{s.intent_id.slice(0, 12)}...</td>
|
|
<td className="px-4 py-3">{s.hsm_signatures?.length || 0}</td>
|
|
<td className="px-4 py-3">
|
|
{s.transfer_agency_verified ? (
|
|
<span className="text-[var(--color-status-good)]">Yes</span>
|
|
) : (
|
|
<span className="text-muted-foreground">No</span>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-3"><StatusBadge status={s.status} /></td>
|
|
<td className="px-4 py-3 text-muted-foreground">{new Date(s.created_at).toLocaleDateString()}</td>
|
|
</tr>
|
|
))}
|
|
{settlements.length === 0 && (
|
|
<tr>
|
|
<td colSpan={6} className="px-4 py-8 text-center text-muted-foreground">
|
|
No settlements found.
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
</>
|
|
)
|
|
}
|