display nonce for each item

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

@@ -155,13 +155,18 @@ const TxDetails = () => {
             title="Withdrawal status"
             hint="Detailed status progress of the transaction"
           >
-            <Flex flexDir="column" rowGap={ 3 }>
+            <Flex flexDir="column" rowGap={ 2 }>
               { data.op_withdrawals.map((withdrawal) => (
-                <TxDetailsWithdrawalStatus
-                  key={ withdrawal.nonce }
-                  status={ withdrawal.status }
-                  l1TxHash={ withdrawal.l1_transaction_hash }
-                />
+                <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>

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

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