diff --git a/packages/extension/src/libs/networks-state/index.ts b/packages/extension/src/libs/networks-state/index.ts index 3a0af4706..59dbf6cad 100644 --- a/packages/extension/src/libs/networks-state/index.ts +++ b/packages/extension/src/libs/networks-state/index.ts @@ -15,9 +15,19 @@ class NetworksState { const networks: NetworkStorageElement[] = POPULAR_NAMES.map(name => ({ name, })); - await this.setState({ networks, newNetworksVersion: '' }); + await this.setState({ + networks, + newNetworksVersion: '', + enabledTestNetworks: [], + newUsedFeatures: { networks: [], swap: [] }, + }); } + /** + * Pins or unpins a network on the UI. + * @param targetNetworkName - the name of the network to set the status of + * @param isActive - represents whether or not the network is pinned on the ui + */ async setNetworkStatus( targetNetworkName: string, isActive: boolean, @@ -43,6 +53,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 ( @@ -69,11 +89,44 @@ class NetworksState { .concat(fnetworkItem, validNetworks.slice(insertIdx)); state.networks = validNetworks; state.newNetworksVersion = __PACKAGE_VERSION__ as string; + state.newUsedFeatures = { networks: [], swap: [] }; await this.setState(state); } } - async getActiveNetworkNames(): Promise { + async setUsedFeature(feature: 'networks' | 'swap', networkName: string) { + const state: IState | undefined = await this.getState(); + if (state) { + const newUsedFeatures = state.newUsedFeatures || { + networks: [], + swap: [], + }; + newUsedFeatures[feature].push(networkName); + await this.setState({ ...state, newUsedFeatures }); + } + } + + async getUsedFeatures(): Promise { + const state: IState | undefined = await this.getState(); + if (state && state.newUsedFeatures) { + return state.newUsedFeatures; + } + return { networks: [], swap: [] }; + } + + /** + * Retrieves the names of the pinned networks. + * + * This method first ensures that networks with new features are inserted. + * It then attempts to retrieve the current state. If the state and its networks + * are defined, it maps and returns the names of the valid networks. + * If the state or networks are not defined, it sets the initial active networks + * and returns a predefined list of popular network names. + * + * Previously, the method was named `getActiveNetworks`. + * @returns {Promise} A promise that resolves to an array of active network names. + */ + async getPinnedNetworkNames(): Promise { await this.insertNetworksWithNewFeatures(); const state: IState | undefined = await this.getState(); if (state && state.networks) { @@ -85,16 +138,37 @@ class NetworksState { } } + async getEnabledTestNetworks(): Promise { + await this.insertNetworksWithNewFeatures(); + const state: IState | undefined = await this.getState(); + if (state && state.enabledTestNetworks) { + const validNetworks = state.enabledTestNetworks; + return validNetworks.map(({ name }) => name); + } else { + this.setState(Object.assign({}, state, { enabledTestNetworks: [] })); + return []; + } + } + + async setTestnetStatus( + networkName: string, + isEnabled: boolean, + ): Promise { + const state: IState | undefined = await this.getState(); + const enabledTestNetworks = (state.enabledTestNetworks || []).filter( + n => n.name !== networkName, + ); + if (isEnabled) enabledTestNetworks.push({ name: networkName }); + await this.setState({ ...state, enabledTestNetworks }); + } + async reorderNetwork(networkNames: string[]): Promise { const state: IState | undefined = await this.getState(); const activeNetworks: NetworkStorageElement[] = networkNames.map(name => ({ name, isActive: true, })); - await this.setState({ - networks: activeNetworks, - newNetworksVersion: state.newNetworksVersion, - }); + await this.setState({ ...state, networks: activeNetworks }); } async setState(state: IState): Promise { diff --git a/packages/extension/src/libs/networks-state/types.ts b/packages/extension/src/libs/networks-state/types.ts index b70751088..ab36d94c9 100644 --- a/packages/extension/src/libs/networks-state/types.ts +++ b/packages/extension/src/libs/networks-state/types.ts @@ -9,4 +9,9 @@ export interface NetworkStorageElement { export interface IState { networks: NetworkStorageElement[]; newNetworksVersion: string; + enabledTestNetworks: NetworkStorageElement[]; + newUsedFeatures: { + networks: string[]; + swap: string[]; + }; } diff --git a/packages/extension/src/libs/utils/networks.ts b/packages/extension/src/libs/utils/networks.ts index 9afe2f2eb..7634ac299 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, @@ -73,12 +75,13 @@ const DEFAULT_SOLANA_NETWORK = Solana; const POPULAR_NAMES = [ NetworkNames.Bitcoin, NetworkNames.Ethereum, + NetworkNames.Solana, NetworkNames.Matic, NetworkNames.Polkadot, NetworkNames.Binance, NetworkNames.Rootstock, NetworkNames.Optimism, - NetworkNames.Kadena, + NetworkNames.Arbitrum, ]; export { getAllNetworks, diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue index 311ac7647..a723bd0b0 100644 --- a/packages/extension/src/ui/action/App.vue +++ b/packages/extension/src/ui/action/App.vue @@ -4,30 +4,17 @@
-