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]>
143 lines
4.6 KiB
TypeScript
143 lines
4.6 KiB
TypeScript
export interface TxDetailData {
|
|
id: string
|
|
type: string
|
|
status: string
|
|
chain: string
|
|
chainId: number
|
|
from: string
|
|
to: string
|
|
value: string
|
|
hash?: string
|
|
data?: string
|
|
nonce?: number
|
|
gasUsed?: string
|
|
gasPrice?: string
|
|
blockNumber?: number
|
|
memo?: string
|
|
createdAt: string
|
|
confirmedAt?: string
|
|
approvals?: { address: string; approved: boolean; timestamp: string }[]
|
|
}
|
|
|
|
export interface TxDetailProps {
|
|
transaction: TxDetailData
|
|
}
|
|
|
|
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 TxDetail({ transaction: tx }: TxDetailProps) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-3">
|
|
<span
|
|
className={`rounded-full px-3 py-1 text-xs font-medium ${statusColors[tx.status] ?? 'bg-muted text-muted-foreground'}`}
|
|
>
|
|
{tx.status.replace('_', ' ')}
|
|
</span>
|
|
<span className="text-sm text-muted-foreground">{tx.type}</span>
|
|
</div>
|
|
|
|
<dl className="grid grid-cols-1 gap-4 text-sm sm:grid-cols-2">
|
|
<div>
|
|
<dt className="text-muted-foreground">Chain</dt>
|
|
<dd className="mt-1">
|
|
{tx.chain} ({tx.chainId})
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-muted-foreground">Transaction ID</dt>
|
|
<dd className="mt-1 font-mono text-xs">{tx.id}</dd>
|
|
</div>
|
|
<div className="sm:col-span-2">
|
|
<dt className="text-muted-foreground">From</dt>
|
|
<dd className="mt-1 truncate font-mono text-xs">{tx.from}</dd>
|
|
</div>
|
|
<div className="sm:col-span-2">
|
|
<dt className="text-muted-foreground">To</dt>
|
|
<dd className="mt-1 truncate font-mono text-xs">{tx.to}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-muted-foreground">Value</dt>
|
|
<dd className="mt-1 font-mono">{tx.value}</dd>
|
|
</div>
|
|
{tx.hash && (
|
|
<div>
|
|
<dt className="text-muted-foreground">Tx Hash</dt>
|
|
<dd className="mt-1 truncate font-mono text-xs">{tx.hash}</dd>
|
|
</div>
|
|
)}
|
|
{tx.nonce != null && (
|
|
<div>
|
|
<dt className="text-muted-foreground">Nonce</dt>
|
|
<dd className="mt-1 font-mono">{tx.nonce}</dd>
|
|
</div>
|
|
)}
|
|
{tx.blockNumber != null && (
|
|
<div>
|
|
<dt className="text-muted-foreground">Block</dt>
|
|
<dd className="mt-1 font-mono">{tx.blockNumber}</dd>
|
|
</div>
|
|
)}
|
|
{tx.gasUsed && (
|
|
<div>
|
|
<dt className="text-muted-foreground">Gas Used</dt>
|
|
<dd className="mt-1 font-mono">{tx.gasUsed}</dd>
|
|
</div>
|
|
)}
|
|
{tx.gasPrice && (
|
|
<div>
|
|
<dt className="text-muted-foreground">Gas Price</dt>
|
|
<dd className="mt-1 font-mono">{tx.gasPrice}</dd>
|
|
</div>
|
|
)}
|
|
{tx.data && (
|
|
<div className="sm:col-span-2">
|
|
<dt className="text-muted-foreground">Calldata</dt>
|
|
<dd className="mt-1 break-all font-mono text-xs">{tx.data}</dd>
|
|
</div>
|
|
)}
|
|
{tx.memo && (
|
|
<div className="sm:col-span-2">
|
|
<dt className="text-muted-foreground">Memo</dt>
|
|
<dd className="mt-1">{tx.memo}</dd>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<dt className="text-muted-foreground">Created</dt>
|
|
<dd className="mt-1">{new Date(tx.createdAt).toLocaleString()}</dd>
|
|
</div>
|
|
{tx.confirmedAt && (
|
|
<div>
|
|
<dt className="text-muted-foreground">Confirmed</dt>
|
|
<dd className="mt-1">{new Date(tx.confirmedAt).toLocaleString()}</dd>
|
|
</div>
|
|
)}
|
|
</dl>
|
|
|
|
{tx.approvals && tx.approvals.length > 0 && (
|
|
<div className="space-y-2">
|
|
<h3 className="text-sm font-medium text-muted-foreground">Approvals</h3>
|
|
<div className="space-y-1">
|
|
{tx.approvals.map((a) => (
|
|
<div
|
|
key={a.address}
|
|
className="flex items-center justify-between rounded-md border border-border px-3 py-2 text-xs"
|
|
>
|
|
<span className="truncate font-mono">{a.address}</span>
|
|
<span className={a.approved ? 'text-green-500' : 'text-[var(--color-status-warn)]'}>
|
|
{a.approved ? 'Approved' : 'Pending'}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|