feat: Show v2 banner (#4885)

* feat: Show v2 banner * style: improve sentence and style --------- Co-authored-by: less <[email protected]>
snapshot-labs · Sep 20, 2024 · 2176caa · 2176caa
1 parent 713b375
commit 2176caa
Showing 1 changed file with 25 additions and 0 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useStorage } from '@vueuse/core';
+
 const { domain, init, isReady, showSidebar } = useApp();
 const route = useRoute();
 const { restorePendingTransactions } = useTxStatus();
@@ -7,6 +9,11 @@ onMounted(async () => {
   await init();
   restorePendingTransactions();
 });
+const bannerClosed = useStorage('snapshot.v2-banner-closed', false);
+const showBanner = computed(() => {
+  const showInPages = ['home', 'timeline'];
+  return showInPages.includes(route.name as string) && !bannerClosed.value;
+});
 </script>
 
 <template>
@@ -34,6 +41,24 @@ onMounted(async () => {
       >
         <TheNavbar />
       </div>
+      <div
+        v-if="showBanner"
+        class="relative flex items-center justify-center gap-2 mb-2 bg-skin-border px-4 py-[10px]"
+      >
+        <a
+          class="flex gap-2"
+          target="_blank"
+          href="https://snapshot.box/#/home"
+        >
+          <i-ho-speakerphone class="shrink-0" />
+          <div class="leading-6">
+            Snapshot v2 is here! Experience our new and improved interface now.
+          </div>
+        </a>
+        <button class="xs:absolute xs:right-3" @click="bannerClosed = true">
+          <i-ho-x />
+        </button>
+      </div>
       <div id="content" class="pb-6 pt-4">
         <router-view v-slot="{ Component }">
           <KeepAlive :include="['ExploreView', 'RankingView']">