BlocksContent tests

.vscode/tasks.json

@@ -113,6 +113,7 @@
             "presentation": {
                 "reveal": "always",
                 "panel": "new",
+                "focus": true,
             },
             "icon": {
                 "color": "terminal.ansiBlue",
@@ -131,6 +132,7 @@
             "presentation": {
                 "reveal": "always",
                 "panel": "new",
+                "focus": true,
             },
             "icon": {
                 "color": "terminal.ansiBlue",
@@ -149,6 +151,7 @@
             "presentation": {
                 "reveal": "always",
                 "panel": "new",
+                "focus": true,
             },
             "icon": {
                 "color": "terminal.ansiBlue",
@@ -169,6 +172,7 @@
             "presentation": {
                 "reveal": "always",
                 "panel": "new",
+                "focus": true,
             },
             "icon": {
                 "color": "terminal.ansiBlue",
@@ -188,6 +192,7 @@
                 "reveal": "always",
                 "panel": "new",
                 "close": true,
+                "focus": true,
             },
             "icon": {
                 "color": "terminal.ansiBlue",
@@ -206,6 +211,7 @@
             "presentation": {
                 "reveal": "always",
                 "panel": "new",
+                "focus": true,
             },
             "icon": {
                 "color": "terminal.ansiBlue",
@@ -227,6 +233,7 @@
                 "panel": "new",
                 "close": true,
                 "revealProblems": "onProblem",
+                "focus": true,
             },
             "icon": {
                 "color": "terminal.ansiRed",

mocks/blocks/block.ts

-export const base = {
+import type { Block, BlocksResponse } from 'types/api/block';
+
+export const base: Block = {
   base_fee_per_gas: '10000000000',
   burnt_fees: '5449200000000000',
   burnt_fees_percentage: 20.292245650793845,
@@ -39,7 +41,7 @@ export const base = {
   ],
   size: 2448,
   state_root: 'TODO',
-  timestamp: '2022-10-24T11:46:05.000000Z',
+  timestamp: '2022-11-11T11:59:35Z',
   total_difficulty: '10258276095980170141167591583995189665817672619',
   tx_count: 5,
   tx_fees: '26853607500000000',
@@ -82,3 +84,48 @@ export const genesis = {
   type: 'block',
   uncles_hashes: [],
 };
+
+export const base2: Block = {
+  ...base,
+  height: base.height - 1,
+  size: 592,
+  miner: {
+    hash: '0xDfE10D55d9248B2ED66f1647df0b0A46dEb25165',
+    implementation_name: null,
+    is_contract: false,
+    is_verified: null,
+    name: 'Kiryl Ihnatsyeu',
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  timestamp: '2022-11-11T11:46:05Z',
+  tx_count: 253,
+  gas_target_percentage: 23.6433,
+  gas_used: '6333342',
+  gas_used_percentage: 87.859504,
+  burnt_fees: '232438000000000000',
+  burnt_fees_percentage: 65.3333333333334,
+  rewards: [
+    {
+      reward: '500000000000000000',
+      type: 'Chore Reward',
+    },
+    {
+      reward: '1017432850000000000',
+      type: 'Miner Reward',
+    },
+    {
+      reward: '500000000000000000',
+      type: 'Emission Reward',
+    },
+  ],
+};
+
+export const baseListResponse: BlocksResponse = {
+  items: [
+    base,
+    base2,
+  ],
+  next_page_params: null,
+};

playwright/index.ts

@@ -14,7 +14,7 @@ beforeMount(async({ hooksConfig }) => {
   router.useRouter = () => hooksConfig?.router || NEXT_ROUTER_MOCK;
 
   // set current date
-  MockDate.set('2022-11-11');
+  MockDate.set('2022-11-11T12:00:00Z');
 });
 
 export {};

types/api/block.ts

@@ -16,10 +16,10 @@ export interface Block {
   total_difficulty: string;
   gas_used: string | null;
   gas_limit: string;
-  nonce: number;
-  base_fee_per_gas: number | null;
-  burnt_fees: number | null;
-  priority_fee: number | null;
+  nonce: string;
+  base_fee_per_gas: string | null;
+  burnt_fees: string | null;
+  priority_fee: string | null;
   extra_data: string | null;
   state_root: string | null;
   rewards?: Array<Reward>;

types/api/reward.ts

 export interface Reward {
   reward: string;
-  type: 'Miner Reward' | 'Validator Reward' | 'Emission Reward' | 'Chore Reward' | 'Uncle Reward';
+  type: 'Miner Reward' | 'Validator Reward' | 'Emission Reward' | 'Chore Reward' | 'Uncle Reward' | 'POA Mania Reward';
 }

ui/block/BlockDetails.tsx

@@ -228,7 +228,7 @@ const BlockDetails = () => {
           </Tooltip>
         ) }
       </DetailsInfoItem>
-      { data.priority_fee !== null && data.priority_fee > 0 && (
+      { data.priority_fee !== null && BigNumber(data.priority_fee).gt(ZERO) && (
         <DetailsInfoItem
           title="Priority fee / Tip"
           hint="User-defined tips sent to validator for transaction priority/inclusion."

ui/blocks/BlocksContent.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 BlocksContent from './BlocksContent';
+
+const API_URL = '/node-api/blocks';
+
+test('base view +@mobile', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(blockMock.baseListResponse),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <BlocksContent/>
+    </TestApp>,
+  );
+
+  await page.waitForResponse(API_URL),
+
+  await expect(component).toHaveScreenshot();
+});