RainbowKit does not detect that Metamask is installed on the browser

[ngocnt01]

I installed RainbowKit in my Next.js project. Previously, RainbowKit was able to detect that MetaMask was installed on the browser. However, in recent versions, RainbowKit no longer detects the installed MetaMask on the browser. In contrast, for other wallets like OKX and Rainbow, RainbowKit can detect them after they are installed on the browser. Is this a new feature of RainbowKit? I look forward to your feedback.

[christianalberto]

Hi @ngocnt01, no, it is not a new feature. It is a common detection issue caused by the adoption of the EIP-6963 standard (Injected Provider Discovery) and wallet extension conflicts.

Key Causes & Fixes:
Use getDefaultConfig (RainbowKit v2+):

Ensure you are using getDefaultConfig from @rainbow-me/rainbowkit, which natively supports EIP-6963 wallet discovery for MetaMask.

import { getDefaultConfig } from '@rainbow-me/rainbowkit';

const config = getDefaultConfig({
  appName: 'Your App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, sepolia],
});

Wallet Extension Conflicts:

If multiple wallet extensions (e.g., OKX, Rabby, Phantom) are active, they can override window.ethereum and intercept MetaMask's detection. Disable competing extensions to test.

Client-Side Rendering (Next.js):

Since RainbowKit checks for browser-injected objects, ensure the wallet provider mounts strictly on the client side ('use client' directive in Next.js App Router).