feat: optimize transaction history request (#1572)

- Closes #1553

---

- Fetch transaction history cursors using a simplified query to optimize
data retrieval.
- Improve loading time by reducing the page info query complexity.

.changeset/silent-hairs-admire.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": minor
+---
+
+Reduce transaction history loading time by optimizing the complexity of the page info query.

packages/app/src/systems/Core/utils/databaseVersioning.ts

@@ -138,4 +138,22 @@ export const applyDbVersioning = (db: Dexie) => {
     abis: '&contractId',
     errors: '&id',
   });
+
+  // DB VERSION 24
+  // Add transactionCursors page size column
+  db.version(24)
+    .stores({
+      vaults: 'key',
+      accounts: '&address, &name',
+      networks: '&id, &url, &name, chainId',
+      connections: 'origin',
+      transactionsCursors: '++id, address, size, providerUrl, endCursor',
+      assets: '&name, &symbol',
+      abis: '&contractId',
+      errors: '&id',
+    })
+    .upgrade(async (tx) => {
+      const transactionsCursors = tx.table('transactionsCursors');
+      await transactionsCursors.clear();
+    });
 };

packages/app/src/systems/Core/utils/graphql.ts

@@ -0,0 +1,26 @@
+export const graphqlRequest = async <R, T = Record<string, unknown>>(
+  url: string,
+  operationName: string,
+  query: string,
+  variables: T
+): Promise<R> => {
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      operationName,
+      query,
+      variables,
+    }),
+  });
+
+  if (res.ok) {
+    const response = await res.json();
+    return response.data as R;
+  }
+
+  const error = await res.json();
+  return Promise.reject(error);
+};

packages/app/src/systems/Transaction/services/queries.ts

@@ -0,0 +1,33 @@
+export type GetPageInfoQuery = {
+  transactionsByOwner: {
+    pageInfo: {
+      hasPreviousPage: boolean;
+      hasNextPage: boolean;
+      startCursor: string;
+      endCursor: string;
+    };
+  };
+};
+
+export const getPageInfoQuery = `
+  query getTransactionsByOwner($owner: Address!, $after: String, $before: String, $first: Int, $last: Int) {
+    transactionsByOwner(
+      owner: $owner
+      after: $after
+      before: $before
+      first: $first
+      last: $last
+    ) {
+      pageInfo {
+        ...pageInfoFragment
+      }
+    }
+  }
+
+  fragment pageInfoFragment on PageInfo {
+    hasPreviousPage
+    hasNextPage
+    startCursor
+    endCursor
+  }
+`;

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

@@ -19,6 +19,7 @@ import { WalletLockedCustom, db } from '~/systems/Core';
 
 import { createProvider } from '@fuel-wallet/connections';
 import { AccountService } from '~/systems/Account/services/account';
+import { graphqlRequest } from '~/systems/Core/utils/graphql';
 import { NetworkService } from '~/systems/Network/services/network';
 import type { TransactionCursor } from '../types';
 import {
@@ -29,6 +30,7 @@ import {
   setGasLimitToTxRequest,
 } from '../utils';
 import { getCurrentTips } from '../utils/fee';
+import { type GetPageInfoQuery, getPageInfoQuery } from './queries';
 
 export type TxInputs = {
   getTxCursors: {
@@ -124,6 +126,9 @@ export class TxService {
         .and((cursor) => {
           return cursor.address.toLowerCase() === input.address.toLowerCase();
         })
+        .and((cursor) => {
+          return cursor.size === TXS_PER_PAGE;
+        })
         .sortBy('id');
     });
   }
@@ -134,6 +139,7 @@ export class TxService {
     const transactionsCursors: TransactionCursor[] = cursors.map(
       (endCursor) => ({
         address,
+        size: TXS_PER_PAGE,
         providerUrl,
         endCursor,
       })
@@ -338,21 +344,22 @@ export class TxService {
     providerUrl = '',
     initialEndCursor,
   }: TxInputs['getAllCursors']) {
-    const provider = await createProvider(providerUrl);
-
     let hasNextPage = true;
     const cursors: string[] = [];
     let endCursor: string | null | undefined = initialEndCursor;
 
     while (hasNextPage) {
-      const { pageInfo } = await getTransactionsSummaries({
-        provider,
-        filters: {
+      const result: GetPageInfoQuery = await graphqlRequest(
+        providerUrl,
+        'getTransactionsByOwner',
+        getPageInfoQuery,
+        {
           owner: address,
           first: TXS_PER_PAGE,
           after: endCursor,
-        },
-      });
+        }
+      );
+      const pageInfo = result.transactionsByOwner.pageInfo;
 
       hasNextPage = pageInfo.hasNextPage;
       endCursor = pageInfo.endCursor;

packages/app/src/systems/Transaction/types.tsx

@@ -1,4 +1,3 @@
-import type { AssetAmount } from '@fuel-wallet/types';
 import type {
   AddressType,
   CallResult,
@@ -9,9 +8,6 @@ import type {
   OutputContractCreated,
   TransactionRequestInput,
   TransactionRequestLike,
-  TransactionResponse,
-  TransactionStatus,
-  TransactionType,
 } from 'fuels';
 
 export enum TxCategory {
@@ -38,6 +34,7 @@ export type TxOutputContractCreated = OutputContractCreated;
 
 export type TransactionCursor = {
   address: string;
+  size: number;
   providerUrl: string;
   endCursor: string;
 };