[bug] Connecting rainbowkit on mobile gets error

[jialok0218]

Is there an existing issue for this?

• [X] I have searched the existing issues

RainbowKit Version

^2.1.2

wagmi Version

^2.10.3

Current Behavior

Hello everyone, I am new to Rainbowkit and I am trying to make my first dApp with rainbowkit. When I tried to click any wallet from the list, it prompted this error . but when on desktop there is no issue with it.

On Mobile device https://github.com/rainbow-me/rainbowkit/assets/78463008/54900d87-3ce3-4ef3-a4fe-0c2b634c93a9

On PC view https://github.com/rainbow-me/rainbowkit/assets/78463008/dfc29af6-1470-49ff-9774-9ca4f746e0f9

Anyone can tell me what is the problem with my setup?

Expected Behavior

Connect button works fine in mobile view

Steps To Reproduce

This is my existing setup in my _app.jsx

import { ChakraProvider } from '@chakra-ui/react';
import theme from '../styles/theme';
import Wrapper from '../layouts/Wrapper';
import { ToastContainer, Slide } from 'react-toastify'; // Import the Slide transition
import 'react-toastify/dist/ReactToastify.css';
import '@rainbow-me/rainbowkit/styles.css';
import {
  RainbowKitProvider,
  lightTheme,
} from '@rainbow-me/rainbowkit';
import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  rainbowWallet,
  metaMaskWallet,
  coinbaseWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

import { WagmiProvider, createConfig } from 'wagmi';
import { webSocket, switchChain } from '@wagmi/core';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
import {
  RainbowKitSiweNextAuthProvider,
  GetSiweMessageOptions,
} from '@rainbow-me/rainbowkit-siwe-next-auth';
import { SessionProvider } from 'next-auth/react';
import NextNProgress from 'nextjs-progressbar';

// Define the SIWE message options
const getSiweMessageOptions = () => ({
  statement: 'Sign in to BlockSeats to organize events and purchase tickets.',
});

const polygonAmoy = {
  id: 80002,
  name: 'Polygon Amoy Testnet',
  network: 'polygon-amoy',
  nativeCurrency: {
    name: 'MATIC',
    symbol: 'MATIC',
    decimals: 18,
  },
  rpcUrls: {
    default: 'https://rpc-amoy.polygon.technology/',
  },
  blockExplorers: {
    default: { name: 'Polygonscan', url: 'https://amoy.polygonscan.com/' },
  },
  testnet: true,
};

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [rainbowWallet, metaMaskWallet],
    },
    {
      groupName: 'Others',
      wallets: [coinbaseWallet, walletConnectWallet],
    },
  ],
  {
    appName: 'Welcome to my BlockSeats App',
    projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
  }
);
const chains = [polygonAmoy];

const config = createConfig({
  autoConnect: true,
  connectors,
  chains,
  initialChain: { polygonAmoy }, 
  ssr: true, 
  transports: {
    [polygonAmoy.id]: webSocket(`wss://polygon-amoy.g.alchemy.com/v2/${process.env.NEXT_PUBLIC_ALCHEMY_API_KEY}`), // Your Alchemy WebSocket URL for polygonAmoy
  },
});

const queryClient = new QueryClient();

function MyApp({ Component, pageProps }) {
  return (
    <WagmiProvider config={config}>
      <SessionProvider refetchInterval={0} session={pageProps.session}>
        <QueryClientProvider client={queryClient}>
          <RainbowKitSiweNextAuthProvider getSiweMessageOptions={getSiweMessageOptions}>
            <RainbowKitProvider
              theme={lightTheme()}
            >
              <ChakraProvider theme={theme}>
                <Wrapper>
                  <NextNProgress
                    color="#010F8D"
                    startPosition={0.3}
                    stopDelayMs={200}
                    height={5}
                    showOnShallow={true}
                  />
                  <Component {...pageProps} />
                  <ToastContainer
                    position="top-left"
                    theme="dark"
                    autoClose={3000} 
                    transition={Slide} 
                  />
                </Wrapper>
              </ChakraProvider>
            </RainbowKitProvider>
          </RainbowKitSiweNextAuthProvider>
        </QueryClientProvider>
      </SessionProvider>
    </WagmiProvider>
  );
}

export default MyApp;

This is my ConnectButton

      <ConnectButton.Custom>
        {({
          account,
          chain,
          openAccountModal,
          openConnectModal,
          authenticationStatus,
          mounted,
        }) => {
          const ready = mounted;
          const connected =
            ready &&
            account &&
            chain &&
            (!authenticationStatus || authenticationStatus === 'authenticated');

          return (
            <div
              {...(!ready && {
                'aria-hidden': true,
                style: {
                  opacity: 0,
                  pointerEvents: 'none',
                  userSelect: 'none',
                },
              })}
            >
              {connected ? (
                <Flex alignItems="center">
                  {isLargerThan90 && (
                    <Box
                      as={Button}
                      bg="white"
                      color="#010F8D"
                      borderRadius="20px"
                      _hover={{ bg: 'gray.200' }}
                      _active={{ bg: 'white' }}
                      mr={2}
                    >
                      <Flex alignItems="center">
                        <Text fontSize="sm">
                          {balanceData ? `${formatBalance(balanceData.value)}` : 'Loading...'}
                        </Text>
                        <Box ml={2}>
                          <Image src="/assets/images/polygon.svg" alt="Polygon Icon" width={4} height={4} />
                        </Box>
                      </Flex>
                    </Box>
                  )}
                  <Box>
                    <Menu>
                      <MenuButton
                        as={Button}
                        bg="white"
                        color="#010F8D"
                        borderRadius="20px"
                        _hover={{ bg: 'gray.200' }}
                        _active={{ bg: 'white' }}
                        leftIcon={<PiWalletFill />}
                      >
                        {username || account.displayName}
                      </MenuButton>
                      <MenuList zIndex="2000"> {/* Set a high z-index here */}
                        <MenuItem onClick={onProfileOpen}>Profile</MenuItem>
                        <MenuItem onClick={onNotificationOpen}>Notification</MenuItem>
                        <MenuItem onClick={openAccountModal}>Account</MenuItem>
                      </MenuList>
                    </Menu>
                  </Box>
                </Flex>
              ) : (
                <Button
                  bg="white"
                  color="#010F8D"
                  borderRadius="20px"
                  _hover={{ bg: 'gray.200' }}
                  _active={{ bg: 'white' }}
                  leftIcon={<PiWalletFill />}
                  onClick={openConnectModal}
                >
                  Sign In
                </Button>
              )}
            </div>
          );
        }}
      </ConnectButton.Custom>

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

No response

Anything else?

No response