From 5d8268517a90deab5de2e3c309406938fe923916 Mon Sep 17 00:00:00 2001
From: Jack Hamer <47187316+JackHamer09@users.noreply.github.com>
Date: Fri, 19 Jan 2024 22:27:39 +0200
Subject: [PATCH] feat: proper withdrawals finalization (#155)

---
 app.vue                                       |   3 +
 components/animations/TransactionProgress.vue |  32 ++-
 components/common/Badge.vue                   |  11 +
 components/common/Spinner.vue                 |  27 ++-
 components/header/Header.vue                  |  18 +-
 components/header/MobileMainNavigation.vue    |  11 +
 .../transaction/EthereumTransactionFooter.vue |   8 +-
 .../transaction/TransactionHashButton.vue     |  11 +-
 .../transaction/TransactionProgress.vue       |  17 +-
 components/transaction/TransferLineItem.vue   |   7 +
 .../TransferWithdrawalLineItem.vue            | 153 ++++++++++++
 .../WithdrawalFinalizationAlert.vue           |  73 ------
 .../WithdrawalsAvailableForClaimAlert.vue     |  21 ++
 .../lineItem/TransactionLineItem.vue          |   6 +-
 .../zksync/useWithdrawalFinalization.ts       |  24 +-
 data/networks.ts                              |   5 +
 pages/assets.vue                              |   1 +
 pages/transaction/[hash].vue                  |  10 +-
 pages/transfers.vue                           |  59 ++++-
 store/zksync/transactionStatus.ts             |  46 +++-
 store/zksync/transfersHistory.ts              |   2 +-
 store/zksync/withdrawals.ts                   | 113 +++++++++
 types/index.d.ts                              |  36 +++
 views/transactions/Deposit.vue                |   1 +
 views/transactions/Transfer.vue               |  19 +-
 views/transactions/TransferSubmitted.vue      |  62 ++---
 views/transactions/WithdrawalSubmitted.vue    | 229 ++++++++++++++++++
 27 files changed, 818 insertions(+), 187 deletions(-)
 create mode 100644 components/common/Badge.vue
 create mode 100644 components/transaction/TransferWithdrawalLineItem.vue
 delete mode 100644 components/transaction/WithdrawalFinalizationAlert.vue
 create mode 100644 components/transaction/WithdrawalsAvailableForClaimAlert.vue
 create mode 100644 store/zksync/withdrawals.ts
 create mode 100644 views/transactions/WithdrawalSubmitted.vue

diff --git a/app.vue b/app.vue
index 3768b4615..0951623b7 100644
--- a/app.vue
+++ b/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,
diff --git a/components/animations/TransactionProgress.vue b/components/animations/TransactionProgress.vue
index c3c5f44d3..6271dff35 100644
--- a/components/animations/TransactionProgress.vue
+++ b/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;
diff --git a/components/common/Badge.vue b/components/common/Badge.vue
new file mode 100644
index 000000000..901cab908
--- /dev/null
+++ b/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>
diff --git a/components/common/Spinner.vue b/components/common/Spinner.vue
index f41010725..6d6452dad 100644
--- a/components/common/Spinner.vue
+++ b/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>
diff --git a/components/header/Header.vue b/components/header/Header.vue
index b5623fc03..98211e635 100644
--- a/components/header/Header.vue
+++ b/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;
+      }
     }
   }
 }
diff --git a/components/header/MobileMainNavigation.vue b/components/header/MobileMainNavigation.vue
index 70f22f422..5f8090888 100644
--- a/components/header/MobileMainNavigation.vue
+++ b/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
 );
diff --git a/components/transaction/EthereumTransactionFooter.vue b/components/transaction/EthereumTransactionFooter.vue
index d588fe74f..02af335f2 100644
--- a/components/transaction/EthereumTransactionFooter.vue
+++ b/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>
diff --git a/components/transaction/TransactionHashButton.vue b/components/transaction/TransactionHashButton.vue
index 58a8b78ef..43aad696e 100644
--- a/components/transaction/TransactionHashButton.vue
+++ b/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
diff --git a/components/transaction/TransactionProgress.vue b/components/transaction/TransactionProgress.vue
index 3d86b5eb6..ea34d6f81 100644
--- a/components/transaction/TransactionProgress.vue
+++ b/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% {
diff --git a/components/transaction/TransferLineItem.vue b/components/transaction/TransferLineItem.vue
index f8481ff0e..fdf43454d 100644
--- a/components/transaction/TransferLineItem.vue
+++ b/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());
diff --git a/components/transaction/TransferWithdrawalLineItem.vue b/components/transaction/TransferWithdrawalLineItem.vue
new file mode 100644
index 000000000..4a6cd6284
--- /dev/null
+++ b/components/transaction/TransferWithdrawalLineItem.vue
@@ -0,0 +1,153 @@
+<template>
+  <CommonButtonLine class="transaction-withdrawal-line-item">
+    <div class="line-button-with-img-image">
+      <DestinationIconContainer>
+        <CommonSpinner v-if="inProgress" variant="dark" />
+        <MinusIcon v-else aria-hidden="true" />
+      </DestinationIconContainer>
+    </div>
+    <div class="withdrawal-line-body">
+      <div class="withdrawal-line-top">
+        <div class="line-button-with-img-body">
+          <CommonButtonLineBodyInfo class="text-left">
+            <template #label>
+              {{ label }}
+            </template>
+            <template #underline>
+              <template v-if="chainsLabel">
+                <span>{{ chainsLabel.from }}</span>
+                <ArrowRightIcon class="relative -top-px mx-1 inline h-4 w-4" aria-hidden="true" />
+                <span>{{ chainsLabel.to }}</span
+                >.
+              </template>
+              <span>{{ timeAgo }}</span>
+            </template>
+          </CommonButtonLineBodyInfo>
+          <div class="flex flex-wrap items-center gap-x-2 sm:hidden">
+            <TokenAmount v-if="token" :token="token" :amount="computeAmount" />
+          </div>
+        </div>
+        <div class="line-button-with-img-right">
+          <CommonButtonLineBodyInfo ref="el" class="hidden text-right sm:block">
+            <template #secondary>
+              <TokenAmount v-if="token" :token="token" :amount="computeAmount" />
+            </template>
+            <template #underline>
+              <TotalPrice v-if="token" :token="token" :amount="computeAmount" />
+            </template>
+          </CommonButtonLineBodyInfo>
+        </div>
+      </div>
+      <div class="withdrawal-line-separator"></div>
+      <div class="withdrawal-line-bottom">
+        <div>Withdrawal is available for claiming on the {{ eraNetwork.l1Network?.name }} network</div>
+        <CommonButton variant="primary" class="withdrawal-claim-button">Go to claim</CommonButton>
+      </div>
+    </div>
+  </CommonButtonLine>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+
+import { ArrowRightIcon, MinusIcon } from "@heroicons/vue/24/outline";
+import { useTimeAgo } from "@vueuse/core";
+import { BigNumber } from "ethers";
+import { storeToRefs } from "pinia";
+
+import TokenAmount from "@/components/transaction/lineItem/TokenAmount.vue";
+import TotalPrice from "@/components/transaction/lineItem/TotalPrice.vue";
+
+import type { NetworkLayer, Transfer } from "@/utils/mappers";
+import type { PropType } from "vue";
+
+import { useOnboardStore } from "@/store/onboard";
+import { useZkSyncProviderStore } from "@/store/zksync/provider";
+import { shortenAddress } from "@/utils/formatters";
+
+const props = defineProps({
+  transfer: {
+    type: Object as PropType<Transfer>,
+    required: true,
+  },
+  inProgress: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { account } = storeToRefs(useOnboardStore());
+const { eraNetwork } = storeToRefs(useZkSyncProviderStore());
+
+const label = computed(() => {
+  const article = props.inProgress ? "Bridging" : "Bridged";
+  if (props.transfer.to === account.value.address) {
+    return article;
+  }
+  return `${article} to ${formatAddress(props.transfer.to)}`;
+});
+
+const formatAddress = (address: string) => {
+  if (address === account.value.address) {
+    return "your account";
+  }
+  return shortenAddress(address);
+};
+const getLayerName = (layer: NetworkLayer) => {
+  if (layer === "L1") {
+    return eraNetwork.value.l1Network?.name;
+  }
+  return eraNetwork.value.name;
+};
+const chainsLabel = computed(() => {
+  if (!eraNetwork.value.l1Network) {
+    return;
+  }
+  return {
+    from: getLayerName(props.transfer.fromNetwork),
+    to: getLayerName(props.transfer.toNetwork),
+  };
+});
+const computeAmount = computed(() => {
+  return BigNumber.from(props.transfer.amount || "0").toString();
+});
+const token = computed(() => {
+  return props.transfer.token;
+});
+
+const timeAgo = useTimeAgo(props.transfer.timestamp);
+</script>
+
+<style lang="scss" scoped>
+.transaction-withdrawal-line-item {
+  @apply flex items-center gap-4;
+
+  .line-button-with-img-image {
+    @apply my-[1.5px] aspect-square h-auto w-12 flex-none self-start;
+  }
+  .withdrawal-line-body {
+    @apply w-full;
+    .withdrawal-line-separator {
+      @apply my-4 w-full border-t border-neutral-200 dark:border-neutral-800;
+    }
+
+    .withdrawal-line-top {
+      @apply flex w-full items-center gap-4;
+
+      .line-button-with-img-body {
+        @apply w-full overflow-hidden;
+      }
+      .line-button-with-img-right {
+        @apply w-max;
+      }
+    }
+    .withdrawal-line-bottom {
+      @apply flex flex-col items-center justify-between gap-4 xs:flex-row;
+
+      .withdrawal-claim-button {
+        @apply w-full whitespace-nowrap xs:w-auto;
+      }
+    }
+  }
+}
+</style>
diff --git a/components/transaction/WithdrawalFinalizationAlert.vue b/components/transaction/WithdrawalFinalizationAlert.vue
deleted file mode 100644
index 31d178298..000000000
--- a/components/transaction/WithdrawalFinalizationAlert.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <CommonAlert
-    v-if="transaction.info.withdrawalFinalizationAvailable"
-    variant="warning"
-    :icon="ExclamationTriangleIcon"
-    class="mb-4"
-  >
-    <p>
-      You can finalize your withdrawal now. Finalizing will require paying the fee on the
-      {{ eraNetwork.l1Network?.name }} network.
-      <a
-        v-if="l1BlockExplorerUrl && finalizeTransactionHash"
-        :href="`${l1BlockExplorerUrl}/tx/${finalizeTransactionHash}`"
-        target="_blank"
-        class="inline-flex items-center gap-1 underline underline-offset-2"
-      >
-        View on Explorer
-        <ArrowTopRightOnSquareIcon class="h-6 w-6" aria-hidden="true" />
-      </a>
-    </p>
-    <CommonButton v-if="!isConnected" variant="primary" @click="onboardStore.openModal()">
-      <span class="whitespace-nowrap">Connect wallet</span>
-    </CommonButton>
-    <CommonButton
-      v-else
-      variant="primary"
-      :disabled="finalizeTransactionStatus !== 'not-started'"
-      @click="commitTransaction()"
-    >
-      Claim
-      <CommonSpinner v-if="finalizeTransactionStatus !== 'not-started'" class="-mr-1 ml-2 h-6 w-6" aria-hidden="true" />
-    </CommonButton>
-  </CommonAlert>
-  <CommonAlert v-else variant="warning" :icon="ExclamationTriangleIcon" class="mb-4">
-    <p>
-      You will have to claim your withdrawal once it's processed. Claiming will require paying the fee on the
-      {{ eraNetwork.l1Network?.name }} network.
-    </p>
-  </CommonAlert>
-</template>
-
-<script lang="ts" setup>
-import { computed } from "vue";
-
-import { ArrowTopRightOnSquareIcon, ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
-import { storeToRefs } from "pinia";
-
-import useWithdrawalFinalization from "@/composables/zksync/useWithdrawalFinalization";
-
-import type { TransactionInfo } from "@/store/zksync/transactionStatus";
-import type { PropType } from "vue";
-
-import { useNetworkStore } from "@/store/network";
-import { useOnboardStore } from "@/store/onboard";
-import { useZkSyncProviderStore } from "@/store/zksync/provider";
-
-const props = defineProps({
-  transaction: {
-    type: Object as PropType<TransactionInfo>,
-    required: true,
-  },
-});
-
-const onboardStore = useOnboardStore();
-const { l1BlockExplorerUrl } = storeToRefs(useNetworkStore());
-const { isConnected } = storeToRefs(onboardStore);
-const { eraNetwork } = storeToRefs(useZkSyncProviderStore());
-const {
-  status: finalizeTransactionStatus,
-  transactionHash: finalizeTransactionHash,
-  commitTransaction,
-} = useWithdrawalFinalization(computed(() => props.transaction));
-</script>
diff --git a/components/transaction/WithdrawalsAvailableForClaimAlert.vue b/components/transaction/WithdrawalsAvailableForClaimAlert.vue
new file mode 100644
index 000000000..884c3cb7e
--- /dev/null
+++ b/components/transaction/WithdrawalsAvailableForClaimAlert.vue
@@ -0,0 +1,21 @@
+<template>
+  <CommonHeightTransition :opened="!!withdrawalsAvailableForClaiming.length">
+    <CommonAlert variant="warning" :icon="ExclamationTriangleIcon" class="mb-block-gap">
+      <p>You have withdrawals available for claiming on {{ eraNetwork.l1Network?.name }} network</p>
+      <CommonButton as="RouterLink" :to="{ name: 'transfers' }" variant="primary">
+        <span class="whitespace-nowrap">See withdrawals</span>
+      </CommonButton>
+    </CommonAlert>
+  </CommonHeightTransition>
+</template>
+
+<script lang="ts" setup>
+import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
+import { storeToRefs } from "pinia";
+
+import { useZkSyncProviderStore } from "@/store/zksync/provider";
+import { useZkSyncWithdrawalsStore } from "@/store/zksync/withdrawals";
+
+const { eraNetwork } = storeToRefs(useZkSyncProviderStore());
+const { withdrawalsAvailableForClaiming } = storeToRefs(useZkSyncWithdrawalsStore());
+</script>
diff --git a/components/transaction/lineItem/TransactionLineItem.vue b/components/transaction/lineItem/TransactionLineItem.vue
index ff32ab750..45a1ee910 100644
--- a/components/transaction/lineItem/TransactionLineItem.vue
+++ b/components/transaction/lineItem/TransactionLineItem.vue
@@ -2,8 +2,10 @@
   <CommonButtonLineWithImg v-bind="buttonProps" class="transaction-line-item" @click="handleClick()">
     <template #image>
       <DestinationIconContainer>
-        <XMarkIcon v-if="failed" class="failed-badge-icon" aria-hidden="true" />
-        <component v-else-if="icon" :is="icon" aria-hidden="true" />
+        <slot name="icon">
+          <XMarkIcon v-if="failed" class="failed-badge-icon" aria-hidden="true" />
+          <component v-else-if="icon" :is="icon" aria-hidden="true" />
+        </slot>
       </DestinationIconContainer>
     </template>
     <template #default>
diff --git a/composables/zksync/useWithdrawalFinalization.ts b/composables/zksync/useWithdrawalFinalization.ts
index 6d4d4b153..69afa5258 100644
--- a/composables/zksync/useWithdrawalFinalization.ts
+++ b/composables/zksync/useWithdrawalFinalization.ts
@@ -11,7 +11,6 @@ import type { Hash } from "@/types";
 import { useOnboardStore } from "@/store/onboard";
 import { useZkSyncProviderStore } from "@/store/zksync/provider";
 import { useZkSyncTokensStore } from "@/store/zksync/tokens";
-import { useZkSyncWalletStore } from "@/store/zksync/wallet";
 import { formatError } from "@/utils/formatters";
 
 export default (transactionInfo: ComputedRef<TransactionInfo>) => {
@@ -19,12 +18,10 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
   const error = ref<Error | undefined>();
   const transactionHash = ref<Hash | undefined>();
   const onboardStore = useOnboardStore();
-  const eraWalletStore = useZkSyncWalletStore();
   const providerStore = useZkSyncProviderStore();
   const tokensStore = useZkSyncTokensStore();
   const { isCorrectNetworkSet } = storeToRefs(onboardStore);
   const { tokens } = storeToRefs(tokensStore);
-  const { balance } = storeToRefs(eraWalletStore);
 
   const retrieveBridgeAddress = useMemoize(() =>
     providerStore
@@ -60,7 +57,7 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
     const provider = providerStore.requestProvider();
     const wallet = new Wallet(
       // random private key cause we don't care about actual signer
-      // finalizeWithdrawalParams only exists on Wallet class
+      // finalizeWithdrawalParams method only exists on Wallet class
       "0x7726827caac94a7f9e1b160f7ea819f172f7b6f9d2a97f992c38edeab82d4110",
       provider
     );
@@ -104,14 +101,12 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
   } = usePromise(
     async () => {
       tokensStore.requestTokens();
-      eraWalletStore.requestBalance();
-      const provider = providerStore.requestProvider();
+      const publicClient = onboardStore.getPublicClient();
 
       const transactionParams = await getTransactionParams();
       const [price, limit] = await Promise.all([
-        retry(() => provider.getGasPrice()),
+        retry(async () => BigNumber.from((await publicClient.getGasPrice()).toString())),
         retry(async () => {
-          const publicClient = onboardStore.getPublicClient();
           return BigNumber.from(
             (
               await publicClient.estimateContractGas({
@@ -134,18 +129,6 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
     { cache: 1000 * 8 }
   );
 
-  const enoughBalanceToCoverFee = computed(() => {
-    if (!feeToken.value || estimationInProgress.value) {
-      return true;
-    }
-    const feeTokenBalance = balance.value.find((e) => e.address === feeToken.value!.address);
-    if (!feeTokenBalance) return true;
-    if (totalFee.value && BigNumber.from(totalFee.value).gt(feeTokenBalance.amount)) {
-      return false;
-    }
-    return true;
-  });
-
   const commitTransaction = async () => {
     try {
       error.value = undefined;
@@ -184,7 +167,6 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
     estimationInProgress,
     totalFee,
     feeToken,
-    enoughBalanceToCoverFee,
     estimateFee,
 
     status,
diff --git a/data/networks.ts b/data/networks.ts
index 785c70767..f4c61f71b 100644
--- a/data/networks.ts
+++ b/data/networks.ts
@@ -29,6 +29,7 @@ export type ZkSyncNetwork = {
   l1Network?: L1Network;
   blockExplorerUrl?: string;
   blockExplorerApi?: string;
+  withdrawalFinalizerApi?: string;
   displaySettings?: {
     showPartnerLinks?: boolean;
   };
@@ -72,6 +73,7 @@ export const zkSyncNetworks: ZkSyncNetwork[] = [
     rpcUrl: "https://mainnet.era.zksync.io",
     blockExplorerUrl: "https://explorer.zksync.io",
     blockExplorerApi: "https://block-explorer-api.mainnet.zksync.io",
+    withdrawalFinalizerApi: "https://withdrawal-finalizer-api.zksync.io",
     displaySettings: {
       showPartnerLinks: true,
     },
@@ -84,6 +86,7 @@ export const zkSyncNetworks: ZkSyncNetwork[] = [
     rpcUrl: "https://sepolia.era.zksync.dev",
     blockExplorerUrl: "https://sepolia.explorer.zksync.io",
     blockExplorerApi: "https://block-explorer-api.sepolia.zksync.dev",
+    withdrawalFinalizerApi: "https://withdrawal-finalizer-api.sepolia.zksync.dev",
     displaySettings: {
       showPartnerLinks: true,
     },
@@ -96,6 +99,7 @@ export const zkSyncNetworks: ZkSyncNetwork[] = [
     rpcUrl: "https://testnet.era.zksync.dev",
     blockExplorerUrl: "https://goerli.explorer.zksync.io",
     blockExplorerApi: "https://block-explorer-api.testnets.zksync.dev",
+    withdrawalFinalizerApi: "https://withdrawal-finalizer-api.testnets.zksync.dev",
     displaySettings: {
       showPartnerLinks: true,
     },
@@ -108,6 +112,7 @@ export const zkSyncNetworks: ZkSyncNetwork[] = [
     rpcUrl: "https://z2-dev-api.zksync.dev",
     blockExplorerUrl: "https://goerli-beta.staging-scan-v2.zksync.dev",
     blockExplorerApi: "https://block-explorer-api.stage.zksync.dev",
+    withdrawalFinalizerApi: "https://withdrawal-finalizer-api.stage.zksync.dev",
     l1Network: l1Networks.sepolia,
     hidden: true,
   },
diff --git a/pages/assets.vue b/pages/assets.vue
index 47ceea2b2..f3b58596a 100644
--- a/pages/assets.vue
+++ b/pages/assets.vue
@@ -6,6 +6,7 @@
       <ConnectWalletBlock>Connect wallet to view your balances on {{ eraNetwork.name }}</ConnectWalletBlock>
     </template>
     <template v-else>
+      <TransactionWithdrawalsAvailableForClaimAlert />
       <EcosystemBlock
         v-if="eraNetwork.displaySettings?.showPartnerLinks && ecosystemBannerVisible"
         show-close-button
diff --git a/pages/transaction/[hash].vue b/pages/transaction/[hash].vue
index 86f536eca..2794d19e2 100644
--- a/pages/transaction/[hash].vue
+++ b/pages/transaction/[hash].vue
@@ -1,7 +1,8 @@
 <template>
   <div v-if="transaction">
     <DepositSubmitted v-if="transaction.type === 'deposit'" :transaction="transaction" />
-    <TransferSubmitted v-else :transaction="transaction" />
+    <TransferSubmitted v-else-if="transaction.type === 'transfer'" :transaction="transaction" />
+    <WithdrawalSubmitted v-else-if="transaction.type === 'withdrawal'" :transaction="transaction" />
   </div>
   <div v-else>
     <h1 class="h1 mt-block-gap-1/2 text-center">Transaction not found</h1>
@@ -17,23 +18,22 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue";
 
-import { storeToRefs } from "pinia";
-
 import type { TransactionInfo } from "@/store/zksync/transactionStatus";
 
 import { useRoute } from "#app";
 import { useZkSyncTransactionStatusStore } from "@/store/zksync/transactionStatus";
 import DepositSubmitted from "@/views/transactions/DepositSubmitted.vue";
 import TransferSubmitted from "@/views/transactions/TransferSubmitted.vue";
+import WithdrawalSubmitted from "@/views/transactions/WithdrawalSubmitted.vue";
 
 const route = useRoute();
 
 const transactionStatusStore = useZkSyncTransactionStatusStore();
-const { savedTransactions } = storeToRefs(transactionStatusStore);
 
 const completedTransaction = ref<TransactionInfo | null>(null);
 const savedTransaction = computed(() => {
-  return savedTransactions.value.find((_transaction) => _transaction.transactionHash === route.params.hash);
+  if (typeof route.params.hash !== "string") return;
+  return transactionStatusStore.getTransaction(route.params.hash);
 });
 const transaction = computed(() => {
   return completedTransaction.value || savedTransaction.value;
diff --git a/pages/transfers.vue b/pages/transfers.vue
index 161217cf9..a01bf6a1a 100644
--- a/pages/transfers.vue
+++ b/pages/transfers.vue
@@ -8,11 +8,31 @@
     <template v-else>
       <template v-if="!loading && recentBridgeOperations.length">
         <TypographyCategoryLabel>Recent bridge operations</TypographyCategoryLabel>
-        <CommonCardWithLineButtons>
+        <div v-if="actionRequiredBridgeTransactions.length" class="space-y-block-gap">
+          <CommonCardWithLineButtons v-for="(item, index) in actionRequiredBridgeTransactions" :key="index">
+            <TransactionTransferWithdrawalLineItem
+              :transfer="item"
+              :in-progress="!item.completed"
+              as="RouterLink"
+              :to="{
+                name: 'transaction-hash',
+                params: { hash: item.identifierTransactionHash },
+                query: { network: eraNetwork.key },
+              }"
+            />
+          </CommonCardWithLineButtons>
+        </div>
+
+        <CommonCardWithLineButtons
+          v-if="actionNotRequiredBridgeTransactions.length"
+          :class="{ 'mt-block-gap': actionRequiredBridgeTransactions.length }"
+        >
           <TransactionTransferLineItem
-            v-for="(item, index) in recentBridgeOperations"
+            v-for="(item, index) in actionNotRequiredBridgeTransactions"
             :key="index"
             :transfer="item"
+            :in-progress="!item.completed"
+            as="RouterLink"
             :to="{
               name: 'transaction-hash',
               params: { hash: item.identifierTransactionHash },
@@ -84,7 +104,7 @@ import { useZkSyncTransfersHistoryStore } from "@/store/zksync/transfersHistory"
 const onboardStore = useOnboardStore();
 const { eraNetwork } = storeToRefs(useZkSyncProviderStore());
 const transfersHistoryStore = useZkSyncTransfersHistoryStore();
-const { account, isConnected } = storeToRefs(onboardStore);
+const { isConnected } = storeToRefs(onboardStore);
 const {
   transfers,
   recentTransfersRequestInProgress,
@@ -94,17 +114,20 @@ const {
   previousTransfersRequestError,
 } = storeToRefs(transfersHistoryStore);
 const { destinations } = storeToRefs(useDestinationsStore());
-const { savedTransactions } = storeToRefs(useZkSyncTransactionStatusStore());
+const { userTransactions } = storeToRefs(useZkSyncTransactionStatusStore());
 
-type RecentBridgeOperation = Transfer & { identifierTransactionHash: string };
+type RecentBridgeOperation = Transfer & {
+  identifierTransactionHash: string;
+  completed: boolean;
+  finalizationAvailable?: boolean;
+};
 const recentBridgeOperations = computed<RecentBridgeOperation[]>(() => {
-  const recent = savedTransactions.value
-    .filter((tx) => tx.from.address === account.value.address)
-    .filter(
-      (tx) =>
-        (tx.type === "withdrawal" && new Date(tx.timestamp).getTime() + WITHDRAWAL_DELAY * 2 > new Date().getTime()) ||
-        (tx.type === "deposit" && new Date(tx.timestamp).getTime() + ESTIMATED_DEPOSIT_DELAY * 2 > new Date().getTime())
-    );
+  const recent = userTransactions.value.filter(
+    (tx) =>
+      (tx.type === "withdrawal" &&
+        (!tx.info.completed || new Date(tx.timestamp).getTime() + WITHDRAWAL_DELAY * 2 > new Date().getTime())) ||
+      (tx.type === "deposit" && new Date(tx.timestamp).getTime() + ESTIMATED_DEPOSIT_DELAY * 2 > new Date().getTime())
+  );
 
   return [
     ...recent.map((tx) => {
@@ -119,10 +142,20 @@ const recentBridgeOperations = computed<RecentBridgeOperation[]>(() => {
         amount: tx.token.amount,
         token: tx.token,
         timestamp: tx.timestamp,
+        completed: tx.info.completed,
+        finalizationAvailable:
+          tx.type === "withdrawal" ? !tx.info.completed && tx.info.withdrawalFinalizationAvailable : undefined,
       } as RecentBridgeOperation;
     }),
   ].sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
 });
+const actionRequiredBridgeTransactions = computed(() =>
+  recentBridgeOperations.value.filter((e) => e.finalizationAvailable)
+);
+const actionNotRequiredBridgeTransactions = computed(() => {
+  const actionRequiredHashes = actionRequiredBridgeTransactions.value.map((e) => e.transactionHash);
+  return recentBridgeOperations.value.filter((e) => !actionRequiredHashes.includes(e.transactionHash));
+});
 
 const displayedTransfers = computed(() => {
   return transfers.value.filter(
@@ -130,7 +163,7 @@ const displayedTransfers = computed(() => {
   );
 });
 const hasOnlyRecentBridgeOperations = computed(() => {
-  return !displayedTransfers.value.length && recentBridgeOperations.value.length;
+  return !displayedTransfers.value.length && recentBridgeOperations.value.length && !recentTransfersRequestError.value;
 });
 const { loading, reset: resetSingleLoading } = useSingleLoading(recentTransfersRequestInProgress);
 
diff --git a/store/zksync/transactionStatus.ts b/store/zksync/transactionStatus.ts
index 1de3f95c0..84f14e97d 100644
--- a/store/zksync/transactionStatus.ts
+++ b/store/zksync/transactionStatus.ts
@@ -33,6 +33,7 @@ export const WITHDRAWAL_DELAY = 24 * 60 * 60 * 1000; // 24 hours
 export const useZkSyncTransactionStatusStore = defineStore("zkSyncTransactionStatus", () => {
   const onboardStore = useOnboardStore();
   const providerStore = useZkSyncProviderStore();
+  const { account } = storeToRefs(onboardStore);
   const { eraNetwork } = storeToRefs(providerStore);
 
   const storageSavedTransactions = useStorage<{ [networkKey: string]: TransactionInfo[] }>(
@@ -47,9 +48,13 @@ export const useZkSyncTransactionStatusStore = defineStore("zkSyncTransactionSta
       storageSavedTransactions.value[eraNetwork.value.key] = transactions;
     },
   });
-  const saveTransaction = (transaction: TransactionInfo) => {
-    savedTransactions.value = [...savedTransactions.value, transaction];
-  };
+  const userTransactions = computed(() =>
+    savedTransactions.value.filter(
+      (tx) =>
+        tx.from.address === account.value.address ||
+        (tx.type === "withdrawal" && tx.to.address === account.value.address)
+    )
+  );
 
   const getDepositL2TransactionHash = async (l1TransactionHash: string) => {
     const publicClient = onboardStore.getPublicClient();
@@ -85,9 +90,7 @@ export const useZkSyncTransactionStatusStore = defineStore("zkSyncTransactionSta
       const transactionDetails = await providerStore
         .requestProvider()
         .getTransactionDetails(transaction.transactionHash);
-      if (transactionDetails.status === "verified") {
-        transaction.info.withdrawalFinalizationAvailable = true;
-      } else {
+      if (transactionDetails.status !== "verified") {
         return transaction;
       }
     }
@@ -95,6 +98,7 @@ export const useZkSyncTransactionStatusStore = defineStore("zkSyncTransactionSta
       .getL1VoidSigner(true)
       ?.isWithdrawalFinalized(transaction.transactionHash)
       .catch(() => false);
+    transaction.info.withdrawalFinalizationAvailable = true;
     transaction.info.completed = isFinalized;
     return transaction;
   };
@@ -125,9 +129,37 @@ export const useZkSyncTransactionStatusStore = defineStore("zkSyncTransactionSta
     return transaction;
   };
 
+  const saveTransaction = (transaction: TransactionInfo) => {
+    if (
+      savedTransactions.value.some(
+        (existingTransaction) => existingTransaction.transactionHash === transaction.transactionHash
+      )
+    ) {
+      updateTransactionData(transaction.transactionHash, transaction);
+    } else {
+      savedTransactions.value = [...savedTransactions.value, transaction];
+    }
+  };
+  const updateTransactionData = (transactionHash: string, replaceTransaction: TransactionInfo) => {
+    const transaction = savedTransactions.value.find((transaction) => transaction.transactionHash === transactionHash);
+    if (!transaction) throw new Error("Transaction not found");
+    const index = savedTransactions.value.indexOf(transaction);
+    const newSavedTransactions = [...savedTransactions.value];
+    newSavedTransactions[index] = replaceTransaction;
+    savedTransactions.value = newSavedTransactions;
+    return replaceTransaction;
+  };
+  const getTransaction = (transactionHash: string) => {
+    transactionHash = transactionHash.toLowerCase();
+    return savedTransactions.value.find((transaction) => transaction.transactionHash.toLowerCase() === transactionHash);
+  };
+
   return {
     savedTransactions,
-    saveTransaction,
+    userTransactions,
     waitForCompletion,
+    saveTransaction,
+    updateTransactionData,
+    getTransaction,
   };
 });
diff --git a/store/zksync/transfersHistory.ts b/store/zksync/transfersHistory.ts
index d68a9e4df..18bdf7a97 100644
--- a/store/zksync/transfersHistory.ts
+++ b/store/zksync/transfersHistory.ts
@@ -77,7 +77,7 @@ export const useZkSyncTransfersHistoryStore = defineStore("zkSyncTransfersHistor
         resetPaginatedRequest();
       }
       const response = await loadNext();
-      const mappedTransfers = response.items.map((e) => mapApiTransfer(e));
+      const mappedTransfers = response.items.map(mapApiTransfer);
       transfers.value = filterOutDuplicateTransfers(mappedTransfers);
     },
     { cache: 30000 }
diff --git a/store/zksync/withdrawals.ts b/store/zksync/withdrawals.ts
new file mode 100644
index 000000000..10d8a5943
--- /dev/null
+++ b/store/zksync/withdrawals.ts
@@ -0,0 +1,113 @@
+import { $fetch } from "ofetch";
+
+import type { Api } from "@/types";
+
+import { useDestinationsStore } from "@/store/destinations";
+import { useOnboardStore } from "@/store/onboard";
+import { useZkSyncProviderStore } from "@/store/zksync/provider";
+import { useZkSyncTransactionStatusStore, WITHDRAWAL_DELAY } from "@/store/zksync/transactionStatus";
+
+const FETCH_TIME_LIMIT = 31 * 24 * 60 * 60 * 1000; // 31 days
+
+export const useZkSyncWithdrawalsStore = defineStore("zkSyncWithdrawals", () => {
+  const onboardStore = useOnboardStore();
+  const providerStore = useZkSyncProviderStore();
+  const transactionStatusStore = useZkSyncTransactionStatusStore();
+  const { account, isConnected } = storeToRefs(onboardStore);
+  const { eraNetwork } = storeToRefs(providerStore);
+  const { userTransactions } = storeToRefs(transactionStatusStore);
+  const { destinations } = storeToRefs(useDestinationsStore());
+
+  const updateWithdrawals = async () => {
+    if (!isConnected.value) throw new Error("Account is not available");
+    if (!eraNetwork.value.withdrawalFinalizerApi)
+      throw new Error(`Withdrawal Finalizer API is not available on ${eraNetwork.value.name}`);
+    if (!eraNetwork.value.blockExplorerApi)
+      throw new Error(`Block Explorer API is not available on ${eraNetwork.value.name}`);
+    const withdrawals: Api.Response.Finalizer_Withdrawal[] = await $fetch(
+      `${eraNetwork.value.withdrawalFinalizerApi}/withdrawals/${account.value.address}?limit=100`
+    );
+    for (const withdrawal of withdrawals) {
+      const transactionFromStorage = transactionStatusStore.getTransaction(withdrawal.tx_hash);
+      if (transactionFromStorage) {
+        if (withdrawal.status === "Finalized" && !transactionFromStorage.info.completed) {
+          transactionStatusStore.updateTransactionData(withdrawal.tx_hash, {
+            ...transactionFromStorage,
+            info: {
+              ...transactionFromStorage.info,
+              completed: true,
+            },
+          });
+        }
+        continue;
+      }
+
+      const transactionTransfers: Api.Response.Collection<Api.Response.Transfer> = await $fetch(
+        `${eraNetwork.value.blockExplorerApi}/transactions/${withdrawal.tx_hash}/transfers?limit=100&page=1`
+      );
+      const transfers = transactionTransfers.items.map(mapApiTransfer);
+      const withdrawalTransfer = transfers.find((e) => e.type === "withdrawal" && e.token && e.amount);
+      if (!withdrawalTransfer) continue;
+      if (new Date(withdrawalTransfer.timestamp).getTime() < Date.now() - FETCH_TIME_LIMIT) break;
+      const transactionDetails = await retry(() =>
+        providerStore.requestProvider().getTransactionDetails(withdrawal.tx_hash)
+      );
+
+      transactionStatusStore.saveTransaction({
+        type: "withdrawal",
+        transactionHash: withdrawal.tx_hash,
+        timestamp: withdrawalTransfer.timestamp,
+        token: {
+          ...withdrawalTransfer.token!,
+          amount: withdrawalTransfer.amount!,
+        },
+        from: {
+          address: withdrawalTransfer.from,
+          destination: destinations.value.era,
+        },
+        to: {
+          address: withdrawalTransfer.to,
+          destination: destinations.value.ethereum,
+        },
+        info: {
+          expectedCompleteTimestamp: new Date(
+            new Date(withdrawalTransfer.timestamp).getTime() + WITHDRAWAL_DELAY
+          ).toISOString(),
+          completed: withdrawal.status === "Finalized",
+          withdrawalFinalizationAvailable: transactionDetails.status === "verified",
+        },
+      });
+    }
+  };
+
+  const withdrawalsAvailableForClaiming = computed(() =>
+    userTransactions.value.filter(
+      (tx) => tx.type === "withdrawal" && !tx.info.completed && tx.info.withdrawalFinalizationAvailable
+    )
+  );
+
+  const updateWithdrawalsIfPossible = async () => {
+    if (!isConnected.value || !eraNetwork.value.blockExplorerApi || !eraNetwork.value.withdrawalFinalizerApi) {
+      return;
+    }
+    await updateWithdrawals();
+  };
+  const { reset: resetAutoUpdate, stop: stopAutoUpdate } = useInterval(() => {
+    updateWithdrawals();
+  }, 60_000);
+
+  onboardStore.subscribeOnAccountChange((account) => {
+    if (account) {
+      resetAutoUpdate();
+      updateWithdrawals();
+    } else {
+      stopAutoUpdate();
+    }
+  });
+
+  return {
+    withdrawalsAvailableForClaiming,
+    updateWithdrawals,
+    updateWithdrawalsIfPossible,
+  };
+});
diff --git a/types/index.d.ts b/types/index.d.ts
index eefcc3e72..2cc242a95 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -83,6 +83,42 @@ export declare namespace Api {
       createdInBlockNumber: number;
       totalTransactions: number;
     };
+
+    type Transaction = {
+      hash: string;
+      to: string;
+      from: string;
+      transactionIndex: number;
+      data: string;
+      value: string;
+      fee: string;
+      nonce: number;
+      blockNumber: number;
+      blockHash: string;
+      gasPrice: string;
+      gasLimit: string;
+      gasUsed: string;
+      gasPerPubdata: string | null;
+      maxFeePerGas: string | null;
+      maxPriorityFeePerGas: string | null;
+      receivedAt: string;
+      commitTxHash: string | null;
+      proveTxHash: string | null;
+      executeTxHash: string | null;
+      isL1Originated: boolean;
+      l1BatchNumber: number | null;
+      isL1BatchSealed: boolean;
+      status: "included" | "committed" | "proved" | "verified" | "failed";
+      error: string | null;
+      revertReason: string | null;
+    };
+
+    type Finalizer_Withdrawal = {
+      tx_hash: string;
+      token: string;
+      amount: string;
+      status: "NotFinalized" | "Finalized";
+    };
   }
 }
 
diff --git a/views/transactions/Deposit.vue b/views/transactions/Deposit.vue
index 2c77ef2c8..114759e25 100644
--- a/views/transactions/Deposit.vue
+++ b/views/transactions/Deposit.vue
@@ -33,6 +33,7 @@
     </CommonErrorBlock>
     <form v-else @submit.prevent="">
       <template v-if="step === 'form'">
+        <TransactionWithdrawalsAvailableForClaimAlert />
         <EcosystemBlock
           v-if="eraNetwork.displaySettings?.showPartnerLinks && ecosystemBannerVisible"
           show-close-button
diff --git a/views/transactions/Transfer.vue b/views/transactions/Transfer.vue
index 77249710f..bebd20f3a 100644
--- a/views/transactions/Transfer.vue
+++ b/views/transactions/Transfer.vue
@@ -43,6 +43,7 @@
     </CommonErrorBlock>
     <form v-else @submit.prevent="">
       <template v-if="step === 'form'">
+        <TransactionWithdrawalsAvailableForClaimAlert />
         <CommonInputTransactionAmount
           v-model="amount"
           v-model:error="amountError"
@@ -162,7 +163,11 @@
           :icon="ExclamationTriangleIcon"
           class="mb-block-padding-1/2 sm:mb-block-gap"
         >
-          <p>
+          <p v-if="withdrawalManualFinalizationRequired">
+            You will be able to claim your withdrawal only after a 24-hour withdrawal delay.
+            <a class="underline underline-offset-2" :href="ZKSYNC_WITHDRAWAL_DELAY" target="_blank">Learn more</a>
+          </p>
+          <p v-else>
             You will receive funds only after a 24-hour withdrawal delay.
             <a class="underline underline-offset-2" :href="ZKSYNC_WITHDRAWAL_DELAY" target="_blank">Learn more</a>
           </p>
@@ -187,7 +192,16 @@
         </CommonErrorBlock>
       </template>
       <template v-else-if="step === 'submitted'">
-        <TransferSubmitted :transaction="transactionInfo!" :make-another-transaction="resetForm" />
+        <TransferSubmitted
+          v-if="transactionInfo!.type === 'transfer'"
+          :transaction="transactionInfo!"
+          :make-another-transaction="resetForm"
+        />
+        <WithdrawalSubmitted
+          v-else-if="transactionInfo!.type === 'withdrawal'"
+          :transaction="transactionInfo!"
+          :make-another-transaction="resetForm"
+        />
       </template>
 
       <template v-if="!tokenCustomBridge && (step === 'form' || step === 'confirm')">
@@ -317,6 +331,7 @@ import { calculateFee } from "@/utils/helpers";
 import { silentRouterChange } from "@/utils/helpers";
 import { TransitionAlertScaleInOutTransition, TransitionOpacity } from "@/utils/transitions";
 import TransferSubmitted from "@/views/transactions/TransferSubmitted.vue";
+import WithdrawalSubmitted from "@/views/transactions/WithdrawalSubmitted.vue";
 
 const props = defineProps({
   type: {
diff --git a/views/transactions/TransferSubmitted.vue b/views/transactions/TransferSubmitted.vue
index 7b10d1ff9..d50873aba 100644
--- a/views/transactions/TransferSubmitted.vue
+++ b/views/transactions/TransferSubmitted.vue
@@ -5,37 +5,20 @@
     </h1>
     <CommonHeightTransition :opened="!transaction.info.completed">
       <p class="mb-4 text-center">
-        <template v-if="transaction.type !== 'withdrawal'">
-          Your funds will be available at the
-          <a
-            v-if="blockExplorerUrl"
-            :href="`${blockExplorerUrl}/address/${transaction!.to.address}`"
-            target="_blank"
-            class="font-medium underline underline-offset-2"
-            >destination address</a
-          >
-          <span v-else>destination address</span>
-          after the transaction is committed on the
-          <span class="font-medium">{{ transaction.from.destination.label }}</span
-          >. You are free to close this page.
-        </template>
-        <template v-else-if="withdrawalManualFinalizationRequired && transaction.info.withdrawalFinalizationAvailable">
-          Your funds will be available on <span class="font-medium">{{ transaction.to.destination.label }}</span> after
-          you finalize the withdrawal.
-        </template>
-        <template v-else>
-          Your funds will be available on <span class="font-medium">{{ transaction.to.destination.label }}</span> after
-          the <a class="underline underline-offset-2" :href="ZKSYNC_WITHDRAWAL_DELAY" target="_blank">24-hour delay</a>.
-          During this time, the transaction will be processed
-          {{
-            withdrawalManualFinalizationRequired
-              ? "and become available for claiming."
-              : "and finalized. You are free to close this page."
-          }}
-        </template>
+        Your funds will be available at the
+        <a
+          v-if="blockExplorerUrl"
+          :href="`${blockExplorerUrl}/address/${transaction!.to.address}`"
+          target="_blank"
+          class="font-medium underline underline-offset-2"
+          >destination address</a
+        >
+        <span v-else>destination address</span>
+        after the transaction is committed on the
+        <span class="font-medium">{{ transaction.from.destination.label }}</span
+        >. You are free to close this page.
       </p>
     </CommonHeightTransition>
-    <TransactionWithdrawalFinalizationAlert v-if="withdrawalManualFinalizationRequired" :transaction="transaction" />
     <TransactionProgress
       :from-address="transaction.from.address"
       :from-destination="transaction.from.destination"
@@ -45,9 +28,6 @@
       :transaction-hash="transaction.transactionHash"
       :token="transaction.token"
       :completed="transaction.info.completed"
-      :expected-complete-timestamp="
-        transaction.info.withdrawalFinalizationAvailable ? undefined : transaction.info.expectedCompleteTimestamp
-      "
     />
 
     <CommonButton as="RouterLink" :to="{ name: 'assets' }" class="mt-block-gap" variant="primary">
@@ -56,7 +36,7 @@
     <CommonButton
       size="sm"
       :as="makeAnotherTransaction ? undefined : 'RouterLink'"
-      :to="{ name: transaction.type === 'withdrawal' ? 'withdraw' : 'send' }"
+      :to="{ name: 'send' }"
       class="mx-auto mt-block-gap w-max"
       @click="makeAnotherTransaction && makeAnotherTransaction()"
     >
@@ -66,18 +46,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
-
 import { storeToRefs } from "pinia";
 
-import { isWithdrawalManualFinalizationRequired } from "@/composables/zksync/useTransaction";
-
 import type { TransactionInfo } from "@/store/zksync/transactionStatus";
 import type { PropType } from "vue";
 
 import { useZkSyncProviderStore } from "@/store/zksync/provider";
 
-const props = defineProps({
+defineProps({
   transaction: {
     type: Object as PropType<TransactionInfo>,
     required: true,
@@ -88,13 +64,5 @@ const props = defineProps({
   },
 });
 
-const { eraNetwork, blockExplorerUrl } = storeToRefs(useZkSyncProviderStore());
-
-const withdrawalManualFinalizationRequired = computed(() => {
-  return (
-    props.transaction.type === "withdrawal" &&
-    !props.transaction.info.completed &&
-    isWithdrawalManualFinalizationRequired(props.transaction.token, eraNetwork.value.l1Network?.id || -1)
-  );
-});
+const { blockExplorerUrl } = storeToRefs(useZkSyncProviderStore());
 </script>
diff --git a/views/transactions/WithdrawalSubmitted.vue b/views/transactions/WithdrawalSubmitted.vue
new file mode 100644
index 000000000..0cd43e463
--- /dev/null
+++ b/views/transactions/WithdrawalSubmitted.vue
@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <h1 class="h1 mt-block-gap-1/2 text-center">
+      {{ transaction.info.completed ? "Transaction completed" : "Transaction submitted" }}
+    </h1>
+    <CommonHeightTransition :opened="!transaction.info.completed">
+      <p class="mb-4 text-center">
+        <template v-if="withdrawalManualFinalizationRequired && transaction.info.withdrawalFinalizationAvailable">
+          Your funds will be available on <span class="font-medium">{{ transaction.to.destination.label }}</span> after
+          you claim the withdrawal.
+        </template>
+        <template v-else>
+          Your funds will be available on <span class="font-medium">{{ transaction.to.destination.label }}</span> after
+          the <a class="underline underline-offset-2" :href="ZKSYNC_WITHDRAWAL_DELAY" target="_blank">24-hour delay</a>.
+          During this time, the transaction will be processed
+          {{
+            withdrawalManualFinalizationRequired
+              ? "and become available for claiming."
+              : "and finalized. You are free to close this page."
+          }}
+        </template>
+      </p>
+      <template v-if="withdrawalManualFinalizationRequired">
+        <CommonAlert
+          v-if="withdrawalFinalizationAvailable"
+          variant="warning"
+          :icon="ExclamationTriangleIcon"
+          class="mb-4"
+        >
+          <p>You can claim your withdrawal now.</p>
+        </CommonAlert>
+        <CommonAlert v-else variant="warning" :icon="ExclamationTriangleIcon" class="mb-4">
+          <p>
+            You will have to claim your withdrawal once it's processed. Claiming will require paying the fee on the
+            {{ eraNetwork.l1Network?.name }} network.
+          </p>
+        </CommonAlert>
+      </template>
+    </CommonHeightTransition>
+    <TransactionProgress
+      :from-address="transaction.from.address"
+      :from-destination="transaction.from.destination"
+      :to-address="transaction.to.address"
+      :to-destination="transaction.to.destination"
+      :from-explorer-link="blockExplorerUrl"
+      :from-transaction-hash="transaction.transactionHash"
+      :to-transaction-hash="finalizeTransactionHash || transaction.info.toTransactionHash"
+      :to-explorer-link="finalizeTransactionHash || transaction.info.toTransactionHash ? l1BlockExplorerUrl : undefined"
+      :token="transaction.token"
+      :completed="transaction.info.completed"
+      :animation-state="withdrawalFinalizationAvailable ? 'stopped-in-the-end' : undefined"
+      :expected-complete-timestamp="
+        withdrawalFinalizationAvailable ? undefined : transaction.info.expectedCompleteTimestamp
+      "
+    >
+      <template #to-button v-if="withdrawalFinalizationAvailable">
+        <template v-if="!isCorrectNetworkSet">
+          <CommonButton
+            size="xs"
+            variant="light"
+            :disabled="connectorName === 'WalletConnect'"
+            @click="onboardStore.setCorrectNetwork()"
+          >
+            Change wallet network to claim
+          </CommonButton>
+        </template>
+        <CommonButton
+          v-else-if="feeLoading || fee"
+          size="xs"
+          variant="light"
+          :disabled="continueButtonDisabled"
+          @click="buttonContinue()"
+        >
+          <CommonContentLoader v-if="feeLoading && !fee" :length="9" />
+          <span v-else>Claim</span>
+          <CommonSpinner
+            v-if="finalizeTransactionStatus !== 'not-started' || transaction.info.toTransactionHash"
+            variant="text-color"
+            class="-mr-1 ml-2 h-6 w-6"
+            aria-hidden="true"
+          />
+        </CommonButton>
+      </template>
+    </TransactionProgress>
+    <CommonHeightTransition :opened="withdrawalFinalizationAvailable">
+      <div>
+        <CommonErrorBlock v-if="feeError" class="mt-2" @try-again="estimate">
+          Fee estimation error: {{ feeError.message }}
+        </CommonErrorBlock>
+        <TransactionFeeDetails
+          v-else
+          label="Claiming fee:"
+          :fee-token="feeToken"
+          :fee-amount="fee"
+          :loading="feeLoading"
+          class="mt-4"
+        />
+
+        <TransactionEthereumTransactionFooter>
+          <template #after-checks>
+            <CommonButton :disabled="continueButtonDisabled" class="w-full" variant="primary" @click="buttonContinue()">
+              <transition v-bind="TransitionPrimaryButtonText" mode="out-in">
+                <span v-if="finalizeTransactionStatus === 'processing'">Processing...</span>
+                <span v-else-if="finalizeTransactionStatus === 'waiting-for-signature'">Waiting for confirmation</span>
+                <span
+                  v-else-if="
+                    finalizeTransactionStatus === 'sending' ||
+                    finalizeTransactionStatus === 'done' ||
+                    transaction.info.toTransactionHash
+                  "
+                >
+                  Claiming withdrawal...
+                </span>
+                <span v-else>Claim withdrawal</span>
+              </transition>
+            </CommonButton>
+            <TransactionButtonUnderlineConfirmTransaction
+              :opened="finalizeTransactionStatus === 'waiting-for-signature'"
+            />
+          </template>
+          <template #change-network-auto>Change wallet network to claim</template>
+          <template #change-network-manual="{ walletName }">
+            Change network manually in your {{ walletName }} wallet to claim
+          </template>
+        </TransactionEthereumTransactionFooter>
+      </div>
+    </CommonHeightTransition>
+
+    <div class="mt-5 flex flex-wrap items-center justify-center gap-block-gap">
+      <CommonButton as="RouterLink" :to="{ name: 'assets' }" size="xs">Go to Assets page</CommonButton>
+      <CommonButton
+        size="xs"
+        :as="makeAnotherTransaction ? undefined : 'RouterLink'"
+        :to="{ name: 'withdraw' }"
+        @click="makeAnotherTransaction && makeAnotherTransaction()"
+      >
+        Make another transaction
+      </CommonButton>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch } from "vue";
+
+import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
+import { storeToRefs } from "pinia";
+
+import { isWithdrawalManualFinalizationRequired } from "@/composables/zksync/useTransaction";
+import useWithdrawalFinalization from "@/composables/zksync/useWithdrawalFinalization";
+
+import type { TransactionInfo } from "@/store/zksync/transactionStatus";
+import type { PropType } from "vue";
+
+import { useNetworkStore } from "@/store/network";
+import { useOnboardStore } from "@/store/onboard";
+import { useZkSyncProviderStore } from "@/store/zksync/provider";
+import { useZkSyncTransactionStatusStore } from "@/store/zksync/transactionStatus";
+
+const props = defineProps({
+  transaction: {
+    type: Object as PropType<TransactionInfo>,
+    required: true,
+  },
+  makeAnotherTransaction: {
+    type: Function as PropType<() => void>,
+    required: false,
+  },
+});
+
+const onboardStore = useOnboardStore();
+const transactionStatusStore = useZkSyncTransactionStatusStore();
+const { eraNetwork, blockExplorerUrl } = storeToRefs(useZkSyncProviderStore());
+const { l1BlockExplorerUrl } = storeToRefs(useNetworkStore());
+const { connectorName, isCorrectNetworkSet } = storeToRefs(onboardStore);
+
+const withdrawalManualFinalizationRequired = computed(() => {
+  return (
+    !props.transaction.info.completed &&
+    isWithdrawalManualFinalizationRequired(props.transaction.token, eraNetwork.value.l1Network?.id || -1)
+  );
+});
+const withdrawalFinalizationAvailable = computed(() => {
+  return withdrawalManualFinalizationRequired.value && props.transaction.info.withdrawalFinalizationAvailable;
+});
+
+const {
+  feeToken,
+  totalFee: fee,
+  estimationError: feeError,
+  estimationInProgress: feeLoading,
+  estimateFee: estimate,
+
+  status: finalizeTransactionStatus,
+  transactionHash: finalizeTransactionHash,
+  commitTransaction,
+} = useWithdrawalFinalization(computed(() => props.transaction));
+watch(
+  withdrawalFinalizationAvailable,
+  (finalizationAvailable) => {
+    if (finalizationAvailable) {
+      estimate();
+    }
+  },
+  { immediate: true }
+);
+
+const continueButtonDisabled = computed(() => {
+  if (finalizeTransactionStatus.value !== "not-started") return true;
+  if (feeLoading.value || !fee.value) return true;
+  if (props.transaction.info.toTransactionHash) return true;
+  return false;
+});
+const buttonContinue = async () => {
+  if (continueButtonDisabled.value) return;
+  await commitTransaction();
+
+  if (finalizeTransactionStatus.value === "done") {
+    transactionStatusStore.updateTransactionData(props.transaction.transactionHash, {
+      ...props.transaction,
+      info: {
+        ...props.transaction.info,
+        completed: true,
+        toTransactionHash: finalizeTransactionHash.value! as string,
+      },
+    });
+  }
+};
+</script>