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 { 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.solana]: SolanaNetworks, [ProviderName.enkrypt]: {}, }; -const getAllNetworks = async (): Promise => { +const getAllNetworks = async (includeCustom: boolean = true): Promise => { 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/App.vue b/packages/extension/src/ui/action/App.vue index 8c46db58d..d129ee580 100644 --- a/packages/extension/src/ui/action/App.vue +++ b/packages/extension/src/ui/action/App.vue @@ -12,8 +12,8 @@
- - Custom networks + + Other networks Lock Enkrypt @@ -80,9 +80,9 @@
{ 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; }; 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 11debb10f..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 @@ -
+

Press Pin button

@@ -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,13 +219,13 @@ const getCanDrag = (network: BaseNetwork) => { 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 @@ + 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 @@ + 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 3bcfa5212..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 @@ -1,9 +1,10 @@