fix: Disable submit button for non-owners

src/components/transactions/ExecuteTxButton/index.tsx

@@ -38,7 +38,7 @@ const ExecuteTxButton = ({
 
   const onClick = (e: SyntheticEvent) => {
     e.stopPropagation()
-    setTxFlow(<ConfirmTxFlow txSummary={txSummary} />)
+    setTxFlow(<ConfirmTxFlow txSummary={txSummary} />, undefined, false)
   }
 
   const onMouseEnter = () => {

src/components/transactions/SignTxButton/index.tsx

@@ -35,7 +35,7 @@ const SignTxButton = ({
 
   const onClick = (e: SyntheticEvent) => {
     e.stopPropagation()
-    setTxFlow(<ConfirmTxFlow txSummary={txSummary} />)
+    setTxFlow(<ConfirmTxFlow txSummary={txSummary} />, undefined, false)
   }
 
   return (

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

@@ -8,7 +8,7 @@ type RejectTxProps = {
 
 const RejectTxFlow = ({ txNonce }: RejectTxProps): ReactElement => {
   return (
-    <TxLayout title="Reject transaction" step={0}>
+    <TxLayout title="Confirm transaction" subtitle="Reject" step={0}>
       <RejectTx txNonce={txNonce} />
     </TxLayout>
   )

src/components/tx/SignOrExecuteForm/ExecuteForm.tsx

@@ -24,13 +24,16 @@ import { asError } from '@/services/exceptions/utils'
 import css from './styles.module.css'
 import commonCss from '@/components/tx-flow/common/styles.module.css'
 import { TxSecurityContext } from '../security/shared/TxSecurityContext'
+import useIsSafeOwner from '@/hooks/useIsSafeOwner'
+import NonOwnerError from '@/components/tx/SignOrExecuteForm/NonOwnerError'
 
 const ExecuteForm = ({
   safeTx,
   txId,
   onSubmit,
   disableSubmit = false,
   origin,
+  onlyExecute,
 }: SignOrExecuteProps & {
   safeTx?: SafeTransaction
 }): ReactElement => {
@@ -39,6 +42,7 @@ const ExecuteForm = ({
   const [submitError, setSubmitError] = useState<Error | undefined>()
 
   // Hooks
+  const isOwner = useIsSafeOwner()
   const currentChain = useCurrentChain()
   const { executeTx } = useTxActions()
   const [relays] = useRelaysBySafe()
@@ -95,12 +99,14 @@ const ExecuteForm = ({
     onSubmit()
   }
 
-  const submitDisabled = !safeTx || !isSubmittable || disableSubmit || isValidExecutionLoading || isExecutionLoop
+  const cannotPropose = !isOwner && !onlyExecute
+  const submitDisabled =
+    !safeTx || !isSubmittable || disableSubmit || isValidExecutionLoading || isExecutionLoop || cannotPropose
 
   return (
     <>
       <form onSubmit={handleSubmit}>
-        <div className={classNames({ [css.noBottomBorderRadius]: canRelay })}>
+        <div className={classNames(css.params, { [css.noBottomBorderRadius]: canRelay })}>
           <AdvancedParams
             willExecute
             params={advancedParams}
@@ -109,43 +115,43 @@ const ExecuteForm = ({
             gasLimitError={gasLimitError}
             willRelay={willRelay}
           />
-        </div>
 
-        {canRelay && (
-          <div className={css.noTopBorder}>
-            <ExecutionMethodSelector
-              executionMethod={executionMethod}
-              setExecutionMethod={setExecutionMethod}
-              relays={relays}
-            />
-          </div>
-        )}
+          {canRelay && (
+            <div className={css.noTopBorder}>
+              <ExecutionMethodSelector
+                executionMethod={executionMethod}
+                setExecutionMethod={setExecutionMethod}
+                relays={relays}
+              />
+            </div>
+          )}
+        </div>
 
         {/* Error messages */}
-        {isExecutionLoop ? (
-          <ErrorMessage className={css.errorWrapper}>
+        {cannotPropose ? (
+          <NonOwnerError />
+        ) : isExecutionLoop ? (
+          <ErrorMessage>
             Cannot execute a transaction from the Safe Account itself, please connect a different account.
           </ErrorMessage>
         ) : executionValidationError || gasLimitError ? (
-          <ErrorMessage error={executionValidationError || gasLimitError} className={css.errorWrapper}>
+          <ErrorMessage error={executionValidationError || gasLimitError}>
             This transaction will most likely fail.{' '}
             {isNewExecutableTx
               ? 'To save gas costs, avoid creating the transaction.'
               : 'To save gas costs, reject this transaction.'}
           </ErrorMessage>
         ) : (
           submitError && (
-            <ErrorMessage error={submitError} className={css.errorWrapper}>
-              Error submitting the transaction. Please try again.
-            </ErrorMessage>
+            <ErrorMessage error={submitError}>Error submitting the transaction. Please try again.</ErrorMessage>
           )
         )}
 
         <Divider className={commonCss.nestedDivider} sx={{ pt: 3 }} />
 
         <CardActions>
           {/* Submit button */}
-          <CheckWallet allowNonOwner={true}>
+          <CheckWallet allowNonOwner={onlyExecute}>
             {(isOk) => (
               <Button variant="contained" type="submit" disabled={!isOk || submitDisabled}>
                 Submit

src/components/tx/SignOrExecuteForm/NonOwnerError.tsx

@@ -0,0 +1,11 @@
+import ErrorMessage from '@/components/tx/ErrorMessage'
+
+const NonOwnerError = () => {
+  return (
+    <ErrorMessage>
+      You are currently not an owner of this Safe Account and won&apos;t be able to submit this transaction.
+    </ErrorMessage>
+  )
+}
+
+export default NonOwnerError

src/components/tx/SignOrExecuteForm/SignForm.tsx

@@ -12,7 +12,7 @@ import { TxModalContext } from '@/components/tx-flow'
 import { asError } from '@/services/exceptions/utils'
 import commonCss from '@/components/tx-flow/common/styles.module.css'
 import { TxSecurityContext } from '../security/shared/TxSecurityContext'
-import css from '@/components/tx/SignOrExecuteForm/styles.module.css'
+import NonOwnerError from '@/components/tx/SignOrExecuteForm/NonOwnerError'
 
 const SignForm = ({
   safeTx,
@@ -64,16 +64,11 @@ const SignForm = ({
 
   return (
     <form onSubmit={handleSubmit}>
-      {/* Error messages */}
-      {isSubmittable && cannotPropose ? (
-        <ErrorMessage className={css.errorWrapper}>
-          You are currently not an owner of this Safe Account and won&apos;t be able to submit this transaction.
-        </ErrorMessage>
+      {cannotPropose ? (
+        <NonOwnerError />
       ) : (
         submitError && (
-          <ErrorMessage error={submitError} className={css.errorWrapper}>
-            Error submitting the transaction. Please try again.
-          </ErrorMessage>
+          <ErrorMessage error={submitError}>Error submitting the transaction. Please try again.</ErrorMessage>
         )
       )}
 

src/components/tx/SignOrExecuteForm/styles.module.css

@@ -31,6 +31,10 @@
   color: var(--color-secondary-dark);
 }
 
+.params {
+  margin-bottom: var(--space-2);
+}
+
 .noBottomBorderRadius :global(.MuiPaper-root) {
   border-bottom-left-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
@@ -42,10 +46,6 @@
   border-top-right-radius: 0 !important;
 }
 
-.errorWrapper {
-  margin-top: var(--space-2) !important;
-}
-
 .mobileTxCheckMessages,
 .mobileTxCheckMessages:empty {
   display: none;