Multiple optimistic rollup withdrawals on tx page

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/shared/verificationSteps/VerificationStep.tsx

@@ -1,4 +1,4 @@
-import { Text, HStack } from '@chakra-ui/react';
+import { HStack, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Step } from './types';
@@ -17,7 +17,7 @@ const VerificationStep = ({ step, isLast, isPassed }: Props) => {
   return (
     <HStack gap={ 2 } color={ stepColor }>
       <IconSvg name={ isPassed ? 'finalized' : 'unfinalized' } boxSize={ 5 }/>
-      <Text color={ stepColor }>{ typeof step === 'string' ? step : step.content }</Text>
+      <Box color={ stepColor }>{ typeof step === 'string' ? step : step.content }</Box>
       { !isLast && <IconSvg name="arrows/east" boxSize={ 5 }/> }
     </HStack>
   );

ui/shared/verificationSteps/VerificationSteps.tsx

@@ -30,7 +30,7 @@ const VerificationSteps = ({ currentStep, steps, isLoading, rightSlot, className
     >
       { steps.map((step, index) => (
         <VerificationStep
-          key={ currentStep }
+          key={ index }
           step={ step }
           isLast={ index === steps.length - 1 && !rightSlot }
           isPassed={ index <= currentStepIndex }

ui/tx/TxDetails.tsx

@@ -150,10 +150,27 @@ 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={ 2 }>
+              { data.op_withdrawals.map((withdrawal) => (
+                <Box key={ withdrawal.nonce }>
+                  <Box mb={ 2 }>
+                    <span>Nonce: </span>
+                    <chakra.span fontWeight={ 600 }>{ withdrawal.nonce }</chakra.span>
+                  </Box>
+                  <TxDetailsWithdrawalStatus
+                    status={ withdrawal.status }
+                    l1TxHash={ withdrawal.l1_transaction_hash }
+                  />
+                </Box>
+              )) }
+            </Flex>
+          </DetailsInfoItem>
+        ) }
         { data.zkevm_status && (
           <DetailsInfoItem
             title="Confirmation status"

ui/tx/details/TxDetailsWithdrawalStatus.pw.tsx

@@ -1,3 +1,4 @@
+import { Box } from '@chakra-ui/react';
 import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
@@ -25,7 +26,9 @@ statuses.forEach((status) => {
 
     const component = await mount(
       <TestApp>
-        <TxDetailsWithdrawalStatus status={ status } l1TxHash="0x7d93a59a228e97d084a635181c3053e324237d07566ec12287eae6da2bcf9456"/>
+        <Box p={ 2 }>
+          <TxDetailsWithdrawalStatus status={ status } l1TxHash="0x7d93a59a228e97d084a635181c3053e324237d07566ec12287eae6da2bcf9456"/>
+        </Box>
       </TestApp>,
     );
 

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;
   }
@@ -55,23 +49,18 @@ const TxDetailsWithdrawalStatus = ({ status, l1TxHash }: Props) => {
       href="https://app.optimism.io/bridge/withdraw"
       target="_blank"
     >
-            Claim funds
+      Claim funds
     </Button>
   ) : 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 }
+    />
   );
 };