Fix error display in confirmation screen

src/components/tx-flow/SafeTxProvider.tsx

@@ -61,7 +61,10 @@ const SafeTxProvider = ({ children }: { children: ReactNode }): ReactElement =>
     if (safeTx.data.nonce === finalNonce && safeTx.data.safeTxGas === finalSafeTxGas) return
 
     createTx({ ...safeTx.data, safeTxGas: String(finalSafeTxGas) }, finalNonce)
-      .then(setSafeTx)
+      .then((tx) => {
+        console.log('SafeTxProvider: Updated tx with nonce and safeTxGas', tx)
+        setSafeTx(tx)
+      })
       .catch(setSafeTxError)
   }, [isSigned, finalNonce, finalSafeTxGas, safeTx?.data])
 

src/components/tx-flow/flows/AddOwner/ReviewOwner.tsx

@@ -50,5 +50,5 @@ export const ReviewOwner = ({ params }: { params: AddOwnerFlowProps | ReplaceOwn
     trackEvent({ ...SETTINGS_EVENTS.SETUP.OWNERS, label: safe.owners.length })
   }
 
-  return <SignOrExecuteForm onSubmit={addAddressBookEntryAndSubmit} />
+  return <SignOrExecuteForm onSubmit={addAddressBookEntryAndSubmit} showMethodCall />
 }

src/components/tx-flow/flows/ChangeThreshold/ReviewChangeThreshold.tsx

@@ -26,7 +26,7 @@ const ReviewChangeThreshold = ({ params }: { params: ChangeThresholdFlowProps })
 
   return (
     <ChangeThresholdReviewContext.Provider value={{ newThreshold }}>
-      <SignOrExecuteForm onSubmit={onChangeThreshold} />
+      <SignOrExecuteForm onSubmit={onChangeThreshold} showMethodCall />
     </ChangeThresholdReviewContext.Provider>
   )
 }

src/components/tx/SignOrExecuteForm/__tests__/SignOrExecute.test.tsx

@@ -13,6 +13,12 @@ jest.mock('@/hooks/useIsSafeOwner', () => ({
   default: jest.fn(() => isSafeOwner),
 }))
 
+// Mock proposeTx
+jest.mock('@/services/tx/proposeTransaction', () => ({
+  __esModule: true,
+  default: jest.fn(() => Promise.resolve({ txId: '123' })),
+}))
+
 describe('SignOrExecute', () => {
   beforeEach(() => {
     isSafeOwner = true

src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap

@@ -263,52 +263,243 @@ exports[`SignOrExecute should display an error screen 1`] = `
       class="MuiCardContent-root cardContent css-46bh2p-MuiCardContent-root"
     >
       <div
-        class="container"
+        class="MuiStack-root css-1sazv7p-MuiStack-root"
       >
         <div
-          class="wrapper"
+          class="MuiBox-root css-0"
         >
-          <h3
-            class="MuiTypography-root MuiTypography-h3 css-mv4yuw-MuiTypography-root"
-          >
-            Something went wrong,
-            <br />
-            please try again.
-          </h3>
-          <span
-            class="MuiBadge-root badge css-1c32n2y-MuiBadge-root"
+          <div
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-11at38v-MuiPaper-root-MuiAccordion-root"
           >
             <div
-              class="circle MuiBox-root css-1ngw63v"
+              aria-expanded="false"
+              class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-1gi6o5u-MuiButtonBase-root-MuiAccordionSummary-root"
+              data-testid="decoded-tx-summary"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-c1i83b-MuiAccordionSummary-content"
+              >
+                Advanced details
+                <span
+                  class=""
+                  data-mui-internal-clone-element="true"
+                >
+                  <mock-icon
+                    aria-hidden="true"
+                    classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-i8sqcg-MuiSvgIcon-root"
+                    focusable="false"
+                  />
+                </span>
+                <div
+                  class="MuiBox-root css-i9gxme"
+                />
+              </div>
+              <div
+                class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-17ceore-MuiSvgIcon-root"
+                  data-testid="ExpandMoreIcon"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+              style="min-height: 0px;"
             >
-              <mock-icon
-                aria-hidden="true"
-                classname="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-82oui0-MuiSvgIcon-root"
-                focusable="false"
-              />
+              <div
+                class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+              >
+                <div
+                  class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+                >
+                  <div
+                    class="MuiAccordion-region"
+                    role="region"
+                  >
+                    <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>
             </div>
-            <span
-              class="MuiBadge-badge MuiBadge-dot MuiBadge-anchorOriginBottomRight MuiBadge-anchorOriginBottomRightCircular MuiBadge-overlapCircular MuiBadge-colorWarning css-harjv7-MuiBadge-badge"
-            />
-          </span>
-          <p
-            class="MuiTypography-root MuiTypography-body1 css-97ibp6-MuiTypography-root"
+          </div>
+        </div>
+      </div>
+    </div>
+  </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="wrapper"
+      >
+        <div
+          class="icon sign"
+        >
+          <mock-icon
+            aria-hidden="true"
+            classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-11dtfly-MuiSvgIcon-root"
+            focusable="false"
+          />
+        </div>
+        <div>
+          <h5
+            class="MuiTypography-root MuiTypography-h5 css-kmqua7-MuiTypography-root"
           >
-            Error: This is a mock error message
-          </p>
+            confirm
+          </h5>
           <p
-            class="MuiTypography-root MuiTypography-body1 css-97ibp6-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body2 css-ceebrx-MuiTypography-root"
           >
-            SignOrExecuteForm/index
+            You're about to 
+            create and 
+            confirm
+             this transaction.
           </p>
-          <a
-            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1su57z-MuiTypography-root-MuiLink-root"
-            href="/welcome"
-          >
-            Go home
-          </a>
         </div>
       </div>
+      <form>
+        <hr
+          class="MuiDivider-root MuiDivider-fullWidth nestedDivider css-1cvjk81-MuiDivider-root"
+        />
+        <div
+          class="MuiCardActions-root MuiCardActions-spacing css-dnrpxu-MuiCardActions-root"
+        >
+          <div
+            class="MuiStack-root css-irtfmw-MuiStack-root"
+          >
+            <span
+              class=""
+              data-mui-internal-clone-element="true"
+            >
+              <span
+                data-track="batching: Add to batch"
+              >
+                <button
+                  class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-fj99we-MuiButtonBase-root-MuiButton-root"
+                  tabindex="0"
+                  type="button"
+                >
+                  <mock-icon
+                    aria-hidden="true"
+                    classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-gxmw0o-MuiSvgIcon-root"
+                    focusable="false"
+                  />
+                  Add to batch
+                  <span
+                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                  />
+                </button>
+              </span>
+            </span>
+            <div
+              class="MuiBox-root css-1aqmpzz"
+            >
+               
+              <div
+                class="MuiDivider-root MuiDivider-fullWidth MuiDivider-withChildren css-7zcts1-MuiDivider-root"
+                role="separator"
+              >
+                <span
+                  class="MuiDivider-wrapper css-165zycj-MuiDivider-wrapper"
+                >
+                  or
+                </span>
+              </div>
+            </div>
+            <span
+              aria-label="Please connect your wallet"
+              class=""
+              data-mui-internal-clone-element="true"
+            >
+              <button
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1mhjei7-MuiButtonBase-root-MuiButton-root"
+                data-testid="sign-btn"
+                disabled=""
+                tabindex="-1"
+                type="submit"
+              >
+                Sign
+              </button>
+            </span>
+          </div>
+        </div>
+      </form>
     </div>
   </div>
 </div>

src/components/tx/SignOrExecuteForm/hooks.ts

@@ -21,6 +21,8 @@ import useAsync from '@/hooks/useAsync'
 import { useUpdateBatch } from '@/hooks/useDraftBatch'
 import { getTransactionDetails, type TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
 import { useCurrentChain } from '@/hooks/useChains'
+import directProposeTx from '@/services/tx/proposeTransaction'
+import { getAndValidateSafeSDK } from '@/services/tx/tx-sender/sdk'
 
 type TxActions = {
   addToBatch: (safeTx?: SafeTransaction, origin?: string) => Promise<string>
@@ -39,17 +41,19 @@ type TxActions = {
 type txDetails = AsyncResult<TransactionDetails>
 
 export const useProposeTx = (safeTx?: SafeTransaction, txId?: string, origin?: string): txDetails => {
-  const { proposeTx } = useTxActions()
   const { safe } = useSafeInfo()
+  const wallet = useWallet()
+  const sender = wallet?.address || safe.owners?.[0]?.value
 
   return useAsync(
-    () => {
+    async () => {
       if (txId) return getTransactionDetails(safe.chainId, txId)
-      if (!safeTx) return
-
-      return proposeTx(safeTx, txId, origin)
+      if (!safeTx || !sender) return
+      const safeSDK = getAndValidateSafeSDK()
+      const safeTxHash = await safeSDK.getTransactionHash(safeTx)
+      return directProposeTx(safe.chainId, safe.address.value, sender, safeTx, safeTxHash, origin)
     },
-    [safeTx, txId, origin, safe.chainId, proposeTx],
+    [safeTx, txId, origin, safe.chainId, safe.address.value, sender],
     false,
   )
 }

src/components/tx/SignOrExecuteForm/index.tsx

@@ -4,8 +4,6 @@ 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'
 import useSafeInfo from '@/hooks/useSafeInfo'
 
 type SignOrExecuteExtendedProps = Omit<SignOrExecuteProps, 'txId'> & {
@@ -26,16 +24,17 @@ type SignOrExecuteExtendedProps = Omit<SignOrExecuteProps, 'txId'> & {
 const SignOrExecute = (props: SignOrExecuteExtendedProps) => {
   const { safeTx } = useContext(SafeTxContext)
   const { safe } = useSafeInfo()
-  const [txDetails, error, isLoading] = useProposeTx(safe.deployed ? safeTx : undefined, props.txId, props.origin)
+  const [txDetails, error] = useProposeTx(safe.deployed ? safeTx : undefined, props.txId, props.origin)
 
-  return error ? (
-    <TxCard>
-      <ErrorBoundary error={error} componentStack="SignOrExecuteForm/index" />
-    </TxCard>
-  ) : isLoading || !safeTx || (!txDetails && safe.deployed) ? (
-    <SignOrExecuteSkeleton />
-  ) : (
-    <SignOrExecuteForm {...props} isCreation={!props.txId} txId={props.txId || txDetails?.txId} txDetails={txDetails} />
+  // Show the loader only the first time the tx is being loaded
+  if ((!txDetails && !error && safe.deployed) || !safeTx) {
+    return <SignOrExecuteSkeleton />
+  }
+
+  return (
+    <SignOrExecuteForm {...props} isCreation={!props.txId} txId={props.txId || txDetails?.txId} txDetails={txDetails}>
+      {props.children}
+    </SignOrExecuteForm>
   )
 }
 

src/components/tx/confirmation-views/index.tsx

@@ -21,7 +21,7 @@ type ConfirmationViewProps = {
   isBatch?: boolean
   isApproval?: boolean
   isCreation?: boolean
-  showMethodCall?: boolean
+  showMethodCall?: boolean // @TODO: remove this prop when we migrate all tx types
   children?: ReactNode
 }