[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
+  hideStatus?: boolean
   isReplacement?: boolean
 }
 
@@ -36,6 +37,7 @@ const TxLayout = ({
   txSummary,
   onBack,
   hideNonce = false,
+  hideStatus = false,
   isReplacement = false,
 }: TxLayoutProps): ReactElement => {
   const [statusVisible, setStatusVisible] = useState<boolean>(true)
@@ -61,21 +63,23 @@ const TxLayout = ({
           <Container className={css.container}>
             <Grid container alignItems="center" justifyContent="center">
               <Grid item container xs={12}>
-                <Grid item xs={12} md={7} className={css.titleWrapper}>
+                <Grid item xs={12} md={7} className={classnames(css.titleWrapper, { [css.noStatus]: hideStatus })}>
                   <Typography variant="h3" component="div" fontWeight="700" className={css.title}>
                     {title}
                   </Typography>
 
                   <ChainIndicator inline />
                 </Grid>
-                <IconButton
-                  className={css.statusButton}
-                  aria-label="Transaction status"
-                  size="large"
-                  onClick={toggleStatus}
-                >
-                  <SafeLogo width={16} height={16} />
-                </IconButton>
+                {!hideStatus && (
+                  <IconButton
+                    className={css.statusButton}
+                    aria-label="Transaction status"
+                    size="large"
+                    onClick={toggleStatus}
+                  >
+                    <SafeLogo width={16} height={16} />
+                  </IconButton>
+                )}
               </Grid>
 
               <Grid item container xs={12} gap={3}>
@@ -116,7 +120,7 @@ const TxLayout = ({
                 </Grid>
 
                 <Grid item xs={12} md={4} className={classnames(css.widget, { [css.active]: statusVisible })}>
-                  {statusVisible && (
+                  {statusVisible && !hideStatus && (
                     <TxStatusWidget
                       step={step}
                       txSummary={txSummary}

src/components/tx-flow/common/TxLayout/styles.module.css

@@ -124,6 +124,10 @@
     width: calc(100% - 154px);
   }
 
+  .noStatus {
+    width: calc(100% - 100px);
+  }
+
   .title {
     font-size: 16px;
   }

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="Execute batch" icon={BatchIcon} hideNonce hideStatus>
       <ReviewBatch params={props} />
     </TxLayout>
   )