mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
zeekayandHanzo Dev
86cfb45d2c
TypeScript 7 reports TS2882 for a stylesheet side-effect import with no type declaration; TS 5.x accepted them silently. Bundlers resolve stylesheets through their own loaders, so the import never reaches the TypeScript module resolver — this declares them legitimate rather than giving them a shape. MEASURED, not assumed: this repo reports TS2882 under tsc 7 without the file and zero with it. Repos where a framework already ships ambient CSS declarations (Next's next-env.d.ts) were left alone — the declaration is inert there and was not added. Co-Authored-By: Hanzo Dev <[email protected]>
71 lines
2.8 KiB
TypeScript
71 lines
2.8 KiB
TypeScript
import config from 'configs/app';
|
|
import { useRewardsContext } from 'lib/contexts/rewards';
|
|
import { useColorModeValue } from 'toolkit/next/color-mode';
|
|
import { Heading } from '@luxfi/ui/heading';
|
|
import { Image } from '@luxfi/ui/image';
|
|
import { Link } from 'toolkit/next/link';
|
|
|
|
export default function RewardsActivityPassCard() {
|
|
const { rewardsConfigQuery } = useRewardsContext();
|
|
const backgroundImage = useColorModeValue('/static/merits/cells.svg', '/static/merits/cells_dark.svg');
|
|
|
|
const activityPassUrl = config.apis.rewards ?
|
|
|
|
`${ config.apis.rewards.endpoint }/?tab=spend&id=${ rewardsConfigQuery.data?.rewards?.explorer_activity_pass_id }&utm_source=lux&utm_medium=tasks` :
|
|
undefined;
|
|
|
|
return (
|
|
<div className="flex p-1.5 md:p-2 border border-gray-200 dark:border-[var(--color-whiteAlpha-200)] rounded-lg gap-1 md:gap-10 flex-col md:flex-row">
|
|
<div className="flex flex-1 flex-col p-3 gap-2">
|
|
<Heading level="3">
|
|
Activity pass
|
|
</Heading>
|
|
<p className="text-sm">
|
|
Grab your{ ' ' }
|
|
<Link external href={ activityPassUrl } loading={ rewardsConfigQuery.isLoading }>
|
|
Activity pass
|
|
</Link>{ ' ' }
|
|
then engage with various { config.chain.name || '' } Explorer products and features to earn Merits every day!{ ' ' }
|
|
<Link external href="https://docs.lux.network/using-explorer/merits/activity-pass">
|
|
Learn more
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
<div
|
|
className="flex flex-col md:flex-row justify-between items-center h-[160px] md:h-[120px] pr-0 md:pr-8 pl-0 md:pl-[86px] pt-4 md:pt-0 pb-3 md:pb-0 rounded-base overflow-hidden relative"
|
|
// `--color-light` is defined nowhere in this repo, so the fallback was
|
|
// unconditional: the Merits card painted a literal tan #FFEFCE panel with
|
|
// an amber #FFD57C button and #2B1A3F ink. Named tokens now, no fallback.
|
|
style={{ flex: 'none', backgroundColor: 'var(--color-bg-info)' }}
|
|
>
|
|
<Image
|
|
src={ backgroundImage }
|
|
alt="Background"
|
|
width="268px"
|
|
height="184px"
|
|
position="absolute"
|
|
top="-20px"
|
|
left={{ base: 'calc(50% - 134px)', md: '-8px' }}
|
|
/>
|
|
<Image
|
|
src="/static/merits/activity_pass.svg"
|
|
alt="Activity pass"
|
|
width="79px"
|
|
height="86px"
|
|
zIndex={ 1 }
|
|
/>
|
|
<Link
|
|
external
|
|
href={ activityPassUrl }
|
|
variant="underlaid"
|
|
iconColor="var(--color-button-solid-text)"
|
|
className="font-medium shrink-0 z-[1]"
|
|
style={{ backgroundColor: 'var(--color-button-solid-bg)', color: 'var(--color-button-solid-text)' }}
|
|
>
|
|
Grab Activity pass
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|