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]>
114 lines
4.6 KiB
TypeScript
114 lines
4.6 KiB
TypeScript
import React from 'react';
|
|
|
|
import type { ArbitrumL2TxnBatchDAAnytrust } from 'types/api/arbitrumL2';
|
|
|
|
import dayjs from 'lib/date/dayjs';
|
|
import CopyToClipboard from 'ui/shared/CopyToClipboard';
|
|
import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
|
|
import DetailsTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
|
|
import HashStringShorten from 'ui/shared/HashStringShorten';
|
|
import IconSvg from 'ui/shared/IconSvg';
|
|
import TextSeparator from 'ui/shared/TextSeparator';
|
|
|
|
type Props = {
|
|
data: ArbitrumL2TxnBatchDAAnytrust;
|
|
};
|
|
|
|
const ArbitrumL2TxnBatchDetailsAnyTrustDA = ({ data }: Props) => {
|
|
return (
|
|
<>
|
|
<DetailedInfo.ItemLabel
|
|
hint="Aggregated BLS signature of AnyTrust committee members"
|
|
>
|
|
Signature
|
|
</DetailedInfo.ItemLabel><DetailedInfo.ItemValue className="break-all whitespace-break-spaces">
|
|
{ data.bls_signature }
|
|
</DetailedInfo.ItemValue><DetailedInfo.ItemLabel
|
|
hint="The hash of the data blob stored by the AnyTrust committee"
|
|
>
|
|
Data hash
|
|
</DetailedInfo.ItemLabel>
|
|
<DetailedInfo.ItemValue className="whitespace-pre-wrap break-all items-start lg:items-center">
|
|
{ data.data_hash }
|
|
<CopyToClipboard text={ data.data_hash } className="ml-2"/>
|
|
</DetailedInfo.ItemValue>
|
|
<DetailedInfo.ItemLabel
|
|
hint="Expiration timeout for the data blob"
|
|
>
|
|
Timeout
|
|
</DetailedInfo.ItemLabel><DetailedInfo.ItemValue multiRow>
|
|
{ dayjs(data.timeout) < dayjs() ?
|
|
<DetailsTimestamp timestamp={ data.timeout }/> :
|
|
(
|
|
<>
|
|
<DetailsTimestamp timestamp={ data.timeout } noRelativeTime/>
|
|
<TextSeparator/>
|
|
<span className="text-bad">{ dayjs(data.timeout).diff(dayjs(), 'day') } days left</span>
|
|
</>
|
|
) }
|
|
</DetailedInfo.ItemValue>
|
|
<DetailedInfo.ItemLabel
|
|
hint="Members of AnyTrust committee"
|
|
>
|
|
Signers
|
|
</DetailedInfo.ItemLabel>
|
|
<DetailedInfo.ItemValue className="overflow-x-auto text-sm">
|
|
<div
|
|
className="hidden lg:grid gap-5 bg-black/5 dark:bg-white/5 p-4 rounded-md min-w-[600px]"
|
|
style={{ gridTemplateColumns: '1fr auto auto' }}
|
|
>
|
|
<span className="font-semibold">Key</span>
|
|
<span className="font-semibold">Trusted</span>
|
|
<span className="font-semibold">Proof</span>
|
|
{ data.signers.map(signer => (
|
|
<React.Fragment key={ signer.key }>
|
|
<div className="flex justify-between">
|
|
<span className="break-all whitespace-break-spaces">{ signer.key }</span>
|
|
<CopyToClipboard text={ signer.key } className="ml-2"/>
|
|
</div>
|
|
<div className="justify-self-center">
|
|
{ signer.trusted ? <IconSvg name="check" className="size-6"/> : <IconSvg name="cross" className="size-6"/> }
|
|
</div>
|
|
{ signer.proof ? (
|
|
<div className="flex">
|
|
<HashStringShorten hash={ signer.proof }/>
|
|
<CopyToClipboard text={ signer.proof } className="ml-2"/>
|
|
</div>
|
|
) : '-' }
|
|
</React.Fragment>
|
|
)) }
|
|
</div>
|
|
|
|
<div className="block lg:hidden bg-black/5 dark:bg-white/5 rounded-md">
|
|
{ data.signers.map(signer => (
|
|
<div className="flex flex-col gap-2 p-4" key={ signer.key }>
|
|
<div className="flex w-full justify-between">
|
|
<span className="font-semibold">Key</span>
|
|
<CopyToClipboard text={ signer.key }/>
|
|
</div>
|
|
<span className="break-all whitespace-break-spaces">{ signer.key }</span>
|
|
<div className="flex w-full items-center">
|
|
<div className="flex items-center w-1/2">
|
|
<span className="font-semibold mr-2">Trusted</span>
|
|
{ signer.trusted ? <IconSvg name="check" className="size-6"/> : <IconSvg name="cross" className="size-6"/> }
|
|
</div>
|
|
<div className="flex items-center w-1/2">
|
|
<span className="font-semibold mr-2">Proof</span>
|
|
{ signer.proof ? (
|
|
<div className="flex">
|
|
<HashStringShorten hash={ signer.proof }/>
|
|
<CopyToClipboard text={ signer.proof } className="ml-2"/>
|
|
</div>
|
|
) : '-' }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)) }
|
|
</div>
|
|
</DetailedInfo.ItemValue>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ArbitrumL2TxnBatchDetailsAnyTrustDA;
|