From 4aee9c3111a33b570a43002f3340dc99a40d9089 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Thu, 21 Nov 2024 10:21:02 -0800
Subject: [PATCH 01/10] devop: start renames

---
 packages/extension/src/ui/action/App.vue                    | 6 +++---
 .../ui/action/views/add-network/views/add-network-list.vue  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
index a251d0b00..357d16c40 100644
--- a/packages/extension/src/ui/action/App.vue
+++ b/packages/extension/src/ui/action/App.vue
@@ -12,8 +12,8 @@
             <more-icon />
           </a>
           <div v-show="isOpenMore" ref="dropdown" class="app__menu-dropdown">
-            <a class="app__menu-dropdown-link" @click="customNetworksAction">
-              <manage-networks-icon /> <span>Custom networks</span>
+            <a class="app__menu-dropdown-link" @click="otherNetworksAction">
+              <manage-networks-icon /> <span>Other networks</span>
             </a>
             <a class="app__menu-dropdown-link" @click="lockAction">
               <hold-icon /> <span>Lock Enkrypt</span>
@@ -535,7 +535,7 @@ const settingsAction = () => {
   closeMoreMenu();
   settingsShow.value = !settingsShow.value;
 };
-const customNetworksAction = () => {
+const otherNetworksAction = () => {
   closeMoreMenu();
   addNetworkShow.value = !addNetworkShow.value;
 };
diff --git a/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue b/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
index c65031c57..f51aa286b 100644
--- a/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
+++ b/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
@@ -4,7 +4,7 @@
       class="add-network__header"
       :class="{ border: isHasScroll() && scrollProgress > 0 }"
     >
-      <h3>Manage networks</h3>
+      <h3>Custom Networks & Testnets</h3>
 
       <a class="add-network__close" @click="close">
         <close-icon />

From 8b22f8b98aef9477a9530d3a403603e9d2b707c5 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Fri, 22 Nov 2024 10:41:59 -0800
Subject: [PATCH 02/10] devop: minor changes

---
 .../views/add-network/components/add-network-search.vue  | 9 +++++----
 .../action/views/add-network/views/add-network-list.vue  | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue b/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue
index 085457d2b..580808a1a 100644
--- a/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue
+++ b/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue
@@ -6,10 +6,11 @@
     <div ref="tooltip" class="add-network__search-wrap">
       <div class="add-network__search-add">
         <a @click="action">
-          <slider-icon />
+          <new-icon />
         </a>
       </div>
-      <div v-show="openList" class="add-network__search-list">
+
+      <!-- <div v-show="openList" class="add-network__search-list">
         <a
           class="add-network__search-list-item"
           @click="$emit('action:customNetwork')"
@@ -23,7 +24,7 @@
             @update:check="$emit('toggle:testNetworks')"
           />
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -31,7 +32,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import BaseSearch from '@action/components/base-search/index.vue';
-import SliderIcon from '@action/icons/common/slider-icon.vue';
+import NewIcon from '@action/icons/common/add-icon.vue';
 import TestNetworkIcon from '@action/icons/common/test-network-icon.vue';
 import CustomNetworkIcon from '@action/icons/common/custom-network-icon.vue';
 import Switch from '@action/components/switch/index.vue';
diff --git a/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue b/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
index f51aa286b..c0ca924e4 100644
--- a/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
+++ b/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
@@ -4,7 +4,7 @@
       class="add-network__header"
       :class="{ border: isHasScroll() && scrollProgress > 0 }"
     >
-      <h3>Custom Networks & Testnets</h3>
+      <h3>Testnets & custom networks</h3>
 
       <a class="add-network__close" @click="close">
         <close-icon />
@@ -35,7 +35,7 @@
           @network-toggled="onToggle"
         />
       </div>
-      <h3 class="add-network__list-header">All networks</h3>
+      <h3 class="add-network__list-header">Test networks</h3>
       <add-network-item
         v-for="item in searchAllNetworks"
         :key="item.name"

From 5fb68761a35cf6fd416a8874f2f27ee004a3e7ef Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Tue, 26 Nov 2024 11:18:50 -0800
Subject: [PATCH 03/10] feat: change filters and display, update on delete
 custom

---
 .../src/libs/networks-state/index.ts          |  10 ++
 packages/extension/src/libs/utils/networks.ts |  12 +-
 .../components/add-network-search.vue         |  39 +-----
 .../src/ui/action/views/add-network/index.vue |   1 +
 .../add-network/views/add-network-list.vue    | 125 ++++++++++--------
 5 files changed, 88 insertions(+), 99 deletions(-)

diff --git a/packages/extension/src/libs/networks-state/index.ts b/packages/extension/src/libs/networks-state/index.ts
index 516f7c7ca..c3b19a58b 100644
--- a/packages/extension/src/libs/networks-state/index.ts
+++ b/packages/extension/src/libs/networks-state/index.ts
@@ -44,6 +44,16 @@ class NetworksState {
     await this.setState(state);
   }
 
+  /**
+   * Inserts networks with new features.
+   *
+   * This method first retrieves the current state and checks if the networks
+   * have been updated to the latest version. If the state and networks are defined,
+   * it filters out the networks that are not in the predefined list of networks with new features.
+   * It then maps the filtered networks to a new network item and inserts them into the valid networks.
+   * The new networks are inserted at the 6th index, or at the end if there are fewer than 6 networks.
+   * The state is then updated with the new networks and the latest version.
+   */
   async insertNetworksWithNewFeatures(): Promise<void> {
     const state: IState | undefined = await this.getState();
     if (
diff --git a/packages/extension/src/libs/utils/networks.ts b/packages/extension/src/libs/utils/networks.ts
index 9afe2f2eb..6bbe422bc 100644
--- a/packages/extension/src/libs/utils/networks.ts
+++ b/packages/extension/src/libs/utils/networks.ts
@@ -22,19 +22,21 @@ const providerNetworks: Record<ProviderName, Record<string, BaseNetwork>> = {
   [ProviderName.solana]: SolanaNetworks,
   [ProviderName.enkrypt]: {},
 };
-const getAllNetworks = async (): Promise<BaseNetwork[]> => {
+const getAllNetworks = async (includeCustom: boolean = true): Promise<BaseNetwork[]> => {
   const customNetworksState = new CustomNetworksState();
 
   const customNetworks = (
     await customNetworksState.getAllCustomEVMNetworks()
   ).map(options => new CustomEvmNetwork(options));
-
-  return (Object.values(EthereumNetworks) as BaseNetwork[])
+  const allNetworks = (Object.values(EthereumNetworks) as BaseNetwork[])
     .concat(Object.values(PolkadotNetworks) as BaseNetwork[])
     .concat(Object.values(BitcoinNetworks) as BaseNetwork[])
     .concat(Object.values(KadenaNetworks) as BaseNetwork[])
-    .concat(Object.values(SolanaNetworks) as BaseNetwork[])
-    .concat(customNetworks);
+    .concat(Object.values(SolanaNetworks) as BaseNetwork[]);
+  if (!includeCustom) {
+    return allNetworks
+  }
+  return allNetworks.concat(customNetworks);
 };
 const getNetworkByName = async (
   name: string,
diff --git a/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue b/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue
index 580808a1a..c5787522b 100644
--- a/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue
+++ b/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue
@@ -5,26 +5,10 @@
     </div>
     <div ref="tooltip" class="add-network__search-wrap">
       <div class="add-network__search-add">
-        <a @click="action">
-          <new-icon />
+        <a @click="$emit('action:customNetwork')">
+          <add-icon />
         </a>
       </div>
-
-      <!-- <div v-show="openList" class="add-network__search-list">
-        <a
-          class="add-network__search-list-item"
-          @click="$emit('action:customNetwork')"
-        >
-          <custom-network-icon /><span>Custom network</span>
-        </a>
-        <div class="add-network__search-list-item">
-          <test-network-icon /><span>Show testnets</span>
-          <Switch
-            :is-checked="false"
-            @update:check="$emit('toggle:testNetworks')"
-          />
-        </div>
-      </div> -->
     </div>
   </div>
 </template>
@@ -32,10 +16,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import BaseSearch from '@action/components/base-search/index.vue';
-import NewIcon from '@action/icons/common/add-icon.vue';
-import TestNetworkIcon from '@action/icons/common/test-network-icon.vue';
-import CustomNetworkIcon from '@action/icons/common/custom-network-icon.vue';
-import Switch from '@action/components/switch/index.vue';
+import AddIcon from '@action/icons/common/add-icon.vue';
 import { onClickOutside } from '@vueuse/core';
 
 const openList = ref(false);
@@ -49,23 +30,9 @@ defineProps({
   },
 });
 defineEmits<{
-  (e: 'toggle:testNetworks'): void;
   (e: 'action:customNetwork'): void;
 }>();
 
-const action = () => {
-  switch (openList.value) {
-    case false:
-      openList.value = true;
-      break;
-    case true:
-      openList.value = false;
-      break;
-    default:
-      console.error('No status for openList');
-  }
-};
-
 onClickOutside(tooltip, () => {
   if (openList.value) openList.value = false;
 });
diff --git a/packages/extension/src/ui/action/views/add-network/index.vue b/packages/extension/src/ui/action/views/add-network/index.vue
index 1d8dc8f7c..2495739ca 100644
--- a/packages/extension/src/ui/action/views/add-network/index.vue
+++ b/packages/extension/src/ui/action/views/add-network/index.vue
@@ -30,6 +30,7 @@ const setActiveNetworks = () => {
 };
 
 const closePopup = () => {
+  isNetworkList.value = true;
   emit('close:popup');
 };
 
diff --git a/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue b/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
index c0ca924e4..a2e1b4fb7 100644
--- a/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
+++ b/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
@@ -20,34 +20,38 @@
       <add-network-search
         :value="searchInput"
         @update:value="updateSearch"
-        @toggle:test-networks="onTestNetCheck"
         @action:custom-network="toCustom"
       />
-
       <div v-if="searchInput === ''">
-        <h3 class="add-network__list-header">Popular</h3>
+        <h3 class="add-network__list-header">My custom networks</h3>
+        <div v-if="hasCustomNetworks">
+          <add-network-item
+            v-for="(item, index) in allCustomNetworks"
+            :key="index"
+            :network="item"
+            :is-active="item.isActive"
+            :is-custom-network="true"
+            @network-toggled="onToggle"
+            @network-deleted="onNetworkDeleted"
+          />
+        </div>
+        <div v-else class="add-network__no-custom-networks">
+          You can add your own custom networks. <br />
+          Just press the + button above.
+        </div>
+        <h3 class="add-network__list-header">Test networks</h3>
         <add-network-item
-          v-for="(item, index) in popular"
-          :key="index"
+          v-for="item in searchAllNetworks"
+          :key="item.name"
           :network="item"
           :is-active="item.isActive"
-          :show-tooltip="!hasMoreThanOneActiveNetwork"
+          :is-custom-network="
+            (item as unknown as CustomEvmNetwork).isCustomNetwork
+          "
           @network-toggled="onToggle"
+          @network-deleted="onNetworkDeleted"
         />
       </div>
-      <h3 class="add-network__list-header">Test networks</h3>
-      <add-network-item
-        v-for="item in searchAllNetworks"
-        :key="item.name"
-        :network="item"
-        :is-active="item.isActive"
-        :is-custom-network="
-          (item as unknown as CustomEvmNetwork).isCustomNetwork
-        "
-        :show-tooltip="!hasMoreThanOneActiveNetwork"
-        @network-toggled="onToggle"
-        @network-deleted="onNetworkDeleted"
-      />
     </custom-scrollbar>
   </div>
 </template>
@@ -59,12 +63,16 @@ import AddNetworkSearch from '../components/add-network-search.vue';
 import AddNetworkItem from '../components/add-network-item.vue';
 import CustomScrollbar from '@action/components/custom-scrollbar/index.vue';
 import { NodeType } from '@/types/provider';
-import { getAllNetworks, POPULAR_NAMES } from '@/libs/utils/networks';
+import { getAllNetworks } from '@/libs/utils/networks';
 import NetworksState from '@/libs/networks-state';
+import CustomNetworksState from '@/libs/custom-networks-state';
 import scrollSettings from '@/libs/utils/scroll-settings';
 import { computed } from 'vue';
-import { CustomEvmNetwork } from '@/providers/ethereum/types/custom-evm-network';
-import CustomNetworksState from '@/libs/custom-networks-state';
+import {
+  CustomEvmNetwork,
+  CustomEvmNetworkOptions,
+} from '@/providers/ethereum/types/custom-evm-network';
+import { BaseNetwork } from '@/types/base-network';
 
 interface NodeTypesWithActive extends NodeType {
   isActive: boolean;
@@ -74,13 +82,14 @@ const emit = defineEmits<{
 }>();
 
 const networksState = new NetworksState();
+const customNetworksState = new CustomNetworksState();
 const searchInput = ref('');
-const all = ref<Array<NodeTypesWithActive>>([]);
-const popular = ref<Array<NodeTypesWithActive>>([]);
+const allTestNets = ref<Array<NodeTypesWithActive>>([]);
 const scrollProgress = ref(0);
 const manageNetworkScrollRef = ref<ComponentPublicInstance<HTMLElement>>();
 const showTestNets = ref(false);
 const hasMoreThanOneActiveNetwork = ref(false);
+const allCustomNetworks = ref<CustomEvmNetwork[]>([]);
 
 defineExpose({ manageNetworkScrollRef });
 
@@ -98,7 +107,7 @@ defineProps({
 const getAllNetworksAndStatus = async () => {
   const activeNetworks = await networksState.getPinnedNetworkNames();
 
-  const allNetworks = (await getAllNetworks()).map(net => {
+  const allNetworks = (await getAllNetworks(false)).map(net => {
     return {
       ...net,
       isActive: activeNetworks.includes(net.name),
@@ -109,67 +118,61 @@ const getAllNetworksAndStatus = async () => {
 };
 
 const searchAllNetworks = computed(() => {
-  return all.value.filter(a =>
+  return allTestNets.value.filter(a =>
     a.name_long.toLowerCase().startsWith(searchInput.value.toLowerCase()),
   );
 });
 
-const setNetworkLists = async (isTestActive: boolean) => {
-  const allNetworksNotTestNets = (await getAllNetworksAndStatus())
-    .filter(({ isTestNetwork }) => !isTestNetwork || isTestActive)
-    .sort((a, b) => a.name_long.localeCompare(b.name_long));
+const hasCustomNetworks = computed(() => {
+  return allCustomNetworks.value.length > 0;
+});
 
-  const popularNetworks = allNetworksNotTestNets
-    .filter(net => POPULAR_NAMES.includes(net.name))
+const setNetworkLists = async () => {
+  const activeNetworks = await networksState.getPinnedNetworkNames();
+  const customs = await customNetworksState.getAllCustomEVMNetworks();
+  const customNetworks = customs.map(options => {
+    const newCustomNetwork = new CustomEvmNetwork(options);
+    return {
+      ...newCustomNetwork,
+      isActive: activeNetworks.includes(newCustomNetwork.name),
+    };
+  });
+  const networks = await getAllNetworksAndStatus();
+  const allNetworksTestNets = networks
+    .filter(({ isTestNetwork }) => isTestNetwork)
     .sort((a, b) => a.name_long.localeCompare(b.name_long));
 
-  all.value = allNetworksNotTestNets;
-  hasMoreThanOneActiveNetwork.value =
-    all.value.filter(net => net.isActive).length > 1;
-  popular.value = popularNetworks;
+  allTestNets.value = allNetworksTestNets;
+  allCustomNetworks.value = customNetworks;
 };
 
 onBeforeMount(async () => {
-  await setNetworkLists(showTestNets.value);
+  await setNetworkLists();
 });
 
-const onTestNetCheck = async () => {
-  showTestNets.value = !showTestNets.value;
-  await setNetworkLists(showTestNets.value);
-};
-
 const onToggle = async (networkName: string, isActive: boolean) => {
   try {
-    let _isActive = isActive;
-    if (!hasMoreThanOneActiveNetwork.value && !isActive) {
-      _isActive = true;
-    }
-    await networksState.setNetworkStatus(networkName, _isActive);
+    await networksState.setNetworkStatus(networkName, isActive);
     emit('update:activeNetworks');
-    all.value = all.value.map(network => {
+    allTestNets.value = allTestNets.value.map(network => {
       if (network.name === networkName) {
-        network.isActive = _isActive;
+        network.isActive = isActive;
       }
 
       return network;
     });
-    hasMoreThanOneActiveNetwork.value =
-      all.value.filter(net => net.isActive).length > 1;
-    popular.value = all.value.filter(({ name }) =>
-      POPULAR_NAMES.includes(name),
-    );
   } catch (e) {
     console.error(e);
   }
 };
 
 const onNetworkDeleted = async (chainId: string) => {
-  const customNetworksState = new CustomNetworksState();
   await customNetworksState.deleteEVMNetwork(chainId);
 
-  all.value = await getAllNetworksAndStatus();
-  hasMoreThanOneActiveNetwork.value =
-    all.value.filter(net => net.isActive).length > 1;
+  // allTestNets.value = await getAllNetworksAndStatus();
+  // hasMoreThanOneActiveNetwork.value =
+  //   allTestNets.value.filter(net => net.isActive).length > 1;
+  await setNetworkLists();
   emit('update:activeNetworks');
 };
 
@@ -267,5 +270,11 @@ const isHasScroll = () => {
       padding-right: 0;
     }
   }
+
+  &__no-custom-networks {
+    padding: 16px 0;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.38);
+  }
 }
 </style>

From 4ad41fa4ec3cfaaa7979d25051da748832ffb815 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Tue, 26 Nov 2024 11:31:35 -0800
Subject: [PATCH 04/10] devop: update icons

---
 .../src/ui/action/icons/common/plus-icon.vue    | 17 +++++++++++++++++
 .../ui/action/icons/common/plus-small-icon.vue  | 17 +++++++++++++++++
 .../components/add-network-search.vue           |  5 ++---
 .../add-network/views/add-network-list.vue      |  3 ++-
 4 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 packages/extension/src/ui/action/icons/common/plus-icon.vue
 create mode 100644 packages/extension/src/ui/action/icons/common/plus-small-icon.vue

diff --git a/packages/extension/src/ui/action/icons/common/plus-icon.vue b/packages/extension/src/ui/action/icons/common/plus-icon.vue
new file mode 100644
index 000000000..0eaf5bc01
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/common/plus-icon.vue
@@ -0,0 +1,17 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM10.9189 7.96C10.9189 7.62397 10.9189 7.45595 10.9843 7.32761C11.0419 7.21471 11.1337 7.12292 11.2466 7.0654C11.3749 7 11.5429 7 11.8789 7H11.9589C12.295 7 12.463 7 12.5913 7.0654C12.7042 7.12292 12.796 7.21471 12.8535 7.32761C12.9189 7.45595 12.9189 7.62397 12.9189 7.96V11H15.9589C16.295 11 16.463 11 16.5913 11.0654C16.7042 11.1229 16.796 11.2147 16.8535 11.3276C16.9189 11.456 16.9189 11.624 16.9189 11.96V12.04C16.9189 12.376 16.9189 12.544 16.8535 12.6724C16.796 12.7853 16.7042 12.8771 16.5913 12.9346C16.463 13 16.295 13 15.9589 13H12.9189V16.04C12.9189 16.376 12.9189 16.544 12.8535 16.6724C12.796 16.7853 12.7042 16.8771 12.5913 16.9346C12.463 17 12.295 17 11.9589 17H11.8789C11.5429 17 11.3749 17 11.2466 16.9346C11.1337 16.8771 11.0419 16.7853 10.9843 16.6724C10.9189 16.544 10.9189 16.376 10.9189 16.04V13H7.87895C7.54291 13 7.3749 13 7.24655 12.9346C7.13365 12.8771 7.04187 12.7853 6.98434 12.6724C6.91895 12.544 6.91895 12.376 6.91895 12.04V11.96C6.91895 11.624 6.91895 11.456 6.98434 11.3276C7.04187 11.2147 7.13365 11.1229 7.24655 11.0654C7.3749 11 7.54291 11 7.87895 11H10.9189V7.96Z"
+      fill="black"
+      fill-opacity="0.9"
+    />
+  </svg>
+</template>
diff --git a/packages/extension/src/ui/action/icons/common/plus-small-icon.vue b/packages/extension/src/ui/action/icons/common/plus-small-icon.vue
new file mode 100644
index 000000000..893cb7d1f
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/common/plus-small-icon.vue
@@ -0,0 +1,17 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.99992 14.6673C11.6818 14.6673 14.6666 11.6826 14.6666 8.00065C14.6666 4.31875 11.6818 1.33398 7.99992 1.33398C4.31802 1.33398 1.33325 4.31875 1.33325 8.00065C1.33325 11.6826 4.31802 14.6673 7.99992 14.6673ZM7.27918 5.30699C7.27918 5.08297 7.27918 4.97096 7.32277 4.8854C7.36112 4.81013 7.42231 4.74894 7.49758 4.71059C7.58314 4.66699 7.69515 4.66699 7.91918 4.66699H7.97251C8.19653 4.66699 8.30854 4.66699 8.39411 4.71059C8.46937 4.74894 8.53056 4.81013 8.56891 4.8854C8.61251 4.97096 8.61251 5.08297 8.61251 5.30699V7.33366H10.6392C10.8632 7.33366 10.9752 7.33366 11.0608 7.37726C11.136 7.41561 11.1972 7.4768 11.2356 7.55206C11.2792 7.63763 11.2792 7.74964 11.2792 7.97366V8.02699C11.2792 8.25101 11.2792 8.36302 11.2356 8.44859C11.1972 8.52385 11.136 8.58505 11.0608 8.6234C10.9752 8.66699 10.8632 8.66699 10.6392 8.66699H8.61251V10.6937C8.61251 10.9177 8.61251 11.0297 8.56891 11.1153C8.53056 11.1905 8.46937 11.2517 8.39411 11.2901C8.30854 11.3337 8.19653 11.3337 7.97251 11.3337H7.91918C7.69515 11.3337 7.58314 11.3337 7.49758 11.2901C7.42231 11.2517 7.36112 11.1905 7.32277 11.1153C7.27918 11.0297 7.27918 10.9177 7.27918 10.6937V8.66699H5.25251C5.02849 8.66699 4.91648 8.66699 4.83091 8.6234C4.75565 8.58505 4.69446 8.52385 4.65611 8.44859C4.61251 8.36302 4.61251 8.25101 4.61251 8.02699V7.97366C4.61251 7.74964 4.61251 7.63763 4.65611 7.55206C4.69446 7.4768 4.75565 7.41561 4.83091 7.37726C4.91648 7.33366 5.02849 7.33366 5.25251 7.33366H7.27918V5.30699Z"
+      fill="black"
+      fill-opacity="0.38"
+    />
+  </svg>
+</template>
diff --git a/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue b/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue
index c5787522b..7e32fef8f 100644
--- a/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue
+++ b/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue
@@ -6,7 +6,7 @@
     <div ref="tooltip" class="add-network__search-wrap">
       <div class="add-network__search-add">
         <a @click="$emit('action:customNetwork')">
-          <add-icon />
+          <plus-icon />
         </a>
       </div>
     </div>
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import BaseSearch from '@action/components/base-search/index.vue';
-import AddIcon from '@action/icons/common/add-icon.vue';
+import PlusIcon from '@action/icons/common/plus-icon.vue';
 import { onClickOutside } from '@vueuse/core';
 
 const openList = ref(false);
@@ -60,7 +60,6 @@ onClickOutside(tooltip, () => {
     }
 
     &-add {
-      width: 40px;
       font-size: 0;
       border-radius: 8px;
       transition: background 300ms ease-in-out;
diff --git a/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue b/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
index a2e1b4fb7..9a5a77779 100644
--- a/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
+++ b/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
@@ -37,7 +37,7 @@
         </div>
         <div v-else class="add-network__no-custom-networks">
           You can add your own custom networks. <br />
-          Just press the + button above.
+          Just press the <plus-small-icon /> button above.
         </div>
         <h3 class="add-network__list-header">Test networks</h3>
         <add-network-item
@@ -73,6 +73,7 @@ import {
   CustomEvmNetworkOptions,
 } from '@/providers/ethereum/types/custom-evm-network';
 import { BaseNetwork } from '@/types/base-network';
+import PlusSmallIcon from '@/ui/action/icons/common/plus-small-icon.vue';
 
 interface NodeTypesWithActive extends NodeType {
   isActive: boolean;

From 32754fb573387128813bf6fc4953dda63ea8de72 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Tue, 26 Nov 2024 11:48:05 -0800
Subject: [PATCH 05/10] fix: toggle, update custom token logo

---
 .../icons/common/custom-network-icon.vue      | 29 +++++++++++--------
 .../components/add-network-item.vue           |  9 +++++-
 .../add-network/views/add-network-list.vue    |  1 +
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/packages/extension/src/ui/action/icons/common/custom-network-icon.vue b/packages/extension/src/ui/action/icons/common/custom-network-icon.vue
index bdb4c7feb..88af468f5 100644
--- a/packages/extension/src/ui/action/icons/common/custom-network-icon.vue
+++ b/packages/extension/src/ui/action/icons/common/custom-network-icon.vue
@@ -6,17 +6,22 @@
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M14.4787 4.92422C16.4671 6.06515 17.8422 8.15408 17.9873 10.5745C18.7022 10.6834 19.3788 10.9088 19.9971 11.2307C19.999 11.154 20 11.0771 20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C11.0771 20 11.154 19.999 11.2307 19.9971C10.9088 19.3788 10.6834 18.7022 10.5745 17.9873C10.2587 17.9683 9.94846 17.9285 9.64527 17.869C8.96788 16.7314 8.49154 15.32 8.23143 13.7915C9.14211 13.9313 10.0746 14 11 14C11.0776 14 11.1553 13.9995 11.233 13.9985C11.5317 13.4256 11.9134 12.9028 12.362 12.446C11.9124 12.4819 11.4572 12.5 11 12.5C9.99255 12.5 8.99467 12.412 8.04468 12.2398C8.01497 11.8299 7.99999 11.4158 7.99999 11C7.99999 8.43848 8.56874 5.93887 9.64527 4.13099C10.0836 4.04504 10.5365 4 11 4C11.4837 4 11.9559 4.04906 12.412 4.14247C13.4391 5.75816 14 8.21118 14 10.8125C14 10.9534 13.9984 11.0942 13.9951 11.2348C14.4656 10.989 14.9701 10.7992 15.4995 10.6741C15.4852 8.6612 15.1574 6.6277 14.4787 4.92422ZM4.00348 10.7772C4.7367 11.2319 5.59055 11.6002 6.52061 11.8778C6.50684 11.5851 6.49999 11.2922 6.49999 11C6.49999 8.87912 6.86087 6.72104 7.61102 4.8736C5.51852 6.03359 4.08298 8.2345 4.00348 10.7772ZM7.61102 17.1264C7.15297 15.9983 6.84006 14.7544 6.66582 13.4739C5.78846 13.2499 4.94994 12.9532 4.17935 12.5813C4.6309 14.5368 5.9018 16.1789 7.61102 17.1264ZM22 17C22 19.7614 19.7614 22 17 22C14.2386 22 12 19.7614 12 17C12 14.2386 14.2386 12 17 12C19.7614 12 22 14.2386 22 17ZM19.7071 15.7071C20.0977 15.3166 20.0977 14.6834 19.7071 14.2929C19.3166 13.9024 18.6834 13.9024 18.2929 14.2929L15.2929 17.2929L16.7071 18.7071L19.7071 15.7071ZM14.9426 17.7567C15.0269 17.7368 15.1155 17.762 15.1768 17.8232L16.1768 18.8232C16.2381 18.8845 16.2632 18.9731 16.2433 19.0574C16.2234 19.1418 16.1613 19.2098 16.0791 19.2372L14.5791 19.7372C14.4892 19.7671 14.3902 19.7437 14.3232 19.6768C14.2563 19.6098 14.2329 19.5108 14.2628 19.4209L14.7628 17.9209C14.7902 17.8387 14.8582 17.7766 14.9426 17.7567Z"
-      fill="#5F6368"
-    />
+    <rect width="24" height="24" rx="12" fill="#8D8D8D" />
+    <g clip-path="url(#clip0_6753_3063)">
+      <path
+        d="M13.8 7.79907C13.8 7.60801 13.6519 7.2002 13.2019 7.2002C12.9398 7.2002 12.6981 7.3703 12.6227 7.63482L10.2227 16.0348C10.2069 16.0899 10.1994 16.1453 10.1994 16.1998C10.1831 16.3933 10.35 16.8002 10.8 16.8002C11.061 16.8002 11.3012 16.6285 11.3766 16.3648L13.7766 7.96482C13.7925 7.90913 13.8 7.85363 13.8 7.79907ZM9.3 9.88332C9.3 9.54057 9.01969 9.28332 8.7 9.28332C8.54648 9.28332 8.39287 9.34191 8.27588 9.45912L6.17588 11.5591C6.05859 11.6927 6 11.8464 6 11.9833C6 12.1202 6.05859 12.3077 6.17578 12.4239L8.27578 14.5239C8.3925 14.6421 8.54625 14.6833 8.7 14.6833C9.01969 14.6833 9.3 14.4259 9.3 14.0833C9.3 13.9298 9.24141 13.7762 9.12422 13.659L7.44844 11.9833L9.12431 10.3074C9.24188 10.2058 9.3 10.0539 9.3 9.88332ZM18 11.9833C18 11.8298 17.9414 11.6762 17.8242 11.559L15.7242 9.45901C15.6075 9.35832 15.4538 9.28332 15.3 9.28332C14.9803 9.28332 14.7 9.54076 14.7 9.88332C14.7 10.0368 14.7586 10.1904 14.8758 10.3076L16.5517 11.9835L14.8758 13.6594C14.7581 13.7927 14.7 13.9464 14.7 14.0833C14.7 14.4261 14.9803 14.6833 15.3 14.6833C15.4535 14.6833 15.6071 14.6247 15.7241 14.5075L17.8241 12.4075C17.9419 12.3077 18 12.1539 18 11.9833Z"
+        fill="#9BF20E"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_6753_3063">
+        <rect
+          width="12"
+          height="9.6"
+          fill="white"
+          transform="translate(6 7.2002)"
+        />
+      </clipPath>
+    </defs>
   </svg>
 </template>
-<style scoped>
-svg {
-  display: inline-block;
-  vertical-align: baseline;
-}
-</style>
diff --git a/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue b/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
index 3bcfa5212..d93b2569c 100644
--- a/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
+++ b/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="add-network__block">
     <div class="add-network__text">
-      <img :src="network.icon" alt="" />
+      <img v-if="!props.isCustomNetwork" :src="network.icon" alt="" />
+      <custom-network-icon v-else />
       <span>{{ network.name_long }} </span>
       <test-network-icon v-if="network.isTestNetwork" />
     </div>
@@ -38,6 +39,7 @@ import { NodeType } from '@/types/provider';
 import { CustomEvmNetwork } from '@/providers/ethereum/types/custom-evm-network';
 import TestNetworkIcon from '@action/icons/common/test-network-icon.vue';
 import Tooltip from '@/ui/action/components/tooltip/index.vue';
+import customNetworkIcon from '@/ui/action/icons/common/custom-network-icon.vue';
 
 const emit = defineEmits<{
   (e: 'networkToggled', name: string, isActive: boolean): void;
@@ -96,6 +98,11 @@ const deleteNetwork = async () => {
       height: 16px;
       margin-right: 8px;
     }
+    svg {
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+    }
 
     span {
       font-style: normal;
diff --git a/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue b/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
index 9a5a77779..42c31c478 100644
--- a/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
+++ b/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
@@ -162,6 +162,7 @@ const onToggle = async (networkName: string, isActive: boolean) => {
 
       return network;
     });
+    await setNetworkLists();
   } catch (e) {
     console.error(e);
   }

From 51e58f9d47e32710d4fa36311099cef22062e85d Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Tue, 26 Nov 2024 16:54:06 -0800
Subject: [PATCH 06/10] feat: update ui on add network

---
 .../extension/src/ui/action/views/add-network/index.vue   | 1 +
 .../action/views/add-network/views/add-custom-network.vue | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/extension/src/ui/action/views/add-network/index.vue b/packages/extension/src/ui/action/views/add-network/index.vue
index 2495739ca..c0fe64d4c 100644
--- a/packages/extension/src/ui/action/views/add-network/index.vue
+++ b/packages/extension/src/ui/action/views/add-network/index.vue
@@ -40,6 +40,7 @@ const toCustomNetwork = () => {
 
 const toNetworkList = () => {
   isNetworkList.value = true;
+  emit('update:activeNetworks');
 };
 </script>
 
diff --git a/packages/extension/src/ui/action/views/add-network/views/add-custom-network.vue b/packages/extension/src/ui/action/views/add-network/views/add-custom-network.vue
index ea1eaaec2..33b9a5877 100644
--- a/packages/extension/src/ui/action/views/add-network/views/add-custom-network.vue
+++ b/packages/extension/src/ui/action/views/add-network/views/add-custom-network.vue
@@ -86,9 +86,13 @@ import ArrowBack from '@action/icons/common/arrow-back.vue';
 import LabelInput from '@action/components/label-input/index.vue';
 import BaseButton from '@action/components/base-button/index.vue';
 import Web3 from 'web3-eth';
-import { CustomEvmNetworkOptions } from '@/providers/ethereum/types/custom-evm-network';
+import {
+  CustomEvmNetwork,
+  CustomEvmNetworkOptions,
+} from '@/providers/ethereum/types/custom-evm-network';
 import { toHex } from 'web3-utils';
 import CustomNetworksState from '@/libs/custom-networks-state';
+import NetworksState from '@/libs/networks-state';
 
 interface NetworkConfigItem {
   name: string;
@@ -105,6 +109,7 @@ interface NetworkConfigItem {
 }
 
 const customNetworksState = new CustomNetworksState();
+const networksState = new NetworksState();
 
 const nameValue = ref<string>('');
 const nameInvalid = ref(false);
@@ -256,6 +261,7 @@ const sendAction = async () => {
   };
 
   await customNetworksState.addCustomNetwork(customNetworkOptions);
+  await networksState.setNetworkStatus(customNetworkOptions.name, true);
 
   nameValue.value = '';
   symbolValue.value = '';

From b7fd8e31b08dd708b0e533c9368d1b8b40ce6123 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Wed, 27 Nov 2024 12:16:28 -0800
Subject: [PATCH 07/10] devop: remove extra styles

---
 packages/extension/src/ui/action/App.vue      | 14 +--
 .../components/add-network-item.vue           | 99 +++++++++++++++++--
 .../add-network/views/add-network-list.vue    | 12 +--
 3 files changed, 101 insertions(+), 24 deletions(-)

diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
index b336b8fa3..c9b602b7f 100644
--- a/packages/extension/src/ui/action/App.vue
+++ b/packages/extension/src/ui/action/App.vue
@@ -80,7 +80,7 @@
     </div>
 
     <add-network
-      v-show="addNetworkShow"
+      v-if="addNetworkShow"
       @close:popup="addNetworkShow = !addNetworkShow"
       @update:active-networks="setActiveNetworks"
     />
@@ -201,13 +201,13 @@ const setActiveNetworks = async () => {
   });
   networks.value = [
     ...pinnedNetworks.value,
-    ...allNetworks.filter(
-      network => !pinnedNetworkNames.includes(network.name),
-    ),
-  ];
-  networks.value = [
-    ...networks.value.filter(network => !network.isTestNetwork),
+    ...allNetworks
+      .filter(network => !pinnedNetworkNames.includes(network.name))
+      .filter(network => !network.isTestNetwork),
   ];
+  // networks.value = [
+  // ...networks.value.filter(network => !network.isTestNetwork),
+  // ];
   // if (!pinnedNetworks.value.includes(currentNetwork.value)) {
   //   setNetwork(pinnedNetworks.value[0]);
   // }
diff --git a/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue b/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
index d93b2569c..10de4519a 100644
--- a/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
+++ b/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
@@ -18,20 +18,29 @@
       >
         <close-icon />
       </a>
-      <tooltip
-        v-if="props.showTooltip && props.isActive"
-        text="At least one network must be selected"
-        is-top-right
+      <div
+        class="add-network__link__block"
+        @mouseover="isHovered = true"
+        @mouseleave="isHovered = false"
+        @click="setPinned"
       >
-        <Switch :is-checked="isActive" @update:check="check" />
-      </tooltip>
-      <Switch v-else :is-checked="isActive" @update:check="check" />
+        <p
+          :class="[
+            'add-network__link__block__pin',
+            {
+              'add-network__link__block__pin__active': pinIconIsActive,
+            },
+          ]"
+        >
+          <pin-icon :is-pinned="isActive" :is-active="pinIconIsActive" />
+        </p>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue';
+import { PropType, computed, ref } from 'vue';
 import Switch from '@action/components/switch/index.vue';
 // import InfoIcon from "@action/icons/common/info-icon.vue";
 import CloseIcon from '@action/icons/common/close-icon.vue';
@@ -39,11 +48,15 @@ import { NodeType } from '@/types/provider';
 import { CustomEvmNetwork } from '@/providers/ethereum/types/custom-evm-network';
 import TestNetworkIcon from '@action/icons/common/test-network-icon.vue';
 import Tooltip from '@/ui/action/components/tooltip/index.vue';
+import PinIcon from '@action/icons/actions/pin.vue';
 import customNetworkIcon from '@/ui/action/icons/common/custom-network-icon.vue';
 
+const isHovered = ref(false);
+
 const emit = defineEmits<{
   (e: 'networkToggled', name: string, isActive: boolean): void;
   (e: 'networkDeleted', chainId: string): void;
+  (e: 'update:pinNetwork', network: string, isPinned: boolean): void;
 }>();
 
 const props = defineProps({
@@ -63,6 +76,13 @@ const props = defineProps({
 const check = async (isChecked: boolean) => {
   emit('networkToggled', props.network.name, isChecked);
 };
+const pinIconIsActive = computed(() => {
+  return props.isActive || isHovered.value;
+});
+
+const setPinned = async () => {
+  emit('update:pinNetwork', props.network.name, !props.isActive);
+};
 
 const deleteNetwork = async () => {
   const chainId = (props.network as unknown as CustomEvmNetwork).chainID;
@@ -77,6 +97,69 @@ const deleteNetwork = async () => {
 @import '@action/styles/theme.less';
 
 .add-network {
+  &__link {
+    text-decoration: none;
+    display: flex;
+    justify-content: space-between;
+    justify-self: center;
+    align-items: center;
+    flex-direction: row;
+    width: 96%;
+    min-height: 40px !important;
+    max-height: 40px;
+    margin-bottom: 3px;
+    margin-top: 3px;
+    cursor: pointer;
+    position: relative;
+    border-radius: 10px;
+    padding-right: 8px;
+    &__block {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-direction: row;
+      gap: 4px;
+      &__pin {
+        max-width: 32px;
+        max-height: 24px;
+        padding: 5px 8px 3px 8px;
+        background: transparent;
+        border-radius: 24px;
+        transition: @opacity-noBG-transition;
+        cursor: pointer;
+        &__active {
+          background: @primaryLight;
+        }
+      }
+    }
+
+    img {
+      width: 24px;
+      height: 24px;
+      margin: 0 8px;
+      border-radius: 50%;
+    }
+
+    span {
+      font-style: normal;
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.25px;
+      color: @primaryLabel;
+    }
+
+    &.active {
+      background: @white09;
+      box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
+      span {
+        font-weight: 500;
+      }
+      &:hover {
+        background: @white09;
+      }
+    }
+  }
   &__block {
     text-decoration: none;
     display: flex;
diff --git a/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue b/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
index 42c31c478..1e02528d7 100644
--- a/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
+++ b/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
@@ -31,8 +31,8 @@
             :network="item"
             :is-active="item.isActive"
             :is-custom-network="true"
-            @network-toggled="onToggle"
             @network-deleted="onNetworkDeleted"
+            @update:pin-network="onToggle"
           />
         </div>
         <div v-else class="add-network__no-custom-networks">
@@ -48,8 +48,8 @@
           :is-custom-network="
             (item as unknown as CustomEvmNetwork).isCustomNetwork
           "
-          @network-toggled="onToggle"
           @network-deleted="onNetworkDeleted"
+          @update:pin-network="onToggle"
         />
       </div>
     </custom-scrollbar>
@@ -68,11 +68,7 @@ import NetworksState from '@/libs/networks-state';
 import CustomNetworksState from '@/libs/custom-networks-state';
 import scrollSettings from '@/libs/utils/scroll-settings';
 import { computed } from 'vue';
-import {
-  CustomEvmNetwork,
-  CustomEvmNetworkOptions,
-} from '@/providers/ethereum/types/custom-evm-network';
-import { BaseNetwork } from '@/types/base-network';
+import { CustomEvmNetwork } from '@/providers/ethereum/types/custom-evm-network';
 import PlusSmallIcon from '@/ui/action/icons/common/plus-small-icon.vue';
 
 interface NodeTypesWithActive extends NodeType {
@@ -88,8 +84,6 @@ const searchInput = ref('');
 const allTestNets = ref<Array<NodeTypesWithActive>>([]);
 const scrollProgress = ref(0);
 const manageNetworkScrollRef = ref<ComponentPublicInstance<HTMLElement>>();
-const showTestNets = ref(false);
-const hasMoreThanOneActiveNetwork = ref(false);
 const allCustomNetworks = ref<CustomEvmNetwork[]>([]);
 
 defineExpose({ manageNetworkScrollRef });

From 74bcfab95365648e47311ec958c9ed12c9ce99ed Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Mon, 2 Dec 2024 10:28:41 -0800
Subject: [PATCH 08/10] devop: start using pinia for open with info

---
 .../ui/action/components/app-menu/store.ts    | 18 ++++++++++++++++++
 .../components/add-network-item.vue           | 19 +++++++++----------
 2 files changed, 27 insertions(+), 10 deletions(-)
 create mode 100644 packages/extension/src/ui/action/components/app-menu/store.ts

diff --git a/packages/extension/src/ui/action/components/app-menu/store.ts b/packages/extension/src/ui/action/components/app-menu/store.ts
new file mode 100644
index 000000000..bec725d11
--- /dev/null
+++ b/packages/extension/src/ui/action/components/app-menu/store.ts
@@ -0,0 +1,18 @@
+import { CustomEvmNetworkOptions } from '@/providers/ethereum/types/custom-evm-network';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useOnboardStore = defineStore('restoreWallet', () => {
+  const evmOptions = ref({});
+  const isEdit = ref(false);
+
+  const setOptions = (options: CustomEvmNetworkOptions) => {
+    evmOptions.value = options;
+  };
+
+  const setIsEdit = (edit: boolean) => {
+    isEdit.value = edit;
+  }
+
+  return { setOptions, evmOptions, setIsEdit };
+});
diff --git a/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue b/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
index 10de4519a..1a35e3589 100644
--- a/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
+++ b/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
@@ -14,9 +14,9 @@
       <a
         v-show="isCustomNetwork"
         class="add-network__close"
-        @click="() => deleteNetwork()"
+        @click="() => editNetwork(network)"
       >
-        <close-icon />
+        <edit-icon />
       </a>
       <div
         class="add-network__link__block"
@@ -41,13 +41,11 @@
 
 <script setup lang="ts">
 import { PropType, computed, ref } from 'vue';
-import Switch from '@action/components/switch/index.vue';
-// import InfoIcon from "@action/icons/common/info-icon.vue";
-import CloseIcon from '@action/icons/common/close-icon.vue';
+// import Switch from '@action/components/switch/index.vue';
+import editIcon from '@/ui/action/icons/actions/edit.vue';
 import { NodeType } from '@/types/provider';
 import { CustomEvmNetwork } from '@/providers/ethereum/types/custom-evm-network';
 import TestNetworkIcon from '@action/icons/common/test-network-icon.vue';
-import Tooltip from '@/ui/action/components/tooltip/index.vue';
 import PinIcon from '@action/icons/actions/pin.vue';
 import customNetworkIcon from '@/ui/action/icons/common/custom-network-icon.vue';
 
@@ -73,9 +71,6 @@ const props = defineProps({
   },
 });
 
-const check = async (isChecked: boolean) => {
-  emit('networkToggled', props.network.name, isChecked);
-};
 const pinIconIsActive = computed(() => {
   return props.isActive || isHovered.value;
 });
@@ -84,7 +79,7 @@ const setPinned = async () => {
   emit('update:pinNetwork', props.network.name, !props.isActive);
 };
 
-const deleteNetwork = async () => {
+const editNetwork = async () => {
   const chainId = (props.network as unknown as CustomEvmNetwork).chainID;
 
   if (chainId !== undefined) {
@@ -215,6 +210,10 @@ const deleteNetwork = async () => {
     cursor: pointer;
     font-size: 0;
     transition: background 300ms ease-in-out;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
 
     &:hover {
       background: @black007;

From 142d049e94060a105b5446e650805a69d913c495 Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Tue, 17 Dec 2024 14:21:54 -0800
Subject: [PATCH 09/10] feat: optimize network search

---
 .../ui/action/components/app-menu/index.vue   | 43 +++++++++++++++----
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/packages/extension/src/ui/action/components/app-menu/index.vue b/packages/extension/src/ui/action/components/app-menu/index.vue
index 11debb10f..a06bdd850 100644
--- a/packages/extension/src/ui/action/components/app-menu/index.vue
+++ b/packages/extension/src/ui/action/components/app-menu/index.vue
@@ -138,15 +138,40 @@ const updateSort = (sort: NetworkSort) => {
  ------------------*/
 const searchNetworks = computed({
   get() {
-    return props.networks.filter(
-      net =>
-        net.name_long
-          .toLowerCase()
-          .startsWith(props.searchInput.toLowerCase()) ||
-        net.currencyName
-          .toLowerCase()
-          .startsWith(props.searchInput.toLowerCase()),
-    );
+    if (!props.searchInput && props.searchInput === '') {
+      return props.networks;
+    }
+    const beginsWithName: BaseNetwork[] = [];
+    const beginsWithSpaceName: BaseNetwork[] = [];
+    const includesName: BaseNetwork[] = [];
+    const beginsWithCurrency: BaseNetwork[] = [];
+    const includesCurrency: BaseNetwork[] = [];
+    const search = props.searchInput.toLowerCase();
+    for (const network of props.networks) {
+      const name_long = network.name_long.toLowerCase();
+      const currencyName = network.currencyName.toLowerCase();
+      //Check Name
+      if (name_long.startsWith(search)) {
+        beginsWithName.push(network);
+      } else if (name_long.includes(` ${search}`)) {
+        beginsWithSpaceName.push(network);
+      } else if (name_long.includes(search)) {
+        includesName.push(network);
+      }
+      //Check Currency
+      else if (currencyName.startsWith(search)) {
+        beginsWithCurrency.push(network);
+      } else if (currencyName.includes(search)) {
+        includesCurrency.push(network);
+      }
+    }
+    return [
+      ...beginsWithName,
+      ...beginsWithSpaceName,
+      ...includesName,
+      ...beginsWithCurrency,
+      ...includesCurrency,
+    ];
   },
   set(value: BaseNetwork[]) {
     const pinned = value.filter(net => props.pinnedNetworks.includes(net));

From d6bd060b224da22d2f772f551cd974168094aaac Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Wed, 18 Dec 2024 11:32:47 -0800
Subject: [PATCH 10/10] devop: ui fixes

---
 packages/extension/src/ui/action/App.vue      |  8 +-
 .../app-menu/components/app-menu-tab.vue      |  4 +-
 .../ui/action/components/app-menu/index.vue   | 23 ++---
 .../extension/src/ui/action/styles/color.less |  6 +-
 .../components/add-network-item.vue           | 54 ++++++++---
 .../components/add-network-search.vue         |  2 +-
 .../src/ui/action/views/add-network/index.vue | 10 +-
 .../add-network/views/add-network-list.vue    | 96 ++++++++++---------
 8 files changed, 115 insertions(+), 88 deletions(-)

diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
index 80b6dcfd0..d129ee580 100644
--- a/packages/extension/src/ui/action/App.vue
+++ b/packages/extension/src/ui/action/App.vue
@@ -82,7 +82,7 @@
     <add-network
       v-if="addNetworkShow"
       @close:popup="addNetworkShow = !addNetworkShow"
-      @update:active-networks="setActiveNetworks"
+      @update:pin-network="setIsPinnedNetwork"
     />
 
     <settings
@@ -201,9 +201,9 @@ const setActiveNetworks = async () => {
   });
   networks.value = [
     ...pinnedNetworks.value,
-    ...allNetworks
-      .filter(network => !pinnedNetworkNames.includes(network.name))
-      .filter(network => !network.isTestNetwork),
+    ...allNetworks.filter(
+      network => !pinnedNetworkNames.includes(network.name),
+    ),
   ];
   // networks.value = [
   // ...networks.value.filter(network => !network.isTestNetwork),
diff --git a/packages/extension/src/ui/action/components/app-menu/components/app-menu-tab.vue b/packages/extension/src/ui/action/components/app-menu/components/app-menu-tab.vue
index 35ca87e4f..6cbb6d598 100644
--- a/packages/extension/src/ui/action/components/app-menu/components/app-menu-tab.vue
+++ b/packages/extension/src/ui/action/components/app-menu/components/app-menu-tab.vue
@@ -57,7 +57,7 @@ const setActiveCategory = (category: NetworksCategory) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 40px;
+  height: 32px;
   border-radius: 10px;
   padding: 4px;
   gap: 1px;
@@ -68,7 +68,7 @@ const setActiveCategory = (category: NetworksCategory) => {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 32px;
+    height: 24px;
     width: 100%;
     padding: 4px 8px;
     cursor: pointer;
diff --git a/packages/extension/src/ui/action/components/app-menu/index.vue b/packages/extension/src/ui/action/components/app-menu/index.vue
index a06bdd850..975b51882 100644
--- a/packages/extension/src/ui/action/components/app-menu/index.vue
+++ b/packages/extension/src/ui/action/components/app-menu/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
     <!-- Sort -->
-    <div>
-      <app-menu-sort :sortBy="sortBy" @update:sort="updateSort" />
-    </div>
+
     <!-- Scrollable Networks  -->
-    <div :class="['app-menu', { 'has-bg': isScrolling }]">
-      <div v-if="!!networks" class="app-menu__scroll-area" ref="scrollDiv">
+    <div :class="['networks-menu', { 'has-bg': isScrolling }]">
+      <div v-if="!!networks" class="networks-menu__scroll-area" ref="scrollDiv">
+        <app-menu-sort :sortBy="sortBy" @update:sort="updateSort" />
+
         <draggable
           v-model="searchNetworks"
           item-key="name"
@@ -29,10 +29,10 @@
             />
           </template>
         </draggable>
-        <div v-if="showMessage" class="app-menu__scroll-area__message">
+        <div v-if="showMessage" class="networks-menu__scroll-area__message">
           <p
             v-if="!searchInput && activeCategory === NetworksCategory.Pinned"
-            class="app-menu__scroll-area__message__pin"
+            class="networks-menu__scroll-area__message__pin"
           >
             Press <pin-icon /> Pin button
           </p>
@@ -219,13 +219,13 @@ const getCanDrag = (network: BaseNetwork) => {
 <style lang="less">
 @import '@action/styles/theme.less';
 
-.app-menu {
+.networks-menu {
   overflow-y: auto;
   transition: background-color 0.5s ease-in-out;
   background-color: transparent;
   box-shadow: none;
   margin: 0px -12px 0px -12px;
-  padding: 1px 8px 1px 10px;
+  padding: 1px 10px 1px 10px;
   transition:
     background-color 0.4s ease-in-out,
     box-shadow 0.4s ease-in-out;
@@ -233,13 +233,14 @@ const getCanDrag = (network: BaseNetwork) => {
     position: static;
     margin: auto;
     width: 100%;
-    height: 420px;
+    height: 452px;
     display: flex;
     flex-direction: column;
     overflow-y: scroll;
     scroll-behavior: smooth;
     margin-right: -4px;
-    padding-right: 4px;
+    padding-right: 3px;
+    padding-left: 3px;
     padding-bottom: 3px;
     padding-top: 3px;
     &::-webkit-scrollbar {
diff --git a/packages/extension/src/ui/action/styles/color.less b/packages/extension/src/ui/action/styles/color.less
index edf2680ae..2834a5e3d 100644
--- a/packages/extension/src/ui/action/styles/color.less
+++ b/packages/extension/src/ui/action/styles/color.less
@@ -39,11 +39,11 @@
 @networkGradientColor: linear-gradient(180deg, #c549ff 0%, #684cff 100%);
 
 @defaultGradient: radial-gradient(
-    100% 50% at 100% 50%,
-    rgba(250, 250, 250, 0.92) 0%,
+    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%
   ),
   @networkGradientColor;
-
 @orange: #ff6d00;
 @orange01: rgba(255, 109, 0, 0.1);
diff --git a/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue b/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
index 1a35e3589..bbe622b2b 100644
--- a/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
+++ b/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
@@ -4,7 +4,7 @@
       <img v-if="!props.isCustomNetwork" :src="network.icon" alt="" />
       <custom-network-icon v-else />
       <span>{{ network.name_long }} </span>
-      <test-network-icon v-if="network.isTestNetwork" />
+      <!-- <test-network-icon v-if="network.isTestNetwork" /> -->
     </div>
 
     <div class="add-network__action">
@@ -14,7 +14,7 @@
       <a
         v-show="isCustomNetwork"
         class="add-network__close"
-        @click="() => editNetwork(network)"
+        @click="() => editNetwork"
       >
         <edit-icon />
       </a>
@@ -28,20 +28,25 @@
           :class="[
             'add-network__link__block__pin',
             {
-              'add-network__link__block__pin__active': pinIconIsActive,
+              'add-network__link__block__pin__active': isHovered,
             },
           ]"
         >
-          <pin-icon :is-pinned="isActive" :is-active="pinIconIsActive" />
+          <pin-icon :is-pinned="isPinned" :is-active="true" />
         </p>
       </div>
+      <Switch
+        v-if="network.isTestNetwork"
+        :is-checked="isActive"
+        @update:check="addTestnet"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { PropType, computed, ref } from 'vue';
-// import Switch from '@action/components/switch/index.vue';
+import Switch from '@action/components/switch/index.vue';
 import editIcon from '@/ui/action/icons/actions/edit.vue';
 import { NodeType } from '@/types/provider';
 import { CustomEvmNetwork } from '@/providers/ethereum/types/custom-evm-network';
@@ -55,30 +60,41 @@ const emit = defineEmits<{
   (e: 'networkToggled', name: string, isActive: boolean): void;
   (e: 'networkDeleted', chainId: string): void;
   (e: 'update:pinNetwork', network: string, isPinned: boolean): void;
+  (e: 'testNetworkToggled', name: string, isActive: boolean): void;
 }>();
 
 const props = defineProps({
   network: {
-    type: Object as PropType<NodeType>,
+    type: Object as PropType<NodeType | CustomEvmNetwork>,
     default: () => {
       return {};
     },
+    required: true,
   },
   isActive: Boolean,
   isCustomNetwork: Boolean,
   showTooltip: {
     type: Boolean,
   },
+  isPinned: {
+    type: Boolean,
+    required: true,
+  },
 });
-
+/**
+ * Pin Network
+ */
 const pinIconIsActive = computed(() => {
-  return props.isActive || isHovered.value;
+  return props.isPinned || isHovered.value;
 });
 
 const setPinned = async () => {
-  emit('update:pinNetwork', props.network.name, !props.isActive);
+  emit('update:pinNetwork', props.network.name, !props.isPinned);
 };
 
+/**
+ * Edit Custom Network
+ */
 const editNetwork = async () => {
   const chainId = (props.network as unknown as CustomEvmNetwork).chainID;
 
@@ -86,6 +102,13 @@ const editNetwork = async () => {
     emit('networkDeleted', chainId);
   }
 };
+
+/**
+ * Add Testnet
+ */
+const addTestnet = async (value: boolean) => {
+  emit('testNetworkToggled', props.network.name, value);
+};
 </script>
 
 <style lang="less" scoped>
@@ -118,6 +141,7 @@ const editNetwork = async () => {
         max-width: 32px;
         max-height: 24px;
         padding: 5px 8px 3px 8px;
+        margin-right: 4px;
         background: transparent;
         border-radius: 24px;
         transition: @opacity-noBG-transition;
@@ -172,14 +196,14 @@ const editNetwork = async () => {
     flex-direction: row;
 
     img {
-      width: 16px;
-      height: 16px;
-      margin-right: 8px;
+      width: 24px;
+      height: 24px;
+      margin-right: 16px;
     }
     svg {
-      width: 16px;
-      height: 16px;
-      margin-right: 8px;
+      width: 24px;
+      height: 24px;
+      margin-right: 16px;
     }
 
     span {
diff --git a/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue b/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue
index 7e32fef8f..7304cb7bb 100644
--- a/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue
+++ b/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue
@@ -63,7 +63,7 @@ onClickOutside(tooltip, () => {
       font-size: 0;
       border-radius: 8px;
       transition: background 300ms ease-in-out;
-
+      padding: 8px;
       &:hover {
         background: @black007;
       }
diff --git a/packages/extension/src/ui/action/views/add-network/index.vue b/packages/extension/src/ui/action/views/add-network/index.vue
index c0fe64d4c..111bfacf0 100644
--- a/packages/extension/src/ui/action/views/add-network/index.vue
+++ b/packages/extension/src/ui/action/views/add-network/index.vue
@@ -6,7 +6,7 @@
         v-if="isNetworkList"
         :close="closePopup"
         :to-custom="toCustomNetwork"
-        @update:active-networks="setActiveNetworks"
+        @update:pin-network="setPinnedNetwork"
       />
       <add-custom-network v-else :close="closePopup" :back="toNetworkList" />
     </div>
@@ -22,11 +22,11 @@ const isNetworkList = ref(true);
 
 const emit = defineEmits<{
   (e: 'close:popup'): void;
-  (e: 'update:activeNetworks'): void;
+  (e: 'update:pinNetwork', network: string, isPinned: boolean): void;
 }>();
 
-const setActiveNetworks = () => {
-  emit('update:activeNetworks');
+const setPinnedNetwork = (network: string, isPinned: boolean) => {
+  emit('update:pinNetwork', network, isPinned);
 };
 
 const closePopup = () => {
@@ -40,7 +40,7 @@ const toCustomNetwork = () => {
 
 const toNetworkList = () => {
   isNetworkList.value = true;
-  emit('update:activeNetworks');
+  // emit('update:pinnNetworks');
 };
 </script>
 
diff --git a/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue b/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
index 1e02528d7..0456c4091 100644
--- a/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
+++ b/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
@@ -28,11 +28,12 @@
           <add-network-item
             v-for="(item, index) in allCustomNetworks"
             :key="index"
-            :network="item"
-            :is-active="item.isActive"
+            :network="item as CustomEvmNetwork"
+            :is-pinned="getIsPinned(item.name)"
+            :is-active="true"
             :is-custom-network="true"
             @network-deleted="onNetworkDeleted"
-            @update:pin-network="onToggle"
+            @update:pin-network="onTogglePin"
           />
         </div>
         <div v-else class="add-network__no-custom-networks">
@@ -41,15 +42,14 @@
         </div>
         <h3 class="add-network__list-header">Test networks</h3>
         <add-network-item
-          v-for="item in searchAllNetworks"
+          v-for="item in displayTestNetworks"
           :key="item.name"
           :network="item"
-          :is-active="item.isActive"
-          :is-custom-network="
-            (item as unknown as CustomEvmNetwork).isCustomNetwork
-          "
+          :is-pinned="getIsPinned(item.name)"
+          :is-active="getIsPinned(item.name)"
+          :is-custom-network="false"
           @network-deleted="onNetworkDeleted"
-          @update:pin-network="onToggle"
+          @update:pin-network="onTogglePin"
         />
       </div>
     </custom-scrollbar>
@@ -70,21 +70,20 @@ import scrollSettings from '@/libs/utils/scroll-settings';
 import { computed } from 'vue';
 import { CustomEvmNetwork } from '@/providers/ethereum/types/custom-evm-network';
 import PlusSmallIcon from '@/ui/action/icons/common/plus-small-icon.vue';
+import { NetworkNames } from '@enkryptcom/types';
 
-interface NodeTypesWithActive extends NodeType {
-  isActive: boolean;
-}
 const emit = defineEmits<{
-  (e: 'update:activeNetworks'): void;
+  (e: 'update:pinNetwork', network: string, isPinned: boolean): void;
 }>();
 
 const networksState = new NetworksState();
 const customNetworksState = new CustomNetworksState();
 const searchInput = ref('');
-const allTestNets = ref<Array<NodeTypesWithActive>>([]);
+const allTestNets = ref<NodeType[]>([]);
 const scrollProgress = ref(0);
 const manageNetworkScrollRef = ref<ComponentPublicInstance<HTMLElement>>();
 const allCustomNetworks = ref<CustomEvmNetwork[]>([]);
+const pinnedNetworks = ref<string[]>([]);
 
 defineExpose({ manageNetworkScrollRef });
 
@@ -99,20 +98,22 @@ defineProps({
   },
 });
 
-const getAllNetworksAndStatus = async () => {
-  const activeNetworks = await networksState.getPinnedNetworkNames();
-
-  const allNetworks = (await getAllNetworks(false)).map(net => {
-    return {
-      ...net,
-      isActive: activeNetworks.includes(net.name),
-    };
-  });
-
-  return allNetworks;
-};
-
-const searchAllNetworks = computed(() => {
+// const getAllNetworksAndStatus = async () => {
+//   pinnedNetworks.value = await networksState.getPinnedNetworkNames();
+//   allTestNets.value = await getAllNetworks(false);
+//   allTestNets.value = allTestNets.value.filter(net => net.isTestNetwork);
+//   //
+//   const allNetworks = (await getAllNetworks(false)).map(net => {
+//     return {
+//       ...net,
+//       isActive: pinnedNetworks.value.includes(net.name),
+//     };
+//   });
+
+//   return allNetworks;
+// };
+
+const displayTestNetworks = computed<NodeType[]>(() => {
   return allTestNets.value.filter(a =>
     a.name_long.toLowerCase().startsWith(searchInput.value.toLowerCase()),
   );
@@ -123,39 +124,39 @@ const hasCustomNetworks = computed(() => {
 });
 
 const setNetworkLists = async () => {
-  const activeNetworks = await networksState.getPinnedNetworkNames();
+  //Get Pinned Networks
+  pinnedNetworks.value = await networksState.getPinnedNetworkNames();
+  //Get Custom Networks
   const customs = await customNetworksState.getAllCustomEVMNetworks();
   const customNetworks = customs.map(options => {
-    const newCustomNetwork = new CustomEvmNetwork(options);
-    return {
-      ...newCustomNetwork,
-      isActive: activeNetworks.includes(newCustomNetwork.name),
-    };
+    return new CustomEvmNetwork(options);
   });
-  const networks = await getAllNetworksAndStatus();
-  const allNetworksTestNets = networks
+  allCustomNetworks.value = customNetworks;
+  //Get Test Networks
+  const testNetworks = await getAllNetworks();
+  const allNetworksTestNets = testNetworks
     .filter(({ isTestNetwork }) => isTestNetwork)
     .sort((a, b) => a.name_long.localeCompare(b.name_long));
 
   allTestNets.value = allNetworksTestNets;
-  allCustomNetworks.value = customNetworks;
 };
 
 onBeforeMount(async () => {
   await setNetworkLists();
 });
 
-const onToggle = async (networkName: string, isActive: boolean) => {
+/** -------------------
+ * Pin Actions
+ * ------------------- */
+
+const getIsPinned = (network: NetworkNames) => {
+  return pinnedNetworks.value.includes(network);
+};
+
+const onTogglePin = async (networkName: string, isActive: boolean) => {
   try {
     await networksState.setNetworkStatus(networkName, isActive);
-    emit('update:activeNetworks');
-    allTestNets.value = allTestNets.value.map(network => {
-      if (network.name === networkName) {
-        network.isActive = isActive;
-      }
-
-      return network;
-    });
+    emit('update:pinNetwork', networkName, isActive);
     await setNetworkLists();
   } catch (e) {
     console.error(e);
@@ -169,7 +170,8 @@ const onNetworkDeleted = async (chainId: string) => {
   // hasMoreThanOneActiveNetwork.value =
   //   allTestNets.value.filter(net => net.isActive).length > 1;
   await setNetworkLists();
-  emit('update:activeNetworks');
+  //TODO: emit('update:pinNetwork', chainId, false);
+  emit('update:pinNetwork', chainId, false);
 };
 
 const updateSearch = (value: string) => {