[bug] Connecting wallet on mobile not working #1262

sniper365 · 2023-05-22T23:00:19Z

Is there an existing issue for this?

I have searched the existing issues

RainbowKit Version

1.0.0

wagmi Version

1.0.5

Current Behavior

I tried to follow the example https://github.com/rainbow-me/rainbowkit/tree/main/examples/with-create-react-app
With latest versions...
Web browser is working. but on mobile...

So I tried with on this example https://codesandbox.io/s/rainbowkit-create-typescript-app-xuxnqy?ref=morioh.com&utm_source=morioh.com&file=/src/App.tsx:822-840 ( wagmi-v0.5.9 rainbow-v0.4.2) .
It's working on this itself. So copied on my dApp.. But it's not working as well.

import * as React from "react"
import { Provider } from 'react-redux';
import { I18nextProvider } from 'react-i18next'
import { ChakraProvider } from '@chakra-ui/react'
import merge from 'lodash.merge';
import {
  darkTheme,
  getDefaultWallets,
  RainbowKitProvider,
  Theme
} from '@rainbow-me/rainbowkit'
import '@rainbow-me/rainbowkit/styles.css'
import { chain, configureChains, createClient, WagmiConfig } from 'wagmi'
import { mainnet, goerli } from 'wagmi/chains'
import { alchemyProvider } from 'wagmi/providers/alchemy'
import { publicProvider } from 'wagmi/providers/public'
import { store } from './state/store';
import { Router } from './Router'
import theme from './theme'
import i18n from './i18n'
import useLanguage from "./hooks/useLanguage";

const ALCHEMY_API_KEY = process.env.REACT_APP_ALCHEMY_API_KEY || ''

const myTheme = merge(darkTheme({
  borderRadius: 'small'
}), {
  colors: {
    accentColor: '#00204c',
    connectButtonBackground: '#00204c',
    modalBackground: '#002b66',
    connectButtonInnerBackground: '#00204c',
    modalText: 'white'
  },
  radii: {
    connectButton: 'none'
  },
  fonts: {
    body: '10px'
  }
} as Theme);

const { chains, provider } = configureChains(
  [
    chain.mainnet
  ],
  [
    alchemyProvider({
      alchemyId: ALCHEMY_API_KEY,
    }),
    publicProvider()
  ]
)

const { connectors } = getDefaultWallets({
  appName: "my dApp",
  chains
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider
});

export const App = () => {
  const { language } = useLanguage()

  i18n.changeLanguage(language)

  return (
    <I18nextProvider i18n={i18n}>
      <WagmiConfig client={wagmiClient}>
        <RainbowKitProvider
          chains={chains}
          theme={myTheme}
        >
          <ChakraProvider theme={theme}>
            <Provider store={store}>
              <Router />
            </Provider>
          </ChakraProvider>
        </RainbowKitProvider>
      </WagmiConfig>
    </I18nextProvider>
  )
}

What am I wrong?

The text was updated successfully, but these errors were encountered:

DanielSinclair · 2023-05-23T04:20:27Z

@sniper365 Which wallet did you try to connect to on mobile? Can you share a video or screenshot of the behavior you're seeing?

sniper365 · 2023-05-23T05:14:39Z

@DanielSinclair

It's Metamask. After unlock the wallet, connect confirm modal not pop-up.

By the way, when I am trying to 'npm install', I can see these comments

I guess walletConnect version issue. But not sure which modules occur this kinda warnings.
What are your thoughts?

DanielSinclair · 2023-05-23T06:18:15Z

Shouldn't be a WalletConnect issue. Are you referring to MetaMask Mobile or the MetaMask Desktop Extension? Was unable to replicate the issue on mobile after opening MetaMask, scanning a WalletConnect QR Code, and confirming the connection. I was also able to successfully use the in-app MetaMask browser to navigate to a RainbowKit dApp and connect the injected provider.

sniper365 · 2023-05-23T12:22:14Z

yeah.. as I said I meant Metamask mobile app. So you would find any issue in my code?

DanielSinclair · 2023-05-23T14:53:49Z

After unlock the wallet, connect confirm modal not pop-up.

@sniper365 Can you confirm what you mean here? Are you attempting to connect to the dApp with MetaMask Mobile via the QR Code scanner, or are you using the mobile web browser to MetaMask Mobile deep link flow?

DanielSinclair · 2023-05-23T14:56:02Z

If you use this hosted version of the Create React App example, do you run into the same issue? https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-create-react-app
https://qqp2xl-3030.csb.app/

sniper365 · 2023-05-23T18:11:16Z

Well, maybe yes for https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-create-react-app

I understand you what you mean. I already installed metamask app in my mobile so there is no pop-up for scan QR to get metamask app. Instead I leave my dApp and came to my metamask app and can login. But my issue is that after login there is no pop up confirm modal

This screenshot is from below example.
https://codesandbox.io/s/rainbowkit-create-typescript-app-xuxnqy?ref=morioh.com&utm_source=morioh.com&file=/src/App.tsx:822-840

DanielSinclair · 2023-05-23T19:26:30Z

I see. It looks like you slightly misconfigured Wagmi; the syntax changed with Wagmi v1.

The new createConfig method:

const wagmiConfig = createConfig({
  autoConnect: true,
  connectors,
  publicClient,
  webSocketPublicClient,
});

The config provider implementation:

<WagmiConfig config={wagmiConfig}>
  <RainbowKitProvider chains={chains}>
    <App />
  </RainbowKitProvider>
</WagmiConfig>

sniper365 · 2023-05-23T19:32:32Z

Hey @DanielSinclair
Sorry but Please reopen and Quick question

You sure this example is working? On my side it's not working on mobile..
https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-create-react-app

DanielSinclair · 2023-05-23T19:47:18Z

Yes, the example is working for me on mobile. Can you share a video of what you're experiencing, or describe what is missing?

sniper365 · 2023-05-23T19:49:20Z

Ok.. I will try again and will let you now asap... thanks in advance

sniper365 · 2023-05-23T20:49:28Z

Connect confirm modal Still not pop up. so I can't connect.

2.zip

Here are my updated configuration

import * as React from "react"
import { Provider } from 'react-redux';
import { I18nextProvider } from 'react-i18next'
import { ChakraProvider } from '@chakra-ui/react'
import merge from 'lodash.merge';
import { getDefaultWallets, RainbowKitProvider, darkTheme, Theme } from '@rainbow-me/rainbowkit';
import { configureChains, createConfig, WagmiConfig } from 'wagmi';
import { mainnet, polygon, optimism, arbitrum, goerli } from 'wagmi/chains';
import { publicProvider } from 'wagmi/providers/public';
import { store } from './state/store';
import { Router } from './Router'
import theme from './theme'
import i18n from './i18n'
import useLanguage from "./hooks/useLanguage";
import '@rainbow-me/rainbowkit/styles.css'

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [
    mainnet
  ],
  [publicProvider()]
);

const { connectors } = getDefaultWallets({
  appName: 'bitoro',
  projectId: '2023-5',
  chains,
});

const wagmiConfig = createConfig({
  autoConnect: true,
  connectors,
  publicClient,
  webSocketPublicClient,
});


const myTheme = merge(darkTheme({
  borderRadius: 'small'
}), {
  colors: {
    accentColor: '#003680',
    connectButtonBackground: '#003680',
    modalBackground: '#003680',
    connectButtonInnerBackground: '#003680',
    modalText: 'white'
  },
  // radii: {
  //   connectButton: 'none'
  // },
  fonts: {
    body: '20px'
  }
} as Theme);

export const App = () => {
  const { language } = useLanguage()

  i18n.changeLanguage(language)

  return (
    <I18nextProvider i18n={i18n}>
      <WagmiConfig config={wagmiConfig}>
        <RainbowKitProvider
          chains={chains}
          theme={myTheme}
        >
          <ChakraProvider theme={theme}>
            <Provider store={store}>
              <Router />
            </Provider>
          </ChakraProvider>
        </RainbowKitProvider>
      </WagmiConfig>
    </I18nextProvider>
  )
}

No need custom wallet list part? https://www.rainbowkit.com/docs/custom-wallet-list

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      injectedWallet({ chains }),
      rainbowWallet({ projectId, chains }),
      walletConnectWallet({ projectId, chains }),
    ],
  },
]);

What am I wrong?

DanielSinclair · 2023-05-23T21:50:26Z

The Custom Wallet List isn't required, correct. Can you share a reproducible example of your implementation? I wasn't able to replicate on the with-create-react-app example on MetaMask Mobile on Android. This is possibly an issue with your network. If you have a firewall or VPN active, I'd suggest disabling and testing again.

sniper365 · 2023-05-24T05:08:23Z

By the way this example working on my side...
https://codesandbox.io/s/rainbowkit-create-typescript-app-xuxnqy?ref=morioh.com&utm_source=morioh.com&file=/src/App.tsx:822-840

But your example - https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-create-react-app and my dApp not working.. how to explain?

sniper365 · 2023-05-24T06:21:37Z

video1.zip

I compared dydx.exchange and my dApp.
As you can see dydx pop up walletconnect modal when click connect wallet button. And then go to metamask by choosing activity.
Anyway all are same until that. but we can see the 'Connect to this site?' connect modal in dydx. but not in my case...
You can guess what is wrong?

sniper365 · 2023-05-25T14:38:25Z

Hi @DanielSinclair
Any chance to check my comments?

sniper365 · 2023-05-30T16:54:04Z

Hi @DanielSinclair
Can you help me further?

DanielSinclair · 2023-05-30T16:59:44Z

@sniper365 Can you share a CodeSandbox example? Unable to reproduce an issue.

sniper365 · 2023-05-30T17:32:34Z

Here it is..

https://codesandbox.io/p/github/sniper365/bitoro-codesandbox-test/master?file=/package.json:1,1&workspaceId=db2815ed-51c7-4310-949f-75c1d42b0e6b

sniper365 · 2023-05-31T17:27:17Z

@DanielSinclair Have you had a chance to check my sandbox?

foooooouny · 2023-06-02T03:43:10Z

Author

This example doesn't apply to me either. My MetaMask app version is v6.3.0, and it was working fine before I updated the app.

DanielSinclair · 2023-06-02T03:45:56Z

@foooooouny What device are you using? What does your test path look like? It sounds like MetaMask introduced an issue on their end. The wallets are currently undergoing an upgrade to WalletConnect v2, so it is very likely issues are appearing.

foooooouny · 2023-06-02T03:48:43Z

@foooooouny What device are you using? What does your test path look like? It sounds like MetaMask introduced an issue on their end. The wallets are currently undergoing an upgrade to WalletConnect v2, so it is very likely issues are appearing.

@DanielSinclair iPhone 11 pro, iOS version 16.4.1.
same to Trust wallet.

foooooouny · 2023-06-02T03:56:15Z

@DanielSinclair Another question: How can I enable redirection to the wallet app's dapp deeplink when connecting from a browser outside of the wallet, rather than using WalletConnect to establish the connection?

DanielSinclair · 2023-06-02T04:53:32Z

@foooooouny I'm not sure I understand the question. RainbowKit supports injected providers (like a wallet's in-app browser or a browser extension) and WalletConnect.

sniper365 · 2023-06-02T13:40:01Z

@DanielSinclair @foooooouny Did you find the solution for this issue?

sniper365 · 2023-06-13T09:09:06Z

@DanielSinclair @foooooouny Please help me about this issue. I have still issue. Do I have to use injected provider?

import * as React from "react"
import { Provider } from 'react-redux';
import { I18nextProvider } from 'react-i18next'
import { ChakraProvider } from '@chakra-ui/react'
import merge from 'lodash.merge';
import { getDefaultWallets, RainbowKitProvider, darkTheme, Theme } from '@rainbow-me/rainbowkit';
import { configureChains, createConfig, WagmiConfig } from 'wagmi';
import { mainnet } from 'wagmi/chains';
import { publicProvider } from 'wagmi/providers/public';
import { store } from './state/store';
import { Router } from './Router'
import theme from './theme'
import i18n from './i18n'
import useLanguage from "./hooks/useLanguage";
import '@rainbow-me/rainbowkit/styles.css'

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [
    mainnet
  ],
  [publicProvider()]
);

const { connectors } = getDefaultWallets({
  appName: 'bitoro',
  projectId: '2023-5',
  chains,
});

const wagmiConfig = createConfig({
  autoConnect: true,
  connectors,
  publicClient,
  webSocketPublicClient,
});


const myTheme = merge(darkTheme({
  borderRadius: 'small'
}), {
  colors: {
    accentColor: '#194a8c',  //bitoro.600
    connectButtonBackground: '#00204c',
    modalBackground: '#002559',  //bitoro.1000
    modalText: 'white',
    actionButtonSecondaryBackground: '#6686b2',  //bitoro.300
  },
  fonts: {
    body: '20px',
  },
});

export const App = () => {
  const { language } = useLanguage()

  i18n.changeLanguage(language)

  return (
    <I18nextProvider i18n={i18n}>
      <WagmiConfig config={wagmiConfig}>
        <RainbowKitProvider
          chains={chains}
          theme={myTheme}
        >
          <ChakraProvider theme={theme}>
            <Provider store={store}>
              <Router />
            </Provider>
          </ChakraProvider>
        </RainbowKitProvider>
      </WagmiConfig>
    </I18nextProvider>
  )
}

adrianotadao · 2023-06-21T18:06:40Z

@sniper365 hey, did you manage to solve this issue? Reading all comments I saw this comment #1262 (comment) and I'm facing the same issue. 🤔

@DanielSinclair can we assume that the newest rainbowkit version is broken?

I'm a little bit lost 😞

adrianotadao · 2023-06-21T18:27:26Z

The problem seems to be bigger than I thought because even their site is not working well https://www.rainbowkit.com

sniper365 · 2023-06-21T18:53:21Z

Hey @adrianotadao
Please read this. It will help you for sure. Good luck

DanielSinclair · 2023-06-21T18:53:45Z

@adrianotadao What issue are you seeing on rainbowkit.com?

adrianotadao · 2023-06-21T20:05:05Z

@adrianotadao What issue are you seeing on rainbowkit.com?

@DanielSinclair Metamask doesn't do anything when you try to connect to rainbowkit.com using an iPhone. Is it working for you?

FranRom · 2023-06-22T10:35:56Z

Experiencing the same Issue...I'm using polyfills, and I have Rainbowkit in several app, to make it work on IPhone I need to downgrade Rainbowkit

DanielSinclair · 2023-06-22T16:16:29Z

@adrianotadao There is currently a known issue with MetaMask's WalletConnect support. We are told an update is coming imminently to resolve this on their end. MetaMask/metamask-mobile#6457

adrianotadao · 2023-06-22T21:20:34Z

@adrianotadao There is currently a known issue with MetaMask's WalletConnect support. We are told an update is coming imminently to resolve this on their end. MetaMask/metamask-mobile#6457

nice!

Thank you @DanielSinclair!

adrianotadao · 2023-06-27T16:08:33Z

@DanielSinclair did they say something about this bug? any good news?! 😄

DanielSinclair closed this as completed May 23, 2023

sniper365 mentioned this issue May 29, 2023

[bug] Connecting wallet on mobile not working #1268

Closed

adrianotadao mentioned this issue Jun 27, 2023

[bug] MetaMask Mobile: WalletConnect v2 is not working on iOS #1303

Closed

1 task

[bug] Connecting wallet on mobile not working #1262

[bug] Connecting wallet on mobile not working #1262

Comments

sniper365 commented May 22, 2023 • edited Loading

Is there an existing issue for this?

RainbowKit Version

wagmi Version

Current Behavior

DanielSinclair commented May 23, 2023

sniper365 commented May 23, 2023 • edited Loading

DanielSinclair commented May 23, 2023

sniper365 commented May 23, 2023

DanielSinclair commented May 23, 2023 • edited Loading

DanielSinclair commented May 23, 2023

sniper365 commented May 23, 2023 • edited Loading

DanielSinclair commented May 23, 2023 • edited Loading

sniper365 commented May 23, 2023 • edited Loading

DanielSinclair commented May 23, 2023

sniper365 commented May 23, 2023

sniper365 commented May 23, 2023 • edited Loading

DanielSinclair commented May 23, 2023

sniper365 commented May 24, 2023

sniper365 commented May 24, 2023

sniper365 commented May 25, 2023

sniper365 commented May 30, 2023

DanielSinclair commented May 30, 2023

sniper365 commented May 30, 2023 • edited Loading

sniper365 commented May 31, 2023

foooooouny commented Jun 2, 2023

DanielSinclair commented Jun 2, 2023

foooooouny commented Jun 2, 2023 • edited Loading

foooooouny commented Jun 2, 2023

DanielSinclair commented Jun 2, 2023

sniper365 commented Jun 2, 2023

sniper365 commented Jun 13, 2023

adrianotadao commented Jun 21, 2023

adrianotadao commented Jun 21, 2023

sniper365 commented Jun 21, 2023

DanielSinclair commented Jun 21, 2023

adrianotadao commented Jun 21, 2023

FranRom commented Jun 22, 2023 • edited Loading

DanielSinclair commented Jun 22, 2023 • edited Loading

adrianotadao commented Jun 22, 2023

adrianotadao commented Jun 27, 2023 • edited Loading

sniper365 commented May 22, 2023 •

edited

Loading

sniper365 commented May 23, 2023 •

edited

Loading

DanielSinclair commented May 23, 2023 •

edited

Loading

sniper365 commented May 23, 2023 •

edited

Loading

DanielSinclair commented May 23, 2023 •

edited

Loading

sniper365 commented May 23, 2023 •

edited

Loading

sniper365 commented May 23, 2023 •

edited

Loading

sniper365 commented May 30, 2023 •

edited

Loading

foooooouny commented Jun 2, 2023 •

edited

Loading

FranRom commented Jun 22, 2023 •

edited

Loading

DanielSinclair commented Jun 22, 2023 •

edited

Loading

adrianotadao commented Jun 27, 2023 •

edited

Loading