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]>
81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from '@luxfi/ui/popover';
|
|
import React from 'react';
|
|
|
|
import { NETWORKS, getCurrentNetwork } from 'configs/app/chainRegistry';
|
|
import { cn } from 'lib/utils/cn';
|
|
|
|
const NetworkSelector = () => {
|
|
const [ open, setOpen ] = React.useState(false);
|
|
|
|
const handleOpenChange = React.useCallback(({ open: isOpen }: { open: boolean }) => {
|
|
setOpen(isOpen);
|
|
}, []);
|
|
|
|
const handleToggle = React.useCallback(() => {
|
|
setOpen((prev) => !prev);
|
|
}, []);
|
|
|
|
const current = getCurrentNetwork();
|
|
|
|
return (
|
|
<PopoverRoot
|
|
positioning={{ placement: 'bottom-end', offset: { mainAxis: 8 } }}
|
|
lazyMount
|
|
open={ open }
|
|
onOpenChange={ handleOpenChange }
|
|
>
|
|
<PopoverTrigger>
|
|
<button
|
|
className={ cn(
|
|
'flex items-center gap-1.5 px-2 py-1 rounded-sm cursor-pointer',
|
|
'bg-transparent border-none text-xs font-medium',
|
|
'text-[var(--color-text-secondary)] shrink-0',
|
|
'hover:text-[var(--color-text-primary)] hover:bg-[var(--color-blackAlpha-50)] dark:hover:bg-[var(--color-whiteAlpha-50)]',
|
|
'transition-all duration-150',
|
|
) }
|
|
onClick={ handleToggle }
|
|
>
|
|
<span className="w-1.5 h-1.5 rounded-full bg-good shrink-0"/>
|
|
{ current.name }
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent w="200px">
|
|
<PopoverBody className="p-1">
|
|
{ NETWORKS.map((network) => {
|
|
const isCurrent = network.network === current.network;
|
|
return (
|
|
<a
|
|
key={ network.network }
|
|
{ ...(!isCurrent ? { href: network.explorerUrl } : {}) }
|
|
className={ cn(
|
|
'flex items-center gap-2 px-2.5 py-2 rounded-sm no-underline transition-[background] duration-150',
|
|
isCurrent ?
|
|
'cursor-default bg-[var(--color-blackAlpha-50)] dark:bg-[var(--color-whiteAlpha-50)]' :
|
|
'cursor-pointer bg-transparent hover:bg-[var(--color-blackAlpha-50)] dark:hover:bg-[var(--color-whiteAlpha-50)]',
|
|
) }
|
|
>
|
|
<span
|
|
className={ cn(
|
|
'w-1.5 h-1.5 rounded-full shrink-0',
|
|
isCurrent ? 'bg-good' : 'bg-[var(--color-text-secondary)] opacity-40',
|
|
) }
|
|
/>
|
|
<div className="flex flex-col">
|
|
<span className={ cn('text-sm text-[var(--color-text-primary)]', isCurrent ? 'font-semibold' : 'font-normal') }>
|
|
{ network.name }
|
|
</span>
|
|
<span className="text-xs text-[var(--color-text-secondary)]">
|
|
{ network.label }
|
|
</span>
|
|
</div>
|
|
</a>
|
|
);
|
|
}) }
|
|
</PopoverBody>
|
|
</PopoverContent>
|
|
</PopoverRoot>
|
|
);
|
|
};
|
|
|
|
export default React.memo(NetworkSelector);
|