feat: performance improvement from rework on send transaction machine flows (#1794)

- Closes #1622 
- Closes FE-808

## Summary
- Centralized provider logic, avoid recreating provider instances for
the same network url
- Sped up account balance calculation by making requests in parallel
- Sped up gas calculation by using fee data recently generated by Send
Machine in the Send Machine -> Tx Request Machine flow (i.e. Send
screen).
- Sped up gas calculation in SendMachine and TxRequestMachine by using
already present information on account/balance from accountMachine
instead of re-fetching
- Sped up gas calculation in SendMachine and TxRequestMachine by merging
calculations of default tip and gas limit into a single parallelized
promise.
- Decrease unnecessarily long delay in tx and send machines while
waiting for a possible new user input

---------

Co-authored-by: LuizAsFight <felipebolsonigomes@gmail.com>

Author: arthurgeron

.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

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);