feat: handle failed transactions

matter-labs · Feb 29, 2024 · d974f2f · d974f2f
1 parent df1b6ea
commit d974f2f
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 9 deletions.
diff --git a/components/animations/TransactionProgress.vue b/components/animations/TransactionProgress.vue
@@ -1,7 +1,11 @@
 <template>
   <div
     class="transaction-progress-animation"
-    :class="{ 'transaction-completed': state === 'completed', 'stopped-in-the-end': state === 'stopped-in-the-end' }"
+    :class="{
+      'transaction-completed': state === 'completed',
+      'transaction-failed': state === 'failed',
+      'stopped-in-the-end': state === 'stopped-in-the-end',
+    }"
   >
     <div class="no-overflow-container">
       <div class="lines-inner">
@@ -19,16 +23,19 @@
       <div class="check-icon">
         <CheckIcon aria-hidden="true" />
       </div>
+      <div class="fail-icon">
+        <XMarkIcon aria-hidden="true" />
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { CheckIcon } from "@heroicons/vue/24/outline";
+import { CheckIcon, XMarkIcon } from "@heroicons/vue/24/outline";
 
 import type { PropType } from "vue";
 
-export type AnimationState = "playing" | "stopped-in-the-end" | "completed";
+export type AnimationState = "playing" | "stopped-in-the-end" | "failed" | "completed";
 
 defineProps({
   state: {
@@ -66,6 +73,19 @@ defineProps({
       }
     }
   }
+  &.transaction-failed {
+    .no-overflow-container {
+      .lines-inner {
+        animation-play-state: paused;
+      }
+      .airplane {
+        @apply opacity-0;
+      }
+      .fail-icon {
+        animation: bounce-in 1s linear forwards;
+      }
+    }
+  }
   &.stopped-in-the-end {
     &::after {
       @apply opacity-0;
@@ -161,6 +181,46 @@ defineProps({
         }
       }
     }
+    .fail-icon {
+      @apply absolute left-1/2 top-1/2 h-9 w-9 origin-top-left transform rounded-full bg-red-400 p-1 text-black opacity-0 transition-opacity;
+      @keyframes bounce-in {
+        0% {
+          transform: scale(0) translate(-50%, -50%);
+          animation-timing-function: ease-in;
+          opacity: 0;
+        }
+        35% {
+          transform: scale(1) translate(-50%, -50%);
+          animation-timing-function: ease-out;
+          opacity: 1;
+        }
+        55% {
+          transform: scale(1.5) translate(-50%, -50%);
+          animation-timing-function: ease-in;
+        }
+        70% {
+          transform: scale(1) translate(-50%, -50%);
+          animation-timing-function: ease-out;
+        }
+        80% {
+          transform: scale(1.24) translate(-50%, -50%);
+          animation-timing-function: ease-in;
+        }
+        90% {
+          transform: scale(1) translate(-50%, -50%);
+          animation-timing-function: ease-out;
+        }
+        95% {
+          transform: scale(1.04) translate(-50%, -50%);
+          animation-timing-function: ease-in;
+        }
+        100% {
+          transform: scale(1) translate(-50%, -50%);
+          animation-timing-function: ease-out;
+          opacity: 1;
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/components/transaction/TransactionProgress.vue b/components/transaction/TransactionProgress.vue
@@ -54,10 +54,7 @@
         </div>
       </template>
 
-      <AnimationsTransactionProgress
-        :state="animationState ?? (completed ? 'completed' : 'playing')"
-        class="transaction-animation"
-      />
+      <AnimationsTransactionProgress :state="transactionProgressAnimationState" class="transaction-animation" />
 
       <div v-if="fromExplorerLink || fromTransactionHash" class="info-column bottom-left mt-block-gap-1/2">
         <TransactionHashButton :explorer-url="fromExplorerLink" :transaction-hash="fromTransactionHash" />
@@ -159,6 +156,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  failed: {
+    type: Boolean,
+    default: false,
+  },
   animationState: {
     type: String as PropType<AnimationState>,
   },
@@ -168,6 +169,13 @@ const isSameAddress = computed(() => props.fromAddress === props.toAddress);
 const isSameAddressDifferentDestination = computed(
   () => isSameAddress.value && props.fromDestination.label !== props.toDestination.label
 );
+
+const transactionProgressAnimationState = computed<AnimationState>(() => {
+  if (props.animationState) return props.animationState;
+  if (props.failed) return "failed";
+  if (props.completed) return "completed";
+  return "playing";
+});
 </script>
 
 <style lang="scss" scoped>

diff --git a/store/zksync/transactionStatus.ts b/store/zksync/transactionStatus.ts
@@ -23,6 +23,7 @@ export type TransactionInfo = {
     toTransactionHash?: string;
     expectedCompleteTimestamp?: string;
     withdrawalFinalizationAvailable?: boolean;
+    failed?: boolean;
     completed: boolean;
   };
 };
@@ -77,7 +78,7 @@ export const useZkSyncTransactionStatusStore = defineStore("zkSyncTransactionSta
     }
     throw new Error("No L2 transaction hash found");
   };
-  const updateDepositStatus = async (transaction: TransactionInfo) => {
+  const getDepositStatus = async (transaction: TransactionInfo) => {
     const transactionHash = await getDepositL2TransactionHash(transaction.transactionHash);
     const transactionReceipt = await providerStore.requestProvider().getTransactionReceipt(transactionHash);
     if (!transactionReceipt) return transaction;
@@ -90,6 +91,12 @@ export const useZkSyncTransactionStatusStore = defineStore("zkSyncTransactionSta
       const transactionDetails = await providerStore
         .requestProvider()
         .getTransactionDetails(transaction.transactionHash);
+      if (transactionDetails.status === "failed") {
+        transaction.info.withdrawalFinalizationAvailable = false;
+        transaction.info.failed = true;
+        transaction.info.completed = true;
+        return transaction;
+      }
       if (transactionDetails.status !== "verified") {
         return transaction;
       }
@@ -105,13 +112,17 @@ export const useZkSyncTransactionStatusStore = defineStore("zkSyncTransactionSta
   const getTransferStatus = async (transaction: TransactionInfo) => {
     const transactionReceipt = await providerStore.requestProvider().getTransactionReceipt(transaction.transactionHash);
     if (!transactionReceipt) return transaction;
+    const transactionDetails = await providerStore.requestProvider().getTransactionDetails(transaction.transactionHash);
+    if (transactionDetails.status === "failed") {
+      transaction.info.failed = true;
+    }
     transaction.info.completed = true;
     return transaction;
   };
   const waitForCompletion = async (transaction: TransactionInfo) => {
     if (transaction.info.completed) return transaction;
     if (transaction.type === "deposit") {
-      transaction = await updateDepositStatus(transaction);
+      transaction = await getDepositStatus(transaction);
     } else if (transaction.type === "withdrawal") {
       transaction = await getWithdrawalStatus(transaction);
     } else if (transaction.type === "transfer") {

diff --git a/views/transactions/DepositSubmitted.vue b/views/transactions/DepositSubmitted.vue
@@ -23,6 +23,7 @@
       :expected-complete-timestamp="transaction.info.expectedCompleteTimestamp"
       :token="transaction!.token"
       :completed="transaction.info.completed"
+      :failed="transaction.info.failed"
     />
 
     <EcosystemBlock v-if="eraNetwork.displaySettings?.showPartnerLinks" class="mt-block-gap" />

diff --git a/views/transactions/TransferSubmitted.vue b/views/transactions/TransferSubmitted.vue
@@ -28,6 +28,7 @@
       :transaction-hash="transaction.transactionHash"
       :token="transaction.token"
       :completed="transaction.info.completed"
+      :failed="transaction.info.failed"
     />
 
     <CommonButton as="RouterLink" :to="{ name: 'assets' }" class="mt-block-gap" variant="primary">

diff --git a/views/transactions/WithdrawalSubmitted.vue b/views/transactions/WithdrawalSubmitted.vue
@@ -48,6 +48,7 @@
       :to-explorer-link="finalizeTransactionHash || transaction.info.toTransactionHash ? l1BlockExplorerUrl : undefined"
       :token="transaction.token"
       :completed="transaction.info.completed"
+      :failed="transaction.info.failed"
       :animation-state="withdrawalFinalizationAvailable ? 'stopped-in-the-end' : undefined"
       :expected-complete-timestamp="
         withdrawalFinalizationAvailable ? undefined : transaction.info.expectedCompleteTimestamp