feat: add tx history pagination

.changeset/tough-oranges-beam.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": minor
+---
+
+Add pagination to the Transaction History screen.

packages/app/package.json

@@ -2,7 +2,7 @@
   "name": "fuels-wallet",
   "private": true,
   "version": "0.34.1",
-  "database": "21",
+  "database": "23",
   "scripts": {
     "build:all": "run-s build:web build:crx build:storybook",
     "build:web": "./scripts/build.sh --app=vite",

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

@@ -12,7 +12,7 @@ import type {
 import type { DbEvents, PromiseExtended, Table } from 'dexie';
 import Dexie from 'dexie';
 import 'dexie-observable';
-import type { Transaction } from '~/systems/Transaction/types';
+import type { TransactionCursor } from '~/systems/Transaction';
 import { applyDbVersioning } from './databaseVersioning';
 
 type FailureEvents = Extract<keyof DbEvents, 'close' | 'blocked'>;
@@ -22,7 +22,7 @@ export class FuelDB extends Dexie {
   accounts!: Table<Account, string>;
   networks!: Table<NetworkData, string>;
   connections!: Table<Connection, string>;
-  transactions!: Table<Transaction, string>;
+  transactionsCursors!: Table<TransactionCursor, string>;
   assets!: Table<AssetData, string>;
   abis!: Table<AbiTable, string>;
   errors!: Table<StoredFuelWalletError, string>;
@@ -89,7 +89,7 @@ export class FuelDB extends Dexie {
       this.accounts.clear(),
       this.networks.clear(),
       this.connections.clear(),
-      this.transactions.clear(),
+      this.transactionsCursors.clear(),
       this.assets.clear(),
       this.abis.clear(),
       this.errors.clear(),

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

@@ -101,7 +101,6 @@ export const applyDbVersioning = (db: Dexie) => {
       connections: 'origin',
       transactions: '&id',
       assets: '&name, &symbol',
-      assetsTemp: null,
       abis: '&contractId',
       errors: '&id',
     })
@@ -124,4 +123,19 @@ export const applyDbVersioning = (db: Dexie) => {
         });
       }
     });
+
+  // DB VERSION 23
+  // 1. Drop transactions table since we don't use that anymore
+  // 2. Add cursors table for handling tx pagination
+  db.version(23).stores({
+    vaults: 'key',
+    accounts: '&address, &name',
+    networks: '&id, &url, &name, chainId',
+    connections: 'origin',
+    transactions: null,
+    transactionsCursors: '++id, address, providerUrl, endCursor',
+    assets: '&name, &symbol',
+    abis: '&contractId',
+    errors: '&id',
+  });
 };

packages/app/src/systems/Transaction/hooks/useTransactionHistory.ts

@@ -0,0 +1,59 @@
+import { useInterpret, useSelector } from '@xstate/react';
+import type { Address } from 'fuels';
+import { useEffect } from 'react';
+
+import type { TransactionHistoryMachineState } from '../machines';
+import { transactionHistoryMachine } from '../machines';
+import type { TxInputs } from '../services';
+
+const selectors = {
+  isFetching: (state: TransactionHistoryMachineState) => {
+    return state.hasTag('loading');
+  },
+  isFetchingNextPage: (state: TransactionHistoryMachineState) => {
+    return state.matches('fetchingNextPage');
+  },
+  transactionHistory: (state: TransactionHistoryMachineState) => {
+    return state.context.transactionHistory;
+  },
+  hasNextPage: (state: TransactionHistoryMachineState) => {
+    const hasCurrentCursor = Boolean(state.context.currentCursor);
+    const hasLoadedTxs = Boolean(state.context.transactionHistory?.length);
+    return hasCurrentCursor && hasLoadedTxs;
+  },
+};
+
+type UseTransactionHistoryProps = {
+  address?: string | Address;
+};
+
+export function useTransactionHistory({ address }: UseTransactionHistoryProps) {
+  const service = useInterpret(() => transactionHistoryMachine);
+  const { send } = service;
+  const isFetching = useSelector(service, selectors.isFetching);
+  const isFetchingNextPage = useSelector(service, selectors.isFetchingNextPage);
+  const transactionHistory = useSelector(service, selectors.transactionHistory);
+  const hasNextPage = useSelector(service, selectors.hasNextPage);
+
+  function getTransactionHistory(input: TxInputs['getTransactionHistory']) {
+    send('GET_TRANSACTION_HISTORY', { input });
+  }
+
+  function fetchNextPage() {
+    send('FETCH_NEXT_PAGE');
+  }
+
+  useEffect(() => {
+    if (address) {
+      getTransactionHistory({ address: address.toString() });
+    }
+  }, [address]);
+
+  return {
+    fetchNextPage,
+    isFetching,
+    isFetchingNextPage,
+    transactionHistory,
+    hasNextPage,
+  };
+}

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

@@ -40,7 +40,11 @@ export function useTxMetadata({
   // Avoid screen to break with empty operations
   const mainOperation = operations[0] || {};
   const label = getLabel(mainOperation, account?.address as Bech32Address);
-  const timeFormatted = time ? formatDate(time) : undefined;
+  const timeFormattedRaw = time ? formatDate(time) : undefined;
+  const timeFormatted = timeFormattedRaw?.replace(
+    'a few seconds ago',
+    'seconds ago'
+  );
 
   const toOrFromText = useMemo(() => {
     const opDirection = getOperationDirection(mainOperation, ownerAddress);