feat: XDEFI-11389: Allow preselected chains (#87)

* feat: allow to set pre-selected chains

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xdefi/wallets-connector",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "description": "Cross chain wallets connector with react hooks",
   "author": "garageinc",
   "license": "MIT",

src/components/WalletsModal/SelectChainSection/SelectChainSection.tsx

@@ -20,8 +20,22 @@ interface IProps {
 }
 
 export const SelectChainSection = ({ provider, onSelect }: IProps) => {
+  const context = useContext(WalletsContext)
+
+  const preSelectedChains = useMemo(() => {
+    if (
+      !context?.chainSelectorOptions ||
+      context.chainSelectorOptions === 'all'
+    ) {
+      return CHAIN_VALUES
+    }
+    return CHAIN_VALUES.filter((val) =>
+      context.chainSelectorOptions.includes(val)
+    )
+  }, [context?.chainSelectorOptions])
+
   const [selectedChains, setSelectedChain] =
-    useState<IChainType[]>(CHAIN_VALUES)
+    useState<IChainType[]>(preSelectedChains)
 
   const handleClick = (value: IChainType) => {
     const isExist = selectedChains.find((chainName) => chainName === value)
@@ -40,7 +54,6 @@ export const SelectChainSection = ({ provider, onSelect }: IProps) => {
   }
 
   const pids = useConnectorActiveIds()
-  const context = useContext(WalletsContext)
 
   const needInstall = useMemo(() => {
     return (

src/helpers/types.ts

@@ -72,6 +72,10 @@ export interface IWeb3Providers {
   [key: string]: any
 }
 
+export interface IConnectorOptions {
+  connectorDefaultChains: 'all' | IChainType[]
+}
+
 export interface IProviderInfo {
   name: string
   logo: any

src/manager/index.tsx

@@ -1,31 +1,37 @@
 import React, { Fragment, createContext, useState, useEffect } from 'react'
 
 import { WalletsConnector } from '../wallets'
-import { IProviderOptions } from '../helpers'
+import { IConnectorOptions, IProviderOptions } from '../helpers'
 
 export const WalletsContext = createContext<WalletsConnector | null>(null)
 
 export const NetworkManager = ({
   children,
   options,
   network,
-  cacheEnabled
+  cacheEnabled,
+  connectorOptions
 }: {
   children: JSX.Element
   options: IProviderOptions
   network?: string
   cacheEnabled?: boolean
+  connectorOptions?: IConnectorOptions
 }) => {
   const [c, setWalletsConnector] = useState<WalletsConnector | null>(null)
 
   useEffect(() => {
-    const newConnector = new WalletsConnector(options, cacheEnabled)
+    const newConnector = new WalletsConnector(
+      options,
+      cacheEnabled,
+      connectorOptions
+    )
     setWalletsConnector(newConnector)
 
     return () => {
       newConnector.dispose()
     }
-  }, [options, network, cacheEnabled])
+  }, [options, network, cacheEnabled, connectorOptions])
 
   return (
     <WalletsContext.Provider value={c}>

src/wallets/index.ts

@@ -3,6 +3,7 @@ import {
   IChainToAccounts,
   IChainWithAccount,
   IConnectEventPayload,
+  IConnectorOptions,
   IProviderConfigs,
   IProviderOptions,
   IProviderWithAccounts,
@@ -14,6 +15,10 @@ import { IChainType, WALLETS_EVENTS } from '../constants'
 import { WalletConnect } from '../core'
 import { providers } from 'src/providers'
 
+const defaultConnectorOptions: IConnectorOptions = {
+  connectorDefaultChains: 'all'
+}
+
 export class WalletsConnector {
   public configs: IProviderConfigs = {}
 
@@ -22,7 +27,14 @@ export class WalletsConnector {
 
   private accounts: IProviderWithAccounts = {}
 
-  constructor(providerOptions: IProviderOptions, cacheProviders = true) {
+  private connectorOptions: IConnectorOptions
+
+  constructor(
+    providerOptions: IProviderOptions,
+    cacheProviders = true,
+    connectorOptions = defaultConnectorOptions
+  ) {
+    this.connectorOptions = connectorOptions
     const connector = new WalletConnect({
       cacheProviders,
       providerOptions
@@ -104,6 +116,10 @@ export class WalletsConnector {
     return this.connector.cachedProviders
   }
 
+  get chainSelectorOptions() {
+    return this.connectorOptions.connectorDefaultChains
+  }
+
   private getSavedEthereumProvider = (providerId: string) => {
     return this.currentProviders[providerId]
   }