feat: show an error screen if something happens while fetching the tx…

…Details
safe-global · Sep 17, 2024 · e511c1c · e511c1c
1 parent 565c40c
commit e511c1c
Show file tree

Hide file tree

Showing 7 changed files with 911 additions and 240 deletions.
diff --git 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 (
     <div className={css.container}>
       <div className={css.wrapper}>

diff --git 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 (
     <>
       <MultisendActionsHeader setOpen={setOpenMap} amount={multiSendTransactions.length} compact={compact} />

diff --git 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
@@ -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(
+      <SafeTxContext.Provider
+        value={
+          {
+            safeTx: createSafeTx(),
+          } as SafeTxContextParams
+        }
+      >
+        <SignOrExecute onSubmit={jest.fn()} isExecutable={true} />
+      </SafeTxContext.Provider>,
+    )
+
+    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
@@ -75,67 +75,7 @@ exports[`SignOrExecute should display a confirmation screen 1`] = `
                     <div
                       class="MuiAccordionDetails-root css-7wcoc8-MuiAccordionDetails-root"
                       data-testid="decoded-tx-details"
-                    >
-                      <div
-                        class="gridRow"
-                        data-testid="tx-executed-at"
-                      >
-                        <div
-                          class="title"
-                          data-testid="tx-row-title"
-                        >
-                          safeTxGas:
-                        </div>
-                        <div
-                          class="MuiBox-root css-rurw5h"
-                        >
-                          0
-                        </div>
-                      </div>
-                      <div
-                        class="gridRow"
-                        data-testid="tx-executed-at"
-                      >
-                        <div
-                          class="title"
-                          data-testid="tx-row-title"
-                        >
-                          Raw data:
-                        </div>
-                        <div
-                          class="MuiBox-root css-70qvj9"
-                          data-testid="tx-data-row"
-                        >
-                          <div>
-                            0
-                             bytes
-                          </div>
-                          <span
-                            aria-label="Copy to clipboard"
-                            class=""
-                            data-mui-internal-clone-element="true"
-                            style="cursor: pointer;"
-                          >
-                            <button
-                              aria-label="Copy to clipboard"
-                              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-nmr6e8-MuiButtonBase-root-MuiIconButton-root"
-                              tabindex="0"
-                              type="button"
-                            >
-                              <mock-icon
-                                aria-hidden="true"
-                                classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-j1da6x-MuiSvgIcon-root"
-                                data-testid="copy-btn-icon"
-                                focusable="false"
-                              />
-                              <span
-                                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                              />
-                            </button>
-                          </span>
-                        </div>
-                      </div>
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -313,3 +253,66 @@ exports[`SignOrExecute should display a loading component 1`] = `
   </div>
 </div>
 `;
+
+exports[`SignOrExecute should display an error screen 1`] = `
+<div>
+  <div
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-118bpkk-MuiPaper-root-MuiCard-root"
+  >
+    <div
+      class="MuiCardContent-root cardContent css-46bh2p-MuiCardContent-root"
+    >
+      <div
+        class="MuiBox-root css-17luq05"
+      >
+        <div
+          class="box MuiBox-root css-0"
+        >
+          <div
+            class="rect rectTl"
+          />
+          <div
+            class="rect rectTr"
+          />
+          <div
+            class="rect rectBl"
+          />
+          <div
+            class="rect rectBr"
+          />
+          <div
+            class="rect rectCenter"
+          />
+          <svg
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <defs>
+              <filter
+                id="gooey"
+              >
+                <fegaussianblur
+                  in="SourceGraphic"
+                  result="blur"
+                  stdDeviation="3"
+                />
+                <fecolormatrix
+                  in="blur"
+                  mode="matrix"
+                  result="goo"
+                  values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
+                />
+                <fecomposite
+                  in="SourceGraphic"
+                  in2="goo"
+                  operator="atop"
+                />
+              </filter>
+            </defs>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git 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<SignOrExecuteProps, 'txId'> & {
   onSubmit?: SubmitCallback
@@ -22,13 +24,17 @@ type SignOrExecuteExtendedProps = Omit<SignOrExecuteProps, 'txId'> & {
 
 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 ? (
     <SignOrExecuteSkeleton />
+  ) : error ? (
+    <TxCard>
+      <ErrorBoundary error={error} componentStack="SignOrExecuteForm/index" />
+    </TxCard>
   ) : (
-    <SignOrExecuteForm {...props} isCreation={!props.txId} txId={props.txId || txDetails?.txId} txDetails={txDetails} />
+    <SignOrExecuteForm {...props} isCreation={!props.txId} txId={props.txId || txDetails.txId} txDetails={txDetails} />
   )
 }