Direct OP Withdrawal Claim button (#3123)

* Direct OP Withdrawal Claim button instead of NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL env

Resolves #3022

* [skip ci] fix envs preset

Author: tom2drum

configs/app/features/rollup.ts

@@ -23,7 +23,7 @@ const parentChain: ParentChain | undefined = (() => {
 
   return {
     ...envValue,
-    baseUrl: baseUrl ?? envValue?.baseUrl,
+    baseUrl: baseUrl || envValue?.baseUrl || '',
   };
 })();
 

configs/envs/.env.optimism_sepolia

@@ -9,6 +9,8 @@ NEXT_PUBLIC_APP_PORT=3000
 NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
+NEXT_PUBLIC_ROLLUP_PARENT_CHAIN={'id':11155111,'name':'Sepolia','baseUrl':'https://eth-sepolia.blockscout.com','rpcUrls':['https://0xrpc.io/sep'],'currency':{'name':'Ether','symbol':'ETH','decimals':18},'isTestnet':true}
+
 # Instance ENVs
 NEXT_PUBLIC_AD_BANNER_ENABLE_SPECIFY=true
 NEXT_PUBLIC_ADDRESS_3RD_PARTY_WIDGETS=['talentprotocol','drops','blockscoutbadges','gitpoap','efp','etherscore','webacy','humanpassport','trustblock','smartmuv','humanode','deepdao']

mocks/optimism/withdrawals.ts

@@ -21,6 +21,13 @@ export const data: OptimisticL2WithdrawalsResponse = {
       msg_nonce: 396,
       msg_nonce_version: 1,
       status: 'Ready to prove',
+      portal_contract_address_hash: null,
+      msg_sender_address_hash: null,
+      msg_target_address_hash: null,
+      msg_data: null,
+      msg_gas_limit: null,
+      msg_nonce_raw: null,
+      msg_value: null,
     },
     {
       challenge_period_end: null,
@@ -31,6 +38,13 @@ export const data: OptimisticL2WithdrawalsResponse = {
       msg_nonce: 391,
       msg_nonce_version: 1,
       status: 'Ready to prove',
+      portal_contract_address_hash: null,
+      msg_sender_address_hash: null,
+      msg_target_address_hash: null,
+      msg_data: null,
+      msg_gas_limit: null,
+      msg_nonce_raw: null,
+      msg_value: null,
     },
     {
       challenge_period_end: '2022-11-11T12:50:02.000000Z',
@@ -41,6 +55,30 @@ export const data: OptimisticL2WithdrawalsResponse = {
       msg_nonce: 390,
       msg_nonce_version: 1,
       status: 'Ready for relay',
+      portal_contract_address_hash: null,
+      msg_sender_address_hash: null,
+      msg_target_address_hash: null,
+      msg_data: null,
+      msg_gas_limit: null,
+      msg_nonce_raw: null,
+      msg_value: null,
+    },
+    {
+      challenge_period_end: '2022-11-13T12:50:02.000000Z',
+      from: null,
+      l1_transaction_hash: null,
+      l2_timestamp: null,
+      l2_transaction_hash: '0xe14b1f46838176702244a5343629bcecf728ca2d9881d47b4ce46e00c387d7aa',
+      msg_nonce: 388,
+      msg_nonce_version: 3,
+      status: 'Ready for relay',
+      portal_contract_address_hash: '0x67aab90c548b284be30b05c376001b4db90b87ba',
+      msg_sender_address_hash: '0x67aab90c548b284be30b05c376001b4db90b87ba',
+      msg_target_address_hash: '0x67aab90c548b284be30b05c376001b4db90b87ba',
+      msg_data: '0x01',
+      msg_gas_limit: '42',
+      msg_nonce_raw: '390',
+      msg_value: '1000000000000000000',
     },
   ],
   next_page_params: {

playwright/fixtures/mockEnvs.ts

@@ -18,7 +18,7 @@ export default fixture;
 export const ENVS_MAP: Record<string, Array<[string, string]>> = {
   optimisticRollup: [
     [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'optimistic' ],
-    [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
+    [ 'NEXT_PUBLIC_ROLLUP_PARENT_CHAIN', '{"id":11155111,"name":"Sepolia","baseUrl":"https://localhost:3101","rpcUrls":["https://localhost:3101"],"currency":{"name":"Ether","symbol":"ETH","decimals":18},"isTestnet":true}' ],
     [ 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL', 'https://localhost:3102' ],
     [ 'NEXT_PUBLIC_FAULT_PROOF_ENABLED', 'true' ],
     [ 'NEXT_PUBLIC_ROLLUP_DA_CELESTIA_CELENIUM_URL', 'https://mocha.celenium.io/blob' ],

stubs/L2.ts

@@ -28,6 +28,13 @@ export const L2_WITHDRAWAL_ITEM: OptimisticL2WithdrawalsItem = {
   msg_nonce: 2393,
   msg_nonce_version: 1,
   status: 'Ready to prove',
+  portal_contract_address_hash: null,
+  msg_sender_address_hash: null,
+  msg_target_address_hash: null,
+  msg_data: null,
+  msg_gas_limit: null,
+  msg_nonce_raw: null,
+  msg_value: null,
 };
 
 export const L2_TXN_BATCHES_ITEM: OptimisticL2TxnBatchesItem = {

types/api/optimisticL2.ts

@@ -113,7 +113,17 @@ export type OptimismL2BatchBlocks = {
   } | null;
 };
 
-export type OptimisticL2WithdrawalsItem = {
+export interface OptimisticL2WithdrawalClaimInfo {
+  portal_contract_address_hash: string | null;
+  msg_sender_address_hash: string | null;
+  msg_target_address_hash: string | null;
+  msg_data: string | null;
+  msg_gas_limit: string | null;
+  msg_nonce_raw: string | null;
+  msg_value: string | null;
+}
+
+export interface OptimisticL2WithdrawalsItem extends OptimisticL2WithdrawalClaimInfo {
   challenge_period_end: string | null;
   from: AddressParam | null;
   l1_transaction_hash: string | null;

types/api/transaction.ts

@@ -5,7 +5,7 @@ import type { DecodedInput } from './decodedInput';
 import type { Fee } from './fee';
 import type { ChainInfo, MessageStatus } from './interop';
 import type { NovesTxTranslation } from './noves';
-import type { OptimisticL2WithdrawalStatus } from './optimisticL2';
+import type { OptimisticL2WithdrawalClaimInfo, OptimisticL2WithdrawalStatus } from './optimisticL2';
 import type { ScrollL2BlockStatus } from './scrollL2';
 import type { TokenInfo } from './token';
 import type { TokenTransfer } from './tokenTransfer';
@@ -19,7 +19,7 @@ export type TransactionRevertReason = {
 export type WrappedTransactionFields = 'decoded_input' | 'fee' | 'gas_limit' | 'gas_price' | 'hash' | 'max_fee_per_gas' |
 'max_priority_fee_per_gas' | 'method' | 'nonce' | 'raw_input' | 'to' | 'type' | 'value';
 
-export interface OpWithdrawal {
+export interface OpWithdrawal extends OptimisticL2WithdrawalClaimInfo {
   l1_transaction_hash: string;
   nonce: number;
   status: OptimisticL2WithdrawalStatus;

ui/pages/__screenshots__/OptimisticL2Withdrawals.pw.tsx_default_base-view-mobile-1.png

@@ -1,28 +1,114 @@
 import { Box } from '@chakra-ui/react';
 import React from 'react';
 
-import type { OptimisticL2WithdrawalStatus } from 'types/api/optimisticL2';
+import type { OpWithdrawal } from 'types/api/transaction';
 
+import * as addressMock from 'mocks/address/address';
 import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 import { test, expect } from 'playwright/lib';
 
 import TxDetailsWithdrawalStatusOptimistic from './TxDetailsWithdrawalStatusOptimistic';
 
-const statuses: Array<OptimisticL2WithdrawalStatus> = [
-  'Waiting for state root',
-  'Ready for relay',
-  'Relayed',
-];
+const TX_HASH = '0x7d93a59a228e97d084a635181c3053e324237d07566ec12287eae6da2bcf9456';
 
-statuses.forEach((status) => {
-  test(`status="${ status }"`, async({ render, mockEnvs }) => {
+const BASE_DATA: OpWithdrawal = {
+  l1_transaction_hash: TX_HASH,
+  nonce: 1,
+  status: 'Waiting for state root',
+  portal_contract_address_hash: null,
+  msg_sender_address_hash: null,
+  msg_target_address_hash: null,
+  msg_data: null,
+  msg_gas_limit: null,
+  msg_nonce_raw: null,
+  msg_value: null,
+};
+
+test('status=Waiting for state root', async({ render, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+
+  const data: OpWithdrawal = {
+    ...BASE_DATA,
+    status: 'Waiting for state root',
+  };
+
+  const component = await render(
+    <Box p={ 2 }>
+      <TxDetailsWithdrawalStatusOptimistic
+        data={ data }
+        txHash={ TX_HASH }
+        from={ addressMock.withoutName }
+      />
+    </Box>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('status=Ready for relay', () => {
+  test('with claim button', async({ render, mockEnvs }) => {
     await mockEnvs(ENVS_MAP.optimisticRollup);
+
+    const data: OpWithdrawal = {
+      ...BASE_DATA,
+      status: 'Ready for relay',
+    };
+
     const component = await render(
       <Box p={ 2 }>
-        <TxDetailsWithdrawalStatusOptimistic status={ status } l1TxHash="0x7d93a59a228e97d084a635181c3053e324237d07566ec12287eae6da2bcf9456"/>
+        <TxDetailsWithdrawalStatusOptimistic
+          data={ data }
+          txHash={ TX_HASH }
+          from={ addressMock.withoutName }
+        />
       </Box>,
     );
 
     await expect(component).toHaveScreenshot();
   });
+
+  test('without claim button', async({ render, mockEnvs }) => {
+    await mockEnvs([
+      ...ENVS_MAP.optimisticRollup,
+      [ 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL', '' ],
+    ]);
+
+    const data: OpWithdrawal = {
+      ...BASE_DATA,
+      status: 'Ready for relay',
+    };
+
+    const component = await render(
+      <Box p={ 2 }>
+        <TxDetailsWithdrawalStatusOptimistic
+          data={ data }
+          txHash={ TX_HASH }
+          from={ addressMock.withoutName }
+        />
+      </Box>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});
+
+test('status=Relayed', async({ render, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+
+  const data: OpWithdrawal = {
+    ...BASE_DATA,
+    status: 'Relayed',
+  };
+
+  const component = await render(
+    <Box p={ 2 }>
+      <TxDetailsWithdrawalStatusOptimistic
+        data={ data }
+        txHash={ TX_HASH }
+        from={ addressMock.withoutName }
+      />
+    </Box>,
+  );
+
+  await expect(component).toHaveScreenshot();
 });