Integrate MR feedbacks

src/components/TimelineOnboarding.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { computed, watch } from 'vue';
 import { useI18n } from '@/composables/useI18n';
 import { useOnboardingChecklist } from '@/composables/useOnboardingChecklist';
-import { lsSet, lsGet } from '@/helpers/utils';
+import { useStorage } from '@vueuse/core';
 
-const { t } = useI18n();
+const props = defineProps<{
+  web3Account: string;
+}>();
 
+const { t } = useI18n();
 const { onboardingChecklist } = useOnboardingChecklist();
 
-const showOnboarding = ref(true);
+const hideOnboarding = useStorage(
+  `snapshot.hideOnboarding.${props.web3Account.slice(0, 8).toLowerCase()}`,
+  false
+);
 
 const checkListCompleted = computed(() => {
   let completed = true;
@@ -23,48 +29,37 @@ const checkListCompleted = computed(() => {
   return completed;
 });
 
-if (lsGet('timelineOnboarding') == 'hidden') {
-  showOnboarding.value = false;
-}
-
 watch(checkListCompleted, completed => {
-  if (completed) lsSet('timelineOnboarding', 'hidden');
+  if (completed) {
+    setTimeout(() => {
+      hideOnboarding.value = true;
+    }, 2000);
+  }
 });
 
 function closeOnboarding() {
-  lsSet('timelineOnboarding', 'hidden');
-  showOnboarding.value = false;
+  hideOnboarding.value = true;
 }
 </script>
 
 <template>
   <transition name="fade">
     <div
-      v-if="showOnboarding"
+      v-if="!hideOnboarding"
       class="border-skin-border bg-skin-block-bg text-white md:rounded-lg md:border"
     >
       <div class="p-4">
         <div class="flex">
           <div class="flex-grow">
-            <h3 class="text-bold">{{ t('onboarding.title') }}</h3>
+            <h3 class="text-bold">
+              {{ t('onboarding.title') }}
+            </h3>
             <p>{{ t('onboarding.subtitle') }}</p>
           </div>
           <div class="mt-2">
-            <button
-              class="opacity-50 transition-opacity hover:opacity-100"
-              :aria-label="t('onboarding.close')"
-              @click="closeOnboarding"
-            >
-              <svg class="h-[24px] w-[24px]" fill="none" viewBox="0 0 12 12">
-                <path
-                  d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
-                  stroke="currentColor"
-                  stroke-width="1"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </button>
+            <BaseButtonIcon @click="closeOnboarding">
+              <i-ho-x class="text-base" />
+            </BaseButtonIcon>
           </div>
         </div>
 

src/locales/default.json

@@ -616,7 +616,6 @@
   "onboarding": {
     "title": "New to Snapshot?",
     "subtitle": "Here is a quick check list to get started:",
-    "close": "Hide onboarding cheklist",
     "profile": "Set your public profile",
     "space": "Join your favorite space",
     "vote": "Cast your first vote",

src/locales/fr-FR.json

@@ -606,7 +606,6 @@
   "onboarding": {
     "title": "Nouveau sur Snapshot ?",
     "subtitle": "Voici une checklist rapide pour commencer :",
-    "close": "Cacher la checklist",
     "profile": "Définir votre profil public",
     "space": "Rejoindre votre espace préféré",
     "vote": "Votre premier vote",

src/views/TimelineView.vue

@@ -177,7 +177,11 @@ function selectState(e) {
         </BaseDropdown>
       </div>
 
-      <TimelineOnboarding class="mb-4" />
+      <TimelineOnboarding
+        v-if="web3Account"
+        class="mb-4"
+        :web3-account="web3Account"
+      />
 
       <div class="border-skin-border bg-skin-block-bg md:rounded-lg md:border">
         <LoadingRow