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]>
115 lines
3.3 KiB
TypeScript
115 lines
3.3 KiB
TypeScript
import { Alert } from '@luxfi/ui/alert';
|
|
import { Button } from '@luxfi/ui/button';
|
|
import { DialogBody, DialogContent, DialogHeader, DialogRoot } from '@luxfi/ui/dialog';
|
|
import { Heading } from '@luxfi/ui/heading';
|
|
import { PopoverRoot, PopoverBody, PopoverContent, PopoverTrigger } from '@luxfi/ui/popover';
|
|
import { Skeleton } from '@luxfi/ui/skeleton';
|
|
import React from 'react';
|
|
|
|
import type { SmartContractExternalLibrary } from 'types/api/contract';
|
|
|
|
import useIsMobile from 'lib/hooks/useIsMobile';
|
|
import { useDisclosure } from 'toolkit/hooks/useDisclosure';
|
|
import { apos } from 'toolkit/utils/htmlEntities';
|
|
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
|
|
import IconSvg from 'ui/shared/IconSvg';
|
|
|
|
interface Props {
|
|
className?: string;
|
|
data: Array<SmartContractExternalLibrary>;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
const Item = (data: SmartContractExternalLibrary) => {
|
|
return (
|
|
<div className="flex flex-col py-2 w-full gap-y-1">
|
|
<div>{ data.name }</div>
|
|
<AddressEntity
|
|
address={{ hash: data.address_hash, is_contract: true }}
|
|
query={{ tab: 'contract' }}
|
|
className="text-sm font-medium"
|
|
target="_blank"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ContractExternalLibraries = ({ className, data, isLoading }: Props) => {
|
|
const { open, onToggle, onOpenChange } = useDisclosure();
|
|
const isMobile = useIsMobile();
|
|
|
|
if (isLoading) {
|
|
return <Skeleton loading h={ 8 } w="150px" borderRadius="base"/>;
|
|
}
|
|
|
|
if (data.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const button = (
|
|
<Button
|
|
className={ className }
|
|
size="sm"
|
|
variant="dropdown"
|
|
onClick={ onToggle }
|
|
expanded={ open }
|
|
fontWeight={ 600 }
|
|
px={ 2 }
|
|
gap={ 0 }
|
|
aria-label="View external libraries"
|
|
>
|
|
<span>{ data.length } { data.length > 1 ? 'Libraries' : 'Library' } </span>
|
|
<IconSvg name="status/warning" className="w-5 h-5 text-warn ml-[2px]"/>
|
|
<IconSvg
|
|
name="arrows/east-mini"
|
|
className="w-5 h-5 ml-2 transition-transform duration-150"
|
|
style={{ transform: open ? 'rotate(90deg)' : 'rotate(-90deg)' }}
|
|
/>
|
|
</Button>
|
|
);
|
|
|
|
const content = (
|
|
<>
|
|
<Heading size="sm" level="3">External libraries ({ data.length })</Heading>
|
|
<Alert status="warning" mt={ 4 }>
|
|
The linked library{ apos }s source code may not be the real one.
|
|
Check the source code at the library address (if any) if you want to be sure in case if there is any library linked
|
|
</Alert>
|
|
<div className="flex flex-col gap-2 mt-4 lg:max-h-[50vh] overflow-y-scroll">
|
|
{ data.map((item) => <Item key={ item.address_hash } { ...item }/>) }
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
if (isMobile) {
|
|
return (
|
|
<>
|
|
{ button }
|
|
<DialogRoot open={ open } onOpenChange={ onOpenChange } size="full">
|
|
<DialogContent paddingTop={ 4 }>
|
|
<DialogHeader/>
|
|
<DialogBody>
|
|
{ content }
|
|
</DialogBody>
|
|
</DialogContent>
|
|
</DialogRoot>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<PopoverRoot open={ open } onOpenChange={ onOpenChange }>
|
|
<PopoverTrigger>
|
|
{ button }
|
|
</PopoverTrigger>
|
|
<PopoverContent w="400px">
|
|
<PopoverBody >
|
|
{ content }
|
|
</PopoverBody>
|
|
</PopoverContent>
|
|
</PopoverRoot>
|
|
);
|
|
};
|
|
|
|
export default ContractExternalLibraries;
|