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]>
60 lines
2.5 KiB
TypeScript
60 lines
2.5 KiB
TypeScript
import { Rating } from '@luxfi/ui/rating';
|
|
import { toaster } from '@luxfi/ui/toaster';
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
import React from 'react';
|
|
|
|
import config from 'configs/app';
|
|
import useApiFetch from 'lib/api/useApiFetch';
|
|
import type { EventTypes, EventPayload } from 'lib/mixpanel/index';
|
|
import * as mixpanel from 'lib/mixpanel/index';
|
|
import IconSvg from 'ui/shared/IconSvg';
|
|
|
|
const ratingDescriptions = [ 'Very bad', 'Bad', 'Average', 'Good', 'Excellent' ];
|
|
type Props = { appId: string; userRating?: number; source: EventPayload<EventTypes.APP_FEEDBACK>['Source'] };
|
|
|
|
const PopoverContent = ({ appId, userRating, source }: Props) => {
|
|
const apiFetch = useApiFetch();
|
|
const [ isSending, setIsSending ] = React.useState(false);
|
|
const [ ratingValue, setRatingValue ] = React.useState(userRating);
|
|
const queryClient = useQueryClient();
|
|
const handleValueChange = React.useCallback(async({ value }: { value: number }) => {
|
|
setIsSending(true);
|
|
try {
|
|
await apiFetch('admin:marketplace_rate_dapp', {
|
|
pathParams: { chainId: config.chain.id, dappId: appId },
|
|
fetchParams: { method: 'POST', body: { rating: value } },
|
|
});
|
|
setRatingValue(value);
|
|
queryClient.invalidateQueries({ queryKey: [ 'marketplace-dapps' ] });
|
|
toaster.success({ title: 'Awesome! Thank you 💜', description: 'Your rating improves the service' });
|
|
mixpanel.logEvent(mixpanel.EventTypes.APP_FEEDBACK, { Action: 'Rating', Source: source, AppId: appId, Score: value });
|
|
} catch (error) {
|
|
toaster.error({ title: 'Oops! Something went wrong', description: 'Please try again later' });
|
|
}
|
|
setIsSending(false);
|
|
}, [ appId, source, apiFetch, queryClient ]);
|
|
|
|
if (isSending) {
|
|
return (
|
|
<div className="flex items-center">
|
|
<div className="animate-spin rounded-full border-2 border-current border-t-transparent h-6 w-6"/>
|
|
<span className="text-base ml-3">Sending your feedback</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="flex items-center h-[30px]">
|
|
{ ratingValue && <IconSvg name="navigation/verified_contracts" className="w-[30px] h-[30px] text-good mr-1 -ml-[5px]"/> }
|
|
<span className="font-medium text-xs text-[var(--color-text-secondary)]">
|
|
{ ratingValue ? 'App is already rated by you' : 'How was your experience?' }
|
|
</span>
|
|
</div>
|
|
<Rating defaultValue={ ratingValue } onValueChange={ handleValueChange } label={ ratingDescriptions } className="h-8"/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default PopoverContent;
|