mirror of
https://github.com/luxfi/explore.git
synced 2026-07-27 05:54:15 +00:00
zeekay
1a686d955f
Drops "subnet" from the P-chain surface, which is not our vocabulary:
useSubnets -> useNets (useSubnets.ts deleted)
PChainSubnet -> PChainNet
GetSubnetsResponse -> GetNetsResponse
One "subnet" deliberately survives — `subnetID` in lib/api/pchain/wire.spec.ts.
That is the UPSTREAM P-chain wire field, read through a raw
Record<string,string> cast, so renaming it would break response parsing. The
rule is about our own language, not about lying to the wire.
Also adds deploy/k8s/explore-fe/ingress-mainnet.yaml. explore.lux.network is
served by the Next.js deployment explore-fe-lux (ghcr.io/luxfi/explore), not
the Go `explorer` binary, which only backs api-explore.lux.network. This
replaces drift where the plain Ingress pointed explore.lux.network at
explorer:80 — the Go binary's embedded, stale build.
Two pre-commit gates had to be satisfied, both legitimate:
- eslint max-len: three className lines (BridgePage 230 chars, ChainRow 188 x2)
exceeded the 160 limit; wrapped.
- cspell: `platformvm` flagged unknown. It is the P-chain VM's actual name, so
it is added to cspell.jsonc `words` rather than renamed in code. (Note for
the next person: .cspell-words.txt is listed under ignorePaths — it is a file
excluded from checking, NOT the dictionary. Adding a word there does nothing.)
Verified: tsc --noEmit reports ZERO errors in every file this commit touches and
zero stale-symbol errors, so the rename resolves completely. The project's 223
pre-existing errors are all in untouched files and unchanged by this commit.
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-green-400' : '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);
|