devop: merge

Author: kvhnuke

packages/extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enkryptcom/extension",
-  "version": "2.11.1",
+  "version": "2.12.0",
   "private": true,
   "type": "module",
   "scripts": {

packages/extension/src/libs/banners-state/index.ts

@@ -19,6 +19,7 @@ export default class BannersState {
     const newState: IState = {
       isHideSolanStakingBanner: false,
       isHideNetworkAssetSolanStakingBanner: false,
+      isHideSurveyPopup: false,
     };
     await this.storage.set(StorageKeys.bannersInfo, newState);
     return newState;
@@ -28,6 +29,7 @@ export default class BannersState {
     const state = await this.getOrInitializeState();
     state.isHideNetworkAssetSolanStakingBanner = false;
     state.isHideSolanStakingBanner = false;
+    state.isHideSurveyPopup = false;
     await this.storage.set(StorageKeys.bannersInfo, state);
   }
 
@@ -52,4 +54,15 @@ export default class BannersState {
     state.isHideSolanStakingBanner = true;
     await this.storage.set(StorageKeys.bannersInfo, state);
   }
+
+  async showSurveyPopup(): Promise<boolean> {
+    const state = await this.getOrInitializeState();
+    return !state.isHideSurveyPopup;
+  }
+
+  async hideSurveyPopup() {
+    const state = await this.getOrInitializeState();
+    state.isHideSurveyPopup = true;
+    await this.storage.set(StorageKeys.bannersInfo, state);
+  }
 }

packages/extension/src/libs/banners-state/types.ts

@@ -5,4 +5,5 @@ export enum StorageKeys {
 export type IState = {
   isHideSolanStakingBanner: boolean;
   isHideNetworkAssetSolanStakingBanner: boolean;
+  isHideSurveyPopup: boolean;
 };

packages/extension/src/ui/action/components/app-menu/components/solana-staking-banner.vue

@@ -31,7 +31,7 @@ const close = () => {
   emit('close');
 };
 const openStakingLink = async () => {
-  trackSolanaStakingBanner(SolanaStakingBannerEvents.SolanaWalletClicked);
+  trackSolanaStakingBanner(SolanaStakingBannerEvents.NetworkListClicked);
   setTimeout(() => {
     openLink('https://staking.enkrypt.com');
   }, 1000);

packages/extension/src/ui/action/components/app-menu/components/survey-popup.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="survey-popup">
+    <div class="survey-popup__content">
+      <h5>Help us improve Enkrypt</h5>
+      <p>Please take a quick survey. We appreciate you!</p>
+      <a href="javascript:void(0);" @click="openSurveyLink" class="button"
+        ><span>Click here</span></a
+      >
+    </div>
+
+    <a class="survey-popup__close" @click="close">
+      <close-icon />
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import CloseIcon from '@action/icons/common/close-icon.vue';
+import { openLink } from '@action/utils/browser';
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+const close = () => {
+  emit('close');
+};
+const openSurveyLink = async () => {
+  openLink('https://tally.so/r/nGMpdL');
+  close();
+};
+</script>
+
+<style lang="less">
+@import '@action/styles/theme.less';
+
+.survey-popup {
+  position: absolute;
+  width: 324px;
+  left: 8px;
+  bottom: 8px;
+  background: #ffffff;
+  box-shadow:
+    0px 8px 16px -6px rgba(0, 0, 0, 0.12),
+    0px 6px 8px -6px rgba(0, 0, 0, 0.12);
+  border-radius: 12px;
+  padding: 12px;
+  box-sizing: border-box;
+  overflow: hidden;
+  z-index: 2;
+
+  &__content {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    h5 {
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 20px;
+      text-align: center;
+      /* 125% */
+      letter-spacing: 0.15px;
+      color: @primaryLabel;
+      margin: 0;
+      background: linear-gradient(to left, #14f195, #64abf2, #9945ff);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    p {
+      text-align: center;
+    }
+
+    .button {
+      text-decoration: none;
+      width: auto;
+      width: 163px;
+      height: 32px;
+      font-size: 12px;
+      line-height: 32px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+    transition: opacity 300ms ease-in-out;
+    opacity: 1;
+    font-size: 0;
+    width: 32px;
+    height: 32px;
+
+    svg {
+      width: 32px;
+      height: 32px;
+    }
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+}
+</style>

packages/extension/src/ui/action/components/app-menu/index.vue

@@ -158,10 +158,19 @@
     </div>
 
     <!-- Banners -->
-    <solana-staking-banner
-      v-if="isSolanaStakingBanner && isExpanded"
-      @close="closeSolanaStakingBanner"
-    />
+    <Transition name="slide-fade">
+      <solana-staking-banner
+        v-if="isSolanaStakingBanner && isExpanded"
+        key="solana-banner"
+        @close="closeSolanaStakingBanner"
+      />
+
+      <survey-popup
+        v-else-if="isSurveyPopup && isExpanded"
+        key="survey-popup"
+        @close="closeSurveyPopup"
+      />
+    </Transition>
   </div>
 </template>
 
@@ -207,6 +216,7 @@ import SearchIcon from '@action/icons/common/search.vue';
 import { useMenuStore } from '@action/store/menu-store';
 import SolanaStakingBanner from './components/solana-staking-banner.vue';
 import BannersState from '@/libs/banners-state';
+import SurveyPopup from './components/survey-popup.vue';
 
 const appMenuRef = ref(null);
 
@@ -268,8 +278,9 @@ onMounted(async () => {
   newNetworksWithTags.value.swap = newSwaps.filter(
     net => !usedNetworks.swap.includes(net),
   );
-  if (await bannersState.showSolanaStakingBanner()) {
-    isSolanaStakingBanner.value = true;
+  isSolanaStakingBanner.value = await bannersState.showSolanaStakingBanner();
+  if (!isSolanaStakingBanner.value) {
+    openSurveyPopup();
   }
 });
 
@@ -542,17 +553,47 @@ const updateGradient = (newGradient: string) => {
  * Banners
  ------------------*/
 const isSolanaStakingBanner = ref(false);
+const isSurveyPopup = ref(false);
+
 const bannersState = new BannersState();
 
+const openSurveyPopup = async () => {
+  if (await bannersState.showSurveyPopup()) {
+    setTimeout(() => {
+      isSurveyPopup.value = true;
+    }, 4000);
+  }
+};
+
+const closeSurveyPopup = () => {
+  isSurveyPopup.value = false;
+  bannersState.hideSurveyPopup();
+};
+
 const closeSolanaStakingBanner = () => {
   isSolanaStakingBanner.value = false;
   bannersState.hideSolanaStakingBanner();
+  openSurveyPopup();
 };
 </script>
 
 <style lang="less">
 @import '@action/styles/theme.less';
 
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
+
 .expand-menu {
   width: 340px;
 }