From c7c7b862ec5244ea4eb3a835f936038d1791d0f8 Mon Sep 17 00:00:00 2001
From: Wan <495709+wa0x6e@users.noreply.github.com>
Date: Wed, 11 Dec 2024 02:29:12 +0800
Subject: [PATCH] feat: add flash message introducing v2 (#1028)

* feat: add flash message introducing v2

* fix: add link to old interface

* fix: make back to v1 link less imposing
---
 .../ui/src/components/FlashMessageWelcome.vue | 59 +++++++++++++++++++
 apps/ui/src/components/Layout/App.vue         |  1 +
 2 files changed, 60 insertions(+)
 create mode 100644 apps/ui/src/components/FlashMessageWelcome.vue

diff --git a/apps/ui/src/components/FlashMessageWelcome.vue b/apps/ui/src/components/FlashMessageWelcome.vue
new file mode 100644
index 000000000..a64d2d69b
--- /dev/null
+++ b/apps/ui/src/components/FlashMessageWelcome.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { lsGet, lsSet } from '@/helpers/utils';
+
+const KEY = 'showV2Welcome';
+
+const open = ref(false);
+
+function handleClose() {
+  open.value = false;
+  lsSet(KEY, false);
+}
+
+onMounted(async () => {
+  open.value = lsGet(KEY) ?? true;
+});
+</script>
+
+<template>
+  <div
+    v-if="open"
+    class="fixed bottom-0 right-0 sm:mx-4 sm:mb-4 sm:rounded-lg bg-skin-link text-skin-bg z-[99] blocks-x !bg-left-top sm:max-w-[320px]"
+  >
+    <UiButton
+      class="!text-skin-bg !bg-transparent !border-none absolute top-1 right-1 !px-0 w-[40px] !h-[40px]"
+      @click="handleClose"
+    >
+      <IH-x class="inline-block" />
+    </UiButton>
+    <div class="bg-skin-link/90 sm:rounded-lg p-4">
+      <div class="flex space-x-3">
+        <div class="text-end">
+          <img src="@/assets/snapshot.svg" alt="Snapshot" class="w-[36px]" />
+        </div>
+        <div class="font-bold text-md leading-5">
+          Welcome to the new
+          <div class="font-display text-xl">Snapshot</div>
+        </div>
+      </div>
+      <div class="mt-3 mb-4">
+        Introducing the next evolution of Snapshot, with a brand new interface,
+        support for onchain voting, proposal executions, and many more
+        governance enhancements.
+      </div>
+      <div class="space-y-2 text-center">
+        <UiButton
+          class="w-full"
+          to="https://snapshot.mirror.xyz/0qnfjmE0SFeUykArdi664oO4qFcZUoZTTOd8m7es_Eo"
+          >Learn more</UiButton
+        >
+        <div class="block text-sm">
+          <span class="text-skin-bg/70">Or, go back to the </span>
+          <a to="https://v1.snapshot.box" target="_blank" class="text-skin-bg"
+            >previous interface</a
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/ui/src/components/Layout/App.vue b/apps/ui/src/components/Layout/App.vue
index 3010f5992..212a6c119 100644
--- a/apps/ui/src/components/Layout/App.vue
+++ b/apps/ui/src/components/Layout/App.vue
@@ -222,6 +222,7 @@ router.afterEach(() => {
       @add="handleTransactionAccept"
       @close="handleTransactionReject"
     />
+    <FlashMessageWelcome />
   </div>
 </template>