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]>
67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
import type { ButtonProps } from '@luxfi/ui/button';
|
|
import { Button } from '@luxfi/ui/button';
|
|
import { PopoverTrigger } from '@luxfi/ui/popover';
|
|
import { Tooltip } from '@luxfi/ui/tooltip';
|
|
import React from 'react';
|
|
|
|
import { getFeaturePayload } from 'configs/app/features/types';
|
|
|
|
import config from 'configs/app';
|
|
import useIsMobile from 'lib/hooks/useIsMobile';
|
|
import usePreventFocusAfterModalClosing from 'lib/hooks/usePreventFocusAfterModalClosing';
|
|
import { cn } from 'lib/utils/cn';
|
|
import IconSvg from 'ui/shared/IconSvg';
|
|
|
|
interface Props extends ButtonProps { rating?: number; count?: number; fullView?: boolean; canRate: boolean }
|
|
|
|
const getTooltipText = (canRate: boolean) => {
|
|
if (!canRate) {
|
|
return <>Please log in to rate this { (getFeaturePayload(config.features.marketplace)?.titles.entity_name ?? '').toLowerCase() }.</>;
|
|
}
|
|
return <>Ratings come from verified users.<br/>Click here to rate!</>;
|
|
};
|
|
|
|
const TriggerButton = (
|
|
{ rating, count, fullView, canRate, onClick, ...rest }: Props,
|
|
ref: React.ForwardedRef<HTMLButtonElement>,
|
|
) => {
|
|
const onFocusCapture = usePreventFocusAfterModalClosing();
|
|
const isMobile = useIsMobile();
|
|
|
|
return (
|
|
<Tooltip content={ getTooltipText(canRate) } closeOnClick={ Boolean(canRate) || isMobile } disableOnMobile={ canRate }>
|
|
<div>
|
|
<PopoverTrigger>
|
|
<Button
|
|
ref={ ref }
|
|
size="xs"
|
|
variant="link"
|
|
className={ cn(
|
|
'p-0 leading-[21px]',
|
|
fullView ? 'text-base font-normal ml-3' : 'text-sm font-medium ml-0',
|
|
canRate ? 'cursor-pointer' : 'cursor-default',
|
|
) }
|
|
onFocusCapture={ onFocusCapture }
|
|
{ ...rest }
|
|
>
|
|
{ !fullView && (
|
|
<IconSvg
|
|
name={ rating ? 'star_filled' : 'star_outline' }
|
|
className={ cn('w-5 h-5 mr-1', rating ? 'text-warn' : 'text-[var(--color-icon-secondary)]') }
|
|
/>
|
|
) }
|
|
{ (rating && !fullView) ? (
|
|
<span className="text-[var(--color-text-primary)] transition-[inherit] inline-flex">
|
|
{ rating }
|
|
<span className="text-[var(--color-text-secondary)] ml-1">({ count })</span>
|
|
</span>
|
|
) : 'Rate it!' }
|
|
</Button>
|
|
</PopoverTrigger>
|
|
</div>
|
|
</Tooltip>
|
|
);
|
|
};
|
|
|
|
export default React.forwardRef(TriggerButton);
|