[TX flow] Batch execute fixes

src/components/tx-flow/common/TxLayout/index.tsx

@@ -24,6 +24,7 @@ type TxLayoutProps = {
   txSummary?: TransactionSummary
   onBack?: () => void
   hideNonce?: boolean
+  isBatch?: boolean
   isReplacement?: boolean
 }
 
@@ -36,6 +37,7 @@ const TxLayout = ({
   txSummary,
   onBack,
   hideNonce = false,
+  isBatch = false,
   isReplacement = false,
 }: TxLayoutProps): ReactElement => {
   const [statusVisible, setStatusVisible] = useState<boolean>(true)
@@ -122,6 +124,7 @@ const TxLayout = ({
                       txSummary={txSummary}
                       handleClose={() => setStatusVisible(false)}
                       isReplacement={isReplacement}
+                      isBatch={isBatch}
                     />
                   )}
 

src/components/tx-flow/common/TxStatusWidget/index.tsx

@@ -24,11 +24,13 @@ const TxStatusWidget = ({
   txSummary,
   handleClose,
   isReplacement = false,
+  isBatch = false,
 }: {
   step: number
   txSummary?: TransactionSummary
   handleClose: () => void
   isReplacement?: boolean
+  isBatch?: boolean
 }) => {
   const isDarkMode = useDarkMode()
   const wallet = useWallet()
@@ -62,28 +64,34 @@ const TxStatusWidget = ({
               <CreatedIcon />
             </ListItemIcon>
             <ListItemText primaryTypographyProps={{ fontWeight: 700 }}>
-              {isReplacement ? 'Create replacement transaction' : 'Create'}
+              {isReplacement ? 'Create replacement transaction' : isBatch ? 'Queue transactions' : 'Create'}
             </ListItemText>
           </ListItem>
 
-          <ListItem className={classnames({ [css.incomplete]: isConfirmedStepIncomplete })}>
+          <ListItem className={classnames({ [css.incomplete]: isConfirmedStepIncomplete && !isBatch })}>
             <ListItemIcon>
               <SignedIcon />
             </ListItemIcon>
             <ListItemText primaryTypographyProps={{ fontWeight: 700 }}>
-              {confirmedMessage(threshold, confirmationsSubmitted)}
-              {canSign && (
-                <Typography
-                  variant="body2"
-                  component="span"
-                  className={css.badge}
-                  sx={({ palette }) => ({
-                    bgcolor: isDarkMode ? `${palette.primary.main}` : `${palette.secondary.main}`,
-                    color: isDarkMode ? `${palette.text.secondary}` : `${palette.text.primary}`,
-                  })}
-                >
-                  +1
-                </Typography>
+              {isBatch ? (
+                'Create batch'
+              ) : (
+                <>
+                  {confirmedMessage(threshold, confirmationsSubmitted)}
+                  {canSign && (
+                    <Typography
+                      variant="body2"
+                      component="span"
+                      className={css.badge}
+                      sx={({ palette }) => ({
+                        bgcolor: isDarkMode ? `${palette.primary.main}` : `${palette.secondary.main}`,
+                        color: isDarkMode ? `${palette.text.secondary}` : `${palette.text.primary}`,
+                      })}
+                    >
+                      +1
+                    </Typography>
+                  )}
+                </>
               )}
             </ListItemText>
           </ListItem>

src/components/tx-flow/flows/ExecuteBatch/DecodedTxs.tsx

@@ -43,7 +43,7 @@ const DecodedTxs = ({ txs }: { txs: TransactionDetails[] | undefined }) => {
               operation: 0,
             }}
             txData={transaction.txData}
-            actionTitle={`Action ${idx + 1}`}
+            actionTitle={`${idx + 1}`}
             showDelegateCallWarning={false}
           />
         )

src/components/tx-flow/flows/ExecuteBatch/ReviewBatch.tsx

@@ -1,6 +1,6 @@
-import { Typography, Button, CardActions, Divider } from '@mui/material'
+import { Typography, Button, CardActions, Divider, Alert } from '@mui/material'
 import { encodeMultiSendData } from '@safe-global/safe-core-sdk/dist/src/utils/transactions/utils'
-import { useState, useMemo } from 'react'
+import { useState, useMemo, useContext } from 'react'
 import type { SyntheticEvent } from 'react'
 import type { TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
 
@@ -28,6 +28,7 @@ import { asError } from '@/services/exceptions/utils'
 import SendToBlock from '@/components/tx-flow/flows/TokenTransfer/SendToBlock'
 import ConfirmationTitle, { ConfirmationTitleTypes } from '@/components/tx/SignOrExecuteForm/ConfirmationTitle'
 import commonCss from '@/components/tx-flow/common/styles.module.css'
+import { TxModalContext } from '@/components/tx-flow'
 
 export const ReviewBatch = ({ params }: { params: ExecuteBatchFlowProps }) => {
   const [isSubmittable, setIsSubmittable] = useState<boolean>(true)
@@ -36,6 +37,7 @@ export const ReviewBatch = ({ params }: { params: ExecuteBatchFlowProps }) => {
   const chain = useCurrentChain()
   const { safe } = useSafeInfo()
   const [relays] = useRelaysBySafe()
+  const { setTxFlow } = useContext(TxModalContext)
 
   // Chain has relaying feature and available relays
   const canRelay = hasRemainingRelays(relays)
@@ -95,6 +97,7 @@ export const ReviewBatch = ({ params }: { params: ExecuteBatchFlowProps }) => {
 
     try {
       await (willRelay ? onRelay() : onExecute())
+      setTxFlow(undefined)
     } catch (_err) {
       const err = asError(_err)
       logError(Errors._804, err)
@@ -159,10 +162,10 @@ export const ReviewBatch = ({ params }: { params: ExecuteBatchFlowProps }) => {
           </>
         ) : null}
 
-        <Typography>
+        <Alert severity="warning">
           Be aware that if any of the included transactions revert, none of them will be executed. This will result in
           the loss of the allocated transaction fees.
-        </Typography>
+        </Alert>
 
         {error && (
           <ErrorMessage error={error}>

src/components/tx-flow/flows/ExecuteBatch/index.tsx

@@ -10,7 +10,7 @@ export type ExecuteBatchFlowProps = {
 
 const ExecuteBatchFlow = (props: ExecuteBatchFlowProps) => {
   return (
-    <TxLayout title="Confirm transaction" subtitle="Execute batch" icon={BatchIcon} hideNonce>
+    <TxLayout title="Confirm transaction" subtitle="Batch" icon={BatchIcon} hideNonce isBatch>
       <ReviewBatch params={props} />
     </TxLayout>
   )