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]>
80 lines
2.9 KiB
TypeScript
80 lines
2.9 KiB
TypeScript
import Link from 'next/link'
|
|
|
|
export interface Transaction {
|
|
id: string
|
|
type: string
|
|
status: 'pending' | 'confirmed' | 'failed' | 'awaiting_approval'
|
|
chain: string
|
|
from: string
|
|
to: string
|
|
value: string
|
|
hash?: string
|
|
timestamp: string
|
|
}
|
|
|
|
export interface TxTableProps {
|
|
transactions: Transaction[]
|
|
}
|
|
|
|
const statusColors: Record<string, string> = {
|
|
pending: 'bg-[var(--muted)] text-[var(--color-status-warn)]',
|
|
confirmed: 'bg-green-600/20 text-green-500',
|
|
failed: 'bg-red-600/20 text-red-400',
|
|
awaiting_approval: 'bg-muted text-foreground',
|
|
}
|
|
|
|
export function TxTable({ transactions }: TxTableProps) {
|
|
if (transactions.length === 0) {
|
|
return (
|
|
<div className="rounded-lg border border-border p-8 text-center text-sm text-muted-foreground">
|
|
No transactions found.
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<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">Type</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">Chain</th>
|
|
<th className="px-4 py-3 text-left font-medium text-muted-foreground">From</th>
|
|
<th className="px-4 py-3 text-left font-medium text-muted-foreground">To</th>
|
|
<th className="px-4 py-3 text-right font-medium text-muted-foreground">Value</th>
|
|
<th className="px-4 py-3 text-right font-medium text-muted-foreground">Time</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{transactions.map((tx) => (
|
|
<tr key={tx.id} className="border-b border-border last:border-0 hover:bg-muted/20">
|
|
<td className="px-4 py-3">
|
|
<Link href={`/transactions/${tx.id}`} className="font-medium hover:underline">
|
|
{tx.type}
|
|
</Link>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`rounded-full px-2 py-0.5 text-xs font-medium ${statusColors[tx.status] ?? ''}`}>
|
|
{tx.status.replace('_', ' ')}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3">{tx.chain}</td>
|
|
<td className="px-4 py-3 font-mono text-xs">
|
|
<span className="truncate block max-w-[120px]">{tx.from}</span>
|
|
</td>
|
|
<td className="px-4 py-3 font-mono text-xs">
|
|
<span className="truncate block max-w-[120px]">{tx.to}</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-right font-mono">{tx.value}</td>
|
|
<td className="px-4 py-3 text-right text-muted-foreground">
|
|
{new Date(tx.timestamp).toLocaleString()}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
}
|