feat: wallet calculate gas performance

.changeset/lemon-maps-rest.md

@@ -0,0 +1,6 @@
+---
+"@fuels/playwright-utils": minor
+"fuels-wallet": minor
+---
+
+feat: performance improvement from rework on send transaction machine flows

.github/workflows/pr-tests-e2e-assets.yml

@@ -32,7 +32,7 @@ jobs:
 
       - name: Upload Test Report
         if: failure()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: e2e-test-report
           path: packages/e2e-assets/playwright-html

examples/cra-dapp/package.json

@@ -20,6 +20,6 @@
     "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react": "4.2.1",
     "typescript": "5.2.2",
-    "vite": "6.0.3"
+    "vite": "6.0.8"
   }
 }

package.json

@@ -98,6 +98,9 @@
       "allowAny": ["react", "react-dom"],
       "ignoreMissing": ["react", "react-dom"]
     },
+    "auditConfig": {
+      "ignoreGhsas": ["GHSA-vg6x-rcgg-rjx6"]
+    },
     "overrides": {
       "follow-redirects": ">=1.15.6",
       "glob-parent@<5.1.2": ">=5.1.2",
@@ -128,7 +131,8 @@
       "secp256k1@=5.0.0": ">=5.0.1",
       "elliptic@<6.6.0": ">=6.6.0",
       "cross-spawn@<7.0.5": ">=7.0.5",
-      "nanoid@<3.3.8": "3.3.8"
+      "nanoid@<3.3.8": "3.3.8",
+      "store2@<2.14.4": ">=2.14.4"
     }
   }
 }

packages/app/package.json

@@ -102,7 +102,7 @@
     "ts-jest-mock-import-meta": "1.1.0",
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "5.2.2",
-    "vite": "6.0.3",
+    "vite": "6.0.8",
     "vite-plugin-clean": "1.0.0",
     "vite-plugin-static-copy": "2.2.0",
     "vite-tsconfig-paths": "5.1.4",

packages/app/playwright/crx/assets.test.ts

@@ -41,9 +41,14 @@ test.describe('Check assets', () => {
   });
 
   test('should show valid asset value 0.002000', async () => {
-    expect(
-      await page.getByText('0.002000', { exact: true }).isVisible()
-    ).toBeTruthy();
+    await expect
+      .poll(
+        async () => {
+          return await page.getByText('0.002000', { exact: true }).isVisible();
+        },
+        { timeout: 10000 }
+      )
+      .toBeTruthy();
   });
 
   test('should show USDCIcon AlertTriangle', async () => {

packages/app/playwright/crx/crx.test.ts

@@ -90,10 +90,11 @@ test.describe('FuelWallet Extension', () => {
     extensionId,
   }) => {
     const popupPage = await context.newPage();
-    await popupPage.goto(`chrome-extension://${extensionId}/popup.html`);
-    const page = await context.waitForEvent('page', {
+    const pagePromise = context.waitForEvent('page', {
       predicate: (page) => page.url().includes('sign-up'),
     });
+    await popupPage.goto(`chrome-extension://${extensionId}/popup.html`);
+    const page = await pagePromise;
     expect(page.url()).toContain('sign-up');
   });
 

packages/app/playwright/e2e/SendTransaction.test.ts

@@ -59,8 +59,6 @@ test.describe('SendTransaction', () => {
 
     const btnLocator = getButtonByText(page, 'Review');
 
-    await expectButtonToBeEnabled(btnLocator);
-    await page.waitForTimeout(5000);
     await expectButtonToBeEnabled(btnLocator);
     await btnLocator.click();
 
@@ -95,8 +93,6 @@ test.describe('SendTransaction', () => {
     // make sure the button is enabled
     const btnLocator = getButtonByText(page, 'Review');
 
-    await expectButtonToBeEnabled(btnLocator);
-    await page.waitForTimeout(5000);
     await expectButtonToBeEnabled(btnLocator);
     await btnLocator.click();
 
@@ -140,8 +136,6 @@ test.describe('SendTransaction', () => {
 
     const btnLocator = getButtonByText(page, 'Review');
 
-    await expectButtonToBeEnabled(btnLocator);
-    await page.waitForTimeout(5000);
     await expectButtonToBeEnabled(btnLocator);
     await btnLocator.click();
 
@@ -173,12 +167,9 @@ test.describe('SendTransaction', () => {
 
     // Waiting button change to Review in order to ensure that fee amount is updated
     await page.waitForSelector('button:has-text("Review")');
-    await page.waitForTimeout(1000);
 
     const btnLocator = getButtonByText(page, 'Review');
 
-    await expectButtonToBeEnabled(btnLocator);
-    await page.waitForTimeout(5000);
     await expectButtonToBeEnabled(btnLocator);
     await btnLocator.click();
 
@@ -215,12 +206,9 @@ test.describe('SendTransaction', () => {
 
     // Waiting button change to Review in order to change fee amount
     await page.waitForSelector('button:has-text("Review")');
-    await page.waitForTimeout(1000);
 
     const btnLocator = getButtonByText(page, 'Review');
 
-    await expectButtonToBeEnabled(btnLocator);
-    await page.waitForTimeout(5000);
     await expectButtonToBeEnabled(btnLocator);
     await btnLocator.click();
 
@@ -253,27 +241,38 @@ test.describe('SendTransaction', () => {
 
     // Waiting button change to Review in order to ensure that fee amount is updated
     await page.waitForSelector('button:has-text("Review")');
-    await page.waitForTimeout(1000);
 
     // Selecting and extracting regular fee amount
+    await expect
+      .poll(
+        async () => {
+          return await getByAriaLabel(page, 'fee value:Regular').isVisible();
+        },
+        { timeout: 10000 }
+      )
+      .toBeTruthy();
     const regularFeeComponent = getByAriaLabel(page, 'fee value:Regular');
     await regularFeeComponent.click();
 
     // Waiting button change to Review in order to ensure that fee amount is updated
     await page.waitForSelector('button:has-text("Review")');
-    await page.waitForTimeout(1000);
 
     const btnLocatorBeforeApprv = getButtonByText(page, 'Review');
 
-    await expectButtonToBeEnabled(btnLocatorBeforeApprv);
-    await page.waitForTimeout(5000);
     await expectButtonToBeEnabled(btnLocatorBeforeApprv);
     await btnLocatorBeforeApprv.click();
 
     // Waiting button change to Approve in order to get updated fee amount
     await page.waitForSelector('button:has-text("Submit")');
-    await page.waitForTimeout(1000);
 
+    await expect
+      .poll(
+        async () => {
+          return await getButtonByText(page, 'Back').isVisible();
+        },
+        { timeout: 10000 }
+      )
+      .toBeTruthy();
     // Going back to select other fee value
     await getButtonByText(page, 'Back').click();
 
@@ -283,27 +282,37 @@ test.describe('SendTransaction', () => {
 
     // Waiting button change to Review in order to change fee amount
     await page.waitForSelector('button:has-text("Review")');
-    await page.waitForTimeout(1000);
 
     const btnLocator = getButtonByText(page, 'Review');
 
-    await expectButtonToBeEnabled(btnLocator);
-    await page.waitForTimeout(5000);
     await expectButtonToBeEnabled(btnLocator);
     await btnLocator.click();
 
     // Waiting button change to Approve in order to get updated fee amount
     await page.waitForSelector('button:has-text("Submit")');
-    await page.waitForTimeout(1000);
 
     await hasText(page, '0.001 ETH');
 
-    await page.waitForTimeout(1000);
+    await expect
+      .poll(
+        async () => {
+          return await getButtonByText(page, 'Submit').isEnabled();
+        },
+        { timeout: 10000 }
+      )
+      .toBeTruthy();
     await getButtonByText(page, 'Submit').click();
     await hasText(page, '0.001 ETH');
 
     // Wait for transaction to be confirmed
-    await hasText(page, 'success');
+    await expect
+      .poll(
+        async () => {
+          return await hasText(page, 'success');
+        },
+        { timeout: 10000 }
+      )
+      .toBeTruthy();
   });
 
   test('Send max amount transaction', async () => {
@@ -337,15 +346,12 @@ test.describe('SendTransaction', () => {
     // Fee values change
     await new Promise((resolve) => setTimeout(resolve, 3000));
 
-    const maxAmountAfterFee = await getInputByName(page, 'amount').inputValue();
-
     // Submit transaction
 
     const btnLocator = getButtonByText(page, 'Review');
 
     await expectButtonToBeEnabled(btnLocator);
-    await page.waitForTimeout(5000);
-    await expectButtonToBeEnabled(btnLocator);
+    const maxAmountAfterFee = await getInputByName(page, 'amount').inputValue();
     await btnLocator.click();
 
     // Approve transaction

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

@@ -26,32 +26,26 @@ const selectors = {
   proposedTxRequest(state: TransactionRequestState) {
     return state.context.response?.proposedTxRequest;
   },
-  isLoadingAccounts(state: TransactionRequestState) {
-    return state.matches('fetchingAccount');
-  },
   errors(state: TransactionRequestState) {
     if (!state.context.errors) return {};
     const simulateTxErrors = state.context.errors?.simulateTxErrors;
     const hasSimulateTxErrors = Boolean(simulateTxErrors);
     const txApproveError = state.context.errors?.txApproveError;
     return { txApproveError, simulateTxErrors, hasSimulateTxErrors };
   },
-  status(externalLoading?: boolean) {
-    return useCallback(
-      (state: TransactionRequestState) => {
-        const isLoading = state.hasTag('loading');
-        const isClosed = state.matches('done') || state.matches('failed');
-
-        if (state.matches('idle')) return TxRequestStatus.idle;
-        if (externalLoading || isLoading) return TxRequestStatus.loading;
-        if (state.matches('txFailed')) return TxRequestStatus.failed;
-        if (state.matches('txSuccess')) return TxRequestStatus.success;
-        if (state.matches('sendingTx')) return TxRequestStatus.sending;
-        if (isClosed) return TxRequestStatus.inactive;
-        return TxRequestStatus.waitingApproval;
-      },
-      [externalLoading]
-    );
+  status() {
+    return useCallback((state: TransactionRequestState) => {
+      const isLoading = state.hasTag('loading');
+      const isClosed = state.matches('done') || state.matches('failed');
+
+      if (state.matches('idle')) return TxRequestStatus.idle;
+      if (isLoading) return TxRequestStatus.loading;
+      if (state.matches('txFailed')) return TxRequestStatus.failed;
+      if (state.matches('txSuccess')) return TxRequestStatus.success;
+      if (state.matches('sendingTx')) return TxRequestStatus.sending;
+      if (isClosed) return TxRequestStatus.inactive;
+      return TxRequestStatus.waitingApproval;
+    }, []);
   },
   title(state: TransactionRequestState) {
     if (state.matches('txSuccess')) return 'Transaction sent';
@@ -95,12 +89,11 @@ export function useTransactionRequest(opts: UseTransactionRequestOpts = {}) {
     },
   });
 
-  const isLoadingAccounts = useSelector(service, selectors.isLoadingAccounts);
   const account = useSelector(service, selectors.account);
   const ctx = useSelector(service, selectors.context);
   const errors = useSelector(service, selectors.errors);
   const providerUrl = ctx.input.providerUrl;
-  const txStatusSelector = selectors.status(isLoadingAccounts);
+  const txStatusSelector = selectors.status();
   const txStatus = useSelector(service, txStatusSelector);
   const title = useSelector(service, selectors.title);
   const txSummarySimulated = useSelector(service, selectors.txSummarySimulated);