rainbowkit
rainbowkit copied to clipboard
rainbow-me
[bug] On mobile, pressing to any Recent wallet is not responding.
Is there an existing issue for this?
- [x] I have searched the existing issues
RainbowKit Version
1.0.2
wagmi Version
1.2.0
Current Behavior
On mobile, if I use Chrome, pressing to any Recent wallet is not responding. All good if I use Safari.
Expected Behavior
It should work well on mobile. Can you please help me on this? It's very urgent to me
Steps To Reproduce
No response
Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)
No response
Anything else?
No response
@pctsvn Hi! I can't seem to replicate this issue. What device/OS are you using? Can you share a CodeSandbox reproducible example for me to look at and diagnose?
Happen the same to me (rainbowkit v 0.12.17), I'm using a customised examples/create-with-reactapp from the repository. It has custom adapter. When trying on desktop all good (via VPN), but when connecting on mobilePhone (via VPN) it does not respond. I'm using an android Redmi 9. I will try to give you some code to reproduce later. Thanks
The same thing is also happening to me.
I believe it’s also happening on the nextjs codesandbox example from rainbowkit.
This is the example codesandbox url from them and when you open it on mobile clicking any of the wallet behaves poorly. Only coinbase works for mobile.
https://3rc6yz-3000.csb.app/
https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next
@niikkiin I see. The issue you're likely seeing here is that you haven't provided a WalletConnect projectId (by replacing YOUR_PROJECT_ID) and/or whitelisted the deployment domain, so WalletConnect redirects on mobile are quietly failing. Reference the docs here for more information on this new WalletConnect v2 requirement. You should see console errors like this when testing the sandbox examples. We'll amend the example and docs with better error handling for this scenario. Let me know if that fixes the issue!
@danielSoler93 @pctsvn Let me know if the above guidance resolves your issue as well. Apologies for the WalletConnect v2 confusion.
@niikkiin I see. The issue you're likely seeing here is that you haven't provided a WalletConnect
projectId(by replacingYOUR_PROJECT_ID) and/or whitelisted the deployment domain, so WalletConnect redirects on mobile are quietly failing. Reference the docs here for more information on this new WalletConnect v2 requirement. You should see console errors like this when testing the sandbox examples. We'll amend the example and docs with better error handling for this scenario. Let me know if that fixes the issue!
hey ser @DanielSinclair thanks for getting back to me! I already had the project id for wallet connect configured on my original project. the one i linked on my comment is the codesandbox from the rainbowkit's documentation where the same issue is happening to me - clicking on any wallet such as metamask, walletconnect, rainbowwallet etc (except coinbase) does not take me anywhere nor open anything similar to this PR's issue. I've tested it on safari, chrome and brave mobile browsers.
"@rainbow-me/rainbowkit": "^1.0.4",
"next": "13.4.5",
"wagmi": "^1.3.4",
"viem": "^1.2.9",
Hi guys, I fixed the issue by clearing localStorage when the app loads the first time. Hope it is helpful to you!
@niikkiin The RainbowKit examples you're referencing don't currently contain a valid projectId, so you would need to set that before they work correctly. The projectIds are a secret that needs to be approved/obtained from WalletConnect. But we'll work on getting a shared one for the examples to reduce confusion here.
@niikkiin The RainbowKit examples you're referencing don't currently contain a valid
projectId, so you would need to set that before they work correctly. TheprojectIds are a secret that needs to be approved/obtained from WalletConnect. But we'll work on getting a shared one for the examples to reduce confusion here.
Thanks for the response again ser. I am also referring to the original project that I am currently working on. It already has the projectId secret from the WalletConnect but whenever someone clicks on the wallet on mobile, it does nothing. It would connect normally when on desktop.
I have 4 wallets connected which are metamask, coinbase, walletconnect and rainbow wallet. Some behaviors that are happening on my end are when you’re on safari mobile and chrome mobile, only coinbase would redirect. And when you’re on brave mobile, only coinbase and metamask would work. But when I’m on desktop, all wallets connect fine with no error from core/relayer at all.
Does it really have something to do with the wallet connect project id?
here
I'm facing the exact same problem, everything works for desktop but nothing happens when I click on the WalletConnect in the mobile browser (inc: "safari")
@kuji2336 Are you able to replicate the issue when connecting on rainbowkit.com?
@kuji2336 Are you able to replicate the issue when connecting on rainbowkit.com?
I was using "walletconnect" and "web3-react" packages together with rainbowkit package, after removing them and fresh build, problem solved.
i can confirm im experiencing the exact same behavior on a Next.JS project that uses a custom Alchemy provider, rainbowkit works great on desktop, but on mobile it doesnt trigger a wallet connect redirect except with coinbase wallet.
Like others have said, nothing happens on either iOS or Android when using either chrome, safari, brave, etc.. the only solution seems to using the MM browser directly.. will comment again when i find the solution for my build
@kuji2336 Are you able to replicate the issue when connecting on rainbowkit.com?
Hey @DanielSinclair I'm experiencing the exact same issue on my project. I just tested connecting on rainbowkit.com and I get the same behaviour when using Brave but it works when using Chrome.
OS: Android 13 Chrome 116.0.5845.163 (Works) Brave 1.57.53, Chromium 116.0.5845.114 (Not Working)
@pctsvn Are you still seeing this issue on your end ?
Can you update the package @rainbow-me/rainbowkit to the latest version 1.3.3 ?
Let me know if the "recent" wallets on mobile are working fine now.
@pelkonator Are you using a VPN when testing this out ? If you try to clear history and refresh would it work then ?
Usually you should get a prompt screen to redirect to the chosen wallet. Also are you able to share the code so i can have a look at it ?
@pelkonator Can you try updating to 2.0.0 and see if the issue still persists ? Please can you also mention the wallets you have installed on mobile ?
Going to close this issue for now since can't reproduce this on RainbowKit v2.
Please follow these steps to make sure your mobile wallets works with WalletConnect:
- Create a project id in WalletConnect dashboard
- If you're using preview links or if your app is deployed on prod make sure to enter your domain in the WalletConnect "Allowed Domains" section in the dashboard
If you're using safari browser and you click on "Recent wallet" then reject you won't be able to connect again due to how mobile linking works. We could try to do universal linking, but of course comes with it's own limitation here
If you're facing any other issues please feel free to raise another issue with a reproducible example 🙏
I've a similar issue, when I connect on mobile it opens in metamask but does prompt for connection
Link to CodeSandBox
Current behavior :
https://github.com/rainbow-me/rainbowkit/assets/44323398/5a22f4cd-3be0-46e1-b898-5588e05059eb
Expected behavior:
https://github.com/coder/coder/assets/44323398/04f86d3c-45fe-4358-a213-29f7639652ca
