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;`

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Uh oh!

357758509 Dec 24, 2025

Replies: 0 comments

357758509
Dec 24, 2025