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]>
84 lines
2.9 KiB
TypeScript
84 lines
2.9 KiB
TypeScript
import { Skeleton } from '@luxfi/ui/skeleton';
|
|
import BigNumber from 'bignumber.js';
|
|
import React from 'react';
|
|
|
|
import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
|
|
import type { ClusterChainConfig } from 'types/multichain';
|
|
|
|
import { ZERO } from 'toolkit/utils/consts';
|
|
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
|
|
import TxEntity from 'ui/shared/entities/tx/TxEntity';
|
|
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
|
|
import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
|
|
import NativeCoinValue from 'ui/shared/value/NativeCoinValue';
|
|
import SimpleValue from 'ui/shared/value/SimpleValue';
|
|
import { WEI } from 'ui/shared/value/utils';
|
|
|
|
type Props = AddressCoinBalanceHistoryItem & {
|
|
page: number;
|
|
isLoading: boolean;
|
|
chainData?: ClusterChainConfig;
|
|
};
|
|
|
|
const AddressCoinBalanceListItem = (props: Props) => {
|
|
const deltaBn = BigNumber(props.delta).div(WEI);
|
|
const isPositiveDelta = deltaBn.gte(ZERO);
|
|
|
|
return (
|
|
<ListItemMobile className="gap-y-2">
|
|
<div className="flex justify-between w-full">
|
|
<NativeCoinValue
|
|
amount={ props.value }
|
|
loading={ props.isLoading }
|
|
fontWeight={ 600 }
|
|
/>
|
|
<Skeleton loading={ props.isLoading }>
|
|
<div className="flex items-center gap-1 shrink-0">
|
|
<span className="font-semibold text-sm">
|
|
<SimpleValue
|
|
value={ deltaBn }
|
|
loading={ props.isLoading }
|
|
/>
|
|
</span>
|
|
<span className={ isPositiveDelta ? 'text-good' : 'text-bad' }>
|
|
{ isPositiveDelta ? '\u25B2' : '\u25BC' }
|
|
</span>
|
|
</div>
|
|
</Skeleton>
|
|
</div>
|
|
<div className="flex gap-x-2 w-full">
|
|
<Skeleton loading={ props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Block</Skeleton>
|
|
<BlockEntity
|
|
isLoading={ props.isLoading }
|
|
number={ props.block_number }
|
|
noIcon={ !props.chainData }
|
|
className="font-bold"
|
|
chain={ props.chainData }
|
|
/>
|
|
</div>
|
|
{ props.transaction_hash && (
|
|
<div className="flex gap-x-2 w-full">
|
|
<Skeleton loading={ props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Txs</Skeleton>
|
|
<TxEntity
|
|
hash={ props.transaction_hash }
|
|
isLoading={ props.isLoading }
|
|
noIcon
|
|
className="font-bold max-w-[150px]"
|
|
/>
|
|
</div>
|
|
) }
|
|
<div className="flex gap-x-2 w-full">
|
|
<Skeleton loading={ props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Age</Skeleton>
|
|
<TimeWithTooltip
|
|
timestamp={ props.block_timestamp }
|
|
enableIncrement={ props.page === 1 }
|
|
isLoading={ props.isLoading }
|
|
color="text.secondary"
|
|
/>
|
|
</div>
|
|
</ListItemMobile>
|
|
);
|
|
};
|
|
|
|
export default React.memo(AddressCoinBalanceListItem);
|