fix: add transaction id to the transaction approve page (#1196)

When the user is approving a transaction, the `id` is defined only on
the `ctx.approvedTx`.
We can't say the same for the `ctx.txResult`, which has an undefined
`id` in this flow.

I've updated to use that `id` when rendering the `TxApprove` screen.
Now the user can click to open the explorer properly.

.changeset/five-buses-jump.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+fix: transaction id available on transaction approved page, it was taking the user to a broken page (undefined id).

packages/app/src/systems/DApp/hooks/useTransactionRequest.tsx

@@ -19,6 +19,9 @@ const selectors = {
   txResult(state: TransactionRequestState) {
     return state.context.response?.txResult;
   },
+  approvedTx(state: TransactionRequestState) {
+    return state.context.response?.approvedTx;
+  },
   isLoadingAccounts(state: TransactionRequestState) {
     return state.matches('fetchingAccount');
   },
@@ -100,6 +103,7 @@ export function useTransactionRequest(opts: UseTransactionRequestOpts = {}) {
   const txStatus = useSelector(service, txStatusSelector);
   const title = useSelector(service, selectors.title);
   const txResult = useSelector(service, selectors.txResult);
+  const approvedTx = useSelector(service, selectors.approvedTx);
   const origin = useSelector(service, selectors.origin);
   const originTitle = useSelector(service, selectors.originTitle);
   const favIconUrl = useSelector(service, selectors.favIconUrl);
@@ -159,6 +163,7 @@ export function useTransactionRequest(opts: UseTransactionRequestOpts = {}) {
     title,
     txResult,
     txStatus,
+    approvedTx,
     isSendingTx,
     shouldShowTx,
     shouldShowLoader,

packages/app/src/systems/Transaction/hooks/useExplorerLink.tsx

@@ -1,28 +1,29 @@
 import { buildBlockExplorerUrl } from 'fuels';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { EXPLORER_URL, IS_CRX, VITE_FUEL_PROVIDER_URL } from '~/config';
 import { openTab } from '~/systems/CRX/utils';
 import { urlJoin } from '~/systems/Core';
 
 export function useExplorerLink(providerUrl: string, id?: string) {
-  let href = buildBlockExplorerUrl({
-    txId: id,
-    providerUrl,
-  });
+  const href = useMemo<string>(() => {
+    // Use the new explorer only if the provider is the default one
+    if (providerUrl === VITE_FUEL_PROVIDER_URL) {
+      return urlJoin(EXPLORER_URL, `/tx/${id}`);
+    }
 
-  // Use the new explorer only if the provider is the default one
-  if (providerUrl === VITE_FUEL_PROVIDER_URL) {
-    href = urlJoin(EXPLORER_URL, `/tx/${id}`);
-  }
+    return buildBlockExplorerUrl({
+      txId: id,
+      providerUrl,
+    });
+  }, [id, providerUrl]);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   const openExplorer = useCallback(() => {
     if (IS_CRX) {
       openTab(href);
     } else {
       window.location.href = href;
     }
-  }, [providerUrl, id]);
+  }, [href]);
 
   return {
     href,

packages/app/src/systems/Transaction/pages/TxApprove/TxApprove.tsx

@@ -53,7 +53,7 @@ export const TxApprove = () => {
             assets={assets}
             header={
               <TxHeader
-                id={ctx.txResult?.id}
+                id={ctx.txResult?.id || ctx.approvedTx?.id}
                 type={ctx.txResult?.type}
                 status={ctx.approveStatus()}
                 providerUrl={ctx.providerUrl}