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]>
103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
|
|
import { route } from 'nextjs-routes';
|
|
|
|
import useIsMobile from 'lib/hooks/useIsMobile';
|
|
import { cn } from 'lib/utils/cn';
|
|
import { Link } from 'toolkit/next/link';
|
|
import { isBrowser } from 'toolkit/utils/isBrowser';
|
|
import CopyToClipboard from 'ui/shared/CopyToClipboard';
|
|
import IconSvg from 'ui/shared/IconSvg';
|
|
|
|
import useAddressQuery from '../utils/useAddressQuery';
|
|
|
|
type TableViewProps = {
|
|
className?: string;
|
|
hash: string;
|
|
tableId: string;
|
|
tableName: string;
|
|
recordId?: never;
|
|
recordName?: never;
|
|
};
|
|
|
|
type RecordViewProps = Omit<TableViewProps, 'recordId' | 'recordName'> & {
|
|
recordId: string;
|
|
recordName: string;
|
|
};
|
|
|
|
type BreadcrumbItemProps = {
|
|
text: string;
|
|
href: string;
|
|
isLast?: boolean;
|
|
};
|
|
|
|
const BreadcrumbItem = ({ text, href, isLast }: BreadcrumbItemProps) => {
|
|
const currentUrl = isBrowser() ? window.location.href : '';
|
|
|
|
const onLinkClick = React.useCallback(() => {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}, []);
|
|
|
|
if (isLast) {
|
|
return (
|
|
<div className="grid items-center overflow-hidden gap-2" style={{ gridTemplateColumns: 'auto 24px' }}>
|
|
<div className="overflow-hidden whitespace-nowrap text-ellipsis">
|
|
{ text }
|
|
</div>
|
|
<CopyToClipboard text={ currentUrl } type="link" className="mx-0 text-[var(--color-icon-secondary)]"/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid items-center overflow-hidden gap-2" style={{ gridTemplateColumns: 'auto 24px' }}>
|
|
<Link
|
|
href={ href }
|
|
onClick={ onLinkClick }
|
|
className="overflow-hidden text-ellipsis whitespace-nowrap"
|
|
>
|
|
{ text }
|
|
</Link>
|
|
{ !isLast && <IconSvg name="arrows/east" className="w-6 h-6 text-gray-300 dark:text-gray-600"/> }
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const AddressMudBreadcrumbs = (props: TableViewProps | RecordViewProps) => {
|
|
const queryParams = { tab: 'mud', hash: props.hash };
|
|
const isMobile = useIsMobile();
|
|
|
|
const addressQuery = useAddressQuery({ hash: props.hash });
|
|
|
|
return (
|
|
<div
|
|
className={ cn(
|
|
isMobile ? 'flex flex-wrap' : 'grid',
|
|
'gap-2 items-center w-fit text-sm',
|
|
props.className,
|
|
) }
|
|
style={ !isMobile ? { gridTemplateColumns: '20px auto auto auto' } : undefined }
|
|
>
|
|
<IconSvg name="MUD" className={ cn('w-5 h-5', addressQuery.data?.is_verified ? 'text-good' : 'text-[var(--color-icon-primary)]') }/>
|
|
<BreadcrumbItem
|
|
text="MUD World"
|
|
href={ route({ pathname: '/address/[hash]', query: queryParams }) }
|
|
/>
|
|
<BreadcrumbItem
|
|
text={ props.tableName }
|
|
href={ route({ pathname: '/address/[hash]', query: { ...queryParams, table_id: props.tableId } }) }
|
|
isLast={ !('recordId' in props) }
|
|
/>
|
|
{ ('recordId' in props && typeof props.recordId === 'string') && ('recordName' in props && typeof props.recordName === 'string') && (
|
|
<BreadcrumbItem
|
|
text={ props.recordName }
|
|
href={ route({ pathname: '/address/[hash]', query: { ...queryParams, table_id: props.tableId, record_id: props.recordId } }) }
|
|
isLast
|
|
/>
|
|
) }
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(AddressMudBreadcrumbs);
|