rainbowkit

rainbowkit copied to clipboard

Is there an existing issue for this?

• [X] I have searched the existing issues

RainbowKit Version

0.5.3

wagmi Version

0.6.0

Current Behavior

On iOS, when I tap "connect wallet", the "Connect a Wallet" overlay, I click "Metamask" and it directs me to the iOS App Store.

Expected Behavior

When I click "Metamask from the "Connect a Wallet" overlay, it should open Metamask

Steps To Reproduce

• Using the boilerplate project from the readme I ran npm init @rainbow-me/rainbowkit@latest

• Run the app with npm run dev

• Install ngrok (https://ngrok.com) (allows you to run the react app on your phone)

• run ./ngrok http 3000

• Open the URL that ngrok generates for you

• tap "connect wallet"

• tap "metamask"

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

https://look-rainbowkit-doesnt-work.vercel.app/

Anything else?

In this issue: https://github.com/rainbow-me/rainbowkit/issues/634#issuecomment-1208830295 the following documentation is referenced: https://docs.walletconnect.com/mobile-linking#ios-app-link-constraints

But given that I'm using the boilerplate RainbowKit app, it seems like there shouldn't be any interfering network requests.

Am I missing something? Or does MetaMask just not work out of the box with RainbowKit?

If it doesn't work, your docs should clearly address this.

Video demonstration:

https://imgur.com/a/jfMkqZk

Might be related to this MetaMask issue, this latest comment shares a solution - https://github.com/MetaMask/metamask-mobile/issues/3914#issuecomment-1173367166

Might be related to this MetaMask issue, this latest comment shares a solution - MetaMask/metamask-mobile#3914 (comment)

How could you apply such a solution to this minimum example (this repo's own boilerplate code) to make this work?

I wasn't initially able to reproduce this issue, even using your repro link. After looking into it further, It seems that it's to do with MetaMask links not being associated with the native app on your phone.

Here are the steps for me to get my device in a state where I can reproduce the issue:

• Tap the "Connect Wallet" button.
• Tap the WalletConnect icon to open the official WalletConnect modal. Note, we need this step because the WalletConnect modal renders links, whereas RainbowKit's UI currently renders buttons.
• In the WalletConnect modal, long press on the MetaMask option to open up the context menu.
• Select "Open" so that the MetaMask link is forced to open in a browser context.

After doing this, MetaMask links are always treated as browser links rather than app links which results in a redirection to the App Store as you described.

The fix is to follow the same steps as above, except for the last step you need to select "Open in MetaMask" rather than "Open". This reinstates the setting that MetaMask links should be associated with the native app.

Unfortunately as far as I know there's no way for us to detect this or manage it within RainbowKit, unless anyone knows a workaround?

Just something on this as we went through this issue today. This seems to be prevalent on v0.5.2 and 0.5.3 but fixed on v0.6.0 so just update your RainbowKit package and try then.

We are seeing this issue https://twitter.com/Fernjosh1/status/1572345653090476034?s=20&t=Yevbzxp3qyQsGPqKDq9vFQ

I think the issue is related to this line of code and this issue from metamask. If we change it to use metamask://dapp/google.com the issue should be resolved.

@roninjin10 Can you confirm if this issue persists for you on v0.6.0 because whilst I’ve tested today, this does exist on v0.5.2 and 0.5.3

However not on v0.6.0

For a quick test if you want to check it out yourself, head to https://www.rainbowkit.com/ from your Metamask browser and then choose Metamask as your login method.

Atleast on my end it worked without any issues (both with and without WalletConnect)

@bilalmotiwala I actually have no way of testing it because I can't reproduce it myself.

So we are on v0.5.1 and I can't repro the issue on either of my phones. Before we used rainbowkit, we had the same issue too where for some users it would take them to app store and other users it would not. Sometimes I would have a repro one day, and not the next day.

@roninjin10 Understood. I’ve not worked closely on this yet we were able to resolve this issue (only faced on Metamask Browser and iOS) across a bunch of old and new versions of Metamask during our testing today so hence my suggestion.

Yet I do believe this issue is hard to reproduce and it was just sheer luck on our end to check if the same thing happened on the RainbowKit’s official website and it didn’t.

We just then updated our library and that sorted it across for us yet maybe I’m not looking at the core solution or someone has already addressed it in an update before.

Issue OP is running v0.5.3 which does have a problem.

The main reason I doubt that this issue was fixed by any rainbowkit version is because the bug as I understand it has nothing to do with rainbowkit. So the line that deep links metamask is here . There is no code or logic to do this. This link gets clicked and beyond that the users phone OS takes over and it's all in metamask/phoneos control.

It's important to note metmask actually never fixed this issue. They simply did a workaround of offering a new way of linking that isn't a deep link.

If you face the issue on IOS try to clear your browser cash on your iPhone settings! It has works for me ✌🏼