[bug] ReconnectOnMount working (refresh) but any actions and switching tabs will disconnect

[zkSoju]

Is there an existing issue for this?

• [X] I have searched the existing issues

RainbowKit Version

2.1.2

wagmi Version

2.10.2

Current Behavior

I am using NextJs14 and it is disconnecting every time I'm switching tabs and back to the first tab, but when I refresh the page it will auto reconnect. I will create a reproducible version tomorrow if needed.

Expected Behavior

I would like for it to stay connected on all pages.

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

[magiziz]

I've tried to open four tabs and switch between them, but still don't get disconnected. If you could provide reproducible example that'd be awesome.

[zkSoju]

that'd

Hey there I mean different routes not tabs and sure I will share it here in a bit.

[zkSoju]

https://minimal-reprod.vercel.app/

https://github.com/0xHoneyJar/minimal-reprod

Here is a minimal reprod of the issue

[magiziz]

@zkSoju Can you try moving config and connectors outside of your Wrapper component ? Provided final code below 👇

components/wrapper.tsx

"use client";

import {
  connectorsForWallets,
  RainbowKitProvider,
} from "@rainbow-me/rainbowkit";
import {
  coinbaseWallet,
  metaMaskWallet,
  rabbyWallet,
  walletConnectWallet,
} from "@rainbow-me/rainbowkit/wallets";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { mainnet } from "viem/chains";
import { createConfig, http, WagmiProvider } from "wagmi";

const queryClient = new QueryClient();

const connectors = connectorsForWallets(
  [
    {
      groupName: "Recommended",
      wallets: [rabbyWallet, metaMaskWallet],
    },
    {
      groupName: "Others",
      wallets: [coinbaseWallet, walletConnectWallet],
    },
  ],
  {
    appName: "THJ Faucet",
    projectId: "b11f7f9ad45c8ad99b7190dd98b99ff3",
  }
);

const config = createConfig({
  connectors,
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(process.env[`NEXT_PUBLIC_RPC_URL_${mainnet.id}`]),
  },
  ssr: true,
});

const Wrapper = ({ children }: { children: React.ReactNode }) => {
  return (
    <WagmiProvider reconnectOnMount config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>{/* Your App */}</RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

export default Wrapper;

[magiziz]

@zkSoju Were you able to figure it out ?

[zkSoju]

figure

Yep I decided to use the reconnect action on component mount, but your solution works too I just don't want to have the wallet connect in the navbar

[magiziz]

@zkSoju Gotcha. Happy that it worked! I'll close this issue, but if you find any other weird behaviours or bugs feel free to raise another issue 👍