feat: tag new swaps and networks

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

@@ -2,6 +2,7 @@ import BrowserStorage from "../common/browser-storage";
 import { POPULAR_NAMES } from "../utils/networks";
 import { InternalStorageNamespace } from "@/types/provider";
 import { IState, StorageKeys, NetworkStorageElement } from "./types";
+import { newNetworks, newSwaps } from "@/providers/common/libs/new-features";
 
 class NetworksState {
   private storage: BrowserStorage;
@@ -14,7 +15,7 @@ class NetworksState {
     const networks: NetworkStorageElement[] = POPULAR_NAMES.map((name) => ({
       name,
     }));
-    await this.setState({ networks });
+    await this.setState({ networks, newNetworksVersion: "" });
   }
 
   async setNetworkStatus(
@@ -33,7 +34,7 @@ class NetworksState {
     } else if (!isActive) {
       const idxArr = state.networks.map((_, i) => i);
       const filteredIdx = idxArr
-        .filter((i) => state.networks[i].name !== targetNetwork!.name)
+        .filter((i) => state.networks[i].name !== targetNetwork.name)
         .sort((a, b) => a - b);
       const activeNetworks: NetworkStorageElement[] = [];
       filteredIdx.forEach((i) => activeNetworks.push(state.networks[i]));
@@ -42,16 +43,41 @@ class NetworksState {
     await this.setState(state);
   }
 
-  async getActiveNetworkNames(): Promise<string[]> {
+  async insertNetworksWithNewFeatures(): Promise<void> {
     const state: IState | undefined = await this.getState();
-    if (state && state.networks) {
-      const validNetworks = state.networks.filter((net) => {
-        if ((net as any).isActive === undefined || (net as any).isActive) {
-          return true;
-        }
+    if (
+      state &&
+      state.networks &&
+      state.newNetworksVersion !== process.env.PACKAGE_VERSION
+    ) {
+      let validNetworks = state.networks;
+      const netsWithFeatures = [
+        ...new Set([...newNetworks, ...newSwaps]),
+      ].sort();
+      const filteredNets = netsWithFeatures.filter((n) => {
+        for (const vn of validNetworks) if (vn.name === n) return false;
+        return true;
+      });
+      const fnetworkItem = filteredNets.map((name) => {
+        return {
+          name,
+        };
       });
+      const insertIdx = validNetworks.length > 5 ? 5 : validNetworks.length;
+      validNetworks = validNetworks
+        .slice(0, insertIdx)
+        .concat(fnetworkItem, validNetworks.slice(insertIdx));
       state.networks = validNetworks;
+      state.newNetworksVersion = process.env.PACKAGE_VERSION as string;
       await this.setState(state);
+    }
+  }
+
+  async getActiveNetworkNames(): Promise<string[]> {
+    await this.insertNetworksWithNewFeatures();
+    const state: IState | undefined = await this.getState();
+    if (state && state.networks) {
+      const validNetworks = state.networks;
       return validNetworks.map(({ name }) => name);
     } else {
       await this.setInitialActiveNetworks();
@@ -60,10 +86,14 @@ class NetworksState {
   }
 
   async reorderNetwork(networkNames: string[]): Promise<void> {
+    const state: IState | undefined = await this.getState();
     const activeNetworks: NetworkStorageElement[] = networkNames.map(
-      (name) => ({ name })
+      (name) => ({ name, isActive: true })
     );
-    await this.setState({ networks: activeNetworks });
+    await this.setState({
+      networks: activeNetworks,
+      newNetworksVersion: state.newNetworksVersion,
+    });
   }
 
   async setState(state: IState): Promise<void> {

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

@@ -8,4 +8,5 @@ export interface NetworkStorageElement {
 
 export interface IState {
   networks: NetworkStorageElement[];
+  newNetworksVersion: string;
 }

packages/extension/src/providers/common/libs/new-features.ts

@@ -0,0 +1,6 @@
+import { NetworkNames } from "@enkryptcom/types";
+
+const newNetworks = [NetworkNames.Kadena, NetworkNames.Amplitude];
+const newSwaps = [NetworkNames.MaticZK, NetworkNames.Arbitrum];
+
+export { newNetworks, newSwaps };

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

@@ -3,7 +3,16 @@
     <img ref="imageTag" :src="network.icon" alt="" />
     <span>{{ network.name_long }} </span
     ><test-network-icon v-if="network.isTestNetwork" />
-
+    <span
+      v-if="newNetworks.includes(network.name)"
+      class="tag tag-new tag-sm shimmer"
+      >New</span
+    >
+    <span
+      v-if="newSwaps.includes(network.name)"
+      class="tag tag-swap tag-sm shimmer"
+      >Swap</span
+    >
     <div class="app-menu__link-drag">
       <drag-icon />
     </div>
@@ -15,6 +24,7 @@ import { NodeType } from "@/types/provider";
 import { PropType, ref, watch } from "vue";
 import DragIcon from "@action/icons/common/drag-icon.vue";
 import TestNetworkIcon from "@action/icons/common/test-network-icon.vue";
+import { newNetworks, newSwaps } from "@/providers/common/libs/new-features";
 
 const props = defineProps({
   network: {
@@ -87,7 +97,42 @@ watch(
 
 <style lang="less">
 @import "~@action/styles/theme.less";
+.tag {
+  display: inline-block;
+  padding: 0.2em 0.5em 0.3em;
+  border-radius: 8px;
+  margin: 0.25em 0.1em;
+  margin-left: 0.5em;
+}
+.tag-sm {
+  display: inline-block;
+  letter-spacing: 0.15ch;
+  font-weight: 400;
+}
+.tag-swap {
+  background: #41b883;
+  color: #35495e !important;
+}
+.tag-new {
+  background: #a481d5;
+  color: #fff !important;
+}
+.shimmer {
+  color: grey;
+  display: inline-block;
+  -webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/300%
+    100%;
+  background-repeat: no-repeat;
+  animation: shimmer 2.5s infinite;
+  font-size: 50px;
+  max-width: 200px;
+}
 
+@keyframes shimmer {
+  100% {
+    -webkit-mask-position: left;
+  }
+}
 .app-menu {
   &__link {
     text-decoration: none;