Fix: show an error if risk isn't acknowledged

src/components/tx/ErrorMessage/index.tsx

@@ -14,7 +14,7 @@ const ErrorMessage = ({
   children: ReactNode
   error?: Error & { reason?: string }
   className?: string
-  level?: 'error' | 'info'
+  level?: 'error' | 'warning' | 'info'
 }): ReactElement => {
   const [showDetails, setShowDetails] = useState<boolean>(false)
 

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

@@ -9,6 +9,11 @@
   color: var(--color-error-dark);
 }
 
+.container.warning {
+  background-color: var(--color-warning-background);
+  color: var(--color-warning-dark);
+}
+
 .container.info {
   background-color: var(--color-info-background);
   color: var(--color-primary-main);

src/components/tx/SignOrExecuteForm/ExecuteForm.tsx

@@ -9,7 +9,6 @@ import { getTxOptions } from '@/utils/transactions'
 import useIsValidExecution from '@/hooks/useIsValidExecution'
 import CheckWallet from '@/components/common/CheckWallet'
 import { useImmediatelyExecutable, useIsExecutionLoop, useTxActions } from './hooks'
-import UnknownContractError from './UnknownContractError'
 import { useRelaysBySafe } from '@/hooks/useRemainingRelays'
 import useWalletCanRelay from '@/hooks/useWalletCanRelay'
 import { ExecutionMethod, ExecutionMethodSelector } from '../ExecutionMethodSelector'
@@ -24,19 +23,22 @@ import { asError } from '@/services/exceptions/utils'
 
 import css from './styles.module.css'
 import commonCss from '@/components/tx-flow/common/styles.module.css'
+import RiskConfirmationError from './RiskConfirmationError'
 
 const ExecuteForm = ({
   safeTx,
   txId,
   onSubmit,
   disableSubmit = false,
   origin,
+  risk,
 }: SignOrExecuteProps & {
   safeTx?: SafeTransaction
 }): ReactElement => {
   // Form state
   const [isSubmittable, setIsSubmittable] = useState<boolean>(true)
   const [submitError, setSubmitError] = useState<Error | undefined>()
+  const [submitRisk, setSubmitRisk] = useState<boolean>(false)
 
   // Hooks
   const currentChain = useCurrentChain()
@@ -69,6 +71,13 @@ const ExecuteForm = ({
   // On modal submit
   const handleSubmit = async (e: SyntheticEvent) => {
     e.preventDefault()
+
+    if (risk) {
+      setSubmitRisk(true)
+      return
+    }
+
+    setSubmitRisk(false)
     setIsSubmittable(false)
     setSubmitError(undefined)
 
@@ -126,10 +135,12 @@ const ExecuteForm = ({
               ? 'To save gas costs, avoid creating the transaction.'
               : 'To save gas costs, reject this transaction.'}
           </ErrorMessage>
-        ) : submitError ? (
-          <ErrorMessage error={submitError}>Error submitting the transaction. Please try again.</ErrorMessage>
+        ) : submitRisk ? (
+          <RiskConfirmationError />
         ) : (
-          <UnknownContractError />
+          submitError && (
+            <ErrorMessage error={submitError}>Error submitting the transaction. Please try again.</ErrorMessage>
+          )
         )}
 
         <Divider className={commonCss.nestedDivider} sx={{ pt: 3 }} />

src/components/tx/SignOrExecuteForm/RiskConfirmationError.tsx

@@ -0,0 +1,7 @@
+import ErrorMessage from '../ErrorMessage'
+
+const RiskConfirmationError = () => (
+  <ErrorMessage level="warning">Please acknowledge the risk before proceeding.</ErrorMessage>
+)
+
+export default RiskConfirmationError

src/components/tx/SignOrExecuteForm/SignForm.tsx

@@ -11,19 +11,22 @@ import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
 import { TxModalContext } from '@/components/tx-flow'
 import { asError } from '@/services/exceptions/utils'
 import commonCss from '@/components/tx-flow/common/styles.module.css'
+import RiskConfirmationError from './RiskConfirmationError'
 
 const SignForm = ({
   safeTx,
   txId,
   onSubmit,
   disableSubmit = false,
   origin,
+  risk,
 }: SignOrExecuteProps & {
   safeTx?: SafeTransaction
 }): ReactElement => {
   // Form state
   const [isSubmittable, setIsSubmittable] = useState<boolean>(true)
   const [submitError, setSubmitError] = useState<Error | undefined>()
+  const [submitRisk, setSubmitRisk] = useState<boolean>(false)
 
   // Hooks
   const isOwner = useIsSafeOwner()
@@ -33,6 +36,13 @@ const SignForm = ({
   // On modal submit
   const handleSubmit = async (e: SyntheticEvent) => {
     e.preventDefault()
+
+    if (risk) {
+      setSubmitRisk(true)
+      return
+    }
+
+    setSubmitRisk(false)
     setIsSubmittable(false)
     setSubmitError(undefined)
 
@@ -60,6 +70,8 @@ const SignForm = ({
         <ErrorMessage>
           You are currently not an owner of this Safe Account and won&apos;t be able to submit this transaction.
         </ErrorMessage>
+      ) : submitRisk ? (
+        <RiskConfirmationError />
       ) : (
         submitError && (
           <ErrorMessage error={submitError}>Error submitting the transaction. Please try again.</ErrorMessage>

src/components/tx/SignOrExecuteForm/index.tsx

@@ -13,6 +13,8 @@ import ConfirmationTitle, { ConfirmationTitleTypes } from '@/components/tx/SignO
 import { useAppSelector } from '@/store'
 import { selectSettings } from '@/store/settingsSlice'
 import { RedefineBalanceChanges } from '../security/redefine/RedefineBalanceChange'
+import { TxSecurityContext } from '../security/shared/TxSecurityContext'
+import UnknownContractError from './UnknownContractError'
 
 export type SignOrExecuteProps = {
   txId?: string
@@ -23,6 +25,7 @@ export type SignOrExecuteProps = {
   onlyExecute?: boolean
   disableSubmit?: boolean
   origin?: string
+  risk?: boolean
 }
 
 const SignOrExecuteForm = (props: SignOrExecuteProps): ReactElement => {
@@ -31,11 +34,13 @@ const SignOrExecuteForm = (props: SignOrExecuteProps): ReactElement => {
   const isCreation = !props.txId
   const isNewExecutableTx = useImmediatelyExecutable() && isCreation
   const { safeTx, safeTxError } = useContext(SafeTxContext)
+  const { needsRiskConfirmation, isRiskConfirmed } = useContext(TxSecurityContext)
   const isCorrectNonce = useValidateNonce(safeTx)
 
   // If checkbox is checked and the transaction is executable, execute it, otherwise sign it
   const canExecute = isCorrectNonce && (props.isExecutable || isNewExecutableTx)
   const willExecute = (props.onlyExecute || shouldExecute) && canExecute
+  const isRisky = needsRiskConfirmation && !isRiskConfirmed
 
   return (
     <>
@@ -67,7 +72,13 @@ const SignOrExecuteForm = (props: SignOrExecuteProps): ReactElement => {
 
         <WrongChainWarning />
 
-        {willExecute ? <ExecuteForm {...props} safeTx={safeTx} /> : <SignForm {...props} safeTx={safeTx} />}
+        <UnknownContractError />
+
+        {willExecute ? (
+          <ExecuteForm {...props} safeTx={safeTx} risk={isRisky} />
+        ) : (
+          <SignForm {...props} safeTx={safeTx} risk={isRisky} />
+        )}
       </TxCard>
     </>
   )