arbitrum tests

mocks/arbitrum/deposits.ts

+import type { ArbitrumL2MessagesResponse } from 'types/api/arbitrumL2';
+
+export const baseResponse: ArbitrumL2MessagesResponse = {
+  items: [
+    {
+      completion_transaction_hash: '0x0b7d58c0a6b4695ba28d99df928591fb931c812c0aab6d0093ff5040d2f9bc5e',
+      id: 181920,
+      origination_address: '0x2B51Ae4412F79c3c1cB12AA40Ea4ECEb4e80511a',
+      origination_transaction_block_number: 123456,
+      origination_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436',
+      origination_timestamp: '2023-06-01T14:46:48.000000Z',
+      status: 'initiated',
+    },
+    {
+      completion_transaction_hash: '0x0b7d58c0a6b4695ba28d99df928591fb931c812c0aab6d0093ff5040d2f9bc5e',
+      id: 181921,
+      origination_address: '0x2B51Ae4412F79c3c1cB12AA40Ea4ECEb4e80511a',
+      origination_transaction_block_number: 123400,
+      origination_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436',
+      origination_timestamp: '2023-06-01T14:46:48.000000Z',
+      status: 'relayed',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    id: 123,
+    direction: 'to-rollup',
+  },
+};

mocks/arbitrum/txnBatch.ts

+import type { ArbitrumL2TxnBatch } from 'types/api/arbitrumL2';
+
+import { finalized } from './txnBatches';
+
+export const batchData: ArbitrumL2TxnBatch = {
+  ...finalized,
+  after_acc: '0xcd064f3409015e8e6407e492e5275a185e492c6b43ccf127f22092d8057a9ffb',
+  before_acc: '0x2ed7c4985eb778d76ec400a43805e7feecc8c2afcdb492dbe5caf227de6d37bc',
+  start_block: 1245209,
+  end_block: 1245490,
+};

mocks/arbitrum/txnBatches.ts

+import type { ArbitrumL2TxnBatchesItem, ArbitrumL2TxnBatchesResponse } from 'types/api/arbitrumL2';
+
+export const finalized: ArbitrumL2TxnBatchesItem = {
+  number: 12345,
+  block_count: 12345,
+  transactions_count: 10000,
+  commitment_transaction: {
+    block_number: 12345,
+    timestamp: '2022-04-17T08:51:58.000000Z',
+    hash: '0x262e7215739d6a7e33b2c20b45a838801a0f5f080f20bec8e54eb078420c4661',
+    status: 'finalized',
+  },
+};
+
+export const unfinalized: ArbitrumL2TxnBatchesItem = {
+  number: 12344,
+  block_count: 10000,
+  transactions_count: 103020,
+  commitment_transaction: {
+    block_number: 12340,
+    timestamp: '2022-04-17T08:51:58.000000Z',
+    hash: '0x262e7215739d6a7e33b2c20b45a838801a0f5f080f20bec8e54eb078420c4661',
+    status: 'unfinalized',
+  },
+};
+
+export const baseResponse: ArbitrumL2TxnBatchesResponse = {
+  items: [
+    finalized,
+    unfinalized,
+  ],
+  next_page_params: {
+    items_count: 50,
+    number: 123,
+  },
+};

mocks/arbitrum/withdrawals.ts

+import type { ArbitrumL2MessagesResponse } from 'types/api/arbitrumL2';
+
+export const baseResponse: ArbitrumL2MessagesResponse = {
+  items: [
+    {
+      completion_transaction_hash: '0x0b7d58c0a6b4695ba28d99df928591fb931c812c0aab6d0093ff5040d2f9bc5e',
+      id: 181920,
+      origination_address: '0x2B51Ae4412F79c3c1cB12AA40Ea4ECEb4e80511a',
+      origination_transaction_block_number: 123456,
+      origination_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436',
+      origination_timestamp: '2023-06-01T14:46:48.000000Z',
+      status: 'sent',
+    },
+    {
+      completion_transaction_hash: '0x0b7d58c0a6b4695ba28d99df928591fb931c812c0aab6d0093ff5040d2f9bc5e',
+      id: 181921,
+      origination_address: '0x2B51Ae4412F79c3c1cB12AA40Ea4ECEb4e80511a',
+      origination_transaction_block_number: 123400,
+      origination_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436',
+      origination_timestamp: '2023-06-01T14:46:48.000000Z',
+      status: 'confirmed',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    id: 123,
+    direction: 'from-rollup',
+  },
+};

ui/pages/ArbitrumL2Deposits.pw.tsx

+import React from 'react';
+
+import * as depositsMock from 'mocks/arbitrum/deposits';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import ArbitrumL2Deposits from './ArbitrumL2Deposits';
+
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.arbitrumRollup);
+  await mockApiResponse('arbitrum_l2_messages', depositsMock.baseResponse, { pathParams: { direction: 'to-rollup' } });
+  await mockApiResponse('arbitrum_l2_messages_count', 3971111, { pathParams: { direction: 'to-rollup' } });
+
+  const component = await render(<ArbitrumL2Deposits/>);
+
+  await expect(component).toHaveScreenshot();
+});

ui/pages/ArbitrumL2TxnBatch.pw.tsx

+import React from 'react';
+
+import { batchData } from 'mocks/arbitrum/txnBatch';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect, devices } from 'playwright/lib';
+
+import ArbitrumL2TxnBatch from './ArbitrumL2TxnBatch';
+
+const batchNumber = '5';
+const hooksConfig = {
+  router: {
+    query: { number: batchNumber },
+  },
+};
+
+test.beforeEach(async({ mockTextAd, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.arbitrumRollup);
+  await mockTextAd();
+  await mockApiResponse('arbitrum_l2_txn_batch', batchData, { pathParams: { number: batchNumber } });
+});
+
+test('base view', async({ render }) => {
+  const component = await render(<ArbitrumL2TxnBatch/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+  test('base view', async({ render }) => {
+    const component = await render(<ArbitrumL2TxnBatch/>, { hooksConfig });
+    await expect(component).toHaveScreenshot();
+  });
+});

ui/pages/ArbitrumL2TxnBatches.pw.tsx

+import React from 'react';
+
+import * as arbitrumTxnBatchesMock from 'mocks/arbitrum/txnBatches';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import ArbitrumL2TxnBatches from './ArbitrumL2TxnBatches';
+
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+  test.slow();
+  await mockEnvs(ENVS_MAP.arbitrumRollup);
+  await mockTextAd();
+  await mockApiResponse('arbitrum_l2_txn_batches', arbitrumTxnBatchesMock.baseResponse);
+  await mockApiResponse('arbitrum_l2_txn_batches_count', 9927);
+
+  const component = await render(<ArbitrumL2TxnBatches/>);
+  await expect(component).toHaveScreenshot();
+});

ui/pages/ArbitrumL2Withdrawals.pw.tsx

+import React from 'react';
+
+import * as depositsMock from 'mocks/arbitrum/withdrawals';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import ArbitrumL2Withdrawals from './ArbitrumL2Withdrawals';
+
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.arbitrumRollup);
+  await mockApiResponse('arbitrum_l2_messages', depositsMock.baseResponse, { pathParams: { direction: 'from-rollup' } });
+  await mockApiResponse('arbitrum_l2_messages_count', 3971111, { pathParams: { direction: 'from-rollup' } });
+
+  const component = await render(<ArbitrumL2Withdrawals/>);
+
+  await expect(component).toHaveScreenshot();
+});