RainbotKit and Wagmi Connectivity Issues for mobile {context: 'core/expirer'} 'No matching key. expirer

Question

I was reading latest documentation from Rainbowkit and trying to integrate in my application , Here's the link for rainbowkit installation link :

https://www.rainbowkit.com/docs/installation

Main points to be noted is : wagmi v1 requires the viem peer dependency.

NPM VERSIONS OF THESE PACKAGES ARE :

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

It connects well and good from browser metamask , but when i try to login with walletconnect and using metamask scanner in phone for once it works perfectly , but when i disconnect the app and try to reconnect i get this error :

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

Another error from Viem package is : 
index.js:1 TypeError: Cannot convert a BigInt value to a number
    at Math.pow (<anonymous>)
    at numberToHex (toHex.ts:172:1)

and it eventually auto logs out from application , can anyone help me with this ? I've been trying to resolve this error since 2 days .

Here's all my code setup for this :

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 {};

Answer 1

This worked for me:

1. I have a uint64 that used to send it as an argument to transaction as a string:

 const id = `uint64String` 
 const { hash } = await writeContract({
      address: notaryShotContract.address as `0x${string}`,
      abi: contract.abi,
      functionName: 'submitMint',
      args: [id, cid],
    });

And got the same error as you. Revised my code in this way:

const bg = BigInt(`uint64String`);
    const { hash } = await writeContract({
      address: notaryShotContract.address as `0x${string}`,
      abi: contract.abi,
      functionName: 'submitMint',
      args: [bg, cid],
    });

Please refer to https://wagmi.sh/react/faq.

UPDATE:

I've also had to update package.json:

"browserslist": {
    "production": [
      "chrome >= 67",
      "edge >= 79",
      "firefox >= 68",
      "opera >= 54",
      "safari >= 14"
    ],

from this thread: https://github.com/paulmillr/noble-ed25519/issues/23#issuecomment-1109248320