fix(bridge-ui): transaction and pendingTransaction refactor (#13307)

Co-authored-by: jeff <113397187+cyberhorsey@users.noreply.github.com>
taikoxyz · Mar 15, 2023 · 9d215cf · 9d215cf
1 parent 8dcccc0
commit 9d215cf
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 30 deletions.
diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte
@@ -180,20 +180,20 @@
   });
 
   pendingTransactions.subscribe((store) => {
-    store.forEach(async (tx) => {
-      await $signer.provider.waitForTransaction(tx.hash, 1);
+    (async () => {
+      const confirmedPendingTxIndex = await Promise.race(
+        store.map((tx, index) => {
+          return new Promise<number>(async (resolve) => {
+            await $signer.provider.waitForTransaction(tx.hash, 1);
+            resolve(index);
+          });
+        }),
+      );
       successToast('Transaction completed!');
-
-      // TODO: Fix, .pop() removes the last tx but the confirmed tx is not necessarily the last one in the pendingTransactions array.
-      const s = store;
-      s.pop();
+      let s = store;
+      s = s.slice(confirmedPendingTxIndex, 0);
       pendingTransactions.set(s);
-
-      // TODO: Do we need this?
-      transactions.set(
-        await $transactioner.GetAllByAddress(await $signer.getAddress()),
-      );
-    });
+    })();
   });
 
   const transactionToIntervalMap = new Map();

diff --git a/packages/bridge-ui/src/relayer-api/service.ts b/packages/bridge-ui/src/relayer-api/service.ts
@@ -38,15 +38,11 @@ class RelayerAPIService implements RelayerAPI {
 
     const { data } = await axios.get(requestURL, { params });
 
-    if (data.length === 0) {
+    if (data?.items?.length === 0) {
       return [];
     }
 
-    const txs: BridgeTransaction[] = data.map((tx) => {
-      const depositValue = ethers.utils.parseUnits(
-        tx.data.Message.DepositValue.toString(),
-        'wei',
-      );
+    const txs: BridgeTransaction[] = data.items.map((tx) => {
       return {
         status: tx.status,
         message: {
@@ -60,8 +56,8 @@ class RelayerAPIService implements RelayerAPI {
           callValue: tx.data.Message.CallValue,
           srcChainId: BigNumber.from(tx.data.Message.SrcChainId),
           destChainId: BigNumber.from(tx.data.Message.DestChainId),
-          depositValue: depositValue,
-          processingFee: BigNumber.from(tx.data.Message.ProcessingFee),
+          depositValue: BigNumber.from(`${tx.data.Message.DepositValue}`),
+          processingFee: BigNumber.from(`${tx.data.Message.ProcessingFee}`),
           refundAddress: tx.data.Message.RefundAddress,
         },
         amountInWei: tx.amount,
@@ -73,9 +69,7 @@ class RelayerAPIService implements RelayerAPI {
       };
     });
 
-    const bridgeTxs: BridgeTransaction[] = [];
-
-    await Promise.all(
+    const bridgeTxs: BridgeTransaction[] = await Promise.all(
       (txs || []).map(async (tx) => {
         if (tx.message.owner.toLowerCase() !== address.toLowerCase()) return;
 
@@ -87,8 +81,7 @@ class RelayerAPIService implements RelayerAPI {
         const receipt = await srcProvider.getTransactionReceipt(tx.hash);
 
         if (!receipt) {
-          bridgeTxs.push(tx);
-          return;
+          return tx;
         }
 
         tx.receipt = receipt;
@@ -115,13 +108,16 @@ class RelayerAPIService implements RelayerAPI {
           receipt.blockNumber,
         );
 
+        // A block could have multiple events being triggered so we need to find this particular tx
         const event = events.find(
-          (e) => e.args.message.owner.toLowerCase() === address.toLowerCase(),
+          (e) =>
+            e.args.message.owner.toLowerCase() === address.toLowerCase() &&
+            e.args.message.depositValue.eq(tx.message.depositValue) &&
+            e.args.msgHash === tx.msgHash,
         );
 
         if (!event) {
-          bridgeTxs.push(tx);
-          return;
+          return tx;
         }
 
         const msgHash = event.args.msgHash;
@@ -172,12 +168,12 @@ class RelayerAPIService implements RelayerAPI {
           from: tx.from,
         };
 
-        bridgeTxs.push(bridgeTx);
+        return bridgeTx;
       }),
     );
 
+    bridgeTxs.reverse();
     bridgeTxs.sort((tx) => (tx.status === MessageStatus.New ? -1 : 1));
-
     return bridgeTxs;
   }
 

diff --git a/packages/bridge-ui/src/vite-env.d.ts b/packages/bridge-ui/src/vite-env.d.ts
@@ -1,2 +1,32 @@
 /// <reference types="svelte" />
 /// <reference types="vite/client" />
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_L1_RPC_URL: string;
+  readonly VITE_L1_RPC_URL: string;
+  readonly VITE_L2_RPC_URL: string;
+  readonly VITE_L1_EXPLORER_URL: string;
+  readonly VITE_L2_EXPLORER_URL: string;
+  readonly VITE_RELAYER_URL: string;
+  readonly VITE_TEST_ERC20_ADDRESS_MAINNET: string;
+  readonly VITE_TEST_ERC20_SYMBOL_MAINNET: string;
+  readonly VITE_TEST_ERC20_NAME_MAINNET: string;
+  readonly VITE_MAINNET_CHAIN_ID: string;
+  readonly VITE_TAIKO_CHAIN_ID: string;
+  readonly VITE_MAINNET_CHAIN_NAME: string;
+  readonly VITE_TAIKO_CHAIN_NAME: string;
+  readonly VITE_MAINNET_TOKEN_VAULT_ADDRESS: string;
+  readonly VITE_TAIKO_TOKEN_VAULT_ADDRESS: string;
+  readonly VITE_MAINNET_HEADER_SYNC_ADDRESS: string;
+  readonly VITE_TAIKO_HEADER_SYNC_ADDRESS: string;
+  readonly VITE_MAINNET_BRIDGE_ADDRESS: string;
+  readonly VITE_TAIKO_BRIDGE_ADDRESS: string;
+  readonly VITE_MAINNET_SIGNAL_SERVICE_ADDRESS: string;
+  readonly VITE_TAIKO_SIGNAL_SERVICE_ADDRESS: string;
+  readonly VITE_TEST_ERC20: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}