fix: logics to set default chain (#2787)

examples/react-ethers5/src/App.tsx

@@ -49,6 +49,7 @@ const ethersConfig = defaultConfig({
 createWeb3Modal({
   ethersConfig,
   chains,
+  defaultChain: chains[1],
   projectId,
   enableAnalytics: true,
   themeMode: 'light',

examples/react-solana/src/App.tsx

@@ -60,6 +60,7 @@ createWeb3Modal({
   solanaConfig,
   projectId,
   themeMode: 'light',
+  defaultChain: chains[2],
   chains,
   wallets: [
     new HuobiWalletAdapter(),

examples/react-wagmi/src/App.tsx

@@ -7,7 +7,7 @@ import {
   useWeb3ModalTheme
 } from '@web3modal/wagmi/react'
 import { WagmiProvider } from 'wagmi'
-import { arbitrum, mainnet } from 'wagmi/chains'
+import { arbitrum, mainnet, polygon } from 'wagmi/chains'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { WagmiHooks } from './WagmiHooks'
 
@@ -22,7 +22,7 @@ if (!projectId) {
 
 // 2. Create wagmiConfig
 const wagmiConfig = defaultWagmiConfig({
-  chains: [mainnet, arbitrum],
+  chains: [mainnet, polygon, arbitrum],
   projectId,
   metadata: {
     name: 'AppKit',
@@ -36,6 +36,7 @@ const wagmiConfig = defaultWagmiConfig({
 createWeb3Modal({
   wagmiConfig,
   projectId,
+  defaultChain: polygon,
   themeMode: 'light',
   themeVariables: {
     '--w3m-color-mix': '#00DCFF',

packages/base/adapters/evm/ethers/client.ts

@@ -149,10 +149,7 @@ export class EVMEthersClient implements ChainAdapter<EthersStoreUtilState, numbe
     this.ethersConfig = ethersConfig
     this.siweControllerClient = this.options?.siweConfig
     this.tokens = HelpersUtil.getCaipTokens(options.tokens)
-    this.defaultChain = {
-      ...EthersHelpersUtil.getCaipDefaultChain(defaultChain),
-      chain: CommonConstantsUtil.CHAIN.EVM
-    } as CaipNetwork
+    this.defaultChain = EthersHelpersUtil.getCaipDefaultChain(defaultChain)
     this.chains = chains
 
     this.networkControllerClient = {
@@ -525,6 +522,10 @@ export class EVMEthersClient implements ChainAdapter<EthersStoreUtilState, numbe
     this.projectId = options.projectId
     this.metadata = this.ethersConfig.metadata
 
+    if (this.defaultChain) {
+      this.appKit?.setCaipNetwork(this.defaultChain)
+    }
+
     this.createProvider()
 
     EthersStoreUtil.subscribeKey('address', () => {

packages/base/adapters/evm/ethers5/client.ts

@@ -130,10 +130,7 @@ export class EVMEthers5Client implements ChainAdapter<EthersStoreUtilState, numb
 
     this.ethersConfig = ethersConfig
     this.siweControllerClient = siweConfig
-    this.defaultChain = {
-      ...EthersHelpersUtil.getCaipDefaultChain(defaultChain),
-      chain: CommonConstantsUtil.CHAIN.EVM
-    } as CaipNetwork
+    this.defaultChain = EthersHelpersUtil.getCaipDefaultChain(defaultChain)
     this.tokens = HelpersUtil.getCaipTokens(tokens)
     this.chains = chains
 
@@ -410,6 +407,10 @@ export class EVMEthers5Client implements ChainAdapter<EthersStoreUtilState, numb
     this.projectId = options.projectId
     this.metadata = this.ethersConfig.metadata
 
+    if (this.defaultChain) {
+      this.appKit?.setCaipNetwork(this.defaultChain)
+    }
+
     this.createProvider()
 
     EthersStoreUtil.subscribeKey('address', () => {

packages/base/adapters/evm/wagmi/client.ts

@@ -551,6 +551,7 @@ export class EVMWagmiClient implements ChainAdapter {
       this.appKit?.setProfileName(null, this.chain)
     }
   }
+
   private async syncProfile(address: Hex, chainId: Chain['id']) {
     if (!this.appKit) {
       throw new Error('syncProfile - appKit is undefined')

packages/base/adapters/solana/web3js/client.ts

@@ -88,8 +88,10 @@ export class SolanaWeb3JsClient implements ChainAdapter<SolStoreUtilState, CaipN
 
   public defaultChain: CaipNetwork | undefined = undefined
 
+  public defaultSolanaChain: Chain | undefined = undefined
+
   public constructor(options: Web3ModalClientOptions) {
-    const { solanaConfig, chains, connectionSettings = 'confirmed' } = options
+    const { solanaConfig, chains, defaultChain, connectionSettings = 'confirmed' } = options
 
     if (!solanaConfig) {
       throw new Error('web3modal:constructor - solanaConfig is undefined')
@@ -101,6 +103,14 @@ export class SolanaWeb3JsClient implements ChainAdapter<SolStoreUtilState, CaipN
 
     this.connectionSettings = connectionSettings
 
+    this.defaultChain = defaultChain
+      ? SolHelpersUtil.getChainFromCaip(
+          this.chains,
+          SafeLocalStorage.getItem(SolConstantsUtil.CAIP_CHAIN_ID) || defaultChain.chainId
+        )
+      : undefined
+    this.defaultSolanaChain = this.chains.find(c => c.chainId === defaultChain?.chainId)
+
     this.networkControllerClient = {
       switchCaipNetwork: async caipNetwork => {
         if (caipNetwork) {
@@ -220,21 +230,17 @@ export class SolanaWeb3JsClient implements ChainAdapter<SolStoreUtilState, CaipN
       ...clientOptions.solanaConfig.auth
     })
 
-    this.syncRequestedNetworks(chains, this.options?.chainImages)
-
-    const chain = SolHelpersUtil.getChainFromCaip(
-      chains,
-      SafeLocalStorage.getItem(SolConstantsUtil.CAIP_CHAIN_ID) || ''
-    )
-
-    this.defaultChain = chain as CaipNetwork
-    this.syncRequestedNetworks(chains, this.options?.chainImages)
+    if (this.defaultSolanaChain) {
+      SolStoreUtil.setCurrentChain(this.defaultSolanaChain)
+      SolStoreUtil.setCaipChainId(`solana:${this.defaultSolanaChain.chainId}`)
+    }
 
-    if (chain) {
-      SolStoreUtil.setCurrentChain(chain)
-      SolStoreUtil.setCaipChainId(`solana:${chain.chainId}`)
+    if (this.defaultChain) {
+      this.appKit?.setCaipNetwork(this.defaultChain)
     }
+
     this.syncNetwork()
+    this.syncRequestedNetworks(chains, this.options?.chainImages)
 
     SolStoreUtil.subscribeKey('address', () => {
       this.syncAccount()

packages/core/src/controllers/NetworkController.ts

@@ -258,6 +258,10 @@ export const NetworkController = {
 
     const requestedCaipNetworks = this.getRequestedCaipNetworks()
 
+    if (!requestedCaipNetworks.length) {
+      return true
+    }
+
     return requestedCaipNetworks?.some(network => network.id === activeCaipNetwork?.id)
   },
 

packages/scaffold-ui/src/modal/w3m-account-button/index.ts

@@ -1,5 +1,6 @@
 import {
   AccountController,
+  AssetController,
   AssetUtil,
   CoreHelperUtil,
   ModalController,
@@ -38,13 +39,20 @@ export class W3mAccountButton extends LitElement {
 
   @state() private network = NetworkController.state.caipNetwork
 
+  @state() private networkImage = this.network ? AssetUtil.getNetworkImage(this.network) : undefined
+
   @state() private isUnsupportedChain = NetworkController.state.isUnsupportedChain
 
   // -- Lifecycle ----------------------------------------- //
   public constructor() {
     super()
     this.unsubscribe.push(
       ...[
+        AssetController.subscribeNetworkImages(() => {
+          this.networkImage = this.network?.imageId
+            ? AssetUtil.getNetworkImage(this.network)
+            : undefined
+        }),
         AccountController.subscribe(val => {
           if (val.isConnected) {
             this.address = val.address
@@ -62,6 +70,7 @@ export class W3mAccountButton extends LitElement {
         }),
         NetworkController.subscribeKey('caipNetwork', val => {
           this.network = val
+          this.networkImage = val?.imageId ? AssetUtil.getNetworkImage(val) : undefined
         }),
         NetworkController.subscribeKey('isUnsupportedChain', val => {
           this.isUnsupportedChain = val
@@ -76,7 +85,6 @@ export class W3mAccountButton extends LitElement {
 
   // -- Render -------------------------------------------- //
   public override render() {
-    const networkImage = AssetUtil.getNetworkImage(this.network)
     const showBalance = this.balance === 'show'
 
     return html`
@@ -85,7 +93,7 @@ export class W3mAccountButton extends LitElement {
         .isUnsupportedChain=${this.isUnsupportedChain}
         address=${ifDefined(this.address)}
         profileName=${ifDefined(this.profileName)}
-        networkSrc=${ifDefined(networkImage)}
+        networkSrc=${ifDefined(this.networkImage)}
         avatarSrc=${ifDefined(this.profileImage)}
         balance=${showBalance
           ? CoreHelperUtil.formatBalance(this.balanceVal, this.balanceSymbol)

packages/scaffold-ui/src/modal/w3m-network-button/index.ts

@@ -1,5 +1,6 @@
 import {
   AccountController,
+  AssetController,
   AssetUtil,
   EventsController,
   ModalController,
@@ -26,6 +27,8 @@ export class W3mNetworkButton extends LitElement {
 
   @state() private network = NetworkController.state.caipNetwork
 
+  @state() private networkImage = this.network ? AssetUtil.getNetworkImage(this.network) : undefined
+
   @state() private connected = AccountController.state.isConnected
 
   @state() private loading = ModalController.state.loading
@@ -36,7 +39,15 @@ export class W3mNetworkButton extends LitElement {
   public override firstUpdated() {
     this.unsubscribe.push(
       ...[
-        NetworkController.subscribeKey('caipNetwork', val => (this.network = val)),
+        AssetController.subscribeNetworkImages(() => {
+          this.networkImage = this.network?.imageId
+            ? AssetUtil.getNetworkImage(this.network)
+            : undefined
+        }),
+        NetworkController.subscribeKey('caipNetwork', val => {
+          this.network = val
+          this.networkImage = val?.imageId ? AssetUtil.getNetworkImage(val) : undefined
+        }),
         AccountController.subscribeKey('isConnected', val => (this.connected = val)),
         ModalController.subscribeKey('loading', val => (this.loading = val)),
         NetworkController.subscribeKey('isUnsupportedChain', val => (this.isUnsupportedChain = val))
@@ -55,7 +66,7 @@ export class W3mNetworkButton extends LitElement {
         data-testid="wui-network-button"
         .disabled=${Boolean(this.disabled || this.loading)}
         .isUnsupportedChain=${this.isUnsupportedChain}
-        imageSrc=${ifDefined(AssetUtil.getNetworkImage(this.network))}
+        imageSrc=${ifDefined(this.networkImage)}
         @click=${this.onClick.bind(this)}
       >
         ${this.getLabel()}

packages/scaffold-utils/src/ethers/EthersHelpersUtil.ts

@@ -1,3 +1,4 @@
+import { ConstantsUtil as CommonConstantsUtil } from '@web3modal/common'
 import type { CaipNetwork } from '@web3modal/core'
 import { ConstantsUtil } from '../ConstantsUtil.js'
 import { PresetsUtil } from '../PresetsUtil.js'
@@ -12,7 +13,8 @@ export const EthersHelpersUtil = {
     return {
       id: `${ConstantsUtil.EIP155}:${chain.chainId}`,
       name: chain.name,
-      imageId: PresetsUtil.EIP155NetworkImageIds[chain.chainId]
+      imageId: PresetsUtil.EIP155NetworkImageIds[chain.chainId],
+      chain: CommonConstantsUtil.CHAIN.EVM
     } as CaipNetwork
   },
   hexStringToNumber(value: string) {

packages/scaffold-utils/src/solana/SolanaHelpersUtils.ts

@@ -34,6 +34,7 @@ export const SolHelpersUtil = {
       return {
         ...selectedChain,
         id: `solana:${chainId}`,
+        chainId,
         imageId: PresetsUtil.EIP155NetworkImageIds[chainId],
         chain: CommonConstantsUtil.CHAIN.SOLANA
       } as const
@@ -42,6 +43,7 @@ export const SolHelpersUtil = {
     return {
       ...SolConstantsUtil.DEFAULT_CHAIN,
       id: `solana:${chainId}`,
+      chainId,
       imageId: PresetsUtil.EIP155NetworkImageIds[chainId],
       chain: CommonConstantsUtil.CHAIN.SOLANA
     } as const