All networks are shown as Ethereum

[marsidorowicz]

Describe the bug After connecting metamask, any network is shown as Ethereum

SDK Version

• 2.0.0

To Reproduce Steps to reproduce the behavior:

1. Go to '...' https://docs.walletconnect.com/2.0/web3modal/react/installation
2. Follow steps to install and implement in react app
3. Choose any network after connecting metamask
4. see that any network chosen does not change network icon, it stays ethereum

Expected behavior After connecting to network, this network image should apear also

const { selectedChain, setSelectedChain } = useWeb3ModalNetwork()

should show this network

Screenshots

Desktop (please complete the following information):

• OS: Windows 11
• Browser chrome
• Version 109.0.5414.76

Additional context Add any other context about the problem here.

[xzilja]

useWeb3ModalNetwork hook will be going away in next release, does same issue happen when you use wagmi hooks?

https://wagmi.sh/react/hooks/useSwitchNetwork and https://wagmi.sh/react/hooks/useNetwork

[marsidorowicz]

let me check :)

[xzilja]

if that doesn't work, another temporary sollution could be something like this https://github.com/WalletConnect/web3modal/issues/815#issuecomment-1405306744

[marsidorowicz]

so using :

import { useNetwork } from 'wagmi'

Usage
import { useNetwork } from 'wagmi'

function App() {
  const { chain, chains } = useNetwork()

  return (
    <>
      {chain && <div>Connected to {chain.name}</div>}
      {chains && (
        <div>Available chains: {chains.map((chain) => chain.name)}</div>
      )}
    </>
  )
}

gave expected result:

so the issue with wrong network in web3 modal button and switch remains

[xzilja]

How are you switching the chain? Is it from ui, extension or using wagmi useSwitchNetwork? I've tried to replicate these and everything works as expected.

In #845 there will be an option to set default chain i.e one used before user connects if you manage this kind of stuff via custom ui, but after that everything should be managed via wagmi or modal ui. However preview in the video still uses 2.0.0

https://user-images.githubusercontent.com/3154053/215071730-2fa700ad-1c76-4ef1-950c-5b32bee1ca91.mov

[marsidorowicz]

to switch between networks I use:

        <Web3Button icon="show" label="Connect Wallet" balance="show" />

                            <Web3NetworkSwitch /> 

that were in example:

https://docs.walletconnect.com/2.0/web3modal/react/installation

exactly as on the video in your question

when I used :

`import { useNetwork, useSwitchNetwork } from 'wagmi'

function App() {
 const { chain } = useNetwork()
 const { chains, error, isLoading, pendingChainId, switchNetwork } =
 useSwitchNetwork()

 return (
 <>
 {chain && <div>Connected to {chain.name}</div>}

 {chains.map((x) => (
 <button
 disabled={!switchNetwork || x.id === chain?.id}
 key={x.id}
 onClick={() => switchNetwork?.(x.id)}
 >
 {x.name}
 {isLoading && pendingChainId === x.id && ' (switching)'}
 </button>
 ))}

 <div>{error && error.message}</div>
 </>
 )
}

` the name of chain is correct

[marsidorowicz]

so in your video the icon of chain is correctly showing avax when chain is avax, here at mine its always ethereum, on screenshot you may see matic icon with matic amount but ethereum chain icon (in metamask it swtiched correctly to polygon)

[xzilja]

Sorry, still trying to understand your use case 😅 any chance you can deploy live preview / video or provide git repo url that can demonstrate it in detail?

[marsidorowicz]

Sure! Here link to a video: https://drive.google.com/file/d/14m965b4aQ3fCfX3hkfUcN38-UJVNYDl-/view?usp=share_link

i found out that after changing a network different to ethereum then click on this network again makes a change to a correct icon of the network, so high likely just a state of current chain is not updated

[marsidorowicz]

Hi again, I found the reason causing this error, I needed to reinstall metamask and update all dependencies and now work as intended, ready to be closed

[marsidorowicz]

btw i moved also wagmi config wrap into main _app making it available for all pages maybe this also helped

[xzilja]

Oh, definitely, wagmi provider needs to wrap whole app, plus things like configureClient should be initiated outside of react as well (so they are not re-created). I am also memoising web3modal in next version just in case (it doesn't need to re-render at all and it's state is separate from react entirely).

[marsidorowicz]

problem came back, idk, i see it is connected to defaultCHain like:

                <Web3Modal
                    projectId={projectId}
                    ethereumClient={ethereumClient}
                    defaultChain={polygon}
                />

when it is not filled or it is undefined it is always mainnet, then icon after changing network for sec shows correct, then switches to defaultChain icon ;p

but on web3button the chain icon showing balance is correct, crazy

my code:

import {
    EthereumClient,
    modalConnectors,
    walletConnectProvider
} from '@web3modal/ethereum'
import { configureChains, createClient, WagmiConfig } from 'wagmi'

import {
    mainnet,
    polygon,
    optimism,
    arbitrum,
    avalanche,
    fantom,
    bsc
} from 'wagmi/chains'
export const projectId: any = process.env.NEXT_PUBLIC_PROJECT_ID

// 2. Configure wagmi client
const chains = [mainnet, polygon, optimism, arbitrum, avalanche, fantom, bsc]

const { provider } = configureChains(chains, [
    walletConnectProvider({ projectId })
])

const wagmiClient = createClient({
    autoConnect: true,
    connectors: modalConnectors({
        appName: 'cw',
        chains
    }),
    provider
})

// 3. Configure modal ethereum client
export const ethereumClient = new EthereumClient(wagmiClient, chains)

function MyApp({
    Component,
    pageProps: { session, ...pageProps }
}: AppProps | any) {
    return (
        <SessionProvider session={session}>
            <Provider store={store}>
                <WagmiConfig client={wagmiClient}>
                    <Component {...pageProps} />
                </WagmiConfig>
            </Provider>
        </SessionProvider>
    )
}

export default MyApp