From 5f219779eadb5932cbb3422637ecdad9f8a44cc0 Mon Sep 17 00:00:00 2001 From: katspaugh Date: Mon, 3 Jul 2023 12:50:10 +0200 Subject: [PATCH] Fix: show an error if risk isn't acknowledged --- src/components/tx/ErrorMessage/index.tsx | 2 +- .../tx/ErrorMessage/styles.module.css | 5 +++++ .../tx/SignOrExecuteForm/ExecuteForm.tsx | 19 +++++++++++++++---- .../RiskConfirmationError.tsx | 7 +++++++ .../tx/SignOrExecuteForm/SignForm.tsx | 12 ++++++++++++ src/components/tx/SignOrExecuteForm/index.tsx | 13 ++++++++++++- 6 files changed, 52 insertions(+), 6 deletions(-) create mode 100644 src/components/tx/SignOrExecuteForm/RiskConfirmationError.tsx diff --git a/src/components/tx/ErrorMessage/index.tsx b/src/components/tx/ErrorMessage/index.tsx index ccf7d7de11..5f6cc07932 100644 --- a/src/components/tx/ErrorMessage/index.tsx +++ b/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(false) diff --git a/src/components/tx/ErrorMessage/styles.module.css b/src/components/tx/ErrorMessage/styles.module.css index 5fe129aa3c..1fda0fddc0 100644 --- a/src/components/tx/ErrorMessage/styles.module.css +++ b/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); diff --git a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx index 857d275004..53165909f6 100644 --- a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx +++ b/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,6 +23,7 @@ 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, @@ -31,12 +31,14 @@ const ExecuteForm = ({ onSubmit, disableSubmit = false, origin, + risk, }: SignOrExecuteProps & { safeTx?: SafeTransaction }): ReactElement => { // Form state const [isSubmittable, setIsSubmittable] = useState(true) const [submitError, setSubmitError] = useState() + const [submitRisk, setSubmitRisk] = useState(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.'} - ) : submitError ? ( - Error submitting the transaction. Please try again. + ) : submitRisk ? ( + ) : ( - + submitError && ( + Error submitting the transaction. Please try again. + ) )} diff --git a/src/components/tx/SignOrExecuteForm/RiskConfirmationError.tsx b/src/components/tx/SignOrExecuteForm/RiskConfirmationError.tsx new file mode 100644 index 0000000000..c983fdf0af --- /dev/null +++ b/src/components/tx/SignOrExecuteForm/RiskConfirmationError.tsx @@ -0,0 +1,7 @@ +import ErrorMessage from '../ErrorMessage' + +const RiskConfirmationError = () => ( + Please acknowledge the risk before proceeding. +) + +export default RiskConfirmationError diff --git a/src/components/tx/SignOrExecuteForm/SignForm.tsx b/src/components/tx/SignOrExecuteForm/SignForm.tsx index 4bca8280c5..7710951db8 100644 --- a/src/components/tx/SignOrExecuteForm/SignForm.tsx +++ b/src/components/tx/SignOrExecuteForm/SignForm.tsx @@ -11,6 +11,7 @@ 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, @@ -18,12 +19,14 @@ const SignForm = ({ onSubmit, disableSubmit = false, origin, + risk, }: SignOrExecuteProps & { safeTx?: SafeTransaction }): ReactElement => { // Form state const [isSubmittable, setIsSubmittable] = useState(true) const [submitError, setSubmitError] = useState() + const [submitRisk, setSubmitRisk] = useState(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 = ({ You are currently not an owner of this Safe Account and won't be able to submit this transaction. + ) : submitRisk ? ( + ) : ( submitError && ( Error submitting the transaction. Please try again. diff --git a/src/components/tx/SignOrExecuteForm/index.tsx b/src/components/tx/SignOrExecuteForm/index.tsx index 4908d62c8e..8b68822ff2 100644 --- a/src/components/tx/SignOrExecuteForm/index.tsx +++ b/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 => { - {willExecute ? : } + + + {willExecute ? ( + + ) : ( + + )} )