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]>
102 lines
3.9 KiB
TypeScript
102 lines
3.9 KiB
TypeScript
import { Skeleton } from '@luxfi/ui/skeleton';
|
|
import React from 'react';
|
|
|
|
import config from 'configs/app';
|
|
import useApiQuery from 'lib/api/useApiQuery';
|
|
import dayjs from 'lib/date/dayjs';
|
|
import useIsMobile from 'lib/hooks/useIsMobile';
|
|
import { HOMEPAGE_STATS } from 'stubs/stats';
|
|
import { Link } from 'toolkit/next/link';
|
|
import GasInfoTooltip from 'ui/shared/gas/GasInfoTooltip';
|
|
import GasPrice from 'ui/shared/gas/GasPrice';
|
|
import TextSeparator from 'ui/shared/TextSeparator';
|
|
|
|
import GetGasButton from './GetGasButton';
|
|
|
|
const TopBarStats = () => {
|
|
const isMobile = useIsMobile();
|
|
|
|
const { data, isPlaceholderData, isError, refetch, dataUpdatedAt } = useApiQuery('general:stats', {
|
|
queryOptions: {
|
|
placeholderData: HOMEPAGE_STATS,
|
|
refetchOnMount: false,
|
|
},
|
|
});
|
|
|
|
React.useEffect(() => {
|
|
if (isPlaceholderData || !data?.gas_price_updated_at) {
|
|
return;
|
|
}
|
|
|
|
const endDate = dayjs(dataUpdatedAt).add(data.gas_prices_update_in, 'ms');
|
|
const timeout = endDate.diff(dayjs(), 'ms');
|
|
|
|
if (timeout <= 0) {
|
|
return;
|
|
}
|
|
|
|
const timeoutId = window.setTimeout(() => {
|
|
refetch();
|
|
}, timeout);
|
|
|
|
return () => {
|
|
window.clearTimeout(timeoutId);
|
|
};
|
|
}, [ isPlaceholderData, data?.gas_price_updated_at, dataUpdatedAt, data?.gas_prices_update_in, refetch ]);
|
|
|
|
if (isError) {
|
|
return <div/>;
|
|
}
|
|
|
|
const hasNativeCoinPrice = data?.coin_price && !config.UI.nativeCoinPrice.isHidden;
|
|
const hasSecondaryCoinPrice = data?.secondary_coin_price && config.chain.secondaryCoin.symbol && (hasNativeCoinPrice ? !isMobile : true);
|
|
const hasGasInfo = data?.gas_prices && data.gas_prices.average !== null && config.features.gasTracker.isEnabled && !isMobile;
|
|
|
|
return (
|
|
<>
|
|
{ Boolean(config.UI.featuredNetworks.items) && <TextSeparator/> }
|
|
<div className="flex items-center font-medium">
|
|
{ hasNativeCoinPrice && (
|
|
<div className="flex gap-x-1">
|
|
<Skeleton loading={ isPlaceholderData }>
|
|
<span className="text-[var(--color-text-secondary)]">{ config.chain.currency.symbol } </span>
|
|
<span>${ Number(data.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }) }</span>
|
|
</Skeleton>
|
|
{ data.coin_price_change_percentage && !(isMobile && Boolean(config.UI.featuredNetworks.items)) && (
|
|
<Skeleton loading={ isPlaceholderData }>
|
|
<span className={ Number(data.coin_price_change_percentage) >= 0 ? 'text-good' : 'text-bad' }>
|
|
{ Number(data.coin_price_change_percentage).toFixed(2) }%
|
|
</span>
|
|
</Skeleton>
|
|
) }
|
|
</div>
|
|
) }
|
|
{ hasSecondaryCoinPrice && (
|
|
<div className={ `flex gap-x-1${ data?.coin_price ? ' ml-3' : '' }` }>
|
|
<Skeleton loading={ isPlaceholderData }>
|
|
<span className="text-[var(--color-text-secondary)]">{ config.chain.secondaryCoin.symbol } </span>
|
|
<span>${ Number(data.secondary_coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }) }</span>
|
|
</Skeleton>
|
|
</div>
|
|
) }
|
|
{ (hasNativeCoinPrice || hasSecondaryCoinPrice) && hasGasInfo && <TextSeparator/> }
|
|
{ hasGasInfo && (
|
|
<>
|
|
<Skeleton loading={ isPlaceholderData } whiteSpace="pre-wrap">
|
|
<span className="text-[var(--color-text-secondary)]">Gas </span>
|
|
<GasInfoTooltip data={ data } dataUpdatedAt={ dataUpdatedAt } placement={ !data?.coin_price ? 'bottom' : undefined }>
|
|
<Link>
|
|
<GasPrice data={ data.gas_prices?.average ?? null }/>
|
|
</Link>
|
|
</GasInfoTooltip>
|
|
</Skeleton>
|
|
{ !isPlaceholderData && <GetGasButton/> }
|
|
</>
|
|
) }
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default React.memo(TopBarStats);
|