fix: add deprecated network alert

components/network/DeprecationAlert.vue

@@ -0,0 +1,41 @@
+<template>
+  <CommonAlert
+    v-if="isAlertVisible"
+    variant="warning"
+    :icon="ExclamationTriangleIcon"
+    class="mb-block-padding-1/2 sm:mb-block-gap"
+  >
+    <p>
+      {{ eraNetwork.name }} will be shutdown on March 31st. Please use
+      <NuxtLink :to="getNetworkUrl(recommendedNetwork!, route.fullPath)" class="underline underline-offset-2">{{
+        recommendedNetwork!.name
+      }}</NuxtLink>
+      instead. For more info see the
+      <a
+        class="underline underline-offset-2"
+        href="https://github.com/zkSync-Community-Hub/zksync-developers/discussions/228"
+        target="_blank"
+        >announcement</a
+      >
+      .
+    </p>
+  </CommonAlert>
+</template>
+
+<script lang="ts" setup>
+import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
+
+import { chainList, isCustomNode } from "@/data/networks";
+
+const route = useRoute();
+const { eraNetwork } = storeToRefs(useZkSyncProviderStore());
+
+const recommendedNetwork = computed(() => {
+  return chainList.find((chain) => chain.key === "sepolia");
+});
+const isAlertVisible = computed(() => {
+  return eraNetwork.value.deprecated && recommendedNetwork.value && !isCustomNode;
+});
+</script>
+
+<style lang="scss" scoped></style>

data/networks.ts

@@ -28,6 +28,7 @@ export type ZkSyncNetwork = {
   name: string;
   rpcUrl: string;
   hidden?: boolean; // If set to true, the network will not be shown in the network selector
+  deprecated?: boolean;
   l1Network?: L1Network;
   blockExplorerUrl?: string;
   blockExplorerApi?: string;
@@ -97,6 +98,7 @@ const publicChains: ZkSyncNetwork[] = [
     rpcUrl: "https://testnet.era.zksync.dev",
     blockExplorerUrl: "https://goerli.explorer.zksync.io",
     blockExplorerApi: "https://block-explorer-api.testnets.zksync.dev",
+    deprecated: true,
     displaySettings: {
       showPartnerLinks: true,
     },

pages/assets.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <NetworkDeprecationAlert />
     <PageTitle>Assets</PageTitle>
 
     <template v-if="!isConnected">

pages/transfers.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <NetworkDeprecationAlert />
     <PageTitle>Transfers</PageTitle>
 
     <template v-if="!isConnected">

views/transactions/Deposit.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <NetworkDeprecationAlert v-if="step === 'form'" />
     <PageTitle v-if="step === 'form'">Bridge</PageTitle>
     <PageTitle v-else-if="step === 'wallet-warning'">Wallet warning</PageTitle>
     <PageTitle

views/transactions/Transfer.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <NetworkDeprecationAlert v-if="step === 'form'" />
     <slot v-if="step === 'form'" name="title" />
     <PageTitle
       v-else-if="step === 'withdrawal-finalization-warning'"