From 4e87f0135256ab7f242eedab35bfa5535cf21537 Mon Sep 17 00:00:00 2001
From: Jack Hamer <jackhamer0990@gmail.com>
Date: Fri, 15 Mar 2024 14:01:59 +0200
Subject: [PATCH] fix: add deprecated network alert

---
 components/network/DeprecationAlert.vue | 41 +++++++++++++++++++++++++
 data/networks.ts                        |  2 ++
 pages/assets.vue                        |  1 +
 pages/transfers.vue                     |  1 +
 views/transactions/Deposit.vue          |  1 +
 views/transactions/Transfer.vue         |  1 +
 6 files changed, 47 insertions(+)
 create mode 100644 components/network/DeprecationAlert.vue

diff --git a/components/network/DeprecationAlert.vue b/components/network/DeprecationAlert.vue
new file mode 100644
index 000000000..a04cfb6df
--- /dev/null
+++ b/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>
diff --git a/data/networks.ts b/data/networks.ts
index 5264b3ebf..6fa3ff4f8 100644
--- a/data/networks.ts
+++ b/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,
     },
diff --git a/pages/assets.vue b/pages/assets.vue
index 8ca698dac..ed08eb51b 100644
--- a/pages/assets.vue
+++ b/pages/assets.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <NetworkDeprecationAlert />
     <PageTitle>Assets</PageTitle>
 
     <template v-if="!isConnected">
diff --git a/pages/transfers.vue b/pages/transfers.vue
index 0b40cc8ca..8e5a0a682 100644
--- a/pages/transfers.vue
+++ b/pages/transfers.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <NetworkDeprecationAlert />
     <PageTitle>Transfers</PageTitle>
 
     <template v-if="!isConnected">
diff --git a/views/transactions/Deposit.vue b/views/transactions/Deposit.vue
index f5ecdff91..eedff77a5 100644
--- a/views/transactions/Deposit.vue
+++ b/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
diff --git a/views/transactions/Transfer.vue b/views/transactions/Transfer.vue
index 7b873a514..18efde923 100644
--- a/views/transactions/Transfer.vue
+++ b/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'"