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]>
93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
import { Alert } from '@luxfi/ui/alert';
|
|
import { Button } from '@luxfi/ui/button';
|
|
import { Textarea } from '@luxfi/ui/textarea';
|
|
import { toaster } from '@luxfi/ui/toaster';
|
|
import mixpanel from 'mixpanel-browser';
|
|
import type { ChangeEvent } from 'react';
|
|
import React from 'react';
|
|
|
|
import config from 'configs/app';
|
|
import * as cookies from 'lib/cookies';
|
|
import useGradualIncrement from 'lib/hooks/useGradualIncrement';
|
|
import { useRollbar } from 'lib/rollbar';
|
|
import PageTitle from 'ui/shared/Page/PageTitle';
|
|
|
|
const Login = () => {
|
|
const rollbar = useRollbar();
|
|
const [ num, setNum ] = useGradualIncrement(0);
|
|
|
|
const [ isFormVisible, setFormVisibility ] = React.useState(false);
|
|
const [ token, setToken ] = React.useState('');
|
|
|
|
React.useEffect(() => {
|
|
const token = cookies.get(cookies.NAMES.API_TOKEN);
|
|
setFormVisibility(Boolean(!token && config.features.account.isEnabled));
|
|
// throw new Error('Render error');
|
|
}, []);
|
|
|
|
const checkRollbar = React.useCallback(() => {
|
|
rollbar?.error('Test error', { payload: 'foo' });
|
|
}, [ rollbar ]);
|
|
|
|
const checkMixpanel = React.useCallback(() => {
|
|
mixpanel.track('Test event', { my_prop: 'foo bar' });
|
|
}, []);
|
|
|
|
const handleTokenChange = React.useCallback((event: ChangeEvent<HTMLTextAreaElement>) => {
|
|
setToken(event.target.value);
|
|
}, []);
|
|
|
|
const handleSetTokenClick = React.useCallback(() => {
|
|
cookies.set(cookies.NAMES.API_TOKEN, token);
|
|
setToken('');
|
|
toaster.create({
|
|
title: 'Success 🥳',
|
|
description: 'Successfully set cookie',
|
|
type: 'success',
|
|
onStatusChange: (details) => {
|
|
if (details.status === 'unmounted') {
|
|
setFormVisibility(false);
|
|
}
|
|
},
|
|
});
|
|
}, [ token ]);
|
|
|
|
const handleNumIncrement = React.useCallback(() => {
|
|
for (let index = 0; index < 5; index++) {
|
|
setNum(5);
|
|
}
|
|
}, [ setNum ]);
|
|
|
|
return (
|
|
<div className="flex items-start max-w-[1000px] gap-4">
|
|
<PageTitle title="Login page 😂"/>
|
|
{ isFormVisible && (
|
|
<>
|
|
<Alert
|
|
status="warning"
|
|
title="!!! Temporary solution for authentication on localhost !!!"
|
|
inline={ false }
|
|
>
|
|
To Sign in go to production instance first, sign in there, copy obtained API token from cookie
|
|
<code className="ml-1">{ cookies.NAMES.API_TOKEN }</code> and paste it in the form below. After submitting the form you should be successfully
|
|
authenticated in current environment
|
|
</Alert>
|
|
<Textarea value={ token } onChange={ handleTokenChange } placeholder="API token"/>
|
|
<Button onClick={ handleSetTokenClick }>Set cookie</Button>
|
|
</>
|
|
) }
|
|
<div className="flex gap-x-2">
|
|
<Button className="bg-bad text-white hover:bg-bad" onClick={ checkRollbar }>Check Rollbar</Button>
|
|
<Button className="bg-muted text-white hover:bg-muted" onClick={ checkMixpanel }>Check Mixpanel</Button>
|
|
</div>
|
|
<div className="flex items-center gap-x-2">
|
|
<div className="text-center w-[50px]">{ num }</div>
|
|
<Button onClick={ handleNumIncrement } size="sm">add</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
};
|
|
|
|
export default Login;
|