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]>
71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
import { Skeleton } from '@luxfi/ui/skeleton';
|
|
import React from 'react';
|
|
|
|
import type { TChainIndicator } from './types';
|
|
import type { ChainIndicatorId } from 'types/homepage';
|
|
|
|
import { cn } from 'lib/utils/cn';
|
|
import { mdash } from 'toolkit/utils/htmlEntities';
|
|
interface Props {
|
|
indicator: TChainIndicator;
|
|
isSelected: boolean;
|
|
onClick: (id: ChainIndicatorId) => void;
|
|
isLoading: boolean;
|
|
}
|
|
|
|
const ChainIndicatorItem = ({ indicator, isSelected, onClick, isLoading }: Props) => {
|
|
const handleClick = React.useCallback(() => {
|
|
onClick(indicator.id);
|
|
}, [ indicator.id, onClick ]);
|
|
|
|
const valueContent = (() => {
|
|
if (indicator.value.includes('N/A')) {
|
|
return <span className="opacity-40 font-normal">{ mdash }</span>;
|
|
}
|
|
|
|
return (
|
|
<Skeleton loading={ isLoading } fontWeight={ 600 } minW="30px">
|
|
{ indicator.value }
|
|
</Skeleton>
|
|
);
|
|
})();
|
|
|
|
const valueDiffContent = (() => {
|
|
if (indicator.valueDiff === undefined || (!isLoading && indicator.value.includes('N/A'))) {
|
|
return null;
|
|
}
|
|
|
|
const diffColor = indicator.valueDiff >= 0 ? 'green.500' : 'red.500';
|
|
|
|
return (
|
|
<Skeleton loading={ isLoading } ml={ 1 } display="flex" alignItems="center" color={ diffColor }>
|
|
<span>{ indicator.valueDiff >= 0 ? '+' : '-' }</span>
|
|
<span className={ cn('font-semibold', indicator.valueDiff >= 0 ? 'text-good' : 'text-bad') }>{ Math.abs(indicator.valueDiff) }%</span>
|
|
</Skeleton>
|
|
);
|
|
})();
|
|
|
|
return (
|
|
<li
|
|
className={ cn(
|
|
'flex items-center gap-x-2 grow-0 lg:grow px-[6px] lg:px-2 py-[6px] rounded cursor-pointer text-xs font-medium',
|
|
isSelected ? 'text-[var(--color-text-secondary)] bg-[var(--color-bg-primary)]' : 'text-[var(--color-link-primary)]',
|
|
'hover:bg-[var(--color-bg-primary)] hover:z-[1]',
|
|
!isSelected && 'hover:text-[var(--color-link-primary-hover)]',
|
|
) }
|
|
onClick={ handleClick }
|
|
>
|
|
{ indicator.icon }
|
|
<div className="hidden lg:block">
|
|
<span>{ indicator.titleShort || indicator.title }</span>
|
|
<div className="flex items-center text-[var(--color-text-primary)]">
|
|
{ valueContent }
|
|
{ valueDiffContent }
|
|
</div>
|
|
</div>
|
|
</li>
|
|
);
|
|
};
|
|
|
|
export default React.memo(ChainIndicatorItem);
|