feat: cache receipts data

packages/app/load.envs.js

@@ -23,8 +23,16 @@ function getEnvName() {
 
 function getBridgeTokenContracts() {
   if (process.env.VITE_FUEL_CHAIN === 'fuelDev') {
+    // On the ci I was encountering issues
+    // with the erc20-deployer server not
+    // completely started before the e2e tests began
+    const IS_CI = !!process.env.CI;
     const { body } = retus('http://localhost:8082/deployments', {
       json: true,
+      retry: {
+        limit: IS_CI ? 5 : 2,
+        delay: IS_CI ? 15000 : 0,
+      },
     });
 
     return body;

packages/app/src/systems/Chains/eth/machines/txEthToFuelMachine.tsx

@@ -1,13 +1,14 @@
 /* eslint-disable no-console */
 import { toast } from '@fuel-ui/react';
 import type { FuelWalletLocked as FuelWallet } from '@fuel-wallet/sdk';
-import type {
-  BN,
-  Message as FuelMessage,
-  Address as FuelAddress,
-  Provider as FuelProvider,
-  TransactionResult,
-  MessageStatus,
+import {
+  type BN,
+  type Message as FuelMessage,
+  type Address as FuelAddress,
+  type Provider as FuelProvider,
+  type TransactionResult,
+  type MessageStatus,
+  bn,
 } from 'fuels';
 import type { PublicClient } from 'wagmi';
 import type { FetchTokenResult } from 'wagmi/actions';
@@ -92,8 +93,27 @@ export const txEthToFuelMachine = createMachine(
         },
       },
       checkingSettlement: {
-        initial: 'gettingReceiptsInfo',
+        initial: 'checkingReceiptsCache',
         states: {
+          checkingReceiptsCache: {
+            tags: ['isSettlementLoading', 'isSettlementSelected'],
+            data: {
+              input: (ctx: MachineContext) => ({
+                ethTxId: ctx.ethTxId,
+                ethPublicClient: ctx.ethPublicClient,
+              }),
+            },
+            always: [
+              {
+                actions: ['assignReceiptsInfoFromCache'],
+                cond: 'isTxEthToFuelReceiptCached',
+                target: 'checkingDoneCache',
+              },
+              {
+                target: 'gettingReceiptsInfo',
+              },
+            ],
+          },
           gettingReceiptsInfo: {
             tags: ['isSettlementLoading', 'isSettlementSelected'],
             invoke: {
@@ -109,7 +129,11 @@ export const txEthToFuelMachine = createMachine(
                   cond: FetchMachine.hasError,
                 },
                 {
-                  actions: ['assignReceiptsInfo', 'notifyEthTxSuccess'],
+                  actions: [
+                    'assignReceiptsInfo',
+                    'notifyEthTxSuccess',
+                    'setEthToFuelTxReceiptCached',
+                  ],
                   cond: 'hasEthTxNonce',
                   target: 'checkingDoneCache',
                 },
@@ -363,6 +387,24 @@ export const txEthToFuelMachine = createMachine(
           EthTxCache.removeTxCreated(ctx.ethTxId);
         }
       },
+      setEthToFuelTxReceiptCached: (ctx) => {
+        if (ctx.ethTxId && ctx.ethTxNonce && ctx.fuelRecipient) {
+          EthTxCache.setTxReceipt(ctx.ethTxId, {
+            nonce: ctx.ethTxNonce.toString(),
+            recipient: ctx.fuelRecipient,
+          });
+        }
+      },
+      assignReceiptsInfoFromCache: assign((ctx) => {
+        const receiptInfo = EthTxCache.getTxReceipt(ctx.ethTxId || '');
+        if (!receiptInfo) {
+          throw new Error('No receipt');
+        }
+        return {
+          ethTxNonce: bn(receiptInfo.nonce),
+          fuelRecipient: receiptInfo.recipient,
+        };
+      }),
     },
     guards: {
       hasFuelMessage: (ctx, ev) => !!ctx.fuelMessage || !!ev?.data,
@@ -378,6 +420,8 @@ export const txEthToFuelMachine = createMachine(
         ctx.fuelMessageStatus?.state === 'UNSPENT' && !ctx.erc20Token,
       isMessageUnspentErc20: (ctx) =>
         ctx.fuelMessageStatus?.state === 'UNSPENT' && !!ctx.erc20Token,
+      isTxEthToFuelReceiptCached: (ctx) =>
+        !!EthTxCache.getTxReceipt(ctx.ethTxId || ''),
     },
     services: {
       getReceiptsInfo: FetchMachine.create<

packages/app/src/systems/Chains/eth/utils/txCache.ts

@@ -1,6 +1,9 @@
+import type { Address } from 'fuels';
+
 const BLOCK_DATE_KEY_SUBSTRING = 'ethBlockDate-';
 const HASH_DONE_KEY_SUBSTRING = 'ethToFuelTx';
 const TX_CREATED_KEY_SUBSTRING = 'ethTxCreated';
+const TX_RECEIPT_KEY_SUBSTRING = 'ethToFuelTxReceipt';
 
 export const EthTxCache = {
   getBlockDate: (blockHash: string) => {
@@ -37,6 +40,22 @@ export const EthTxCache = {
   getTxIsCreated: (txId: string) => {
     return localStorage.getItem(generateTxCreatedKey(txId)) === 'true';
   },
+  setTxReceipt: (
+    txId: string,
+    receiptInfo: { nonce: string; recipient: Address }
+  ) => {
+    const stringifiedReceipt = JSON.stringify(receiptInfo);
+    localStorage.setItem(generateTxReceiptKey(txId), stringifiedReceipt);
+  },
+  getTxReceipt: (txId: string) => {
+    const stringifiedReceipt = localStorage.getItem(generateTxReceiptKey(txId));
+    return !stringifiedReceipt
+      ? null
+      : (JSON.parse(stringifiedReceipt) as {
+          nonce: string;
+          recipient: Address;
+        });
+  },
 };
 
 const generateBlockDateKey = (blockHash: string) => {
@@ -50,3 +69,7 @@ const generateHashDoneKey = (blockhash: string) => {
 const generateTxCreatedKey = (txId: string) => {
   return `${TX_CREATED_KEY_SUBSTRING}-${txId}`;
 };
+
+const generateTxReceiptKey = (txId: string) => {
+  return `${TX_RECEIPT_KEY_SUBSTRING}-${txId}`;
+};