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]>
148 lines
3.9 KiB
TypeScript
148 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
|
|
import * as chainDataMock from 'mocks/multichain/chains';
|
|
import * as tokenMock from 'mocks/tokens/tokenInfo';
|
|
import { stableHover } from 'playwright/helpers/stableHover';
|
|
import { test, expect } from 'playwright/lib';
|
|
|
|
import TokenEntity, { Icon } from './TokenEntity';
|
|
|
|
const variants = [ 'subheading', 'content' ] as const;
|
|
|
|
test.use({ viewport: { width: 300, height: 100 } });
|
|
|
|
test.describe('variant', () => {
|
|
variants.forEach((variant) => {
|
|
test(`${ variant }`, async({ render }) => {
|
|
const component = await render(
|
|
<TokenEntity
|
|
token={ tokenMock.tokenInfo }
|
|
variant={ variant }
|
|
/>,
|
|
);
|
|
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
|
|
test(`${ variant } with chain data`, async({ render, mockAssetResponse }) => {
|
|
const LOGO_URL = 'https://example.com/logo.png';
|
|
const chainLogoUrl = chainDataMock.chainA.logo;
|
|
await mockAssetResponse(LOGO_URL, './playwright/mocks/image_s.jpg');
|
|
await mockAssetResponse(chainLogoUrl as string, './playwright/mocks/image_svg.svg');
|
|
|
|
const component = await render(
|
|
<TokenEntity
|
|
token={{
|
|
type: 'ERC-20',
|
|
name: 'This token is the best token ever',
|
|
symbol: 'DUCK DUCK DUCK',
|
|
address_hash: tokenMock.tokenInfo.address_hash,
|
|
icon_url: LOGO_URL,
|
|
reputation: 'ok',
|
|
}}
|
|
chain={ chainDataMock.chainA }
|
|
/>,
|
|
);
|
|
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
});
|
|
});
|
|
|
|
test('icon in heading variant', async({ render, mockAssetResponse }) => {
|
|
const chainLogoUrl = chainDataMock.chainA.logo;
|
|
await mockAssetResponse(tokenMock.tokenInfo.icon_url as string, './playwright/mocks/image_s.jpg');
|
|
await mockAssetResponse(chainLogoUrl as string, './playwright/mocks/image_svg.svg');
|
|
|
|
const component = await render(
|
|
<Icon
|
|
token={ tokenMock.tokenInfo }
|
|
variant="heading"
|
|
chain={ chainDataMock.chainA }
|
|
/>,
|
|
);
|
|
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
|
|
test('with logo, long name and symbol', async({ page, render }) => {
|
|
const LOGO_URL = 'https://example.com/logo.png';
|
|
await page.route(LOGO_URL, (route) => {
|
|
return route.fulfill({
|
|
status: 200,
|
|
path: './playwright/mocks/image_s.jpg',
|
|
});
|
|
});
|
|
|
|
await render(
|
|
<TokenEntity
|
|
token={{
|
|
type: 'ERC-20',
|
|
name: 'This token is the best token ever',
|
|
symbol: 'DUCK DUCK DUCK',
|
|
address_hash: tokenMock.tokenInfo.address_hash,
|
|
icon_url: LOGO_URL,
|
|
reputation: 'ok',
|
|
}}
|
|
/>,
|
|
);
|
|
|
|
await stableHover(page.getByText(/this/i));
|
|
await expect(page).toHaveScreenshot();
|
|
|
|
await stableHover(page.getByText(/duc/i));
|
|
await expect(page).toHaveScreenshot();
|
|
});
|
|
|
|
test('scam token', async({ page, render, mockEnvs }) => {
|
|
await mockEnvs([
|
|
[ 'NEXT_PUBLIC_VIEWS_TOKEN_SCAM_TOGGLE_ENABLED', 'true' ],
|
|
]);
|
|
|
|
const LOGO_URL = 'https://example.com/logo.png';
|
|
await page.route(LOGO_URL, (route) => {
|
|
return route.fulfill({
|
|
status: 200,
|
|
path: './playwright/mocks/image_s.jpg',
|
|
});
|
|
});
|
|
|
|
await render(
|
|
<TokenEntity
|
|
token={{
|
|
type: 'ERC-20',
|
|
name: 'Duck Token',
|
|
symbol: 'DUCK',
|
|
address_hash: tokenMock.tokenInfo.address_hash,
|
|
icon_url: LOGO_URL,
|
|
reputation: 'scam',
|
|
}}
|
|
/>,
|
|
);
|
|
await expect(page).toHaveScreenshot();
|
|
});
|
|
|
|
test('loading', async({ render }) => {
|
|
const component = await render(
|
|
<TokenEntity
|
|
token={ tokenMock.tokenInfo }
|
|
isLoading
|
|
/>,
|
|
);
|
|
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
|
|
test('customization', async({ render }) => {
|
|
const component = await render(
|
|
<div className="border border-warn/30">
|
|
<TokenEntity
|
|
token={ tokenMock.tokenInfo }
|
|
className="p-2 max-w-[200px] border border-border"
|
|
/>
|
|
</div>,
|
|
);
|
|
|
|
await expect(component).toHaveScreenshot();
|
|
});
|