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]>
139 lines
5.3 KiB
TypeScript
139 lines
5.3 KiB
TypeScript
import { IconButton } from '@luxfi/ui/icon-button';
|
|
import { Skeleton } from '@luxfi/ui/skeleton';
|
|
import { TableCell, TableRow } from '@luxfi/ui/table';
|
|
import { Tooltip } from '@luxfi/ui/tooltip';
|
|
import React from 'react';
|
|
|
|
import type * as multichain from '@luxfi/multichain-aggregator-types';
|
|
import type { ClusterChainConfig } from 'types/multichain';
|
|
|
|
import useAddChainClick from 'lib/web3/useAddChainClick';
|
|
import useProvider from 'lib/web3/useProvider';
|
|
import { WALLETS_INFO } from 'lib/web3/wallets';
|
|
import { TruncatedText } from 'toolkit/components/truncation/TruncatedText';
|
|
import { Link } from 'toolkit/next/link';
|
|
import CopyToClipboard from 'ui/shared/CopyToClipboard';
|
|
import ChainIcon from 'ui/shared/externalChains/ChainIcon';
|
|
import IconSvg from 'ui/shared/IconSvg';
|
|
|
|
interface Props {
|
|
data: multichain.ChainMetrics;
|
|
chainInfo: ClusterChainConfig | undefined;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
const DeltaIndicator = ({ delta }: { delta: number }) => {
|
|
const isPositive = delta > 0;
|
|
return (
|
|
<span className={ `inline-flex items-center gap-0.5 ${ isPositive ? 'text-good' : 'text-bad' }` }>
|
|
<span>{ delta.toFixed(2) }%</span>
|
|
<span>{ isPositive ? '\u25B2' : '\u25BC' }</span>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
const MultichainEcosystemsTableItem = ({ data, isLoading, chainInfo }: Props) => {
|
|
|
|
const { wallet } = useProvider().data ?? {};
|
|
const walletIcon = wallet ? WALLETS_INFO[wallet].icon : undefined;
|
|
|
|
const handleAddToWalletClick = useAddChainClick({ source: 'Chain widget' });
|
|
|
|
const activeAddresses = {
|
|
value: data.active_accounts?.current_full_week ? Number(data.active_accounts.current_full_week) : 0,
|
|
delta: data.active_accounts?.wow_diff_percent ? Number(data.active_accounts.wow_diff_percent) : 0,
|
|
};
|
|
|
|
const newAddresses = {
|
|
value: data.new_addresses?.current_full_week ? Number(data.new_addresses.current_full_week) : 0,
|
|
delta: data.new_addresses?.wow_diff_percent ? Number(data.new_addresses.wow_diff_percent) : 0,
|
|
};
|
|
|
|
const dailyTransactions = {
|
|
value: data.daily_transactions?.current_full_week ? Number(data.daily_transactions.current_full_week) : 0,
|
|
delta: data.daily_transactions?.wow_diff_percent ? Number(data.daily_transactions.wow_diff_percent) : 0,
|
|
};
|
|
|
|
return (
|
|
<TableRow alignItems="top">
|
|
<TableCell verticalAlign="middle">
|
|
<div className="flex flex-row items-center gap-3">
|
|
<div className="flex flex-row items-center gap-2">
|
|
<ChainIcon data={ chainInfo } isLoading={ isLoading }/>
|
|
<Link
|
|
href={ chainInfo?.explorer_url }
|
|
className="font-bold max-w-[calc(100%-28px)]"
|
|
external
|
|
loading={ isLoading }
|
|
>
|
|
<TruncatedText text={ chainInfo?.name ?? 'Unknown chain' } loading={ isLoading }/>
|
|
</Link>
|
|
</div>
|
|
<div className="flex flex-row items-center gap-0 shrink-0">
|
|
<Skeleton loading={ isLoading } color="text.secondary"><span>{ data.chain_id }</span></Skeleton>
|
|
<CopyToClipboard text={ String(data.chain_id) } isLoading={ isLoading }/>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell verticalAlign="middle">
|
|
<div className="flex flex-row items-center gap-2">
|
|
<Skeleton loading={ isLoading }>
|
|
<span>{ activeAddresses.value.toLocaleString() }</span>
|
|
</Skeleton>
|
|
{ activeAddresses.delta ? (
|
|
<Skeleton loading={ isLoading }>
|
|
<DeltaIndicator delta={ activeAddresses.delta }/>
|
|
</Skeleton>
|
|
) : null }
|
|
</div>
|
|
</TableCell>
|
|
<TableCell verticalAlign="middle">
|
|
<div className="flex flex-row items-center gap-2">
|
|
<Skeleton loading={ isLoading }>
|
|
<span>{ newAddresses.value.toLocaleString() }</span>
|
|
</Skeleton>
|
|
{ newAddresses.delta ? (
|
|
<Skeleton loading={ isLoading }>
|
|
<DeltaIndicator delta={ newAddresses.delta }/>
|
|
</Skeleton>
|
|
) : null }
|
|
</div>
|
|
</TableCell>
|
|
<TableCell verticalAlign="middle">
|
|
<div className="flex flex-row items-center gap-2">
|
|
<Skeleton loading={ isLoading }>
|
|
<span>{ dailyTransactions.value.toLocaleString() }</span>
|
|
</Skeleton>
|
|
{ dailyTransactions.delta ? (
|
|
<Skeleton loading={ isLoading }>
|
|
<DeltaIndicator delta={ dailyTransactions.delta }/>
|
|
</Skeleton>
|
|
) : null }
|
|
</div>
|
|
</TableCell>
|
|
<TableCell verticalAlign="middle">
|
|
<div className="flex flex-row items-center justify-between">
|
|
<Skeleton loading={ isLoading }>
|
|
<span>{ Number(data.tps ?? 0).toLocaleString(undefined, { maximumFractionDigits: 2 }) }</span>
|
|
</Skeleton>
|
|
{ walletIcon ? (
|
|
<Tooltip content="Add to wallet">
|
|
<IconButton
|
|
onClick={ handleAddToWalletClick }
|
|
size="md"
|
|
variant="icon_background"
|
|
className="bg-black/5 dark:bg-white/5"
|
|
loadingSkeleton={ isLoading }
|
|
>
|
|
<IconSvg name={ walletIcon } className="w-5 h-5"/>
|
|
</IconButton>
|
|
</Tooltip>
|
|
) : <div className="w-8 h-8"/> }
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
};
|
|
|
|
export default React.memo(MultichainEcosystemsTableItem);
|