Connect Walle Modal shows 2 Metamask options while using RainBowKit

Question

I was trying to integrate Metamask and Phantom wallet into my presale website. But when I click the "connect wallet" button, it shows 2 metamask (and/or phantom) wallet. I have installed only 1 extension. This error only happens the first time you open the browser.

2 Wallet appears on Modal

Answer 1

Did you use the lates version of rainbow kit and wagmi? Maybe one of the reason is the version incompatible.

And also wagmi provider is affected double times. Consider parent provider, children component, home page component and its relationship with wagmi provider. I mean, you should use provider only wrapped the home page, not specific component.

Please check this code, this is the general hierachy of providers.

"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
import { config } from "@/wagmi";
import "@rainbow-me/rainbowkit/styles.css";
import { Web3Provider } from "@/contexts/web3Context";
const client = new QueryClient();

export default function RootProvider({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={client}>
        <RainbowKitProvider
          coolMode={true}
          theme={darkTheme({
            accentColor: "#824B3D",
            accentColorForeground: "#dbdbcf",
            borderRadius: "small",
          })}
        >
          <Web3Provider>{children}</Web3Provider>
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

You can use this provider wrapped of your home page component.