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]>
304 lines
8.4 KiB
TypeScript
304 lines
8.4 KiB
TypeScript
import type { BrowserContext } from '@playwright/test';
|
|
import React from 'react';
|
|
|
|
import config from 'configs/app';
|
|
import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
|
|
import * as cookies from 'lib/cookies';
|
|
import * as addressMock from 'mocks/address/address';
|
|
import * as implementationsMock from 'mocks/address/implementations';
|
|
import * as metadataMock from 'mocks/metadata/address';
|
|
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
|
|
import { test, expect } from 'playwright/lib';
|
|
|
|
import AddressEntity from './AddressEntity';
|
|
|
|
const variants = [ 'subheading', 'content' ] as const;
|
|
|
|
test.use({ viewport: { width: 180, height: 140 } });
|
|
|
|
test.describe('variant', () => {
|
|
variants.forEach((variant) => {
|
|
test(`${ variant }`, async({ render }) => {
|
|
const component = await render(
|
|
<AddressEntity
|
|
address={ addressMock.withoutName }
|
|
variant={ variant }
|
|
/>,
|
|
);
|
|
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
});
|
|
});
|
|
|
|
test.describe('contract', () => {
|
|
test('unverified', async({ render, page }) => {
|
|
const component = await render(
|
|
<AddressEntity
|
|
address={{ ...addressMock.contract, is_verified: false, implementations: null }}
|
|
/>,
|
|
);
|
|
|
|
await component.getByText(/eternal/i).hover();
|
|
await page.locator('div').filter({ hasText: 'EternalStorageProxy' }).first().waitFor({ state: 'visible' });
|
|
await expect(page).toHaveScreenshot();
|
|
});
|
|
|
|
test('verified', async({ render }) => {
|
|
const component = await render(
|
|
<AddressEntity
|
|
address={{ ...addressMock.contract, is_verified: true, implementations: null }}
|
|
/>,
|
|
);
|
|
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
});
|
|
|
|
test.describe('shield', () => {
|
|
const ICON_URL = 'https://images.com/icons/shield.png';
|
|
test.use({ viewport: { width: 500, height: 200 } });
|
|
|
|
test('regular address with image', async({ render, page, mockAssetResponse }) => {
|
|
await mockAssetResponse(ICON_URL, './playwright/mocks/image_svg.svg');
|
|
|
|
await render(
|
|
<AddressEntity
|
|
address={{ ...addressMock.withoutName }}
|
|
icon={{
|
|
shield: { src: ICON_URL },
|
|
hint: 'Address on TON',
|
|
}}
|
|
/>,
|
|
);
|
|
await page.locator('img').first().hover();
|
|
await page.locator('div').filter({ hasText: 'Address on TON' }).first().waitFor({ state: 'visible' });
|
|
|
|
await expect(page).toHaveScreenshot();
|
|
});
|
|
|
|
test('contract with icon', async({ render, page }) => {
|
|
await render(
|
|
<AddressEntity
|
|
address={{ ...addressMock.contract, is_verified: true, implementations: null }}
|
|
icon={{
|
|
shield: { name: 'brands/ton' },
|
|
hint: 'Address on TON',
|
|
hintPostfix: ' on TON',
|
|
}}
|
|
/>,
|
|
);
|
|
await page.getByRole('img').first().hover();
|
|
await page.locator('div').filter({ hasText: 'Verified contract on TON' }).first().waitFor({ state: 'visible' });
|
|
|
|
await expect(page).toHaveScreenshot();
|
|
});
|
|
});
|
|
|
|
test.describe('proxy contract', () => {
|
|
test.use({ viewport: { width: 500, height: 300 } });
|
|
|
|
test('with implementation name', async({ render, page }) => {
|
|
const component = await render(
|
|
<AddressEntity
|
|
address={ addressMock.contract }
|
|
/>,
|
|
);
|
|
|
|
await component.getByText(/home/i).hover();
|
|
await page.getByText(/implementation/i).waitFor({ state: 'visible' });
|
|
await expect(page).toHaveScreenshot();
|
|
});
|
|
|
|
test('without implementation name', async({ render, page }) => {
|
|
const component = await render(
|
|
<AddressEntity
|
|
address={{ ...addressMock.contract, implementations: [ { address_hash: addressMock.contract.implementations?.[0].address_hash as string } ] }}
|
|
/>,
|
|
);
|
|
|
|
await component.getByText(/eternal/i).hover();
|
|
await page.getByText(/implementation/i).waitFor({ state: 'visible' });
|
|
await expect(page).toHaveScreenshot();
|
|
});
|
|
|
|
test('without any name', async({ render, page }) => {
|
|
const component = await render(
|
|
<AddressEntity
|
|
address={{
|
|
...addressMock.contract,
|
|
name: undefined,
|
|
implementations: [ { address_hash: addressMock.contract.implementations?.[0].address_hash as string } ],
|
|
}}
|
|
/>,
|
|
);
|
|
|
|
await component.getByText(addressMock.contract.hash.slice(0, 4)).hover();
|
|
await page.getByText(/implementation/i).waitFor({ state: 'visible' });
|
|
await expect(page).toHaveScreenshot();
|
|
});
|
|
|
|
test('with multiple implementations', async({ render, page }) => {
|
|
const component = await render(
|
|
<AddressEntity
|
|
address={{ ...addressMock.contract, implementations: implementationsMock.multiple }}
|
|
/>,
|
|
);
|
|
|
|
await component.getByText(/eternal/i).hover();
|
|
await page.getByText(/implementation/i).waitFor({ state: 'visible' });
|
|
await expect(page).toHaveScreenshot();
|
|
});
|
|
|
|
test('with name tag', async({ render, page }) => {
|
|
const component = await render(
|
|
<AddressEntity
|
|
address={{ ...addressMock.contract, metadata: { reputation: 1, tags: [ metadataMock.nameTag ] } }}
|
|
/>,
|
|
);
|
|
|
|
await component.getByText(/quack/i).hover();
|
|
await page.getByText(/implementation/i).waitFor({ state: 'visible' });
|
|
await expect(page).toHaveScreenshot();
|
|
});
|
|
});
|
|
|
|
test.describe('loading', () => {
|
|
test('without alias', async({ render }) => {
|
|
const component = await render(
|
|
<AddressEntity
|
|
address={ addressMock.withoutName }
|
|
isLoading
|
|
/>,
|
|
);
|
|
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
|
|
test('with alias', async({ render }) => {
|
|
const component = await render(
|
|
<AddressEntity
|
|
address={ addressMock.withName }
|
|
isLoading
|
|
/>,
|
|
);
|
|
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
|
|
});
|
|
|
|
test('with ENS', async({ render }) => {
|
|
const component = await render(
|
|
<AddressEntity
|
|
address={ addressMock.withEns }
|
|
/>,
|
|
);
|
|
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
|
|
test('delegated address +@dark-mode', async({ render }) => {
|
|
const component = await render(
|
|
<AddressEntity
|
|
address={ addressMock.delegated }
|
|
/>,
|
|
);
|
|
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
|
|
test('with name tag', async({ render }) => {
|
|
const component = await render(
|
|
<AddressEntity
|
|
address={ addressMock.withNameTag }
|
|
/>,
|
|
);
|
|
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
|
|
test.describe('with cex deposit tag', () => {
|
|
test.use({ viewport: { width: 500, height: 140 } });
|
|
|
|
test('default', async({ render }) => {
|
|
const address = { ...addressMock.withNameTag, metadata: { reputation: 1, tags: [ metadataMock.cexDepositTag ] } };
|
|
|
|
const component = await render(
|
|
<AddressEntity
|
|
address={ address }
|
|
/>,
|
|
);
|
|
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
});
|
|
|
|
test('external link', async({ render }) => {
|
|
const component = await render(
|
|
<AddressEntity
|
|
address={ addressMock.withoutName }
|
|
link={{ external: true }}
|
|
/>,
|
|
);
|
|
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
|
|
test('no link', async({ render }) => {
|
|
const component = await render(
|
|
<AddressEntity
|
|
address={ addressMock.withoutName }
|
|
noLink
|
|
/>,
|
|
);
|
|
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
|
|
test('customization', async({ render }) => {
|
|
const component = await render(
|
|
<AddressEntity
|
|
address={ addressMock.withoutName }
|
|
truncation="constant"
|
|
className="p-3 border border-border"
|
|
/>,
|
|
);
|
|
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
|
|
test('hover', async({ page, render }) => {
|
|
const component = await render(
|
|
<AddressHighlightProvider>
|
|
<div style={{ padding: 12 }}>
|
|
<AddressEntity
|
|
address={ addressMock.withoutName }
|
|
/>
|
|
</div>
|
|
</AddressHighlightProvider>,
|
|
);
|
|
|
|
await component.getByText(addressMock.hash.slice(0, 4)).hover();
|
|
await page.getByText(addressMock.hash).waitFor({ state: 'visible' });
|
|
await expect(page).toHaveScreenshot();
|
|
});
|
|
|
|
const bech32test = test.extend<{ context: BrowserContext }>({
|
|
context: async({ context }, use) => {
|
|
context.addCookies([ { name: cookies.NAMES.ADDRESS_FORMAT, value: 'bech32', domain: config.app.host, path: '/' } ]);
|
|
use(context);
|
|
},
|
|
});
|
|
|
|
bech32test('bech32 format', async({ render, mockEnvs }) => {
|
|
await mockEnvs(ENVS_MAP.addressBech32Format);
|
|
const component = await render(
|
|
<AddressEntity
|
|
address={ addressMock.withoutName }
|
|
/>,
|
|
);
|
|
|
|
await expect(component).toHaveScreenshot();
|
|
});
|