Disable batch button for multisends

safe-global · Jul 26, 2023 · a6f9d78 · a6f9d78
1 parent 3bd8690
commit a6f9d78
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 35 deletions.
diff --git a/src/components/tx/ExecuteCheckbox/index.tsx b/src/components/tx/ExecuteCheckbox/index.tsx
@@ -1,5 +1,5 @@
 import type { ChangeEvent, ReactElement } from 'react'
-import { FormControlLabel, RadioGroup, Radio } from '@mui/material'
+import { FormControlLabel, RadioGroup, Radio, Typography } from '@mui/material'
 import { trackEvent, MODALS_EVENTS } from '@/services/analytics'
 import { useAppDispatch, useAppSelector } from '@/store'
 import { selectSettings, setTransactionExecution } from '@/store/settingsSlice'
@@ -18,28 +18,23 @@ const ExecuteCheckbox = ({ onChange }: { onChange: (checked: boolean) => void })
   }
 
   return (
-    <RadioGroup row value={String(settings.transactionExecution)} onChange={handleChange} className={css.group}>
-      <FormControlLabel
-        value="true"
-        label={
-          <>
-            Yes, <b>execute</b>
-          </>
-        }
-        control={<Radio />}
-        className={css.radio}
-      />
-      <FormControlLabel
-        value="false"
-        label={
-          <>
-            No, only <b>sign</b>
-          </>
-        }
-        control={<Radio />}
-        className={css.radio}
-      />
-    </RadioGroup>
+    <>
+      <Typography>Would you like to execute the transaction immediately?</Typography>
+
+      <RadioGroup row value={String(settings.transactionExecution)} onChange={handleChange} className={css.group}>
+        <FormControlLabel
+          value="true"
+          label={
+            <>
+              Yes, <b>execute</b>
+            </>
+          }
+          control={<Radio />}
+          className={css.radio}
+        />
+        <FormControlLabel value="false" label={<>No, later</>} control={<Radio />} className={css.radio} />
+      </RadioGroup>
+    </>
   )
 }
 

diff --git a/src/components/tx/SignOrExecuteForm/BatchButton.tsx b/src/components/tx/SignOrExecuteForm/BatchButton.tsx
@@ -1,19 +1,31 @@
 import { type SyntheticEvent } from 'react'
-import { Box, Button, SvgIcon } from '@mui/material'
+import { Box, Button, SvgIcon, Tooltip } from '@mui/material'
 import PlusIcon from '@/public/images/common/plus.svg'
 import Track from '@/components/common/Track'
 import { BATCH_EVENTS } from '@/services/analytics'
 
-const BatchButton = ({ onClick, disabled }: { onClick: (e: SyntheticEvent) => void; disabled?: boolean }) => (
+const BatchButton = ({
+  onClick,
+  disabled,
+  tooltip,
+}: {
+  onClick: (e: SyntheticEvent) => void
+  disabled?: boolean
+  tooltip?: string
+}) => (
   <>
-    <Track {...BATCH_EVENTS.BATCH_APPEND}>
-      <Button variant="outlined" onClick={onClick} disabled={disabled}>
-        <SvgIcon component={PlusIcon} inheritViewBox fontSize="small" sx={{ mr: 1 }} />
-        Add to batch
-      </Button>
-    </Track>
-
+    <Tooltip title={tooltip} placement="top">
+      <span>
+        <Track {...BATCH_EVENTS.BATCH_APPEND}>
+          <Button variant="outlined" onClick={onClick} disabled={disabled}>
+            <SvgIcon component={PlusIcon} inheritViewBox fontSize="small" sx={{ mr: 1 }} />
+            Add to batch
+          </Button>
+        </Track>
+      </span>
+    </Tooltip>
     <Box display="flex" flexDirection="column" justifyContent="center" color="border.main">
+      {' '}
       or
     </Box>
   </>

diff --git a/src/components/tx/SignOrExecuteForm/SignForm.tsx b/src/components/tx/SignOrExecuteForm/SignForm.tsx
@@ -22,6 +22,7 @@ const SignForm = ({
   disableSubmit = false,
   origin,
   isBatch,
+  isMultisend,
 }: SignOrExecuteProps & {
   safeTx?: SafeTransaction
 }): ReactElement => {
@@ -86,7 +87,13 @@ const SignForm = ({
       <CardActions>
         <Box display="flex" gap={2}>
           {/* Batch button */}
-          {isCreation && !isBatch && <BatchButton onClick={onBatchClick} disabled={submitDisabled} />}
+          {isCreation && !isBatch && (
+            <BatchButton
+              onClick={onBatchClick}
+              disabled={submitDisabled || isMultisend}
+              tooltip={isMultisend ? `Cannot batch this transaction because it's already a batch` : undefined}
+            />
+          )}
 
           {/* Submit button */}
           <CheckWallet>

diff --git a/src/components/tx/SignOrExecuteForm/index.tsx b/src/components/tx/SignOrExecuteForm/index.tsx
@@ -26,6 +26,7 @@ export type SignOrExecuteProps = {
   isExecutable?: boolean
   isRejection?: boolean
   isBatch?: boolean
+  isMultisend?: boolean
   onlyExecute?: boolean
   disableSubmit?: boolean
   origin?: string
@@ -39,7 +40,6 @@ const SignOrExecuteForm = (props: SignOrExecuteProps): ReactElement => {
   const isNewExecutableTx = useImmediatelyExecutable() && isCreation
   const isCorrectNonce = useValidateNonce(safeTx)
   const [decodedData, decodedDataError, decodedDataLoading] = useDecodeTx(safeTx)
-  const isBatch = props.isBatch || isMultisendTx(decodedData)
 
   // If checkbox is checked and the transaction is executable, execute it, otherwise sign it
   const canExecute = isCorrectNonce && (props.isExecutable || isNewExecutableTx)
@@ -93,7 +93,7 @@ const SignOrExecuteForm = (props: SignOrExecuteProps): ReactElement => {
         {willExecute ? (
           <ExecuteForm {...props} safeTx={safeTx} />
         ) : (
-          <SignForm {...props} safeTx={safeTx} isBatch={isBatch} />
+          <SignForm {...props} safeTx={safeTx} isMultisend={isMultisendTx(decodedData)} />
         )}
       </TxCard>
     </>