Feat/custom networks

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 (

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,

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>
@@ -80,9 +80,9 @@
     </div>
 
     <add-network
-      v-show="addNetworkShow"
+      v-if="addNetworkShow"
       @close:popup="addNetworkShow = !addNetworkShow"
-      @update:active-networks="setActiveNetworks"
+      @update:pin-network="setIsPinnedNetwork"
     />
 
     <settings
@@ -205,9 +205,9 @@ const setActiveNetworks = async () => {
       network => !pinnedNetworkNames.includes(network.name),
     ),
   ];
-  networks.value = [
-    ...networks.value.filter(network => !network.isTestNetwork),
-  ];
+  // networks.value = [
+  // ...networks.value.filter(network => !network.isTestNetwork),
+  // ];
   // if (!pinnedNetworks.value.includes(currentNetwork.value)) {
   //   setNetwork(pinnedNetworks.value[0]);
   // }
@@ -506,7 +506,7 @@ const settingsAction = () => {
   closeMoreMenu();
   settingsShow.value = !settingsShow.value;
 };
-const customNetworksAction = () => {
+const otherNetworksAction = () => {
   closeMoreMenu();
   addNetworkShow.value = !addNetworkShow.value;
 };

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;

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>
@@ -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));
@@ -194,27 +219,28 @@ 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;
   &__scroll-area {
     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 {

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 };
+});

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>

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>

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>

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);