zKatana shutdown warning (#1237)

* zKatana shutdown warning

* Cleanup

* PR comment fix

src/components/header/YokiBanner.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="!isZkatana">
     <a
       href="https://yoki.astar.network/"
       target="_blank"
@@ -16,11 +16,17 @@
       <astar-icon-arrow-right />
     </a>
   </div>
+  <div v-else class="banner" :class="`banner--${network}`">
+    <span>
+      <span class="text--ledger-users">{{ $t('warning.attention') }}</span>
+      <span>{{ $t('warning.testnetSwitchWarning') }}</span>
+    </span>
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { endpointKey } from 'src/config/chainEndpoints';
+import { useNetworkInfo } from 'src/hooks';
 
 export default defineComponent({
   props: {
@@ -29,8 +35,10 @@ export default defineComponent({
       default: 0,
     },
   },
-  setup() {
-    return { endpointKey };
+  setup(props) {
+    const { isZkatana } = useNetworkInfo();
+
+    return { isZkatana };
   },
 });
 </script>

src/i18n/en-US/index.ts

@@ -88,6 +88,9 @@ export default {
     stakingNotSupportZkEvm:
       'dApps Staking is not supported on {networkNotSupport}, please switch to {networkSupport} and start staking!',
     connectedInvalidNetwork: 'Please connect to the correct network in your wallet',
+    attention: 'Attention',
+    testnetSwitchWarning:
+      'We are switching our Astar zkEVM testnet to zKyoto on 25th March. We recommend you to move your test tokens to Sepolia. zKatana network will be closed soon.',
   },
   toast: {
     transactionFailed: 'Transaction failed with error: {message}',