Connecting on mobile v2

[weber77]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

^2.1.2

wagmi Version

^2.10.2

Current Behavior

when I connect on mobile it opens in metamask but does prompt for connection

Screen_Recording_20240618_210121_MetaMask.mp4

Expected Behavior

Screen_Recording_20240618_211254_MetaMask.mp4

Steps To Reproduce

1. follow link on a mobile browser:
2. click connect wallet
3. select metamask or walletconnect
4. it opens in metamask but does prompt to confirm

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

CodeSandBox

[magiziz]

@weber77 Seems to be a WalletConnect issue. Can you check if you've added your preview link to the "Allowed Domains" section in the WalletConnect dashboard ?

[sniper365]

@weber77 Seems to be a WalletConnect issue. Can you check if you've added your preview link to the "Allowed Domains" section in the WalletConnect dashboard ?

Hey @weber77 It's working after allow domain. But new issue. When i click button that call metamask action, No action at metamask. Need another configuration?

[HemangVora]

same with me no action at MM

[magiziz]

@sniper365 Are you saying that whenever you try to connect with MetaMask it doesn't do anything or it's not prompting you to connect to the dApp ? Are you able to show any console errors ?

[sniper365]

@magiziz First. MetaMask doesn't do anything when I call action after connect.

[magiziz]

@sniper365 Can you share a minimal reproducible example ?

[weber77]

@magiziz https://github.com/weber77/wagmi-mobile-test

[magiziz]

@weber77 Seems to work for me since i use my own projectId. What happens if you use the projectId below ?

rainbowkit/packages/rainbowkit/src/wallets/getWalletConnectConnector.ts

Line 95 in cdcaa25

const exampleProjectId = '21fef48091f12692cad574a6f7753643';

Don't use that in production, i'm just trying to see if you have configured everything in WalletConnect dashboard.

Also are you using any VPN's ?

[sniper365]

Yes, I configured projectId correctly and verified on the walletconnect
Yes, I use VPN. that would have some issue?

[weber77]

@weber77 Seems to work for me since i use my own projectId. What happens if you use the projectId below ?

rainbowkit/packages/rainbowkit/src/wallets/getWalletConnectConnector.ts

Line 95 in cdcaa25

const exampleProjectId = '21fef48091f12692cad574a6f7753643';

Don't use that in production, i'm just trying to see if you have configured everything in WalletConnect dashboard.

Also are you using any VPN's ?

I used it but it still doesn't work. Here's the repo

Screen_Recording_20240625_161013_MetaMask.mp4

[sniper365]

@magiziz @ I followed wagmi ssr guide
The issue is not on wallet connect. On the desktop, third party api hook shows correctly the balance, But on the mobile it doesn't work.

e.g
const { availableBalance, availableWithdraw } = useWithdraw();
It's working on desktop but not on the mobile. any further configuration, you think?

[magiziz]

@sniper365 The reason this might be a WalletConnect issue is because you're not being deep linked correctly into the MetaMask app and we use WalletConnect to initiate the deep links.

You also mentioned that you use VPN ? Can you describe more where the VPN is pointed at ?

Also can you show the console errors you get once trying to connect with MetaMask ?

[sniper365]

VPN location is Germany

[magiziz]

@sniper365 Are you able to fully turn off your VPN and try again ? Make sure to first disconnect in MetaMask and try again using this project id 21fef48091f12692cad574a6f7753643.

Also it would be helpful if you can share any console errors you get on mobile. You can use any android simulators for that.

[weber77]

Everything seem to work just find when using default configs. Without configuring urls

export const rainbowConfig = getDefaultConfig({
    appName: 'PaalX Sniper🎯',
    projectId: PROJECT_ID,
    chains: [mainnet],
    ssr: false, // If your dApp uses server side rendering (SSR)
});

If you absolutely want to choose your own set of wallets, you can use wagmi/connectors

import { connectorsForWallets, getDefaultConfig } from "@rainbow-me/rainbowkit";

import { mainnet } from "wagmi/chains";

import { createConfig, http } from "wagmi";
import { PROJECT_ID } from "@/utils/env";
import { metaMask, walletConnect } from "wagmi/connectors";
import {
    walletConnectWallet,
    metaMaskWallet,
    phantomWallet,

} from "@rainbow-me/rainbowkit/wallets";

const connectors = connectorsForWallets([
    {
        groupName: "Recommended",
        wallets: [metaMaskWallet, walletConnectWallet],
    },
], { projectId: PROJECT_ID, walletConnectParameters: {}, appName: "xxx", appDescription: "", appUrl: "", appIcon: "" });

const wagmiWallets = [walletConnect({
    projectId: PROJECT_ID, metadata: {
        name: 'xxxx',
        description: "xxxx",
        url: "https://xxxx.ai/",
        icons: [""]
    }
}), metaMask()]

function isMobileDevice() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
export const wagmiConfig = createConfig({
    connectors: isMobileDevice() ? wagmiWallets : connectors,
    chains: [mainnet],
    transports: {
        [mainnet.id]: http(''),
    },
});

In main.tsx

  <WagmiProvider config={wagmiConfig}> // replace with "rainbowConfig" if you want to use defaults
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </WagmiProvider>

[magiziz]

@weber77 Are you saying everything seems to work with getDefaultConfig ? If so that's great.

Here is another alternative to your wagmi/connectors approach:

const connectors = connectorsForWallets(
  [
    {
      groupName: "Recommended",
      wallets: [metaMaskWallet, walletConnectWallet],
    },
  ],
  {
    projectId: "...",
    appName: "...",
    // Add your own WalletConnect parameters
    walletConnectParameters: {
      metadata: {
        name: "xxxx",
        description: "xxxx",
        url: "https://xxxx.ai/",
        icons: [""],
      },
    },
  }
);