feat: support multiple tx eth events

.github/workflows/pr-tests.yml

@@ -21,9 +21,6 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
 
-      - name: Create .env file graphql
-        run: cp packages/graphql/.env.example packages/graphql/.env
-
       - name: Create .env file explorer
         run: cp packages/app-explorer/.env.example packages/app-explorer/.env
 
@@ -95,6 +92,10 @@ jobs:
 
       - name: Run E2E Tests
         run: xvfb-run --auto-servernum -- pnpm test:e2e-soft
+        env:
+          PLAYWRIGHT_JSON_OUTPUT_NAME: playwright-report/results.json
+          PLAYWRIGHT_FORCE_TTY: true
+          PLAYWRIGHT_FORCE_COLOR: true
 
       - uses: actions/upload-artifact@v4
         if: always()

docker/fuel-core/Dockerfile

@@ -1,4 +1,4 @@
-FROM ghcr.io/fuellabs/fuel-core:v0.35.0
+FROM ghcr.io/fuellabs/fuel-core:v0.36.0
 
 ARG FUEL_IP=0.0.0.0
 ARG FUEL_PORT=4001
@@ -17,17 +17,15 @@ COPY ./genesis_coins.json .
 #  Fuel Core 0.35.0, needs to be changed when core version is updated
 RUN git clone \
     https://github.com/FuelLabs/chain-configuration.git \
-    /chain-configuration && \
-    cd /chain-configuration && \
-    git checkout 6cea45da59bb105a02fb0b115c7ef03f3a690ba1
+    /chain-configuration
 
 # Copy the base local configuration
 RUN cp -R /chain-configuration/local/* ./
 
 # Copy the testnet consensus parameters and state transition bytecode
-RUN cp /chain-configuration/upgradelog/ignition-devnet/consensus_parameters/6.json \
+RUN cp /chain-configuration/upgradelog/ignition-testnet/consensus_parameters/9.json \
     ./latest_consensus_parameters.json
-RUN cp /chain-configuration/upgradelog/ignition-devnet/state_transition_function/9.wasm \
+RUN cp /chain-configuration/upgradelog/ignition-testnet/state_transition_function/11.wasm \
     ./state_transition_bytecode.wasm
 
 # update local state_config with custom genesis coins config

packages/app-explorer/.env.example

@@ -1,7 +1,7 @@
 # Portal
 NEXT_PUBLIC_ALCHEMY_ID=
 NEXT_PUBLIC_INFURA_ID=
-NEXT_PUBLIC_WALLETCONNECT_ID=
+NEXT_PUBLIC_WALLETCONNECT_ID=8f52b9703df1ef5af54336c4fba85476
 NEXT_PUBLIC_ETH_CHAIN_NAME=foundry    # options: foundry, sepolia
 NEXT_PUBLIC_FUEL_CHAIN_NAME=fuelLocal # options: fuelLocal, fuelTestnet, fuelDevnet
 NEXT_PUBLIC_FUEL_VERSION=0.35.0

packages/app-portal/src/systems/Bridge/events.tsx

@@ -32,7 +32,10 @@ export function bridgeEvents(store: Store) {
       store.send(Services.bridgeTxs, { type: 'FETCH_NEXT_PAGE' });
     },
     addTxEthToFuel(
-      input?: { ethTxId?: HexAddress } & BridgeInputs['fetchTxs'],
+      input?: {
+        ethTxId?: HexAddress;
+        inputEthTxNonce?: BigInt;
+      } & BridgeInputs['fetchTxs'],
     ) {
       if (!input) return;
 
@@ -66,19 +69,19 @@ export function bridgeEvents(store: Store) {
     },
     relayMessageEthToFuel({
       input,
-      ethTxId,
+      machineId,
     }: {
       input?: {
         fuelWallet: FuelWallet;
       };
-      ethTxId: HexAddress;
+      machineId: string;
     }) {
       if (!input) return;
 
       // TODO: make store.send function support this last object prop
       const service = store.services[Services.bridgeTxs];
       const snapshot = service.getSnapshot();
-      const txEthToFuelMachine = snapshot?.context.ethToFuelTxRefs?.[ethTxId];
+      const txEthToFuelMachine = snapshot?.context.ethToFuelTxRefs?.[machineId];
 
       txEthToFuelMachine.send({ type: 'RELAY_MESSAGE_ON_FUEL', input });
     },

packages/app-portal/src/systems/Bridge/machines/bridgeTxsMachine.tsx

@@ -50,6 +50,7 @@ export type BridgeTxsMachineEvents =
       type: 'ADD_TX_ETH_TO_FUEL';
       input: {
         ethTxId?: HexAddress;
+        inputEthTxNonce?: BigInt;
       } & BridgeInputs['fetchTxs'];
     }
   | {
@@ -150,16 +151,20 @@ export const bridgeTxsMachine = createMachine(
             // safely avoid overriding instance
             if (ctx.ethToFuelTxRefs?.[tx.txHash]) return prev;
 
+            const key = `${tx.txHash}-${tx.nonce}`;
+
             return {
               ...prev,
-              [tx.txHash]: spawn(
+              [key]: spawn(
                 txEthToFuelMachine.withContext({
                   ethTxId: tx.txHash as HexAddress,
+                  inputEthTxNonce: tx.nonce,
+                  machineId: key,
                   fuelAddress: ctx.fuelAddress,
                   fuelProvider: ctx.fuelProvider,
                   ethPublicClient: ctx.ethPublicClient,
                 }),
-                { name: tx.txHash, sync: true },
+                { name: key, sync: true },
               ),
             };
           }, {});
@@ -199,16 +204,25 @@ export const bridgeTxsMachine = createMachine(
       }),
       assignTxEthToFuel: assign({
         ethToFuelTxRefs: (ctx, ev) => {
-          const { ethTxId, fuelAddress, fuelProvider, ethPublicClient } =
-            ev.input || {};
+          const {
+            ethTxId,
+            fuelAddress,
+            fuelProvider,
+            ethPublicClient,
+            inputEthTxNonce,
+          } = ev.input || {};
           if (!ethTxId || ctx.ethToFuelTxRefs?.[ethTxId])
             return ctx.ethToFuelTxRefs;
 
+          const key = `${ethTxId}-${inputEthTxNonce}`;
+
           console.log(`NEW: creating machine Fuel To Eth: ${ethTxId}`);
           const newRef = {
-            [ethTxId]: spawn(
+            [key]: spawn(
               txEthToFuelMachine.withContext({
                 ethTxId: ethTxId as HexAddress,
+                inputEthTxNonce: inputEthTxNonce,
+                machineId: key,
                 fuelAddress: fuelAddress,
                 fuelProvider: fuelProvider,
                 ethPublicClient: ethPublicClient,

packages/app-portal/src/systems/Bridge/pages/BridgeTxList.tsx

@@ -57,6 +57,7 @@ export const BridgeTxList = () => {
               <TxListItemEthToFuel
                 key={`${index}-${txDatum.txHash}`}
                 txHash={txDatum.txHash || ''}
+                messageSentEventNonce={txDatum.nonce || 0n}
               />
             );
           }

packages/app-portal/src/systems/Bridge/services/bridge.tsx

@@ -79,26 +79,30 @@ export class BridgeService {
 
       const assetEth = getAssetEth(asset);
       const amountEthUnits = bn.parseUnits(amountFormatted, assetEth.decimals);
-      const txId = await TxEthToFuelService.start({
+      const startedTxEthToFuel = await TxEthToFuelService.start({
         amount: amountEthUnits.toHex(),
         ethWalletClient,
         fuelAddress,
         ethAssetAddress: assetEth.address,
         ethPublicClient,
       });
 
-      if (txId) {
+      const { txHash, nonce } = startedTxEthToFuel || {};
+
+      if (txHash && nonce) {
         if (fuelWallet) {
           store.addTxEthToFuel({
-            ethTxId: txId,
+            ethTxId: txHash,
+            inputEthTxNonce: nonce,
             fuelProvider,
             ethPublicClient,
             fuelAddress,
           });
           store.openTxEthToFuel({
-            txId,
+            txId: txHash,
+            messageSentEventNonce: nonce,
           });
-          EthTxCache.setTxIsCreated(txId);
+          EthTxCache.setTxIsCreated(txHash);
         }
       }
 
@@ -178,6 +182,7 @@ export class BridgeService {
 
         return {
           txHash: log?.transactionHash || '0x',
+          nonce: (log?.args as any)?.nonce,
           fromNetwork: ETH_CHAIN,
           toNetwork: FUEL_CHAIN,
           date,

packages/app-portal/src/systems/Bridge/types.tsx

@@ -3,6 +3,7 @@ import type { SupportedChain } from '../Chains';
 export type BridgeTx = {
   date?: Date;
   txHash: string;
+  nonce?: BigInt;
   fromNetwork: SupportedChain;
   toNetwork: SupportedChain;
 };

packages/app-portal/src/systems/Chains/eth/containers/TxEthToFuelDialog.tsx

@@ -13,7 +13,10 @@ import { useTxEthToFuel } from '../hooks';
 export function TxEthToFuelDialog() {
   const classes = styles();
   const { asset: ethAsset } = useAsset();
-  const { metadata } = useOverlay<{ txId: string }>();
+  const { metadata } = useOverlay<{
+    txId: string;
+    messageSentEventNonce: BigInt;
+  }>();
   const {
     steps,
     date,
@@ -26,6 +29,7 @@ export function TxEthToFuelDialog() {
     explorerLink,
   } = useTxEthToFuel({
     id: metadata.txId,
+    messageSentEventNonce: metadata.messageSentEventNonce,
   });
 
   return (

packages/app-portal/src/systems/Chains/eth/containers/TxListItemEthToFuel.tsx

@@ -8,14 +8,19 @@ import { useTxEthToFuel } from '../hooks';
 
 type TxListItemEthToFuelProps = {
   txHash: string;
+  messageSentEventNonce: BigInt;
 };
 
-export const TxListItemEthToFuel = ({ txHash }: TxListItemEthToFuelProps) => {
+export const TxListItemEthToFuel = ({
+  txHash,
+  messageSentEventNonce,
+}: TxListItemEthToFuelProps) => {
   const classes = styles();
   const { asset: ethAsset } = useAsset();
   const { steps, date, handlers, asset, status, amount, isLoadingReceipts } =
     useTxEthToFuel({
       id: txHash,
+      messageSentEventNonce,
     });
 
   const bridgeTxStatus = steps?.find(({ isSelected }) => !!isSelected);
@@ -51,7 +56,9 @@ export const TxListItemEthToFuel = ({ txHash }: TxListItemEthToFuelProps) => {
           <Asset.Icon />
         </Asset>
       }
-      onClick={() => handlers.openTxEthToFuel({ txId: txHash })}
+      onClick={() =>
+        handlers.openTxEthToFuel({ txId: txHash, messageSentEventNonce })
+      }
     />
   );
 };

packages/app-portal/src/systems/Chains/eth/contracts/FuelMessagePortal.ts

@@ -1,5 +1,6 @@
 import FuelMessagePortal from '@fuel-bridge/solidity-contracts/artifacts/contracts/fuelchain/FuelMessagePortal/v3/FuelMessagePortalV3.sol/FuelMessagePortalV3.json';
 import type { HexAddress } from 'app-commons';
+import { bn } from 'fuels';
 
 export type FuelMessagePortalArgs = {
   MessageSent: {
@@ -17,12 +18,17 @@ export const decodeMessageSentData = {
       /^0x([A-f0-9]{64})([A-f0-9]{64})([A-f0-9]{64})([A-f0-9]{64})([A-f0-9]{64})([A-f0-9]{64})([A-f0-9]{64})([A-f0-9]{64})$/;
     const match = data.match(pattern);
     const [, fuelTokenId, , tokenAddress, , sender, to, amount] = match || [];
+
+    const decodedTokenAddress = tokenAddress
+      ? bn(tokenAddress, 'hex').toHex(20)
+      : undefined;
+
     const parsed = {
-      fuelTokenId: `0x${fuelTokenId}`,
-      tokenAddress: `0x${tokenAddress}`,
-      sender: `0x${sender}`,
-      to: `0x${to}`,
-      amount,
+      fuelTokenId: fuelTokenId ? `0x${fuelTokenId}` : undefined,
+      tokenAddress: decodedTokenAddress,
+      sender: sender ? `0x${sender}` : undefined,
+      to: to ? `0x${to}` : undefined,
+      amount: amount,
     };
 
     return parsed;

packages/app-portal/src/systems/Chains/eth/hooks/useTxEthToFuel.tsx

@@ -13,10 +13,10 @@ import type { HexAddress } from 'app-commons';
 import { deepCompare } from '../utils/deepCompare';
 
 const bridgeTxsSelectors = {
-  txEthToFuel: (txId?: HexAddress) => (state: BridgeTxsMachineState) => {
-    if (!txId) return undefined;
+  txEthToFuel: (machineId?: string) => (state: BridgeTxsMachineState) => {
+    if (!machineId) return undefined;
 
-    const machine = state.context?.ethToFuelTxRefs?.[txId]?.getSnapshot();
+    const machine = state.context?.ethToFuelTxRefs?.[machineId]?.getSnapshot();
 
     return machine;
   },
@@ -113,17 +113,21 @@ const txEthToFuelSelectors = {
   },
 };
 
-export function useTxEthToFuel({ id }: { id: string }) {
+export function useTxEthToFuel({
+  id,
+  messageSentEventNonce,
+}: { id: string; messageSentEventNonce: BigInt }) {
   const { wallet: fuelWallet } = useFuelAccountConnection();
   const txId = id.startsWith('0x') ? (id as HexAddress) : undefined;
   const { href: explorerLink } = useExplorerLink({
     network: 'ethereum',
     id,
   });
+  const machineId = `${txId}-${messageSentEventNonce}`;
 
   const txEthToFuelState = store.useSelector(
     Services.bridgeTxs,
-    bridgeTxsSelectors.txEthToFuel(txId),
+    bridgeTxsSelectors.txEthToFuel(machineId),
     deepCompare,
   );
 
@@ -177,7 +181,7 @@ export function useTxEthToFuel({ id }: { id: string }) {
       input: {
         fuelWallet,
       },
-      ethTxId,
+      machineId,
     });
   }