Created Solana staking banners

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/components/app-menu/components/solana-staking-banner.vue

@@ -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/components/app-menu/index.vue

@@ -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">

packages/extension/src/ui/action/icons/banners/attractive-apr-icon.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.577 4.87832C12.6842 4.47822 13.0955 4.24079 13.4956 4.34799L18.2766 5.62908C18.4688 5.68056 18.6326 5.80626 18.732 5.97853C18.8315 6.15079 18.8585 6.35551 18.807 6.54764L17.5259 11.3287C17.4187 11.7288 17.0074 11.9663 16.6073 11.8591C16.2072 11.7519 15.9698 11.3406 16.077 10.9405L16.8865 7.91948C14.6303 9.30964 12.7541 11.0901 11.2935 13.1222C11.1651 13.3009 10.9646 13.4142 10.7452 13.432C10.5259 13.4498 10.3098 13.3704 10.1542 13.2148L7 10.0607L2.28033 14.7803C1.98744 15.0732 1.51256 15.0732 1.21967 14.7803C0.926777 14.4874 0.926777 14.0126 1.21967 13.7197L6.46967 8.46967C6.76256 8.17677 7.23744 8.17677 7.53033 8.46967L10.6039 11.5433C12.1049 9.63049 13.9633 7.95059 16.1492 6.61196L13.1073 5.79688C12.7072 5.68967 12.4698 5.27842 12.577 4.87832Z" fill="white" fill-opacity="0.7"/>
+  </svg>
+</template>
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>

packages/extension/src/ui/action/icons/banners/consistent-rewards-icon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.7499 10.8176V13.4324C11.1816 13.3527 11.5745 13.2046 11.8876 12.9999C12.3698 12.6846 12.4999 12.352 12.4999 12.125C12.4999 11.898 12.3698 11.5654 11.8876 11.2501C11.5745 11.0454 11.1816 10.8973 10.7499 10.8176Z" fill="white" fill-opacity="0.7"/>
+    <path d="M8.32961 8.61947C8.38337 8.67543 8.44464 8.73053 8.51404 8.78416C8.72197 8.94484 8.97355 9.06777 9.25 9.1469V6.60315C9.17545 6.62449 9.10271 6.64901 9.03215 6.6766C8.98721 6.69417 8.94315 6.71299 8.90007 6.73302C8.75996 6.79816 8.63019 6.87614 8.51404 6.96589C8.13658 7.25757 8 7.59253 8 7.87503C8 8.05887 8.05784 8.26493 8.20228 8.46683C8.23898 8.51812 8.28126 8.56915 8.32961 8.61947Z" fill="white" fill-opacity="0.7"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM9.99994 4C10.4142 4 10.7499 4.33579 10.7499 4.75V5.06584C11.3423 5.17106 11.9182 5.40427 12.4031 5.77893C12.8293 6.10829 13.1467 6.51836 13.3282 6.97896C13.4801 7.36432 13.2908 7.79985 12.9055 7.95174C12.5201 8.10363 12.0846 7.91437 11.9327 7.52901C11.8599 7.34437 11.72 7.14675 11.4859 6.96586C11.278 6.80519 11.0264 6.68225 10.7499 6.60312V9.29944C11.448 9.39233 12.1327 9.61819 12.7085 9.99467C13.4955 10.5093 13.9999 11.2644 13.9999 12.125C13.9999 12.9856 13.4955 13.7407 12.7085 14.2553C12.1327 14.6318 11.448 14.8577 10.7499 14.9506V15.25C10.7499 15.6642 10.4142 16 9.99994 16C9.58573 16 9.24994 15.6642 9.24994 15.25V14.9506C8.55186 14.8577 7.8672 14.6318 7.29141 14.2553C6.80887 13.9398 6.4337 13.5376 6.21337 13.0672C6.0377 12.692 6.19937 12.2455 6.57449 12.0699C6.9496 11.8942 7.39611 12.0559 7.57178 12.431C7.65258 12.6035 7.81692 12.8067 8.11229 12.9999C8.42537 13.2046 8.8183 13.3526 9.24994 13.4324V10.6842C8.65762 10.5789 8.08167 10.3457 7.59681 9.97107C6.90033 9.43288 6.49994 8.68017 6.49994 7.875C6.49994 7.06983 6.90034 6.31712 7.59681 5.77893C8.08167 5.40427 8.65762 5.17106 9.24994 5.06584V4.75C9.24994 4.33579 9.58573 4 9.99994 4Z" fill="white" fill-opacity="0.7"/>
+  </svg>
+</template>
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>

packages/extension/src/ui/action/icons/common/close-icon-white.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M26.3 13.71C25.91 13.32 25.28 13.32 24.89 13.71L20 18.59L15.11 13.7C14.72 13.31 14.09 13.31 13.7 13.7C13.31 14.09 13.31 14.72 13.7 15.11L18.59 20L13.7 24.89C13.31 25.28 13.31 25.91 13.7 26.3C14.09 26.69 14.72 26.69 15.11 26.3L20 21.41L24.89 26.3C25.28 26.69 25.91 26.69 26.3 26.3C26.69 25.91 26.69 25.28 26.3 24.89L21.41 20L26.3 15.11C26.68 14.73 26.68 14.09 26.3 13.71Z"
+      fill="white"
+      fill-opacity="0.70"
+    />
+  </svg>
+</template>
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>