diff --git a/examples/react-ethers5/src/App.tsx b/examples/react-ethers5/src/App.tsx index bc79c788c2..85eec94819 100644 --- a/examples/react-ethers5/src/App.tsx +++ b/examples/react-ethers5/src/App.tsx @@ -49,6 +49,7 @@ const ethersConfig = defaultConfig({ createWeb3Modal({ ethersConfig, chains, + defaultChain: chains[1], projectId, enableAnalytics: true, themeMode: 'light', diff --git a/examples/react-solana/src/App.tsx b/examples/react-solana/src/App.tsx index 201cd2739c..3677e4754f 100644 --- a/examples/react-solana/src/App.tsx +++ b/examples/react-solana/src/App.tsx @@ -60,6 +60,7 @@ createWeb3Modal({ solanaConfig, projectId, themeMode: 'light', + defaultChain: chains[2], chains, wallets: [ new HuobiWalletAdapter(), diff --git a/examples/react-wagmi/src/App.tsx b/examples/react-wagmi/src/App.tsx index c85465628a..be57ef6a8a 100644 --- a/examples/react-wagmi/src/App.tsx +++ b/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', diff --git a/packages/base/adapters/evm/ethers/client.ts b/packages/base/adapters/evm/ethers/client.ts index 11e2832380..8fd0f46236 100644 --- a/packages/base/adapters/evm/ethers/client.ts +++ b/packages/base/adapters/evm/ethers/client.ts @@ -149,10 +149,7 @@ export class EVMEthersClient implements ChainAdapter { diff --git a/packages/base/adapters/evm/ethers5/client.ts b/packages/base/adapters/evm/ethers5/client.ts index efe92182e8..a71d7a83f5 100644 --- a/packages/base/adapters/evm/ethers5/client.ts +++ b/packages/base/adapters/evm/ethers5/client.ts @@ -130,10 +130,7 @@ export class EVMEthers5Client implements ChainAdapter { diff --git a/packages/base/adapters/evm/wagmi/client.ts b/packages/base/adapters/evm/wagmi/client.ts index 2bae0c67b4..7df9f6531b 100644 --- a/packages/base/adapters/evm/wagmi/client.ts +++ b/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') diff --git a/packages/base/adapters/solana/web3js/client.ts b/packages/base/adapters/solana/web3js/client.ts index 91ddf0e0bf..12dfbfc8bc 100644 --- a/packages/base/adapters/solana/web3js/client.ts +++ b/packages/base/adapters/solana/web3js/client.ts @@ -88,8 +88,10 @@ export class SolanaWeb3JsClient implements ChainAdapter c.chainId === defaultChain?.chainId) + this.networkControllerClient = { switchCaipNetwork: async caipNetwork => { if (caipNetwork) { @@ -220,21 +230,17 @@ export class SolanaWeb3JsClient implements ChainAdapter { this.syncAccount() diff --git a/packages/core/src/controllers/NetworkController.ts b/packages/core/src/controllers/NetworkController.ts index 30f9e24009..d86447b555 100644 --- a/packages/core/src/controllers/NetworkController.ts +++ b/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) }, diff --git a/packages/scaffold-ui/src/modal/w3m-account-button/index.ts b/packages/scaffold-ui/src/modal/w3m-account-button/index.ts index e13fa115be..7efb78b212 100644 --- a/packages/scaffold-ui/src/modal/w3m-account-button/index.ts +++ b/packages/scaffold-ui/src/modal/w3m-account-button/index.ts @@ -1,5 +1,6 @@ import { AccountController, + AssetController, AssetUtil, CoreHelperUtil, ModalController, @@ -38,6 +39,8 @@ 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 ----------------------------------------- // @@ -45,6 +48,11 @@ export class W3mAccountButton extends LitElement { 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) diff --git a/packages/scaffold-ui/src/modal/w3m-network-button/index.ts b/packages/scaffold-ui/src/modal/w3m-network-button/index.ts index 230c661813..540bdbbb6a 100644 --- a/packages/scaffold-ui/src/modal/w3m-network-button/index.ts +++ b/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()} diff --git a/packages/scaffold-utils/src/ethers/EthersHelpersUtil.ts b/packages/scaffold-utils/src/ethers/EthersHelpersUtil.ts index 9b0e84015d..d01cbd4826 100644 --- a/packages/scaffold-utils/src/ethers/EthersHelpersUtil.ts +++ b/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) { diff --git a/packages/scaffold-utils/src/solana/SolanaHelpersUtils.ts b/packages/scaffold-utils/src/solana/SolanaHelpersUtils.ts index d8dfe17c2c..6a6c6ecf99 100644 --- a/packages/scaffold-utils/src/solana/SolanaHelpersUtils.ts +++ b/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