RainbowKit与Wagmi移动端WalletConnect重连问题求助

环境与依赖 #

• 使用的依赖版本：

"@rainbow-me/rainbowkit": "^1.0.5",
"viem": "^1.2.11",
"wagmi": "^1.3.8",

• 注意：wagmi v1需要viem作为peer依赖

问题现象 #

• 浏览器端MetaMask连接正常
• 移动端通过WalletConnect扫码首次连接成功，但断开后重连时出现两个错误：

index.js:1 {context: 'core'} {context: 'core/expirer'} 'No matching key. expirer: topic:382c73f5fe5ae4adad82117925b4cd6e9c6a2895736ae7f67b5f75a7673b3579'

Viem包错误： 
index.js:1 TypeError: Cannot convert a BigInt value to a number
    at Math.pow (<anonymous>)
    at numberToHex (toHex.ts:172:1)

• 错误触发后应用自动登出

完整代码配置 #

index.js #

import { wagmiConfig } from "./hooks/wagmi";
import { WagmiConfig } from "wagmi";
import './polyfills';

ReactDOM.render(
  <WagmiConfig config={wagmiConfig}>
      <Provider store={store}>
          <App />
      </Provider>
  </WagmiConfig>,
  document.getElementById("root")
);

wagmi.js #

import '@rainbow-me/rainbowkit/styles.css';
import {
  getDefaultWallets,
  RainbowKitProvider
} from '@rainbow-me/rainbowkit';
import { configureChains, createConfig, WagmiConfig } from 'wagmi';
import {
  goerli,
  mainnet,
  polygon,
  polygonMumbai
} from 'wagmi/chains';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import { env } from "../actions/config"


var allowedNetworks;

if(env == 'prod'){
    allowedNetworks = [ 
        polygon,
        mainnet
        ]
} else {
    allowedNetworks = [ 
        polygonMumbai,
        polygon,
        mainnet,
        goerli
      ]
}

export const { chains, publicClient , webSocketPublicClient} = configureChains(
    allowedNetworks,
    [
      alchemyProvider({ apiKey: process.env.REACT_APP_ALCHEMY_ID }),
      publicProvider()
    ]
  );
  
export const { connectors } = getDefaultWallets({
    appName: 'Web3Japan',
    projectId: process.env.REACT_APP_PROJECT_KEY,
    chains
  });
  
export const wagmiConfig = createConfig({
    autoConnect: true,
    connectors,
    publicClient,
    webSocketPublicClient
  })

App.js #

import {
  lightTheme,
  RainbowKitProvider
} from "@rainbow-me/rainbowkit";
import { chains } from './hooks/wagmi';

return (
    <RainbowKitProvider
    appInfo={{
        appName: 'Web3japan'
    }}
    chains={chains}
    theme={lightTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'small',
        fontStack: 'system',
        overlayBlur: 'small'
      })}
    >
      <BrowserRouter>
        <Switch>
          <Layout profilePic={profilePic}>
            <Route exact path="/">
              <Dashboard
                isLoggedIn={isLoggedIn}
                setIsLoggedIn={setIsLoggedIn}
              />
            </Route>
            <Route exact path="/dashboard">
              <Dashboard
                isLoggedIn={isLoggedIn}
                setIsLoggedIn={setIsLoggedIn}
              />
            </Route>
            <Route exact path="/profile">
              <Profile
                profileChanged={profileChanged}
                setProfileChanged={setProfileChanged}
              />
            </Route>
            <Route exact path="/login">
              <Redirect to="/" />
            </Route>
          </Layout>
        </Switch>
      </BrowserRouter>
    </RainbowKitProvider>
  );

polyfills.js #

import { Buffer } from 'buffer';

window.global = window.global ?? window;
window.Buffer = window.Buffer ?? Buffer;
window.process = window.process ?? { env: {} }; // Minimal process polyfill

export {};

内容的提问来源于stack exchange，提问作者ksd030687d