tests

mocks/contracts/index.ts

+import type { VerifiedContract, VerifiedContractsResponse } from 'types/api/contracts';
+
+export const contract1: VerifiedContract = {
+  address: {
+    hash: '0xef490030ac0d53B70E304b6Bc5bF657dc6780bEB',
+    implementation_name: null,
+    is_contract: true,
+    is_verified: null,
+    name: 'MockERC20',
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  coin_balance: '2346534676900000008',
+  compiler_version: 'v0.8.17+commit.8df45f5f',
+  has_constructor_args: false,
+  language: 'solidity',
+  market_cap: null,
+  optimization_enabled: false,
+  tx_count: 7334224,
+  verified_at: '2022-09-16T18:49:29.605179Z',
+};
+
+export const contract2: VerifiedContract = {
+  address: {
+    hash: '0xB2218bdEbe8e90f80D04286772B0968ead666942',
+    implementation_name: null,
+    is_contract: true,
+    is_verified: null,
+    name: 'EternalStorageProxyWithSomeExternalLibrariesAndEvenMore',
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  coin_balance: '9078234570352343999',
+  compiler_version: 'v0.3.1+commit.0463ea4c',
+  has_constructor_args: true,
+  language: 'vyper',
+  market_cap: null,
+  optimization_enabled: true,
+  tx_count: 440,
+  verified_at: '2021-09-07T20:01:56.076979Z',
+};
+
+export const baseResponse: VerifiedContractsResponse = {
+  items: [
+    contract1,
+    contract2,
+  ],
+  next_page_params: {
+    items_count: '50',
+    smart_contract_id: '172',
+  },
+};

ui/pages/VerifiedContracts.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as textAdMock from 'mocks/ad/textAd';
+import * as verifiedContractsMock from 'mocks/contracts/index';
+import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
+
+import VerifiedContracts from './VerifiedContracts';
+
+const VERIFIED_CONTRACTS_API_URL = buildApiUrl('verified_contracts');
+
+test.beforeEach(async({ page }) => {
+  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(textAdMock.duck),
+  }));
+  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
+    return route.fulfill({
+      status: 200,
+      path: './playwright/image_s.jpg',
+    });
+  });
+});
+
+test('base view +@mobile', async({ mount, page }) => {
+  await page.route(VERIFIED_CONTRACTS_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(verifiedContractsMock.baseResponse),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <VerifiedContracts/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});