hotfix: added a banner for Astar Snap deprecation (#1484)

* feat: added a banner for Astar snap

* fix: clean up

* fix: refactoring

Author: impelcrypto

src/components/header/SnapDeprecatedBanner.vue

@@ -0,0 +1,79 @@
+<template>
+  <div v-if="isSnap" class="banner">
+    <div class="row--banner">
+      <span class="text--deprecated">{{ $t('common.snapDeprecated') }}</span>
+      <a :href="docsUrl.availableWallets" target="_blank" class="banner__link" rel="noreferrer">
+        <b>{{ $t('common.availableWallet') }}</b>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch } from 'vue';
+import { docsUrl } from 'src/links';
+import { useStore } from 'src/store';
+import { getSelectedAccount } from 'src/hooks/helper/wallet';
+import { SupportWallet } from 'src/config/wallets';
+import { useAccount } from 'src/hooks';
+
+export default defineComponent({
+  setup() {
+    const store = useStore();
+    const isSnap = ref<boolean>(false);
+    const { currentAccount, substrateAccounts } = useAccount();
+
+    watch(
+      [substrateAccounts, currentAccount],
+      () => {
+        const selectedWallet = getSelectedAccount(substrateAccounts.value);
+        isSnap.value = selectedWallet?.source === SupportWallet.Snap;
+      },
+      { immediate: false }
+    );
+
+    return { docsUrl, isSnap };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+
+.banner {
+  background: linear-gradient(270deg, #ff94cd 26.04%, #e6007a 100%);
+  color: $gray-2;
+  font-weight: 600;
+  padding: 4px 8px 8px 8px;
+  font-size: 12px;
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+
+  @media (min-width: $sm) {
+    font-size: 14px;
+    padding: 4px 16px 8px 16px;
+  }
+}
+
+.row--banner {
+  font-weight: 800;
+  padding: 3px 9px;
+  border-radius: 4px;
+  margin-right: 4px;
+
+  @media (min-width: $sm) {
+    margin-right: 8px;
+  }
+}
+
+.text--deprecated {
+  margin-right: 4px;
+}
+
+.banner__link {
+  color: blue;
+  text-decoration: underline;
+}
+</style>

src/i18n/en-US/index.ts

@@ -131,6 +131,9 @@ export default {
     loading: 'Loading...',
     comingSoon: 'Coming soon',
     checkHowToSolve: 'Check how to solve this problem',
+    snapDeprecated:
+      '⚠️ Important: Astar Snap is being deprecated soon. Make sure to migrate your assets to a supported wallet to keep them accessible.',
+    availableWallet: 'You can find available wallet options in our documentation.',
     speed: {
       speed: 'Transaction speed',
       speedTip: 'Transaction speed (Tip)',

src/layouts/DashboardLayout.vue

@@ -6,11 +6,11 @@
     <div class="wrapper--dashboard-layout__inner">
       <portal-header />
       <!-- <under-maintenance-banner /> -->
+      <snap-deprecated-banner />
       <dapp-staking-banner />
       <main id="assets-top" class="wrapper--main">
         <div class="wrapper--components">
           <div class="page-bg" :style="{ backgroundImage: `url(${bg})` }" />
-
           <slot />
         </div>
       </main>
@@ -28,12 +28,14 @@ import { LOCAL_STORAGE } from 'src/config/localStorage';
 import { useStore } from 'src/store';
 import UnderMaintenanceBanner from 'src/components/header/UnderMaintenanceBanner.vue';
 import DappStakingBanner from 'src/components/header/DappStakingBanner.vue';
+import SnapDeprecatedBanner from 'src/components/header/SnapDeprecatedBanner.vue';
 
 export default defineComponent({
   components: {
     PortalHeader,
     SidebarDesktop,
     DappStakingBanner,
+    SnapDeprecatedBanner,
   },
   setup() {
     const store = useStore();

src/links/index.ts

@@ -16,6 +16,7 @@ export const docsUrl = {
   dappStakingForStakers: 'https://docs.astar.network/docs/use/dapp-staking/for-stakers/',
   dappStakingStaked16Dapps:
     'https://docs.astar.network/docs/learn/dapp-staking/dapp-staking-faq/#q-ive-staked-16-dapps-and-now-i-cant-add-or-move-tokens-and-im-getting-an-error-what-should-i-do',
+  availableWallets: 'https://docs.astar.network/docs/use/get-started/',
 };
 
 export const socialUrl = {