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]>
142 lines
4.3 KiB
TypeScript
142 lines
4.3 KiB
TypeScript
import { Heading } from '@luxfi/ui/heading';
|
|
import { IconButton } from '@luxfi/ui/icon-button';
|
|
import { Image } from '@luxfi/ui/image';
|
|
import { Skeleton } from '@luxfi/ui/skeleton';
|
|
import type { MouseEvent } from 'react';
|
|
import React, { useCallback } from 'react';
|
|
|
|
import type { MarketplaceApp } from 'types/client/marketplace';
|
|
|
|
import useIsMobile from 'lib/hooks/useIsMobile';
|
|
import * as mixpanel from 'lib/mixpanel/index';
|
|
import { useColorModeValue } from 'toolkit/next/color-mode';
|
|
import { Link, LinkBox } from 'toolkit/next/link';
|
|
|
|
import FavoriteIcon from '../FavoriteIcon';
|
|
import MarketplaceAppCardLink from '../MarketplaceAppCardLink';
|
|
import MarketplaceAppIntegrationIcon from '../MarketplaceAppIntegrationIcon';
|
|
import FeaturedAppMobile from './FeaturedAppMobile';
|
|
|
|
type FeaturedAppProps = {
|
|
app: MarketplaceApp;
|
|
isFavorite: boolean;
|
|
isLoading: boolean;
|
|
onInfoClick: (id: string) => void;
|
|
onFavoriteClick: (id: string, isFavorite: boolean, source: 'Banner') => void;
|
|
onAppClick: (event: MouseEvent, id: string) => void;
|
|
};
|
|
|
|
const FeaturedApp = ({
|
|
app, isFavorite, isLoading, onAppClick,
|
|
onInfoClick, onFavoriteClick,
|
|
}: FeaturedAppProps) => {
|
|
const isMobile = useIsMobile();
|
|
|
|
const { id, url, external, title, logo, logoDarkMode, shortDescription, categories, internalWallet } = app;
|
|
const logoUrl = useColorModeValue(logo, logoDarkMode || logo);
|
|
const categoriesLabel = categories.join(', ');
|
|
|
|
const handleInfoClick = useCallback((event: MouseEvent) => {
|
|
event.preventDefault();
|
|
mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'More button', Info: id, Source: 'Banner' });
|
|
onInfoClick(id);
|
|
}, [ onInfoClick, id ]);
|
|
|
|
const handleFavoriteClick = useCallback(() => {
|
|
onFavoriteClick(id, isFavorite, 'Banner');
|
|
}, [ onFavoriteClick, id, isFavorite ]);
|
|
|
|
if (isMobile) {
|
|
return (
|
|
<FeaturedAppMobile
|
|
{ ...app }
|
|
onInfoClick={ handleInfoClick }
|
|
isFavorite={ isFavorite }
|
|
onFavoriteClick={ handleFavoriteClick }
|
|
isLoading={ isLoading }
|
|
onAppClick={ onAppClick }
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<LinkBox>
|
|
<div className="flex gap-4 rounded-md h-[100px] p-3 bg-muted dark:bg-white/10">
|
|
<Skeleton
|
|
loading={ isLoading }
|
|
w="76px"
|
|
h="76px"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<Image
|
|
src={ isLoading ? undefined : logoUrl }
|
|
alt={ `${ title } app icon` }
|
|
borderRadius="md"
|
|
/>
|
|
</Skeleton>
|
|
|
|
<div className="flex flex-col flex-1 gap-1">
|
|
<div className="flex items-center gap-3">
|
|
<Skeleton loading={ isLoading } display="flex" alignItems="center">
|
|
<Heading level="3">
|
|
<MarketplaceAppCardLink
|
|
id={ id }
|
|
url={ url }
|
|
external={ external }
|
|
title={ title }
|
|
onClick={ onAppClick }
|
|
/>
|
|
</Heading>
|
|
<MarketplaceAppIntegrationIcon external={ external } internalWallet={ internalWallet }/>
|
|
</Skeleton>
|
|
|
|
<Skeleton
|
|
loading={ isLoading }
|
|
color="text.secondary"
|
|
className="text-xs flex-1"
|
|
>
|
|
<span>{ categoriesLabel }</span>
|
|
</Skeleton>
|
|
|
|
{ !isLoading && (
|
|
<Link
|
|
className="text-sm font-medium"
|
|
href="#"
|
|
onClick={ handleInfoClick }
|
|
>
|
|
More info
|
|
</Link>
|
|
) }
|
|
|
|
{ !isLoading && (
|
|
<IconButton
|
|
aria-label="Mark as favorite"
|
|
title="Mark as favorite"
|
|
variant="icon_background"
|
|
size="md"
|
|
onClick={ handleFavoriteClick }
|
|
selected={ isFavorite }
|
|
>
|
|
<FavoriteIcon isFavorite={ isFavorite }/>
|
|
</IconButton>
|
|
) }
|
|
</div>
|
|
|
|
<Skeleton
|
|
loading={ isLoading }
|
|
asChild
|
|
>
|
|
<span className="line-clamp-2 text-sm">
|
|
{ shortDescription }
|
|
</span>
|
|
</Skeleton>
|
|
</div>
|
|
</div>
|
|
</LinkBox>
|
|
);
|
|
};
|
|
|
|
export default FeaturedApp;
|