Issue with universal links

[BritikovKI]

Expected behavior

When I click on generated universal link(for Metamask extension) on IOS, it redirects me to the Metamask application and open a modal window for me to approve the transaction/connection.

Actual behavior

On clicking this link(generated using URI from a client): https://metamask.app.link/wc?uri=wc:7dfe41fe-59a5-4f7b-98d0-df4db237d863@1?bridge=https%3A%2F%2F3.bridge.walletconnect.org&key=115cb8e82f1f1f447a34e1d5d59500ef2436f9bc6c9f1ad32f1311c66f7b357c If it was clicked in Telegram chat, it opens Metamask window, but there is no modal appears to connect your address. If it was clicked in Discord, it redirects to the appStore instead of opening metamask.

[saiyam-sage]

@BritikovKI I am getting the same problem with it. did you find any solution?

[BritikovKI]

@BritikovKI I am getting the same problem with it. did you find any solution?

Nope, unfortunately not, I'm using QR codes(at least they work), but links are still the problem. It's almost like a joke, because WalletConnect devs checked and link generation didn't work for them as well...

[saiyam-sage]

are you using QR codes in the mobile app or web app?

[BritikovKI]

I am using them in the web app and scan them using phone(but I would prefer links, so I would be able to interact with walletconnect direcly from the phone app... :disappointed: )

[michaelr524]

Absolutely puzzled about this issue.. any hints how to fix this would be greatly appreciated!

[michaelr524]

Here is the same issue from July https://github.com/WalletConnect/walletconnect-monorepo/issues/563

[michaelr524]

And here is another one from Feb https://github.com/WalletConnect/walletconnect-monorepo/issues/444

[michaelr524]

I wonder if giving preference to native deep links would help in this case: https://github.com/WalletConnect/walletconnect-monorepo/blob/c6b26481c34848dbc9c49bb0d024bda907ec4599/packages/helpers/browser-utils/src/mobile.ts#L7

[chadyj]

How are you generating the links?

To help verify this, I did the following steps on iOS:

• Opened https://example.walletconnect.org on safari
• Tapped Connect
• Tapped Metamask

Metamask then successfully opened.

I also tested Uniswap and it worked as above.

Is this the expected workflow?

[michaelr524]

Yes, this is the flow.. I suspect that the issue is occurring at times when the selected wallet isn’t installed when the user clicks. After wallet installation there is some cache in iOS which keeps opening the webpage. Apparently, part of the issue disappears after a few days, maybe the cache expires.. The behavior after a few days is that the wallet opens on click when making a the walletconnect connection, but when the dapp requests a message signed, it opens the wallet right but also opens the webpage at the same time, thus exiting the page and the dapp is losing state.

I wonder if what described here in the docs is causing this behavior:

[BritikovKI]

How are you generating the links?

To help verify this, I did the following steps on iOS:

* Opened https://example.walletconnect.org on safari

* Tapped Connect

* Tapped Metamask

Metamask then successfully opened.

I also tested Uniswap and it worked as above.

Is this the expected workflow?

For example I opened this page(https://example.walletconnect.org), copied wc data: wc:113b3948-29fd-4dcf-9503-80cad7a50e1f@1?bridge=https%3A%2F%2Fp.bridge.walletconnect.org&key=9676381d83315696b2015c3e26e089822d4fbf4506a29110b6adc521fe3b3dad and pasted it into universal link like this: https://metamask.app.link/wc?uri=wc:113b3948-29fd-4dcf-9503-80cad7a50e1f@1?bridge=https%3A%2F%2Fp.bridge.walletconnect.org&key=9676381d83315696b2015c3e26e089822d4fbf4506a29110b6adc521fe3b3dad

Then I sent it via Saved messages in telegram from my laptop to my IPhone and tried to open it. This link opened metamask application, but no modal window appeared unfortunately...

[BritikovKI]

When I try to open this link on my laptop, it redirects me to the page of metamask extension

[chadyj]

When I try to open this link on my laptop, it redirects me to the page of metamask extension

I could be misunderstanding, but that is the expected use case. The link above is for mobile linking. It won't work on a desktop since it is linking to the metamask mobile app, which is unavailable on desktop. https://docs.walletconnect.com/1.0/mobile-linking

[BritikovKI]

Ok, makes sense, it doesn't work on the mobile as well though :(

[emerns02]

Yes, this is the flow.. I suspect that the issue is occurring at times when the selected wallet isn’t installed when the user clicks. After wallet installation there is some cache in iOS which keeps opening the webpage. Apparently, part of the issue disappears after a few days, maybe the cache expires.. The behavior after a few days is that the wallet opens on click when making a the walletconnect connection, but when the dapp requests a message signed, it opens the wallet right but also opens the webpage at the same time, thus exiting the page and the dapp is losing state.

I wonder if what described here in the docs is causing this behavior:

This closely follows what I'm seeing as well - it seems like iOS doesn't disregard the incomplete URI - it immediately pushes the user over to the app store OR it opens 'install wallet prompt in browser window even if the wallet is already installed (as it's trying to open the incomplete URI), but the signing transaction is also awaiting confirmation within the wallet UI.

[armanp79]

Hey,

I've been struggling with this issue as well. I am creating an app on flutter than uses mobile deep-linking to connect to wallets. Here is how I resolved it for IOS.

1. make sure you are using universal links (https://metmask.app.link rather than metamask://)
2. Make sure that your connector uri that you get from the bridge server is percent encoded
3. If you have the issue where url is taking you to the app store instead of the app, make sure you set forceSafariVC : false when launching the url.

[BritikovKI]

Hey @armanp79 , can you provide an example of universal link that worked for you please?

[michaelr524]

Guys, all my iOS issues resolved after I removed web3react and used wallet-connect/ethereum-provider directly

[emerns02]

So, I'm actually using the web3-react/walletconnect-connector package and not directly wallet-connect.

Any idea on how to "remove" web3-react portion on that package reference?

Thanks.

[michaelr524]

@emerns02 unfortunately, I had to completely rip it out and write my own thin layer of code on top of the providers (injected, walletconnect). So far it works really well for me.

[armanp79]

@BritikovKI Here is an example link:

https://metamask.app.link/wc?uri=wc%3Aced6ad14-9454-4a6c-83d8-7adac8387cbc%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D3b85ef83aa3410758c96f6e5579c9a5943d5441f5003b1e97215c50060d8cefa

I am using Flutter for the app. Here is the code:

import 'package:url_launcher/url_launcher.dart';

_url = "https://metamask.app.link/wc?uri=wc%3Aced6ad14-9454-4a6c-83d8-7adac8387cbc%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D3b85ef83aa3410758c96f6e5579c9a5943d5441f5003b1e97215c50060d8cefa" ;

if (!await launch(_url, forceSafariVC: false)) { if (!await launch(_url)) { throw 'Could not launch $_url'; } }

[BritikovKI]

@BritikovKI Here is an example link:

https://metamask.app.link/wc?uri=wc%3Aced6ad14-9454-4a6c-83d8-7adac8387cbc%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D3b85ef83aa3410758c96f6e5579c9a5943d5441f5003b1e97215c50060d8cefa

I am using Flutter for the app. Here is the code:

import 'package:url_launcher/url_launcher.dart';

_url = "https://metamask.app.link/wc?uri=wc%3Aced6ad14-9454-4a6c-83d8-7adac8387cbc%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D3b85ef83aa3410758c96f6e5579c9a5943d5441f5003b1e97215c50060d8cefa" ;

if (!await launch(_url, forceSafariVC: false)) { if (!await launch(_url)) { throw 'Could not launch $_url'; } }

Thanks, this forming of the links helped, it would be useful to put it into the WalletConnect documentation somewhere though, for the future generation of stragglers.

[aviyam181199]

@BritikovKI Here is an example link:

https://metamask.app.link/wc?uri=wc%3Aced6ad14-9454-4a6c-83d8-7adac8387cbc%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D3b85ef83aa3410758c96f6e5579c9a5943d5441f5003b1e97215c50060d8cefa

I am using Flutter for the app. Here is the code:

import 'package:url_launcher/url_launcher.dart';

_url = "https://metamask.app.link/wc?uri=wc%3Aced6ad14-9454-4a6c-83d8-7adac8387cbc%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D3b85ef83aa3410758c96f6e5579c9a5943d5441f5003b1e97215c50060d8cefa" ;

if (!await launch(_url, forceSafariVC: false)) { if (!await launch(_url)) { throw 'Could not launch $_url'; } }

Looks like a good solution. What are the parameters you put in the link? How you got back the public address of the metamask wallet?

[joharzmn]

I am using WalletConnect to connect to the MetaMask in my angular app. When I scan QR Code from Mobile on Web Browser then it's working fine. But when I connect to MetaMask and SignPerosnalMessage from Safari Browser on Iphone then for SignMessage Request it's redirecting me to AppStore. Can anyone know why it's redirecting to AppStore even though I have the app installed?

Really need this fixed.

[Patiyang]

@armanp79 would it be possible to approve or reject the walletconnect uri this way via metamask?

Hey,

I've been struggling with this issue as well. I am creating an app on flutter than uses mobile deep-linking to connect to wallets. Here is how I resolved it for IOS.

1. make sure you are using universal links (https://metmask.app.link rather than metamask://)
2. Make sure that your connector uri that you get from the bridge server is percent encoded
3. If you have the issue where url is taking you to the app store instead of the app, make sure you set forceSafariVC : false when launching the url.

@BritikovKI Here is an example link:

https://metamask.app.link/wc?uri=wc%3Aced6ad14-9454-4a6c-83d8-7adac8387cbc%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D3b85ef83aa3410758c96f6e5579c9a5943d5441f5003b1e97215c50060d8cefa

I am using Flutter for the app. Here is the code:

import 'package:url_launcher/url_launcher.dart';

_url = "https://metamask.app.link/wc?uri=wc%3Aced6ad14-9454-4a6c-83d8-7adac8387cbc%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D3b85ef83aa3410758c96f6e5579c9a5943d5441f5003b1e97215c50060d8cefa" ;

if (!await launch(_url, forceSafariVC: false)) { if (!await launch(_url)) { throw 'Could not launch $_url'; } }

Seems like a great solution; just one question, would it be possible to approve or reject the session request this way?

[y0unghe]

@armanp79 would it be possible to approve or reject the walletconnect uri this way via metamask?

Hey, I've been struggling with this issue as well. I am creating an app on flutter than uses mobile deep-linking to connect to wallets. Here is how I resolved it for IOS.

1. make sure you are using universal links (https://metmask.app.link rather than metamask://)
2. Make sure that your connector uri that you get from the bridge server is percent encoded
3. If you have the issue where url is taking you to the app store instead of the app, make sure you set forceSafariVC : false when launching the url.

@BritikovKI Here is an example link: https://metamask.app.link/wc?uri=wc%3Aced6ad14-9454-4a6c-83d8-7adac8387cbc%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D3b85ef83aa3410758c96f6e5579c9a5943d5441f5003b1e97215c50060d8cefa I am using Flutter for the app. Here is the code: import 'package:url_launcher/url_launcher.dart'; _url = "https://metamask.app.link/wc?uri=wc%3Aced6ad14-9454-4a6c-83d8-7adac8387cbc%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D3b85ef83aa3410758c96f6e5579c9a5943d5441f5003b1e97215c50060d8cefa" ; if (!await launch(_url, forceSafariVC: false)) { if (!await launch(_url)) { throw 'Could not launch $_url'; } }

Seems like a great solution; just one question, would it be possible to approve or reject the session request this way?

Hi, I am trying this Flutter example: https://github.com/Orange-Wallet/wallet-connect-dart By selecting the Metamask option from the wallet list, nothing happens. Did you hardcode the metamask app link url? Can you make a Flutter demo? Thanks in advance.

[Haianh9999]

Is there any workaround for this issue yet. For me, when I scan the code, I can connect normally but when I connect by deep link, I can't 🙇

[finessevanes]

Is this still an issue @Haianh9999? If so, can you share your flow and where you're getting the error?