In a project built with React, Next.js, RainbowKit, and Wagmi, when BSC (Binance Smart Chain) is designated as the initial chain on H5 mobile terminals, the Ethereum Mainnet is consistently displayed upon connecting to the MetaMask wallet app, and the switch to the BSC chain cannot be completed successfully. #4916

357758509 · 2025-12-24T07:45:02Z

357758509
Dec 24, 2025

The following is the code for a project using React, Next.js, RainbowKit, and Wagmi.
`
import { getDefaultConfig, Chain } from '@rainbow-me/rainbowkit';
import {
metaMaskWallet,
okxWallet,
tokenPocketWallet,
trustWallet,
coinbaseWallet

} from '@rainbow-me/rainbowkit/wallets';
import { bsc, mainnet, bscTestnet, sepolia } from "viem/chains"

export const createWagmiConfig = getDefaultConfig({
appName: 'nffffeeee',
projectId: process.env.NEXT_PUBLIC_PRFDFDF || "" as string,
chains: [
bscTestnet,
sepolia,
],
wallets: [
{
groupName: 'Recommended',
wallets: [tokenPocketWallet, okxWallet, metaMaskWallet, trustWallet, coinbaseWallet],
},
],
multiInjectedProviderDiscovery: false,
ssr: true,
});

export const defaultChainId: number = bscTestnet.id;
export const defaultChain: Chain = bscTestnet as Chain; `

`function MyApp({ Component, pageProps }: AppPropsWithLayout) {

useSetViewportHeightCSS();

  const rem = width * 12 / designWidth;
  html.style.fontSize = rem + 'px';
}

// 使用 RAF 节流，避免频繁计算
function handleResize() {
  if (rafId !== null) return;
  rafId = requestAnimationFrame(() => {
    refreshRem();
    rafId = null;
  });
}

refreshRem(); // 初始化
window.addEventListener('resize', handleResize, { passive: true });

// 清理函数：移除监听器和待执行的 RAF
return () => {
  window.removeEventListener('resize', handleResize);
  if (rafId !== null) {
    cancelAnimationFrame(rafId);
  } 

};

}, []);

const getLayout = Component.getLayout ?? ((page) => page);
return (
<>

  <Head>
    <title>NeafsCoin</title>
    <meta name="viewport" content="width=device-width, 
           initial-scale=1.0,  
           maximum-scale=1,
           minimum-scale=1,
           user-scalable=no" />
    <meta
      content="nFDSFD"
      name="description"
    /> 

  </Head>

  <ReduxProvider>


     
      <WagmiProvider config={createWagmiConfig}> 
      
        <QueryClientProvider client={client}>
         <RainbowKitProvider 
            initialChain={defaultChainId} 
            theme={customizedTheme}
            coolMode 
            locale={isZh ? 'zh-CN' : (isZhHant ? 'zh-HK' : 'en-US')}
            modalSize="compact"
          >
   
            <TokenMonitor />
            <ToastContainer
              position="top-right"
              autoClose={3000}
              hideProgressBar={false}
              newestOnTop={false}
              closeOnClick
              rtl={false}
              pauseOnFocusLoss
              draggable
              pauseOnHover
              theme="light"
              toastClassName="custom-toast"
              bodyClassName="custom-toast-body"
              progressClassName="custom-toast-progress"
            />
         
            {getLayout(<Component {...pageProps} />)}
          </RainbowKitProvider>
          <MobileDebugger />
        </QueryClientProvider>
      </WagmiProvider>
    </ReduxProvider>
</>

);
}

export default MyApp;`

wesleysmyth · 2026-02-18T03:05:43Z

wesleysmyth
Feb 18, 2026

This is a known issue with MetaMask Mobile's handling of wallet_switchEthereumChain during the initial connection flow. The problem is that MetaMask Mobile sometimes ignores the chain specified in the connection request and defaults to the user's last-used chain.

Why it happens

When connecting via WalletConnect (which RainbowKit uses), the chain switching happens in two steps:

eth_requestAccounts — establishes the connection
wallet_switchEthereumChain — requests the target chain

MetaMask Mobile processes these sequentially, and on some versions it acknowledges the connection but drops or ignores the chain switch request — especially on mobile H5 (in-app browser).

Fix: Force chain switch after connection

Use wagmi's useSwitchChain hook to explicitly switch after detecting a connection on the wrong chain:

import { useAccount, useSwitchChain } from 'wagmi';
import { bsc } from 'wagmi/chains';
import { useEffect } from 'react';

function App() {
  const { chain, isConnected } = useAccount();
  const { switchChain } = useSwitchChain();

  useEffect(() => {
    if (isConnected && chain?.id !== bsc.id) {
      switchChain({ chainId: bsc.id });
    }
  }, [isConnected, chain?.id]);

  // ...
}

Wagmi config: put BSC first

The first chain in the chains array is the default. Make sure BSC is first:

import { createConfig, http } from 'wagmi';
import { bsc, mainnet } from 'wagmi/chains';

const config = createConfig({
  chains: [bsc, mainnet], // BSC first = default
  transports: {
    [bsc.id]: http(),
    [mainnet.id]: http(),
  },
});

RainbowKit: set `initialChain`

<RainbowKitProvider initialChain={bsc}>
  {children}
</RainbowKitProvider>

If MetaMask doesn't have BSC configured

The user needs BSC added to their wallet first. Use wallet_addEthereumChain as a fallback:

try {
  await switchChain({ chainId: bsc.id });
} catch (err) {
  // Chain not added — MetaMask will prompt to add it
  // wagmi handles this automatically if the chain is in your config
}

The combination of initialChain on RainbowKit + chains: [bsc, ...] first in config + the useEffect fallback covers all edge cases on MetaMask Mobile.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Uh oh!

357758509 Dec 24, 2025

Replies: 1 comment

Uh oh!

wesleysmyth Feb 18, 2026

Why it happens

Fix: Force chain switch after connection

Wagmi config: put BSC first

RainbowKit: set initialChain

If MetaMask doesn't have BSC configured

357758509
Dec 24, 2025

wesleysmyth
Feb 18, 2026

RainbowKit: set `initialChain`