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]>
118 lines
3.6 KiB
TypeScript
118 lines
3.6 KiB
TypeScript
import { Skeleton } from '@luxfi/ui/skeleton';
|
|
import React from 'react';
|
|
|
|
import { cn } from 'lib/utils/cn';
|
|
import { Link } from 'toolkit/next/link';
|
|
|
|
interface ChainRowProps {
|
|
readonly name: string;
|
|
readonly fullName?: string;
|
|
readonly blockchainId?: string;
|
|
readonly netId?: string;
|
|
readonly vmId?: string;
|
|
readonly vmLabel?: string;
|
|
readonly chainId?: number | null;
|
|
readonly isActive?: boolean;
|
|
readonly isLoading?: boolean;
|
|
readonly href?: string;
|
|
}
|
|
|
|
const TRUNCATE_PREFIX_LEN = 8;
|
|
const TRUNCATE_SUFFIX_LEN = 4;
|
|
|
|
function truncateId(id: string): string {
|
|
if (id.length <= TRUNCATE_PREFIX_LEN + TRUNCATE_SUFFIX_LEN + 3) {
|
|
return id;
|
|
}
|
|
return `${ id.slice(0, TRUNCATE_PREFIX_LEN) }...${ id.slice(-TRUNCATE_SUFFIX_LEN) }`;
|
|
}
|
|
|
|
const ChainRow = ({
|
|
name,
|
|
fullName,
|
|
blockchainId,
|
|
netId,
|
|
vmLabel,
|
|
chainId,
|
|
isActive = true,
|
|
isLoading = false,
|
|
href,
|
|
}: ChainRowProps) => {
|
|
const row = (
|
|
<Skeleton loading={ isLoading }>
|
|
<div
|
|
className={ cn(
|
|
'flex items-center py-3 px-4 border-b border-[var(--color-border-divider)]',
|
|
'hover:bg-[var(--color-gray-50)] dark:hover:bg-[var(--color-whiteAlpha-50)]',
|
|
'transition-colors duration-150 gap-4 flex-wrap lg:flex-nowrap',
|
|
href ? 'cursor-pointer' : 'cursor-default',
|
|
) }
|
|
>
|
|
{ /* Name column */ }
|
|
<div className="flex flex-col min-w-full lg:min-w-[180px] lg:max-w-[220px] shrink-0">
|
|
<div className="font-semibold text-sm text-[var(--color-text-primary)]">
|
|
{ name }
|
|
</div>
|
|
{ fullName && (
|
|
<div className="text-xs text-[var(--color-text-secondary)] mt-0.5">
|
|
{ fullName }
|
|
</div>
|
|
) }
|
|
</div>
|
|
|
|
{ /* Blockchain ID column */ }
|
|
<div
|
|
className="flex-1 min-w-0 font-mono text-sm text-[var(--color-text-secondary)] overflow-hidden text-ellipsis whitespace-nowrap"
|
|
title={ blockchainId }
|
|
>
|
|
{ blockchainId ? truncateId(blockchainId) : '\u2014' }
|
|
</div>
|
|
|
|
{ /* Network ID column */ }
|
|
<div
|
|
className="flex-1 min-w-0 font-mono text-sm text-[var(--color-text-secondary)] overflow-hidden text-ellipsis whitespace-nowrap hidden lg:block"
|
|
title={ netId }
|
|
>
|
|
{ netId ? truncateId(netId) : '\u2014' }
|
|
</div>
|
|
|
|
{ /* VM badge */ }
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
{ vmLabel && (
|
|
<div className={ `
|
|
bg-[var(--color-gray-100)] dark:bg-[var(--color-whiteAlpha-100)] text-[var(--color-text-secondary)]
|
|
rounded-sm px-2 py-0.5 text-xs font-mono whitespace-nowrap
|
|
` }>
|
|
{ vmLabel }
|
|
</div>
|
|
) }
|
|
{ chainId != null && (
|
|
<div className={ `
|
|
bg-[var(--color-gray-100)] dark:bg-[var(--color-whiteAlpha-100)] text-[var(--color-text-secondary)]
|
|
rounded-sm px-2 py-0.5 text-xs font-mono whitespace-nowrap
|
|
` }>
|
|
{ chainId }
|
|
</div>
|
|
) }
|
|
</div>
|
|
|
|
{ /* Status indicator + arrow */ }
|
|
<div className="flex items-center gap-2 shrink-0 ml-0 lg:ml-auto">
|
|
<div className={ cn('w-2 h-2 rounded-full', isActive ? 'bg-good' : 'bg-gray-400') }/>
|
|
{ href && (
|
|
<div className="text-[var(--color-text-secondary)] text-sm">{ '\u2192' }</div>
|
|
) }
|
|
</div>
|
|
</div>
|
|
</Skeleton>
|
|
);
|
|
|
|
if (href) {
|
|
return <Link href={ href } variant="plain">{ row }</Link>;
|
|
}
|
|
|
|
return row;
|
|
};
|
|
|
|
export default React.memo(ChainRow);
|