OP Withdrawals on transaction page

Fixes #1355

types/api/transaction.ts

@@ -14,6 +14,12 @@ export type TransactionRevertReason = {
 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 {
+  l1_transaction_hash: string;
+  nonce: number;
+  status: L2WithdrawalStatus;
+}
+
 export type Transaction = {
   to: AddressParam | null;
   created_contract: AddressParam | null;
@@ -54,8 +60,7 @@ export type Transaction = {
   l1_gas_used?: string;
   has_error_in_internal_txs: boolean | null;
   // optimism fields
-  op_withdrawal_status?: L2WithdrawalStatus;
-  op_l1_transaction_hash?: string;
+  op_withdrawals?: Array<OpWithdrawal>;
   // SUAVE fields
   execution_node?: AddressParam | null;
   allowed_peekers?: Array<string>;

ui/tx/TxDetails.tsx

@@ -157,10 +157,22 @@ const TxDetails = () => {
             </Tag>
           ) }
         </DetailsInfoItem>
-        <TxDetailsWithdrawalStatus
-          status={ data.op_withdrawal_status }
-          l1TxHash={ data.op_l1_transaction_hash }
-        />
+        { config.features.optimisticRollup.isEnabled && data.op_withdrawals && data.op_withdrawals.length > 0 && (
+          <DetailsInfoItem
+            title="Withdrawal status"
+            hint="Detailed status progress of the transaction"
+          >
+            <Flex flexDir="column" rowGap={ 3 }>
+              { data.op_withdrawals.map((withdrawal) => (
+                <TxDetailsWithdrawalStatus
+                  key={ withdrawal.nonce }
+                  status={ withdrawal.status }
+                  l1TxHash={ withdrawal.l1_transaction_hash }
+                />
+              )) }
+            </Flex>
+          </DetailsInfoItem>
+        ) }
         { data.zkevm_status && (
           <DetailsInfoItem
             title="Confirmation status"

ui/tx/details/TxDetailsWithdrawalStatus.tsx

@@ -4,8 +4,6 @@ import React from 'react';
 import type { L2WithdrawalStatus } from 'types/api/l2Withdrawals';
 import { WITHDRAWAL_STATUSES } from 'types/api/l2Withdrawals';
 
-import config from 'configs/app';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
 
@@ -15,10 +13,6 @@ interface Props {
 }
 
 const TxDetailsWithdrawalStatus = ({ status, l1TxHash }: Props) => {
-  if (!config.features.optimisticRollup.isEnabled) {
-    return null;
-  }
-
   if (!status || !WITHDRAWAL_STATUSES.includes(status)) {
     return null;
   }
@@ -60,18 +54,13 @@ const TxDetailsWithdrawalStatus = ({ status, l1TxHash }: Props) => {
   ) : null;
 
   return (
-    <DetailsInfoItem
-      title="Withdrawal status"
-      hint="Detailed status progress of the transaction"
-    >
-      <VerificationSteps
-        steps={ steps as unknown as Array<L2WithdrawalStatus> }
-        currentStep={ status }
-        rightSlot={ rightSlot }
-        my={ hasClaimButton ? '-6px' : 0 }
-        lineHeight={ hasClaimButton ? 8 : undefined }
-      />
-    </DetailsInfoItem>
+    <VerificationSteps
+      steps={ steps as unknown as Array<L2WithdrawalStatus> }
+      currentStep={ status }
+      rightSlot={ rightSlot }
+      my={ hasClaimButton ? '-6px' : 0 }
+      lineHeight={ hasClaimButton ? 8 : undefined }
+    />
   );
 };