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]>
134 lines
4.2 KiB
TypeScript
134 lines
4.2 KiB
TypeScript
import BigNumber from 'bignumber.js';
|
|
import React from 'react';
|
|
|
|
import { route } from 'nextjs/routes';
|
|
|
|
import config from 'configs/app';
|
|
import multichainConfig from 'configs/multichain';
|
|
import { isConfidentialTokenType, isFungibleTokenType } from 'lib/token/tokenTypes';
|
|
import { TruncatedText } from 'toolkit/components/truncation/TruncatedText';
|
|
import { Link } from 'toolkit/next/link';
|
|
import NativeTokenTag from 'ui/shared/celo/NativeTokenTag';
|
|
import TokenEntity from 'ui/shared/entities/token/TokenEntity';
|
|
import calculateUsdValue from 'ui/shared/value/calculateUsdValue';
|
|
|
|
import type { TokenEnhancedData } from '../utils/tokenUtils';
|
|
|
|
interface Props {
|
|
data: TokenEnhancedData;
|
|
}
|
|
|
|
const TokenSelectItem = ({ data }: Props) => {
|
|
|
|
const isNativeToken = config.UI.views.address.nativeTokenAddress &&
|
|
data.token.address_hash.toLowerCase() === config.UI.views.address.nativeTokenAddress.toLowerCase();
|
|
|
|
const chain = React.useMemo(() => {
|
|
if (!data.chain_values) {
|
|
return;
|
|
}
|
|
|
|
const chainId = Object.keys(data.chain_values)[0];
|
|
const chain = multichainConfig()?.chains.find((chain) => chain.id === chainId);
|
|
return chain;
|
|
}, [ data.chain_values ]);
|
|
|
|
const secondRow = (() => {
|
|
if (isConfidentialTokenType(data.token.type)) {
|
|
const text = `••••• ${ data.token.symbol || '' }`;
|
|
|
|
return (
|
|
<>
|
|
<TruncatedText text={ text }/>
|
|
{ data.token.exchange_rate && <span className="ml-2">@{ Number(data.token.exchange_rate).toLocaleString() }</span> }
|
|
</>
|
|
);
|
|
}
|
|
|
|
const isFungibleToken = isFungibleTokenType(data.token.type);
|
|
|
|
if (isFungibleToken) {
|
|
const tokenDecimals = Number(data.token.decimals ?? 18);
|
|
const text = `${ BigNumber(data.value).dividedBy(10 ** tokenDecimals).toFormat() } ${ data.token.symbol || '' }`;
|
|
|
|
return (
|
|
<>
|
|
<TruncatedText text={ text }/>
|
|
{ data.token.exchange_rate && <span className="ml-2">@{ Number(data.token.exchange_rate).toLocaleString() }</span> }
|
|
</>
|
|
);
|
|
}
|
|
|
|
switch (data.token.type) {
|
|
case 'ERC-721': {
|
|
const text = `${ BigNumber(data.value).toFormat() } ${ data.token.symbol || '' }`;
|
|
return <TruncatedText text={ text }/>;
|
|
}
|
|
case 'ERC-1155': {
|
|
return (
|
|
<>
|
|
<span className="text-ellipsis mr-6 overflow-hidden">
|
|
#{ data.token_id || 0 }
|
|
</span>
|
|
<span>
|
|
{ BigNumber(data.value).toFormat() }
|
|
</span>
|
|
</>
|
|
);
|
|
}
|
|
case 'ERC-404': {
|
|
return (
|
|
<>
|
|
{ data.token_id !== null && (
|
|
<span className="text-ellipsis mr-6 overflow-hidden">
|
|
#{ data.token_id || 0 }
|
|
</span>
|
|
) }
|
|
{ data.value !== null && (
|
|
<span>
|
|
{ data.token.decimals ?
|
|
calculateUsdValue({ amount: data.value, decimals: data.token.decimals }).valueStr :
|
|
BigNumber(data.value).toFormat()
|
|
}
|
|
</span>
|
|
) }
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
})();
|
|
|
|
const url = route({ pathname: '/token/[hash]', query: { hash: data.token.address_hash } }, { chain });
|
|
|
|
return (
|
|
<Link
|
|
className="px-1 py-2.5 flex flex-col gap-y-2 border-b border-[var(--color-border-divider)] hover:bg-muted dark:hover:bg-gray-800 text-inherit text-sm"
|
|
href={ url }
|
|
>
|
|
<div className="flex items-center w-full">
|
|
<TokenEntity
|
|
token={ data.token }
|
|
chain={ chain }
|
|
noSymbol
|
|
noCopy
|
|
noLink
|
|
className="font-bold w-auto mr-2"
|
|
|
|
/>
|
|
{ isNativeToken && <NativeTokenTag className="mr-2"/> }
|
|
{ data.usd && (
|
|
<TruncatedText
|
|
text={ `$${ data.usd.toFormat(2) }` }
|
|
className={ `font-bold min-w-[120px] ml-auto text-right ${ isNativeToken ? 'text-[var(--color-text-secondary)]' : '' }` }
|
|
/>
|
|
) }
|
|
</div>
|
|
<div className="flex items-center justify-between whitespace-nowrap w-full" color={ isNativeToken ? 'text.secondary' : undefined }>
|
|
{ secondRow }
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default React.memo(TokenSelectItem);
|