Rainbow kit doesn't work from inside iframe on mobile device

[moneta]

Hi,

I am running rainbow modal from inside an iframe on mobile devices but it doesn't work. When I click on the wallet icons (Coinbase, MetaMask, Rainbow) it doesn't react.

Any advice?

Thank you very much.

[magiziz]

@moneta I would imagine that iframe doesn't work because we use WalletConnect deep links to redirect users to the wallet app and iframe can't detect the deep link properly. Do you have a small minimal reproducible example by any chance ?

[moneta]

Step to reproduce:

I got the followings running with nextjs:

  "@rainbow-me/rainbowkit": "2.0.5",
  "@tanstack/react-query": "^5.29.2",
  "viem": "2.9.20",
  "wagmi": "^2.8.0",

And very standard code to inject wallet using rainbow kit:

const config = createConfig({
  chains: [Chains.mainnet],
  connectors,
  ssr: true,
  transports: {
    [mainnet.id]: http(),
  },
});

const queryClient = new QueryClient()

export default function App({
    Component,
    pageProps,
}: AppProps<{
    session: Session;
}>) {
    return (
        <>
           <WagmiProvider config={config}>
                <QueryClientProvider client={queryClient}>
                    <RainbowKitProvider modalSize='compact' >
                        <SessionProvider
                            session={pageProps.session}
                            refetchInterval={0}
                        >
                            <Toaster />
                            <Layout>
                                <Component {...pageProps} />
                            </Layout>
                        </SessionProvider>
                    </RainbowKitProvider>
                </QueryClientProvider>
            </WagmiProvider>
        </>
    );
}

The above app runs in its own domain: for example https://my-domain.com

Then on a main website, put them all in an iFrame:
iframe__reward.src = https://my-domain.com

The main website has a different domain, of course. They're all working fine except when running the main website on mobile device. It works on desktop browsers though

(If you want a quick test, please go to: https://npayme.com and click on the Get Rewards button on the bottom left corner)

[magiziz]

Ah yeah this is something that's out of our control. Usually iframe works on desktop, but with mobile we use WalletConnect which doesn't work with deeplink via iframe. I would suggest separating iframe logic to have some wallet actions within the website itself.