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]>
87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
import { Image } from '@luxfi/ui/image';
|
|
import { Progress } from '@luxfi/ui/progress';
|
|
|
|
import type { GetAvailableBadgesResponse } from '@luxfi/points-types';
|
|
|
|
import { Link } from 'toolkit/next/link';
|
|
|
|
const BADGE_BG_COLORS = [ '#DFE8F5', '#D2E5FE', '#EFE1FF' ];
|
|
|
|
const BADGES = [
|
|
'/static/merits/streak_30.png',
|
|
'/static/merits/streak_90.png',
|
|
'/static/merits/streak_180.png',
|
|
] as const;
|
|
|
|
const GHOST_BADGES = [
|
|
'/static/merits/streak_30_ghost.png',
|
|
'/static/merits/streak_90_ghost.png',
|
|
'/static/merits/streak_180_ghost.png',
|
|
] as const;
|
|
|
|
type Props = {
|
|
badge: GetAvailableBadgesResponse['items'][number];
|
|
currentStreak: number;
|
|
index: number;
|
|
};
|
|
|
|
export default function BadgeCard({ badge, currentStreak, index }: Props) {
|
|
const target = Number(badge.requirements?.streak || 0);
|
|
const isUnlocked = badge.is_whitelisted || badge.is_minted;
|
|
const progress = Math.min(currentStreak, target);
|
|
|
|
return (
|
|
<div className="flex flex-row lg:flex-col items-center gap-3 flex-1">
|
|
<div
|
|
className="flex p-2.5 lg:p-4 rounded-lg items-center justify-center w-[92px] lg:w-full shrink-0"
|
|
style={{ backgroundColor: isUnlocked ? BADGE_BG_COLORS[index] : undefined }}
|
|
>
|
|
<Image
|
|
src={ isUnlocked ? BADGES[index] : GHOST_BADGES[index] }
|
|
alt="Streak badge"
|
|
h={{ base: '54px', lg: '82px' }}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-3 w-full items-start lg:items-center">
|
|
<span className="text-sm">{ target } Day streak</span>
|
|
<div className="flex w-full items-center justify-start lg:justify-center gap-2 px-0 lg:px-2 h-[32px]">
|
|
{ (() => {
|
|
if (badge.is_minted) {
|
|
return (
|
|
<span className="text-xs text-good">
|
|
Minted
|
|
</span>
|
|
);
|
|
}
|
|
if (badge.is_whitelisted) {
|
|
return (
|
|
<Link
|
|
href={ `https://badges.lux.network/mint/${ badge.address }` }
|
|
external
|
|
className="text-sm"
|
|
>
|
|
Mint a badge
|
|
</Link>
|
|
);
|
|
}
|
|
return (
|
|
<>
|
|
<span className="text-xs text-[var(--color-text-secondary)] min-w-[50px]">
|
|
{ progress }/{ target }
|
|
</span>
|
|
<Progress
|
|
value={ progress }
|
|
min={ 0 }
|
|
max={ target }
|
|
flex={ 1 }
|
|
color="green.400"
|
|
/>
|
|
</>
|
|
);
|
|
})() }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|