fix: show failure state for reverted L1 deposit transactions (#264)

Author: bxpana

store/zksync/transactionStatus.ts

@@ -50,14 +50,8 @@ export const useZkSyncTransactionStatusStore = defineStore("zkSyncTransactionSta
     )
   );
 
-  const getDepositL2TransactionHash = async (l1TransactionHash: string) => {
-    const publicClient = onboardStore.getPublicClient();
-    const transaction = await retry(() =>
-      publicClient.waitForTransactionReceipt({
-        hash: l1TransactionHash as Hash,
-      })
-    );
-    for (const log of transaction.logs) {
+  const getDepositL2TransactionHash = (l1Receipt: any) => {
+    for (const log of l1Receipt.logs) {
       try {
         const { args, eventName } = decodeEventLog({
           abi: IZkSyncHyperchain,
@@ -74,12 +68,50 @@ export const useZkSyncTransactionStatusStore = defineStore("zkSyncTransactionSta
     throw new Error("No L2 transaction hash found");
   };
   const getDepositStatus = async (transaction: TransactionInfo) => {
-    const transactionHash = await getDepositL2TransactionHash(transaction.transactionHash);
-    const transactionReceipt = await providerStore.requestProvider().getTransactionReceipt(transactionHash);
-    if (!transactionReceipt) return transaction;
-    transaction.info.toTransactionHash = transactionHash;
-    transaction.info.completed = true;
-    return transaction;
+    try {
+      // Get L1 transaction receipt with retry logic for consistency
+      const publicClient = onboardStore.getPublicClient();
+      const l1Receipt = await retry(() =>
+        publicClient.waitForTransactionReceipt({
+          hash: transaction.transactionHash as Hash,
+        })
+      );
+
+      // Create a copy to avoid mutating the input parameter
+      const updatedTransaction = { ...transaction, info: { ...transaction.info } };
+
+      // If L1 transaction failed, mark the deposit as failed
+      if (l1Receipt.status === "reverted") {
+        updatedTransaction.info.failed = true;
+        updatedTransaction.info.completed = true;
+        return updatedTransaction;
+      }
+
+      // L1 transaction succeeded, extract L2 transaction hash from the same receipt
+      const l2TransactionHash = getDepositL2TransactionHash(l1Receipt);
+      const l2TransactionReceipt = await providerStore.requestProvider().getTransactionReceipt(l2TransactionHash);
+      if (!l2TransactionReceipt) return updatedTransaction;
+
+      updatedTransaction.info.toTransactionHash = l2TransactionHash;
+      updatedTransaction.info.completed = true;
+      return updatedTransaction;
+    } catch (err) {
+      // Only mark as failed for specific transaction-related errors
+      // Network/RPC errors should be re-thrown to allow retry at higher level
+      const error = err as Error;
+      if (
+        error.message.includes("transaction") ||
+        error.message.includes("reverted") ||
+        error.message.includes("failed")
+      ) {
+        const updatedTransaction = { ...transaction, info: { ...transaction.info } };
+        updatedTransaction.info.failed = true;
+        updatedTransaction.info.completed = true;
+        return updatedTransaction;
+      }
+      // Re-throw network/infrastructure errors for retry at higher level
+      throw err;
+    }
   };
   const getWithdrawalStatus = async (transaction: TransactionInfo) => {
     if (!transaction.info.withdrawalFinalizationAvailable) {

views/transactions/DepositSubmitted.vue

@@ -1,14 +1,21 @@
 <template>
   <div>
     <h1 class="h1 mt-block-gap-1/2 text-center">
-      {{ transaction.info.completed ? "Transaction completed" : "Transaction submitted" }}
+      <template v-if="transaction.info.failed">Transaction failed</template>
+      <template v-else>{{ transaction.info.completed ? "Transaction completed" : "Transaction submitted" }}</template>
     </h1>
-    <CommonHeightTransition :opened="!transaction.info.completed">
+    <CommonHeightTransition :opened="!transaction.info.completed || transaction.info.failed">
       <p class="mb-4 text-center">
-        Your funds will be available after the transaction is committed on
-        <span class="font-medium">{{ transaction.from.destination.label }}</span> and then processed on
-        <span class="font-medium">{{ transaction.to.destination.label }}</span
-        >. You are free to close this page.
+        <template v-if="transaction.info.failed">
+          The deposit transaction failed on <span class="font-medium">{{ transaction.from.destination.label }}</span>
+          . Your funds remain in your wallet and were not bridged.
+        </template>
+        <template v-else>
+          Your funds will be available after the transaction is committed on
+          <span class="font-medium">{{ transaction.from.destination.label }}</span> and then processed on
+          <span class="font-medium">{{ transaction.to.destination.label }}</span
+          >. You are free to close this page.
+        </template>
       </p>
     </CommonHeightTransition>
     <TransactionProgress