feat: improve "Approve Transaction" performance by using ts-sdk new transaction interface

examples/cra-dapp/package.json

@@ -10,7 +10,7 @@
     "@fuels/connectors": "0.39.0-main-5f9794e",
     "@fuels/react": "0.39.0-main-5f9794e",
     "@tanstack/react-query": "5.28.4",
-    "fuels": "0.98.0",
+    "fuels": "pr-3735",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },

package.json

@@ -123,7 +123,7 @@
       "send@<0.19.0": ">=0.19.0",
       "serve-static@<1.16.0": ">=1.16.0",
       "rollup@>=4.0.0 <4.22.4": ">=4.22.4",
-      "fuels": "0.98.0",
+      "fuels": "pr-3735",
       "secp256k1@=5.0.0": ">=5.0.1",
       "elliptic@<6.6.0": ">=6.6.0",
       "vitest@>=2.0.0 <2.1.9": ">2.1.9",

packages/app/package.json

@@ -43,7 +43,7 @@
     "events": "3.3.0",
     "fake-indexeddb": "4.0.2",
     "framer-motion": "10.16.4",
-    "fuels": "0.98.0",
+    "fuels": "pr-3735",
     "json-edit-react": "1.13.3",
     "json-rpc-2.0": "1.7.0",
     "lodash.debounce": "4.0.8",

packages/app/src/systems/CRX/background/services/BackgroundService.ts

@@ -310,7 +310,14 @@ export class BackgroundService {
       );
     }
 
-    const { address: _address, provider, transaction, skipCustomFee } = input;
+    const {
+      address: _address,
+      provider,
+      transaction,
+      skipCustomFee,
+      transactionState,
+      transactionSummary,
+    } = input;
 
     const popupService = await PopUpService.open(
       origin,
@@ -327,6 +334,8 @@ export class BackgroundService {
       title,
       favIconUrl,
       skipCustomFee,
+      transactionState,
+      transactionSummary,
     });
     popupService.destroy();
     return signedMessage;

packages/app/src/systems/CRX/background/services/PopUpService.ts

@@ -203,6 +203,7 @@ export class PopUpService {
   }
 
   async sendTransaction(input: MessageInputs['sendTransaction']) {
+    console.log('sendTransaction', input);
     return this.client.request('sendTransaction', input);
   }
 

packages/app/src/systems/CRX/background/services/types.ts

@@ -3,7 +3,8 @@ import type {
   FuelProviderConfig,
   NetworkData,
 } from '@fuel-wallet/types';
-import type { AbiMap, SelectNetworkArguments } from 'fuels';
+import type { AbiMap } from 'fuels';
+import type { TransactionSummaryJson } from 'fuels';
 
 export type MessageInputs = {
   signMessage: {
@@ -21,6 +22,8 @@ export type MessageInputs = {
     provider: FuelProviderConfig;
     transaction: string;
     skipCustomFee?: boolean;
+    transactionState?: 'funded' | undefined;
+    transactionSummary?: TransactionSummaryJson;
   };
   addAssets: {
     assets: AssetData[];

packages/app/src/systems/DApp/machines/transactionRequestMachine.tsx

@@ -257,41 +257,21 @@ export const transactionRequestMachine = createMachine(
       })),
       assignTxRequestData: assign({
         input: (ctx, ev) => {
-          const {
-            transactionRequest,
-            origin,
-            providerUrl,
-            title,
-            favIconUrl,
-            skipCustomFee,
-            account,
-            address,
-            fees,
-          } = ev.input || {};
-
-          if (!providerUrl) {
-            throw new Error('providerUrl is required');
+          if (!ev.input?.providerConfig) {
+            throw new Error('providerConfig is required');
           }
-          if (!account?.address && !address) {
+          if (!ev.input?.account?.address && !ev.input?.address) {
             throw new Error('account or address is required');
           }
-          if (!transactionRequest) {
+          if (!ev.input?.transactionRequest) {
             throw new Error('transaction is required');
           }
-          if (ctx.input.isOriginRequired && !origin) {
+          if (ctx.input.isOriginRequired && !ev.input?.origin) {
             throw new Error('origin is required');
           }
 
           return {
-            transactionRequest,
-            origin,
-            account,
-            address,
-            providerUrl,
-            title,
-            favIconUrl,
-            skipCustomFee,
-            fees,
+            ...ev.input,
           };
         },
         fees: (_ctx, ev) => {

packages/app/src/systems/DApp/methods.ts

@@ -50,26 +50,29 @@ export class RequestMethods extends ExtensionPageConnection {
 
   async sendTransaction(input: MessageInputs['sendTransaction']) {
     const {
-      origin,
       address,
       provider,
       transaction,
+      origin,
       title,
       favIconUrl,
       skipCustomFee,
+      transactionState,
+      transactionSummary,
     } = input;
-    const providerUrl = provider.url;
     const transactionRequest = transactionRequestify(JSON.parse(transaction));
 
     const state = await store
       .requestTransaction({
         origin,
         transactionRequest,
         address,
-        providerUrl,
+        providerConfig: provider,
         title,
         favIconUrl,
         skipCustomFee,
+        transactionState,
+        transactionSummary,
       })
       .waitForState(Services.txRequest, {
         ...WAIT_FOR_CONFIG,

packages/app/src/systems/Transaction/services/transaction.tsx

@@ -1,5 +1,14 @@
-import type { Account, AccountWithBalance } from '@fuel-wallet/types';
-import type { Provider, TransactionRequest, WalletLocked } from 'fuels';
+import type {
+  Account,
+  AccountWithBalance,
+  FuelProviderConfig,
+} from '@fuel-wallet/types';
+import type {
+  TransactionRequest,
+  TransactionSummary,
+  TransactionSummaryJson,
+  WalletLocked,
+} from 'fuels';
 import { clone } from 'ramda';
 
 import {
@@ -10,12 +19,14 @@ import {
   TransactionResponse,
   TransactionStatus,
   assembleTransactionSummary,
+  assembleTransactionSummaryFromJson,
   bn,
+  deserializeProviderCache,
   getTransactionSummary,
   getTransactionSummaryFromRequest,
   getTransactionsSummaries,
 } from 'fuels';
-import { WalletLockedCustom, db } from '~/systems/Core';
+import { WalletLockedCustom, db, delay } from '~/systems/Core';
 
 import { createProvider } from '@fuel-wallet/connections';
 import { AccountService } from '~/systems/Account/services/account';
@@ -45,7 +56,7 @@ export type TxInputs = {
     cursors: string[];
   };
   request: {
-    providerUrl: string;
+    providerConfig: FuelProviderConfig;
     transactionRequest: TransactionRequest;
     address?: string;
     origin?: string;
@@ -59,6 +70,8 @@ export type TxInputs = {
       fastTip?: BN;
       maxGasLimit?: BN;
     };
+    transactionState?: 'funded' | undefined;
+    transactionSummary?: TransactionSummaryJson;
   };
   send: {
     address?: string;
@@ -68,10 +81,12 @@ export type TxInputs = {
   };
   simulateTransaction: {
     transactionRequest: TransactionRequest;
-    providerUrl?: string;
+    providerConfig?: FuelProviderConfig;
     skipCustomFee?: boolean;
     tip?: BN;
     gasLimit?: BN;
+    transactionState?: 'funded' | undefined;
+    transactionSummary?: TransactionSummaryJson;
   };
   setCustomFees: {
     tip?: BN;
@@ -191,12 +206,20 @@ export class TxService {
   static async simulateTransaction({
     skipCustomFee,
     transactionRequest: inputTransactionRequest,
-    providerUrl,
+    providerConfig,
     tip: inputCustomTip,
     gasLimit: inputCustomGasLimit,
+    transactionState,
+    transactionSummary,
   }: TxInputs['simulateTransaction']) {
+    // await delay(4000);
+    // console.log(`asd providerConfig`, providerConfig);
+    // if (providerConfig?.cache) {
+    //   const providerCache = deserializeProviderCache(providerConfig?.cache);
+    //   console.log(`asd providerCache`, providerCache);
+    // }
     const [provider, account] = await Promise.all([
-      createProvider(providerUrl || ''),
+      createProvider(providerConfig?.url || ''),
       AccountService.getCurrentAccount(),
     ]);
 
@@ -218,7 +241,8 @@ export class TxService {
       then outputting a proposedTxRequest, which will be the one to go for approval
       */
       const proposedTxRequest = clone(inputTransactionRequest);
-      if (!skipCustomFee) {
+
+      if (!skipCustomFee && transactionState !== 'funded') {
         // if the user has inputted a custom tip, we set it to the proposedTxRequest
         if (inputCustomTip) {
           proposedTxRequest.tip = inputCustomTip;
@@ -260,11 +284,20 @@ export class TxService {
         inputs: transaction.inputs,
       });
 
-      const txSummary = await getTransactionSummaryFromRequest({
-        provider,
-        transactionRequest: proposedTxRequest,
-        abiMap,
-      });
+      let txSummary: TransactionSummary<void>;
+      if (transactionSummary) {
+        const summary = await assembleTransactionSummaryFromJson({
+          transactionSummary,
+          provider,
+        });
+        txSummary = summary;
+      } else {
+        txSummary = await getTransactionSummaryFromRequest({
+          provider,
+          transactionRequest: proposedTxRequest,
+          abiMap,
+        });
+      }
 
       // Adding 1 magical unit to match the fake unit that is added on TS SDK (.add(1))
       const feeAdaptedToSdkDiff = txSummary.fee.add(1);
@@ -485,7 +518,7 @@ export class TxService {
           // If this is the last attempt and we still don't have funds, we cannot move forward
           if (
             attempts === maxAttempts &&
-            error.code === ErrorCode.NOT_ENOUGH_FUNDS
+            error.code === ErrorCode.INSUFFICIENT_FUNDS_OR_MAX_COINS
           ) {
             throw e;
           }

packages/connections/package.json

@@ -37,7 +37,7 @@
     "@fuel-wallet/types": "workspace:*",
     "@types/uuid": "^9.0.5",
     "blob-polyfill": "^7.0.20220408",
-    "fuels": "0.98.0",
+    "fuels": "pr-3735",
     "jest-environment-jsdom": "29.6.2",
     "tsup": "^7.2.0",
     "undici": "^6.4.0",

packages/docs/package.json

@@ -27,7 +27,7 @@
     "crypto-browserify": "3.12.0",
     "dotenv": "^16.3.1",
     "framer-motion": "^10.16.4",
-    "fuels": "0.98.0",
+    "fuels": "pr-3735",
     "globby": "^13.2.2",
     "gray-matter": "^4.0.3",
     "hast-util-heading-rank": "^3.0.0",

packages/e2e-contract-tests/package.json

@@ -15,7 +15,7 @@
     "@fuels/connectors": "0.39.0-pr-458-101889b",
     "@fuels/react": "0.39.0-pr-458-101889b",
     "@tanstack/react-query": "5.28.4",
-    "fuels": "0.98.0",
+    "fuels": "pr-3735",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-error-boundary": "^4.0.11",

packages/playwright-utils/package.json

@@ -26,7 +26,7 @@
     "adm-zip": "^0.5.10"
   },
   "devDependencies": {
-    "fuels": "0.98.0",
+    "fuels": "pr-3735",
     "@fuels/ts-config": "^0.26.0",
     "@fuels/tsup-config": "^0.26.0",
     "@playwright/test": "1.46.1",

packages/types/package.json

@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "dexie": "4.0.9",
-    "fuels": "0.98.0",
+    "fuels": "pr-3735",
     "json-rpc-2.0": "1.7.0",
     "tsup": "^7.2.0"
   }

packages/types/src/fuel.ts

@@ -1,3 +1,4 @@
+import type { ProviderCacheJson } from 'fuels';
 import type {
   EventMessage,
   MessageTypes,
@@ -53,4 +54,5 @@ export type CommunicationEventArg<T> = T extends MessageTypes.request
 export type FuelProviderConfig = {
   id?: string;
   url: string;
+  cache?: ProviderCacheJson;
 };