BlockDetails tests

mocks/blocks/block.ts

+export const base = {
+  base_fee_per_gas: '10000000000',
+  burnt_fees: '5449200000000000',
+  burnt_fees_percentage: 20.292245650793845,
+  difficulty: '340282366920938463463374607431768211454',
+  extra_data: 'TODO',
+  gas_limit: '12500000',
+  gas_target_percentage: -91.28128,
+  gas_used: '544920',
+  gas_used_percentage: 4.35936,
+  hash: '0xccc75136de485434d578b73df66537c06b34c3c9b12d085daf95890c914fc2bc',
+  height: 30146364,
+  miner: {
+    hash: '0xdAd49e6CbDE849353ab27DeC6319E687BFc91A41',
+    implementation_name: null,
+    is_contract: false,
+    is_verified: null,
+    name: 'Alex Emelyanov',
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  nonce: '0x0000000000000000',
+  parent_hash: '0x44125f0eb36a9d942e0c23bb4e8117f7ba86a9537a69b59c0025986ed2b7500f',
+  priority_fee: '23211757500000000',
+  rewards: [
+    {
+      reward: '500000000000000000',
+      type: 'POA Mania Reward',
+    },
+    {
+      reward: '1026853607500000000',
+      type: 'Validator Reward',
+    },
+    {
+      reward: '500000000000000000',
+      type: 'Emission Reward',
+    },
+  ],
+  size: 2448,
+  state_root: 'TODO',
+  timestamp: '2022-10-24T11:46:05.000000Z',
+  total_difficulty: '10258276095980170141167591583995189665817672619',
+  tx_count: 5,
+  tx_fees: '26853607500000000',
+  type: 'block',
+  uncles_hashes: [],
+};
+
+export const genesis = {
+  base_fee_per_gas: null,
+  burnt_fees: null,
+  burnt_fees_percentage: null,
+  difficulty: '131072',
+  extra_data: 'TODO',
+  gas_limit: '6700000',
+  gas_target_percentage: -100,
+  gas_used: '0',
+  gas_used_percentage: 0,
+  hash: '0x39f02c003dde5b073b3f6e1700fc0b84b4877f6839bb23edadd3d2d82a488634',
+  height: 0,
+  miner: {
+    hash: '0x0000000000000000000000000000000000000000',
+    implementation_name: null,
+    is_contract: false,
+    is_verified: null,
+    name: null,
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  nonce: '0x0000000000000000',
+  parent_hash: '0x0000000000000000000000000000000000000000000000000000000000000000',
+  priority_fee: null,
+  rewards: [],
+  size: 533,
+  state_root: 'TODO',
+  timestamp: '2017-12-16T00:13:24.000000Z',
+  total_difficulty: '131072',
+  tx_count: 0,
+  tx_fees: '0',
+  type: 'block',
+  uncles_hashes: [],
+};

ui/block/BlockDetails.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as blockMock from 'mocks/blocks/block';
+import TestApp from 'playwright/TestApp';
+
+import BlockDetails from './BlockDetails';
+
+const API_URL = '/node-api/blocks/1';
+const hooksConfig = {
+  router: {
+    query: { id: 1 },
+  },
+};
+
+test('regular block +@mobile +@dark-mode', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(blockMock.base),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <BlockDetails/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await page.waitForResponse(API_URL),
+  await page.getByText('View details').click();
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('genesis block', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(blockMock.genesis),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <BlockDetails/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await page.waitForResponse(API_URL),
+  await page.getByText('View details').click();
+
+  await expect(component).toHaveScreenshot();
+});