From b14e78c8f16d814f1c9aa17affe86c19ca19fb97 Mon Sep 17 00:00:00 2001
From: Vasyl Ivanchuk <vasyl.ivanchuk@gmail.com>
Date: Fri, 15 Dec 2023 11:17:52 +0200
Subject: [PATCH] feat: deprecate warning for goerli

---
 packages/app/src/App.vue                      |  2 +
 .../app/src/components/NetworkDeprecated.vue  | 58 +++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 packages/app/src/components/NetworkDeprecated.vue

diff --git a/packages/app/src/App.vue b/packages/app/src/App.vue
index a2541a6834..edf4428e3e 100644
--- a/packages/app/src/App.vue
+++ b/packages/app/src/App.vue
@@ -2,6 +2,7 @@
   <template v-if="isReady">
     <the-header :class="$route?.name" />
     <div class="container-app">
+      <NetworkDeprecated v-if="!currentNetwork.maintenance && currentNetwork.name === 'goerli'" />
       <MaintenanceView v-if="currentNetwork.maintenance" />
       <router-view v-else />
     </div>
@@ -12,6 +13,7 @@
 <script setup lang="ts">
 import { useTitle } from "@vueuse/core";
 
+import NetworkDeprecated from "@/components/NetworkDeprecated.vue";
 import TheFooter from "@/components/TheFooter.vue";
 import TheHeader from "@/components/header/TheHeader.vue";
 
diff --git a/packages/app/src/components/NetworkDeprecated.vue b/packages/app/src/components/NetworkDeprecated.vue
new file mode 100644
index 0000000000..919261b58f
--- /dev/null
+++ b/packages/app/src/components/NetworkDeprecated.vue
@@ -0,0 +1,58 @@
+<template v-if="newNetworkUrl">
+  <div class="deprecated-alert">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M21.0907 18.7005C20.8457 19.1905 20.3449 19.5 19.7971 19.5H4.20288C3.65506 19.5 3.15426 19.1905 2.90927 18.7005C2.69455 18.2711 2.70694 17.7631 2.94232 17.3446L10.9455 3.11671C11.1598 2.73575 11.5629 2.5 12 2.5C12.4371 2.5 12.8402 2.73575 13.0545 3.11671L21.0577 17.3446C21.2931 17.7631 21.3054 18.2711 21.0907 18.7005Z"
+        stroke="#FFC81A"
+      />
+      <circle cx="12" cy="16" r="1" fill="#FFC81A" />
+      <path d="M12 14V6" stroke="#FFC81A" />
+    </svg>
+    <span
+      >We are ending our support of Goerli testnet. Please <a :href="newNetworkUrl!">use Sepolia</a>. For more info see
+      <a target="_blank" href="https://github.com/zkSync-Community-Hub/zkync-developers/discussions/228"
+        >this announcement</a
+      >.</span
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+
+import useContext from "@/composables/useContext";
+
+import { getWindowLocation } from "@/utils/helpers";
+
+const route = useRoute();
+const { networks } = useContext();
+
+const newNetworkUrl = computed(() => {
+  const network = networks.value?.find((network) => network.name === "sepolia");
+  if (network) {
+    const { hostname, origin } = getWindowLocation();
+
+    if (hostname === "localhost" || hostname.endsWith("web.app") || !network.hostnames?.length) {
+      console.log(route);
+      return `${origin}?network=${network.name}`;
+    }
+    return network.hostnames[0];
+  }
+  return null;
+});
+</script>
+
+<style scoped lang="scss">
+.deprecated-alert {
+  @apply flex text-white rounded-2xl border border-amber-400/50 bg-amber-400/10 mb-6 py-3 px-4;
+
+  svg {
+    @apply mr-2;
+  }
+
+  a {
+    @apply text-inherit;
+  }
+}
+</style>