feat: proper withdrawals finalization (#155)

app.vue

@@ -8,8 +8,11 @@
 import { watch } from "vue";
 import { useRoute } from "vue-router";
 
+import { useZkSyncWithdrawalsStore } from "@/store/zksync/withdrawals";
 import { trackPage } from "@/utils/analytics";
 
+useZkSyncWithdrawalsStore().updateWithdrawalsIfPossible(); // init store to update withdrawals
+
 const route = useRoute();
 watch(
   () => route.path,

components/animations/TransactionProgress.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="transaction-progress-animation" :class="{ 'transaction-completed': completed }">
+  <div
+    class="transaction-progress-animation"
+    :class="{ 'transaction-completed': state === 'completed', 'stopped-in-the-end': state === 'stopped-in-the-end' }"
+  >
     <div class="no-overflow-container">
       <div class="lines-inner">
         <div v-for="index in 40" :key="index" class="line"></div>
@@ -23,10 +26,15 @@
 <script lang="ts" setup>
 import { CheckIcon } from "@heroicons/vue/24/outline";
 
+import type { PropType } from "vue";
+
+export type AnimationState = "playing" | "stopped-in-the-end" | "completed";
+
 defineProps({
-  completed: {
-    type: Boolean,
-    default: false,
+  state: {
+    type: String as PropType<AnimationState>,
+    default: "playing",
+    required: true,
   },
 });
 </script>
@@ -40,10 +48,10 @@ defineProps({
     content: "";
   }
   &::before {
-    @apply -left-px bg-gradient-to-r;
+    @apply -left-px bg-gradient-to-r transition;
   }
   &::after {
-    @apply -right-px bg-gradient-to-l;
+    @apply -right-px bg-gradient-to-l transition;
   }
   &.transaction-completed {
     .no-overflow-container {
@@ -58,6 +66,18 @@ defineProps({
       }
     }
   }
+  &.stopped-in-the-end {
+    &::after {
+      @apply opacity-0;
+    }
+    .no-overflow-container {
+      .airplane {
+        animation: none;
+        left: 100%;
+        transform: translate(-100%, -50%);
+      }
+    }
+  }
 
   .no-overflow-container {
     @apply relative h-20 w-full overflow-hidden;

components/common/Badge.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="badge">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.badge {
+  @apply rounded-lg bg-neutral-900 px-2 text-white dark:bg-white dark:text-black;
+}
+</style>

components/common/Spinner.vue

@@ -1,7 +1,8 @@
 <template>
   <svg
     aria-hidden="true"
-    class="animate-spin fill-primary-300 text-transparent dark:fill-white"
+    class="spinner animate-spin text-transparent"
+    :class="`variant-${variant}`"
     viewBox="0 0 100 101"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -16,3 +17,27 @@
     />
   </svg>
 </template>
+
+<script lang="ts" setup>
+import type { PropType } from "vue";
+
+defineProps({
+  variant: String as PropType<"default" | "text-color" | "dark">,
+});
+</script>
+
+<style lang="scss" scoped>
+.spinner {
+  &.variant- {
+    &default {
+      @apply fill-primary-300 dark:fill-white;
+    }
+    &text-color {
+      @apply fill-neutral-950 dark:fill-white;
+    }
+    &dark {
+      @apply fill-neutral-950;
+    }
+  }
+}
+</style>

components/header/Header.vue

@@ -29,6 +29,11 @@
       <NuxtLink class="link-item" :to="{ name: 'transfers' }">
         <ArrowsRightLeftIcon class="link-icon" aria-hidden="true" />
         Transfers
+        <transition v-bind="TransitionOpacity()">
+          <CommonBadge v-if="withdrawalsAvailableForClaiming.length">
+            {{ withdrawalsAvailableForClaiming.length }}
+          </CommonBadge>
+        </transition>
       </NuxtLink>
     </div>
     <div class="right-side">
@@ -50,6 +55,11 @@
       </CommonButton>
       <CommonButton class="hamburger-icon" @click="mobileMainNavigationOpened = true">
         <Bars3Icon class="h-6 w-6" aria-hidden="true" />
+        <transition v-bind="TransitionOpacity()">
+          <CommonBadge v-if="withdrawalsAvailableForClaiming.length" class="action-available-badge">
+            {{ withdrawalsAvailableForClaiming.length }}
+          </CommonBadge>
+        </transition>
       </CommonButton>
     </div>
   </header>
@@ -72,6 +82,7 @@ import useColorMode from "@/composables/useColorMode";
 
 import { useRoute } from "#imports";
 import { useOnboardStore } from "@/store/onboard";
+import { useZkSyncWithdrawalsStore } from "@/store/zksync/withdrawals";
 
 const route = useRoute();
 
@@ -82,6 +93,7 @@ const routes = {
 
 const onboardStore = useOnboardStore();
 const { isConnected } = storeToRefs(onboardStore);
+const { withdrawalsAvailableForClaiming } = storeToRefs(useZkSyncWithdrawalsStore());
 
 const mobileMainNavigationOpened = ref(false);
 const mobileAccountNavigationOpened = ref(false);
@@ -128,7 +140,11 @@ const { selectedColorMode, switchColorMode } = useColorMode();
       @apply hidden xl:block;
     }
     .hamburger-icon {
-      @apply xl:hidden;
+      @apply relative xl:hidden;
+
+      .action-available-badge {
+        @apply absolute -right-1 -top-1 lg:hidden;
+      }
     }
   }
 }

components/header/MobileMainNavigation.vue

@@ -40,6 +40,14 @@
                 <ArrowsRightLeftIcon aria-hidden="true" />
               </DestinationIconContainer>
             </template>
+            <template #label>
+              <div class="flex items-center gap-2">
+                <span>Transfers</span>
+                <CommonBadge v-if="withdrawalsAvailableForClaiming.length">
+                  {{ withdrawalsAvailableForClaiming.length }}
+                </CommonBadge>
+              </div>
+            </template>
           </DestinationItem>
         </CommonCardWithLineButtons>
 
@@ -106,6 +114,7 @@ import type { ZkSyncNetwork } from "@/data/networks";
 
 import { useRoute } from "#imports";
 import { useNetworkStore } from "@/store/network";
+import { useZkSyncWithdrawalsStore } from "@/store/zksync/withdrawals";
 import { getNetworkUrl } from "@/utils/helpers";
 import { TransitionSlideOutToLeft, TransitionSlideOutToRight } from "@/utils/transitions";
 
@@ -122,6 +131,8 @@ const emit = defineEmits<{
 
 const route = useRoute();
 
+const { withdrawalsAvailableForClaiming } = storeToRefs(useZkSyncWithdrawalsStore());
+
 const TabsTransition = computed(() =>
   openedTab.value === "main" ? TransitionSlideOutToRight : TransitionSlideOutToLeft
 );

components/transaction/EthereumTransactionFooter.vue

@@ -27,10 +27,14 @@
           class="w-full"
           @click="onboardStore.setCorrectNetwork"
         >
-          Change wallet network to {{ l1Network.name }}
+          <slot v-bind="{ l1Network, walletName }" name="change-network-auto">
+            Change wallet network to {{ l1Network.name }}
+          </slot>
         </CommonButton>
         <CommonButton v-else disabled variant="primary" class="w-full">
-          Change network manually to {{ l1Network.name }} in your {{ walletName }} wallet
+          <slot v-bind="{ l1Network, walletName }" name="change-network-manual">
+            Change network manually to {{ l1Network.name }} in your {{ walletName }} wallet
+          </slot>
         </CommonButton>
       </template>
       <template v-else>

components/transaction/TransactionHashButton.vue

@@ -8,8 +8,13 @@
       class="transaction-hash-button"
       @click="copy()"
     >
-      Copy hash
-      <CommonSpinner v-if="!transactionHash" class="transaction-hash-button-icon" aria-hidden="true" />
+      Copy tx hash
+      <CommonSpinner
+        v-if="!transactionHash"
+        variant="text-color"
+        class="transaction-hash-button-icon"
+        aria-hidden="true"
+      />
       <DocumentDuplicateIcon v-else class="transaction-hash-button-icon" aria-hidden="true" />
     </CommonButton>
     <template v-else>
@@ -22,7 +27,7 @@
         class="transaction-hash-button"
       >
         Explorer
-        <CommonSpinner class="transaction-hash-button-icon" aria-hidden="true" />
+        <CommonSpinner variant="text-color" class="transaction-hash-button-icon" aria-hidden="true" />
       </CommonButton>
       <CommonButton
         v-else

components/transaction/TransactionProgress.vue

@@ -54,14 +54,23 @@
         </div>
       </template>
 
-      <AnimationsTransactionProgress :completed="completed" class="transaction-animation" />
+      <AnimationsTransactionProgress
+        :state="animationState ?? (completed ? 'completed' : 'playing')"
+        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" />
       </div>
+      <div v-else-if="$slots['from-button']" class="info-column bottom-left mt-block-gap-1/2">
+        <slot name="from-button" />
+      </div>
       <div v-if="toExplorerLink || toTransactionHash" class="info-column bottom-right mt-block-gap-1/2">
         <TransactionHashButton :explorer-url="toExplorerLink" :transaction-hash="toTransactionHash" />
       </div>
+      <div v-else-if="$slots['to-button']" class="info-column bottom-right mt-block-gap-1/2">
+        <slot name="to-button" />
+      </div>
     </div>
     <TransactionHashButton
       v-if="explorerLink || transactionHash"
@@ -97,6 +106,7 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 
+import type { AnimationState } from "@/components/animations/TransactionProgress.vue";
 import type { TransactionDestination } from "@/store/destinations";
 import type { TokenAmount } from "@/types";
 import type { PropType } from "vue";
@@ -149,6 +159,9 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  animationState: {
+    type: String as PropType<AnimationState>,
+  },
 });
 
 const isSameAddress = computed(() => props.fromAddress === props.toAddress);
@@ -186,8 +199,6 @@ const isSameAddressDifferentDestination = computed(
 
     .airplane {
       @apply absolute h-8 w-8;
-      // create animation from left opacity 0 to center opacity 100 to right opacity 0
-      // it should also scale from 0 to 1 to 0
       animation: airplane 3s linear infinite;
       @keyframes airplane {
         0% {

components/transaction/TransferLineItem.vue

@@ -4,6 +4,9 @@
     :explorer-url="blockExplorerUrl"
     :transaction-hash="transfer.transactionHash!"
   >
+    <template #icon v-if="inProgress">
+      <CommonSpinner variant="dark" aria-hidden="true" />
+    </template>
     <template #top-left>{{ label }}</template>
     <template #bottom-left>
       <template v-if="chainsLabel">
@@ -64,6 +67,10 @@ const props = defineProps({
     type: Object as PropType<Transfer>,
     required: true,
   },
+  inProgress: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const { account } = storeToRefs(useOnboardStore());