mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
zeekayandHanzo Dev
6f80c0ce4e
styles/tokens.css was a 494-line FORK of @luxfi/ui/tokens.css, which is how it drifted its own browns: --color-status-warn #B45309 / #FBBF7A and the whole Chakra orange + yellow badge ramp (#FEEBCB #FFFAF0 #DD6B20 #FFFFF0 #D69E2E #FEFCBF #B7791F #C05621 #7B341E #744210 #FAF089). It imports the umbrella now and adds nothing of its own. next.config.js hand-listed SEVEN of the engine's 55 packages in transpilePackages and deduped none of them, which is how this app's store holds seven physical copies of @hanzogui/popper (3.0.0, 3.0.1, 3.0.2 x3, 7.3.0 x2). A context published at module scope is per-copy, so PopperAnchor read the empty default and called refs.setReference on undefined once per tooltip trigger. It uses withLuxUi now — the one place that wiring lives. 47 files reached for Tailwind's chromatic ramps directly (108 occurrences). They resolve through tokens now, under short semantic names registered in the @theme block: text-good / text-bad / text-warn, where warn is ACHROMATIC — attention in Lux is the loudest neutral, not a hue. The Quasar certificate tooltip stops naming colours it no longer paints ("BLS (green)", "Corona (blue)", "ML-DSA (purple)") — copy that describes a palette has to change with it. Measured on the rendered pages: warm 0%, tinted-neutral 0.0003%, mean chroma 0.004 (/) and 0.003 (/txs) at 1440x900, 0.000 at 390x844, both modes; zero uncaught setReference errors. Two pre-existing defects surfaced because lint-staged now lints these files and are fixed here rather than skipped: `Box` was used but never imported in AddressEntity.pw.tsx, and eight lines already exceeded the 160-column limit. Co-authored-by: Hanzo Dev <[email protected]>
66 lines
2.8 KiB
TypeScript
66 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
|
|
import type { QuasarCert } from 'types/api/block';
|
|
|
|
import { ndash } from 'toolkit/utils/htmlEntities';
|
|
import CopyToClipboard from 'ui/shared/CopyToClipboard';
|
|
import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
|
|
|
|
interface Props {
|
|
data: QuasarCert;
|
|
}
|
|
|
|
const BlockDetailsQuasarCert = ({ data }: Props) => {
|
|
const hint = (
|
|
<>
|
|
Quasar triple consensus finality certificate.<br/><br/>
|
|
Three independent cryptographic verification paths:<br/><br/>
|
|
BLS { ndash } BLS12-381 classical fast-path (elliptic-curve discrete-log hardness).<br/><br/>
|
|
Corona { ndash } Ring-LWE 2-round threshold (Module-LWE hardness, post-quantum).<br/><br/>
|
|
ML-DSA { ndash } ML-DSA-65 FIPS 204 identity proof (Module-LWE + Module-SIS hardness, post-quantum).<br/><br/>
|
|
Validators { ndash } number of validators who signed. An adversary must break all three assumptions simultaneously.
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<DetailedInfo.ItemLabel
|
|
hint={ hint }
|
|
>
|
|
Quasar certificate
|
|
</DetailedInfo.ItemLabel>
|
|
<DetailedInfo.ItemValue className="flex-wrap">
|
|
<div className="flex gap-1 mb-2">
|
|
<span className="inline-flex items-center rounded-full bg-good/10 text-good px-2 py-0.5 text-xs font-medium">BLS</span>
|
|
<span className="inline-flex items-center rounded-full bg-muted text-foreground px-2 py-0.5 text-xs font-medium">Corona</span>
|
|
<span className="inline-flex items-center rounded-full bg-muted text-foreground px-2 py-0.5 text-xs font-medium">ML-DSA</span>
|
|
</div>
|
|
<div className="grid grid-cols-[min-content_1fr] gap-x-5 w-full mt-1 text-sm">
|
|
<span className="font-semibold whitespace-nowrap">BLS aggregate</span>
|
|
<span className="whitespace-pre-wrap break-words flex items-start">
|
|
{ data.bls }
|
|
<CopyToClipboard text={ data.bls }/>
|
|
</span>
|
|
<DetailedInfo.ItemDivider className="my-2 col-span-2"/>
|
|
<span className="font-semibold whitespace-nowrap">PQ proof</span>
|
|
<span className="whitespace-pre-wrap break-words flex items-start">
|
|
{ data.pq_proof }
|
|
<CopyToClipboard text={ data.pq_proof }/>
|
|
</span>
|
|
<DetailedInfo.ItemDivider className="my-2 col-span-2"/>
|
|
<span className="font-semibold">Epoch</span>
|
|
<span>{ data.epoch }</span>
|
|
<DetailedInfo.ItemDivider className="my-2 col-span-2"/>
|
|
<span className="font-semibold">Finality</span>
|
|
<span>{ data.finality }</span>
|
|
<DetailedInfo.ItemDivider className="my-2 col-span-2"/>
|
|
<span className="font-semibold">Validators</span>
|
|
<span>{ data.validators } validators proven</span>
|
|
</div>
|
|
</DetailedInfo.ItemValue>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default React.memo(BlockDetailsQuasarCert);
|