fix: add withdrawal finalization notice

composables/zksync/useTransaction.ts

@@ -3,6 +3,7 @@ import { BigNumber, type BigNumberish } from "ethers";
 import { parseEther } from "ethers/lib/utils";
 
 import type { TokenAmount } from "@/types";
+import type { Provider, Signer } from "zksync-ethers";
 
 type TransactionParams = {
   type: "transfer" | "withdrawal";

views/transactions/Transfer.vue

@@ -45,6 +45,18 @@
     <form v-else @submit.prevent="">
       <template v-if="step === 'form'">
         <TransactionWithdrawalsAvailableForClaimAlert />
+        <CommonAlert
+          v-if="type === 'withdrawal' && eraNetwork.l1Network?.id === 1 && !isCustomNode"
+          variant="warning"
+          :icon="ExclamationTriangleIcon"
+          class="mb-block-gap"
+        >
+          <p>
+            Starting from {{ manualFinalizationFormattedLocalDate }} you will need to manually claim your funds after a
+            24 hour withdrawal delay. This requires paying another transaction fee on
+            {{ eraNetwork.l1Network?.name }} network.
+          </p>
+        </CommonAlert>
         <CommonInputTransactionAmount
           v-model="amount"
           v-model:error="amountError"
@@ -310,6 +322,18 @@ import type { FeeEstimationParams } from "@/composables/zksync/useFee";
 import type { Token, TokenAmount } from "@/types";
 import type { BigNumberish } from "ethers";
 
+const manualWithdrawalFinalizationStartDate = new Date(Date.UTC(2024, 3, 1, 0, 0, 0)); // 1st of April 2024 00:00:00 UTC
+const manualFinalizationFormattedLocalDate =
+  manualWithdrawalFinalizationStartDate.toLocaleDateString(undefined, {
+    month: "long",
+    day: "numeric",
+  }) +
+  " " +
+  manualWithdrawalFinalizationStartDate.toLocaleTimeString(undefined, {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+
 const props = defineProps({
   type: {
     type: String as PropType<FeeEstimationParams["type"]>,