[bug] RainbowKit not redirecting to Metamask on mobile when clicking

[uneeb123]

Is there an existing issue for this?

• [X] I have searched the existing issues

RainbowKit Version

2.1.2

wagmi Version

2.9.2

Current Behavior

RainbowKit works fine on web. But when I use mobile safari browser, clicking on the wallet does not redirect to Metamask wallet. I have tried removing WalletConnect and other configs. I have also tried downgrading RainbowKit. But it doesn't help.

https://github.com/rainbow-me/rainbowkit/assets/4120628/c9b62b62-88f0-46ae-9da7-1fa7818c6459

Here is the relevant code (I'm using NextJS 13.5.6):

src/utils/wagmi.ts

import { getDefaultConfig } from "@rainbow-me/rainbowkit";
import { type Config } from "wagmi";
import { blast, blastSepolia } from "wagmi/chains";

// const INFURA_API_KEY = process.env.NEXT_PUBLIC_INFURA_API_KEY;
const CHAIN = process.env.NEXT_PUBLIC_CHAIN || "testnet";
// const INFURA_BLAST_URL = `https://blast-mainnet.infura.io/v3/${INFURA_API_KEY}`;
// const INFURA_BLAST_SEPOLIA_URL = `https://blast-sepolia.infura.io/v3/${INFURA_API_KEY}`;
const WALLETCONNECT_PROJECT_ID = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID || "";

let config: Config;
if (CHAIN == "mainnet") {
  config = getDefaultConfig({
    appName: "RainbowKit demo",
    projectId: WALLETCONNECT_PROJECT_ID, // required for WalletConnect
    chains: [blast],
    ssr: true,
  });
} else {
  config = getDefaultConfig({
    appName: "RainbowKit demo",
    projectId: WALLETCONNECT_PROJECT_ID, // required for WalletConnect
    chains: [blastSepolia],
    ssr: true,
  });
}

export { config };

src/app/providers.tsx

"use client";
import { useEffect, useState, type ReactNode } from "react";

import "@rainbow-me/rainbowkit/styles.css";
import { CacheProvider } from "@chakra-ui/next-js";
import { Box, ChakraProvider, Flex, Link, defineStyleConfig, extendTheme } from "@chakra-ui/react";
import { Alert, AlertIcon, AlertTitle } from "@chakra-ui/react";
import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
import "@fontsource/orbitron";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { FaXTwitter } from "react-icons/fa6";
import { FaDiscord } from "react-icons/fa6";
import { IoDocumentText } from "react-icons/io5";
import { SiFarcaster } from "react-icons/si";
import { WagmiProvider } from "wagmi";

import { ForceTheme } from "@/app/ForceTheme";
import { RegistrationGuard } from "@/app/RegistrationGuard";
import { Footer, Header } from "@/components/Layout";
import { useWindowSize } from "@/hooks";
import { config } from "@/utils/wagmi";

const queryClient = new QueryClient();

export function Providers({ children }: { children: ReactNode }) {
  const [mounted, setMounted] = useState(false);
  const { isTablet } = useWindowSize();

  useEffect(() => setMounted(true), []);

  const theme = extendTheme({
    initialColorMode: "dark",
    useSystemColorMode: false,
    fonts: {
      heading: `'Orbitron', sans-serif`,
      body: `'Otbitron', sans-serif`,
    },
    colors: {
      brand: {
        100: "#F8EF00",
        200: "#F8EF00",
        300: "#F8EF00",
        400: "#F8EF00",
        500: "#F8EF00",
        600: "#F8EF00",
        700: "#F8EF00",
        800: "#F8EF00",
        900: "#F8EF00",
      },
      chakra: {
        body: {
          text: {
            color: "white",
          },
        },
        border: {
          color: "#F8EF00",
        },
      },
    },
    components: {
      Text: defineStyleConfig({
        baseStyle: {
          color: "white",
        },
      }),
      Heading: defineStyleConfig({
        baseStyle: {
          color: "white",
        },
      }),
      Modal: {
        baseStyle: () => ({
          dialog: {
            width: ["95%", "95%", "95%"],
            bg: "#222222",
          },
        }),
      },
    },
  });

  const errorBanner = false;
  const testnetBanner = true;

  return (
    <CacheProvider>
      <ChakraProvider theme={theme}>
        <WagmiProvider config={config}>
          <QueryClientProvider client={queryClient}>
            <RainbowKitProvider
              theme={darkTheme({
                accentColor: "#F8EF00",
                accentColorForeground: "#020C1B",
              })}
            >
              {mounted && (
                <ForceTheme>
                  <Flex flexDirection="column" minHeight={"100vh"} pb={20}>
                    {errorBanner && (
                      <Alert status="error" variant="solid">
                        <AlertIcon />
                        <AlertTitle>Blast Testnet is currently experiencing issues</AlertTitle>
                      </Alert>
                    )}
                    {testnetBanner && (
                      <Alert status="info" variant="solid">
                        <AlertIcon />
                        <AlertTitle>Megapot is live only on testnet </AlertTitle>
                      </Alert>
                    )}
                    <Header />

                    <Box as="main" flex={1} p={4}>
                      <RegistrationGuard>{children}</RegistrationGuard>
                    </Box>
                    <Box display="flex" gap={3} justifyContent="center">
                      <Link href="https://twitter.com/megapot_io" isExternal>
                        <FaXTwitter color="#F8EF00" fontSize={32} />
                      </Link>
                      <Link href="https://discord.gg/V6EFUEHrZc" isExternal>
                        <FaDiscord color="#F8EF00" fontSize={32} />
                      </Link>
                      <Link href="https://docs.megapot.io/" isExternal>
                        <IoDocumentText color="#F8EF00" fontSize={32} />
                      </Link>
                      <Link href="https://warpcast.com/~/channel/megapot" isExternal>
                        <SiFarcaster color="#F8EF00" fontSize={32} />
                      </Link>
                    </Box>
                    {isTablet && <Footer />}
                  </Flex>
                </ForceTheme>
              )}
            </RainbowKitProvider>
          </QueryClientProvider>
        </WagmiProvider>
      </ChakraProvider>
    </CacheProvider>
  );
}

Expected Behavior

It should just open up Metamask

Steps To Reproduce

No response

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

No response

Anything else?

No response

[magiziz]

@uneeb123 Are you able to share what console errors you get via simulator ? I'm not able to reproduce this for some reason.

Also can you try setting another projectId like this one 21fef48091f12692cad574a6f7753643 ? It'll be easier to see if it's a WalletConnect issue.

[magiziz]

@uneeb123 Were you able to figure it out ?