test for l2 fields

configs/envs/.env.pw

@@ -15,6 +15,7 @@ NEXT_PUBLIC_NETWORK_LOGO=
 NEXT_PUBLIC_NETWORK_SMALL_LOGO=
 NEXT_PUBLIC_NETWORK_RPC_URL=https://core.poa.network
 NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_IS_L2_NETWORK=false
 
 # api config
 NEXT_PUBLIC_API_HOST=blockscout.com

mocks/txs/tx.ts

@@ -242,3 +242,11 @@ export const withActionsUniswap: Transaction = {
     },
   ],
 };
+
+export const l2tx: Transaction = {
+  ...base,
+  l1_gas_price: '82702201886',
+  l1_fee_scalar: '1.0',
+  l1_gas_used: '17060',
+  l1_fee: '1584574188135760',
+};

ui/tx/TxDetails.pw.tsx

@@ -2,6 +2,7 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
+import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
 import insertAdPlaceholder from 'playwright/utils/insertAdPlaceholder';
@@ -141,3 +142,28 @@ test('with actions uniswap +@mobile +@dark-mode', async({ mount, page }) => {
   await insertAdPlaceholder(page);
   await expect(component).toHaveScreenshot();
 });
+
+const l2Test = test.extend({
+  context: contextWithEnvs([
+    { name: 'NEXT_PUBLIC_IS_L2_NETWORK', value: 'true' },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ]) as any,
+});
+
+l2Test('l2', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(txMock.l2tx),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <TxDetails/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await insertAdPlaceholder(page);
+
+  await expect(component).toHaveScreenshot();
+});