Merge pull request #708 from enkryptcom/feature/solana-staking-banner

Created Solana staking banners

Author: kvhnuke

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

@@ -0,0 +1,55 @@
+import BrowserStorage from '../common/browser-storage';
+import { InternalStorageNamespace } from '@/types/provider';
+import { StorageKeys, IState } from './types';
+
+export default class BannersState {
+  private storage: BrowserStorage;
+
+  constructor() {
+    this.storage = new BrowserStorage(InternalStorageNamespace.bannersState);
+  }
+
+  private async getOrInitializeState(): Promise<IState> {
+    const state: IState | undefined = await this.storage.get(
+      StorageKeys.bannersInfo,
+    );
+    if (state) {
+      return state;
+    }
+    const newState: IState = {
+      isHideSolanStakingBanner: false,
+      isHideNetworkAssetSolanStakingBanner: false,
+    };
+    await this.storage.set(StorageKeys.bannersInfo, newState);
+    return newState;
+  }
+
+  async resetBanners(): Promise<void> {
+    const state = await this.getOrInitializeState();
+    state.isHideNetworkAssetSolanStakingBanner = false;
+    state.isHideSolanStakingBanner = false;
+    await this.storage.set(StorageKeys.bannersInfo, state);
+  }
+
+  async showSolanaStakingBanner(): Promise<boolean> {
+    const state = await this.getOrInitializeState();
+    return !state.isHideSolanStakingBanner;
+  }
+
+  async showNetworkAssetsSolanaStakingBanner(): Promise<boolean> {
+    const state = await this.getOrInitializeState();
+    return !state.isHideNetworkAssetSolanStakingBanner;
+  }
+
+  async hideNetworkAssetsSolanaStakingBanner() {
+    const state = await this.getOrInitializeState();
+    state.isHideNetworkAssetSolanStakingBanner = true;
+    await this.storage.set(StorageKeys.bannersInfo, state);
+  }
+
+  async hideSolanaStakingBanner() {
+    const state = await this.getOrInitializeState();
+    state.isHideSolanStakingBanner = true;
+    this.storage.set(StorageKeys.bannersInfo, state);
+  }
+}

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

@@ -0,0 +1,8 @@
+export enum StorageKeys {
+  bannersInfo = 'banners-info',
+}
+
+export type IState = {
+  isHideSolanStakingBanner: boolean;
+  isHideNetworkAssetSolanStakingBanner: boolean;
+};

packages/extension/src/libs/metrics/index.ts

@@ -12,7 +12,8 @@ import {
   SettingEventType,
   SwapEventType,
   UpdatesEventType,
-  UpdatesOpenLocation
+  UpdatesOpenLocation,
+  SolanaStakingBannerEvents,
 } from './types';
 
 const metrics = new Metrics();
@@ -25,19 +26,19 @@ const trackNetwork = (
   event: NetworkChangeEvents,
   options: {
     provider?: ProviderName;
-    network?: NetworkNames,
-    networkTab?: string,
-    networkType?: NetworkType,
-    isPinned?: boolean,
-    sortOption?: string,
-    customRpcUrl?: string,
-    customNetworkName?: string,
-    customNetworkNameLong?: string,
-    customNetworkCurrency?: string,
-    customNetworkCurrencyLong?: string,
-    customChainId?: string,
-    customBlockExplorerUrlTx?: string
-    customBlockExplorerUrlAddr?: string
+    network?: NetworkNames;
+    networkTab?: string;
+    networkType?: NetworkType;
+    isPinned?: boolean;
+    sortOption?: string;
+    customRpcUrl?: string;
+    customNetworkName?: string;
+    customNetworkNameLong?: string;
+    customNetworkCurrency?: string;
+    customNetworkCurrencyLong?: string;
+    customChainId?: string;
+    customBlockExplorerUrlTx?: string;
+    customBlockExplorerUrlAddr?: string;
   },
 ) => {
   metrics.track('network', { event, ...options });
@@ -93,14 +94,16 @@ const trackDAppsEvents = (
   metrics.track('dapps', { event, ...options });
 };
 
-const trackUpdatesEvents = (event: UpdatesEventType, options: {
-  network: NetworkNames;
-  location?: UpdatesOpenLocation;
-  duration?: number;
-}): void => {
+const trackUpdatesEvents = (
+  event: UpdatesEventType,
+  options: {
+    network: NetworkNames;
+    location?: UpdatesOpenLocation;
+    duration?: number;
+  },
+): void => {
   metrics.track('updatesClick', { event, ...options });
-
-}
+};
 const optOutofMetrics = (optOut: boolean) => {
   if (!__IS_FIREFOX__) {
     metrics.setOptOut(false);
@@ -112,6 +115,10 @@ const optOutofMetrics = (optOut: boolean) => {
   metrics.setOptOut(optOut);
 };
 
+const trackSolanaStakingBanner = (event: SolanaStakingBannerEvents) => {
+  metrics.track('solStakingBanner', { event });
+};
+
 export {
   trackNetwork,
   trackSwapEvents,
@@ -121,5 +128,6 @@ export {
   trackDAppsEvents,
   optOutofMetrics,
   trackGenericEvents,
-  trackUpdatesEvents
+  trackUpdatesEvents,
+  trackSolanaStakingBanner,
 };

packages/extension/src/libs/metrics/types.ts

@@ -69,5 +69,10 @@ export enum UpdatesEventType {
 
 export enum UpdatesOpenLocation {
   settings = 'settings',
-  logo = "logo",
+  logo = 'logo',
+}
+
+export enum SolanaStakingBannerEvents {
+  SolanaWalletClicked = 'sol_staking_banner.solana_wallet.clicked',
+  NetworkListClicked = 'sol_staking_banner.network_list.clicked',
 }

packages/extension/src/types/provider.ts

@@ -55,6 +55,7 @@ export enum InternalStorageNamespace {
   updatesState = 'UpdatesState',
   backupState = 'BackupState',
   menuState = 'MenuState',
+  bannersState = 'BannersState',
 }
 export enum EnkryptProviderEventMethods {
   persistentEvents = 'PersistentEvents',
@@ -132,7 +133,7 @@ export abstract class BackgroundProviderInterface extends EventEmitter {
 export abstract class ProviderAPIInterface {
   abstract node: string;
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  constructor(node: string, options?: unknown) { }
+  constructor(node: string, options?: unknown) {}
   abstract init(): Promise<void>;
   abstract getBalance(address: string): Promise<string>;
   abstract getTransactionStatus(

packages/extension/src/ui/action/assets/banners/solana-stacking-banner-bg.png

@@ -0,0 +1,119 @@
+<template>
+  <div class="solana-stacking-banner">
+    <img src="@action/assets/banners/solana-stacking-banner.png" alt="" />
+
+    <div class="solana-stacking-banner__content">
+      <enkrypt-staking-logo />
+      <h5>Put your SOL to work — safely & easily.</h5>
+      <a href="javascript:void(0);" @click="openStakingLink" class="button"
+        ><span>Start Staking Now</span></a
+      >
+    </div>
+
+    <a class="solana-stacking-banner__close" @click="close">
+      <close-icon />
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import CloseIcon from '@action/icons/common/close-icon.vue';
+import EnkryptStakingLogo from '@action/icons/common/enkrypt-staking-logo.vue';
+import { trackSolanaStakingBanner } from '@/libs/metrics';
+import { openLink } from '@action/utils/browser';
+import { SolanaStakingBannerEvents } from '@/libs/metrics/types';
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+const close = () => {
+  emit('close');
+};
+const openStakingLink = async () => {
+  trackSolanaStakingBanner(SolanaStakingBannerEvents.SolanaWalletClicked);
+  setTimeout(() => {
+    openLink('https://staking.enkrypt.com');
+  }, 1000);
+};
+</script>
+
+<style lang="less">
+@import '@action/styles/theme.less';
+
+.solana-stacking-banner {
+  position: absolute;
+  width: 324px;
+  height: 128px;
+  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: 0 129px 0 12px;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  img {
+    height: 128px;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  &__content {
+    padding: 8px 0 0 0;
+
+    svg {
+      margin-bottom: 4px;
+    }
+
+    h5 {
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 20px;
+      /* 125% */
+      letter-spacing: 0.15px;
+      color: @primaryLabel;
+      margin: 0 0 8px 0;
+      background: linear-gradient(to left, #14f195, #64abf2, #9945ff);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .button {
+      text-decoration: none;
+      width: auto;
+      width: 163px;
+      height: 32px;
+      font-size: 12px;
+      line-height: 32px;
+    }
+  }
+
+  &__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/assets/banners/solana-stacking-banner-tokens-img.png

@@ -156,6 +156,12 @@
         </div>
       </div>
     </div>
+
+    <!-- Banners -->
+    <solana-staking-banner
+      v-if="isSolanaStackingBanner"
+      @close="closeSolanaStackingBanner"
+    />
   </div>
 </template>
 
@@ -199,6 +205,8 @@ import { storeToRefs } from 'pinia';
 import { onClickOutside } from '@vueuse/core';
 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';
 
 const appMenuRef = ref(null);
 
@@ -260,6 +268,9 @@ onMounted(async () => {
   newNetworksWithTags.value.swap = newSwaps.filter(
     net => !usedNetworks.swap.includes(net),
   );
+  // if (await bannersState.showSolanaStakingBanner()) {
+  //   isSolanaStackingBanner.value = true;
+  // }
 });
 
 /** -------------------
@@ -526,6 +537,17 @@ const updateGradient = (newGradient: string) => {
     (appMenuRef.value as HTMLElement).style.background =
       `radial-gradient(137.35% 97% at 100% 50%, rgba(250, 250, 250, 0.94) 0%, rgba(250, 250, 250, 0.96) 28.91%, rgba(250, 250, 250, 0.98) 100%), linear-gradient(180deg, ${newGradient} 80%, #684CFF 100%)`;
 };
+
+/** ------------------
+ * Banners
+ ------------------*/
+const isSolanaStackingBanner = ref(false);
+const bannersState = new BannersState();
+
+const closeSolanaStackingBanner = () => {
+  isSolanaStackingBanner.value = false;
+  bannersState.hideSolanaStakingBanner();
+};
 </script>
 
 <style lang="less">