diff --git a/src/components/common/ErrorBoundary/index.tsx b/src/components/common/ErrorBoundary/index.tsx index f25c1bbcfa..bb410b7c98 100644 --- a/src/components/common/ErrorBoundary/index.tsx +++ b/src/components/common/ErrorBoundary/index.tsx @@ -1,5 +1,4 @@ import { Typography, Link } from '@mui/material' -import type { FallbackRender } from '@sentry/react' import { HELP_CENTER_URL, IS_PRODUCTION } from '@/config/constants' import { AppRoutes } from '@/config/routes' @@ -8,8 +7,12 @@ import WarningIcon from '@/public/images/notifications/warning.svg' import css from '@/components/common/ErrorBoundary/styles.module.css' import CircularIcon from '../icons/CircularIcon' import ExternalLink from '../ExternalLink' +interface ErrorBoundaryProps { + error: Error + componentStack: string +} -const ErrorBoundary: FallbackRender = ({ error, componentStack }) => { +const ErrorBoundary = ({ error, componentStack }: ErrorBoundaryProps) => { return (
diff --git a/src/components/transactions/TxDetails/TxData/DecodedData/Multisend/index.tsx b/src/components/transactions/TxDetails/TxData/DecodedData/Multisend/index.tsx index 0672be131c..5110562ff6 100644 --- a/src/components/transactions/TxDetails/TxData/DecodedData/Multisend/index.tsx +++ b/src/components/transactions/TxDetails/TxData/DecodedData/Multisend/index.tsx @@ -71,7 +71,6 @@ export const Multisend = ({ txData, compact = false }: MultisendProps): ReactEle if (!multiSendTransactions) { return null } - return ( <> diff --git a/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx b/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx index a7fa0cfca5..08e3bfdafd 100644 --- a/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx +++ b/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx @@ -39,7 +39,7 @@ import ConfirmationView from '../confirmation-views' export type SubmitCallback = (txId: string, isExecuted?: boolean) => void export type SignOrExecuteProps = { - txId?: string + txId: string onSubmit?: SubmitCallback children?: ReactNode isExecutable?: boolean @@ -90,7 +90,6 @@ export const SignOrExecuteForm = ({ const isBatchable = props.isBatchable !== false && safeTx && !isDelegateCall(safeTx) - // const showTxDetails = props.txId && txDetails && !isCustomTxInfo(txDetails.txInfo) const isDelegate = useIsWalletDelegate() const [trigger] = useLazyGetTransactionDetailsQuery() const [readableApprovals] = useApprovalInfos({ safeTransaction: safeTx }) diff --git a/src/components/tx/SignOrExecuteForm/__tests__/SignOrExecute.test.tsx b/src/components/tx/SignOrExecuteForm/__tests__/SignOrExecute.test.tsx index 65d65e6a0a..0b940bb0c9 100644 --- a/src/components/tx/SignOrExecuteForm/__tests__/SignOrExecute.test.tsx +++ b/src/components/tx/SignOrExecuteForm/__tests__/SignOrExecute.test.tsx @@ -49,4 +49,23 @@ describe('SignOrExecute', () => { expect(getByTestId('sign-btn')).toBeInTheDocument() expect(container).toMatchSnapshot() }) + + it('should display an error screen', async () => { + jest.spyOn(hooks, 'useProposeTx').mockReturnValue([undefined, new Error('This is a mock error message'), false]) + + const { container } = render( + + + , + ) + + expect(container.querySelector('sign-btn')).not.toBeInTheDocument() + expect(container).toMatchSnapshot() + }) }) diff --git a/src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap b/src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap index c85234f43f..1e6b92d792 100644 --- a/src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap +++ b/src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap @@ -75,67 +75,7 @@ exports[`SignOrExecute should display a confirmation screen 1`] = `
-
-
- safeTxGas: -
-
- 0 -
-
-
-
- Raw data: -
-
-
- 0 - bytes -
- - - -
-
-
+ />
@@ -313,3 +253,66 @@ exports[`SignOrExecute should display a loading component 1`] = ` `; + +exports[`SignOrExecute should display an error screen 1`] = ` +
+
+
+
+
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+
+`; diff --git a/src/components/tx/SignOrExecuteForm/index.tsx b/src/components/tx/SignOrExecuteForm/index.tsx index 2012ef281b..419b696157 100644 --- a/src/components/tx/SignOrExecuteForm/index.tsx +++ b/src/components/tx/SignOrExecuteForm/index.tsx @@ -4,6 +4,8 @@ import type { SignOrExecuteProps, SubmitCallback } from './SignOrExecuteForm' import SignOrExecuteSkeleton from './SignOrExecuteSkeleton' import { useProposeTx } from './hooks' import { useContext } from 'react' +import ErrorBoundary from '@/components/common/ErrorBoundary' +import TxCard from '@/components/tx-flow/common/TxCard' type SignOrExecuteExtendedProps = Omit & { onSubmit?: SubmitCallback @@ -22,13 +24,17 @@ type SignOrExecuteExtendedProps = Omit & { const SignOrExecute = (props: SignOrExecuteExtendedProps) => { const { safeTx } = useContext(SafeTxContext) - const [txDetails, _error, isLoading] = useProposeTx(safeTx, props.txId, props.origin) - const isTxDetailsId = !txDetails && !props.txId - return isLoading || isTxDetailsId || !safeTx ? ( + const [txDetails, error, isLoading] = useProposeTx(safeTx, props.txId, props.origin) + + return isLoading || !safeTx || !txDetails ? ( + ) : error ? ( + + + ) : ( - + ) } diff --git a/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap b/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap index aec48aa190..f59440e968 100644 --- a/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap +++ b/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap @@ -205,46 +205,13 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH >
- safeTxGas: -
-
- 0 -
-
-
-
- baseGas: -
-
- [object Object] -
-
-
-
- refundReceiver: + safeTxHash:
- 0x7996...aC52 + 0x96a9...f2e0
@@ -292,75 +259,550 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH /> -
- -
- Raw data: + Created:
-
+ 9/11/2024, 4:26:34 PM +
+
+
+
+
+
+ Call + + addOwnerWithThreshold + + + on +
+
+
+
+
+
+
+ + + 0xE20C...5f67 + + +
+ + + +
+ +
+
+
+
+
+
+
+

+ Parameters +

+
+
+ + owner + + + + address + +
+
+
+
+
+ MetaMultiSigWallet +
+
+
+
+ + + 0xd8dA...6045 + + +
+ + + +
+ +
+
+
+
+
+
+
+ + _threshold + + + + uint256 + +
+

+ 1 +

+
+
+
+
+
+
+ Operation: +
+
+ 0 (call) +
+
+
+
+ safeTxGas: +
+
+ 0 +
+
+
+
+ baseGas: +
+
0 - bytes
- +
+
+ gasPrice: +
+
+ 0 +
+
+
+
+ gasToken: +
+
+
+
+
+ + + 0x0000...0000 + + +
+ + + +
+ +
+
+
+
+
+
+
- + +
+ +
+
+
+
+
+
+
+ Raw data: +
+
+
+ 68 + bytes +
+ - +
@@ -446,46 +888,13 @@ exports[`ConfirmationView should display a confirmation with method call when th >
-
- safeTxGas: -
-
- 0 -
-
-
-
- baseGas: -
-
- [object Object] -
-
-
- refundReceiver: + safeTxHash:
- 0x7996...aC52 + 0x96a9...f2e0
@@ -533,75 +942,308 @@ exports[`ConfirmationView should display a confirmation with method call when th /> -
- -
- Raw data: + Created:
-
+ 9/11/2024, 4:26:34 PM +
+
+
+
+
+ Operation: +
+
+ 0 (call) +
+
+
+
+ safeTxGas: +
+
0 - bytes
- +
+
+ baseGas: +
+
+ 0 +
+
+
+
+ gasPrice: +
+
+ 0 +
+
+
+
+ gasToken: +
+
- + +
+ +
+
+
+
+
+
+
+ refundReceiver: +
+
+
+
+
+ + + 0x0000...0000 + + +
+ + + +
+ +
+
+
+
+
+
+
+ Raw data: +
+
+
+ 68 + bytes +
+ - +