WalletConnect - MetaMask redirects to the App Store before transaction can be authorised

[davidm03]

Describe the bug When a user attempts to send a transaction from our dapp using WalletConnect and MetaMask - the MetaMask app will open, the transaction pop-up will appear with all the transaction details pre-filled from our dapp for a very brief period of time (maybe less than 1 second), then the MetaMask app will redirect/open the app store as if the user does not have MetaMask installed. If the user navigates back to the MetaMask app from the app store, the browser tab is open with the metamask.app.link url inserted but the user is not able to get the transaction pop-up to reappear and no response is sent back to our dapp ever.

To Reproduce Difficult to reproduce without access to our dapp but I'll do my best to explain.

1. From a React Native dapp which uses WalletConnect - connect to your MetaMask wallet via WalletConnect pop-up window.
2. Once MetaMask wallet is successfully connected and you have been redirected back to your dapp - attempt to call the WalletConnect sendTransaction function (code will be included below) using the same data.
3. MetaMask mobile app is re-opened, transaction pop-up is displayed briefly before the app will redirect the user to the app store - as if they did not ever have it installed.

The following code is being used to call the sendTransaction function via WalletConnect after a user has connected a MetaMask wallet.

const sendTransaction = async (): Promise<void> => {
    await connector
      .sendTransaction({
        from: connector.accounts[0],
        to: "0xb81c36B5BCdDB20BFECE8F355DC5B212565AF907",
        value: Web3.utils.toHex(0.01 * 1e18),
        type: "native",
      })
      .then((res) => {
        console.log("Transaction Hash => ", res);
      })
      .catch((e) => console.warn(e));
  };

Expected behavior User is redirected to MetaMask to authorise the transaction, transaction pop-up is displayed to the user for authentication, app store should not open as the user already has the app installed, user is able to approve/reject the transaction and should the be redirected back to our dapp and response returned to WalletConnect sendTransaction function.

Smartphone (please complete the following information):

• Device: iPhone XS
• OS: iOS 15.4
• App Version v4.2.2 (834)

[davidm03]

Update: The issue is only happening on iOS devices and appears to be caused by line 136 within the WalletConnectProvider.js file

const url = formatWalletServiceUrl(walletService);
return (await Linking.canOpenURL(url)) && Linking.openURL(url);

Linking.openURL(url) launches MetaMask via the metamask.app.link URL and triggers the in-app browser, which is then redirecting the user to the app store - even if they have the app installed.

We've came up with a workaround for this issue and deployed a patch to use the connected wallet deeplink to launch the wallet app instead of the wallet service URL previously being generated.

const url = formatWalletServiceUrl(walletService);
return (await Linking.canOpenURL(url)) && Linking.openURL(walletService.mobile.native);

This resolves the issue for now, MetaMask opens correctly without redirected to the app store and the transaction pop-up is displayed correctly.

[epshtielsl]

The universal URL should still open MetaMask without prompting the AppStore. Perhaps there is an issue with how they have configured the universal URL when opened with parameters (i.e. sending the sign personal message command via deep link).

Thanks for the quick fix info though. This could be a good alternative if the issue takes long to be resolved.

[andreahaku]

Thanks @davidm03 and @epshtielsl. I'll test the fix and eventually integrate in the app. Thanks again.

[rafaelaugustos]

Any news about this problem?

[zosim]

Any news about this problem?

yes also hoping for some news. Thanks.

[thiagofreirebr]

Me too. Looks so easy to solve this. Why they're taking so long?

[joharzmn]

@davidm03 The fix you mentioned above, How can we use that fix when using walletconnect?? I can't find WalletConnectProvider.js in walletConnect.

[andreahaku]

Did you try the latest version of the app (5.0.x) as most of the deep links related issue should be solved with it. Please let me know. Thanks!

[fablanglet]

I still have the issue on iOS. Metamask deep link doesn't work. It still going to App Store.

[andreahaku]

I still have the issue on iOS. Metamask deep link doesn't work. It still going to App Store.

Did you check the solution suggested here? https://github.com/MetaMask/metamask-mobile/issues/3965#issuecomment-1110690454

[davidm03]

@davidm03 The fix you mentioned above, How can we use that fix when using walletconnect?? I can't find WalletConnectProvider.js in walletConnect.

The file I mentioned can be found within node_modules > @walletconnect > react-native-dapp > providers > WalletConnectProvider.js

We used the patch package library to create a patch to apply this fix on every npm install and ensure it's not overridden.

[y0unghe]

I still have the issue on iOS. Metamask deep link doesn't work. It still going to App Store.

The same.

[anxolin]

@andreahaku i'm using 5.0.1 and still have the same issue in IOS Safari.

You can try it here https://cowswap.staging.gnosisdev.com (approving a token for example).

I use web3-react which delegates to @walletconnect/ethereum-provider . Any hint on how to debug/solve the issue? We are not the ones creating the deep links, I assume Wallet Connect is.

[rafaelaugustos]

I have same problem in my React Native app, but it is not happen in all apps

[fopina]

Not sure if related but https://metamask.app.link/dapp/Google.com from iOS safari opens App Store while clicking the same link in any “inapp browser” (like Telegram or WhatsApp) does work

[antinomy-studio]

Having the same issue on iOS. Wallet Connect opens the App Store even if MetaMask is installed + Wallet is setup.

[xaun]

The solution for me was to ensure the web3 provider send request (RPC API) was the first network request after a user action.

I've deployed an example here forked from web3-react/example-next (v8) which consistently reproduces the issue when the checkbox is ticked on iOS by making a random async request first instead. Example diff here: https://github.com/xaun/web3-react/commit/694f7913ecc77191ff410c077881cd70e7b0f50e

I'm guessing this is something to do with mobile devices blocking redirections (deeplinks/universal links/or what not) that are not detected as derived from a user action.. something along the lines maybe? I'de love to know exactly why this behaviour occurs, as it's been a bit of a journey to figure out this "gotcha".

@davidm03 what invokes your sendTransaction method? Is there any async behaviour before it?

[davidm03]

The solution for me was to ensure the web3 provider send request (RPC API) was the first network request after a user action.

I've deployed an example here forked from web3-react/example-next (v8) which consistently reproduces the issue when the checkbox is ticked on iOS by making a random async request first instead. Example diff here: xaun/web3-react@694f791

I'm guessing this is something to do with mobile devices blocking redirections (deeplinks/universal links/or what not) that are not detected as derived from a user action.. something along the lines maybe? I'de love to know exactly why this behaviour occurs, as it's been a bit of a journey to figure out this "gotcha".

@davidm03 what invokes your sendTransaction method? Is there any async behaviour before it?

@xaun Very interesting solution + theory, thanks for sharing. As for my sendTransaction method - there is no async behaviour before it and it is invoked directly from a simple button onPress (onPress={sendTransaction} ).

[LifeWithArt1]

Still happening for me...so frustrating.

[grp06]

Still an issue for me. I'm using Rainbow kit.

It also happens when you use Uniswap or AAVE and try to sign in with WalletConnect. Crazy it's still broken!

[xaun]

Also don't updated your Metamask on iOS to the latest version that was released recently or it'll completely stop working. The code example I gave above doesn't work anymore, nor does connecting with well known sites like Uniswap (noting they're using the same underlying web3-react lib).

[niraj-khatiwada]

The solution for me was to ensure the web3 provider send request (RPC API) was the first network request after a user action.

I've deployed an example here forked from web3-react/example-next (v8) which consistently reproduces the issue when the checkbox is ticked on iOS by making a random async request first instead. Example diff here: xaun/web3-react@694f791

I'm guessing this is something to do with mobile devices blocking redirections (deeplinks/universal links/or what not) that are not detected as derived from a user action.. something along the lines maybe? I'de love to know exactly why this behaviour occurs, as it's been a bit of a journey to figure out this "gotcha".

@davidm03 what invokes your sendTransaction method? Is there any async behaviour before it?

For some reason this works for me for both spawnBug set or unset. But my app still redirects to appstore even when spawnBug is false. Any idea?

[Tdweller]

This has frustrated me forever, but today I stumbled on a weird fix. I have no idea why it works, but it has for me every time.

When I initiate a transaction and am told to sign in my wallet, Im then automatically redirected to the App Store, to the MetaMask Page.

In the App Store, next to the MetaMask logo is a back arrow. (Not the one to go back to MetaMask, the one to go back to App Store home page) Tap dat.

Then, use the top left arrow to go back to MetaMask: for me, the place to sign is right there waiting.

Hope this works for others, I have no idea how or why it does for me.

[codeforreal1]

This has frustrated me forever, but today I stumbled on a weird fix. I have no idea why it works, but it has for me every time.

When I initiate a transaction and am told to sign in my wallet, Im then automatically redirected to the App Store, to the MetaMask Page.

In the App Store, next to the MetaMask logo is a back arrow. (Not the one to go back to MetaMask, the one to go back to App Store home page) Tap dat.

Then, use the top left arrow to go back to MetaMask: for me, the place to sign is right there waiting.

Hope this works for others, I have no idea how or why it does for me.

If the metamask is not in quit state, the transaction is already pending in metamask. Its just the redirection was gone to Appstore.

[sra-fiberswitch]

I had the same issue on my iPhone. Fixed it by long-pressing the MetaMask symbol when in the WalletConnect menu. You get a dropdown list whereafter you can select “Open with MetaMask”.

[JstKuLam]

Having the same issue on iOS. The latest Metamask version. Wallet Connect opens the App Store even if MetaMask is installed. So frustrating

p/s: Other wallets worked fine (Coin98, Trust, GNosis...)

[SunnyCheung-cp]

Unfortunately, I also ran into this problem. Is there a solution now?

[andreahaku]

We just release an update of the app (v5.12.0 and up) that should help fix this issue. It's rolling out now on Android and iOS. Please let me know if this solves or not. Thanks

[SunnyCheung-cp]

@andreahaku Thanks, I just tried it with v5.12.0, unfortunately the result didn't change In addition, let me provide that the connection method I am currently using is walletconnect v2.0, don't know if this will make a difference

https://user-images.githubusercontent.com/105030733/206341425-9986adb5-d1d8-490b-88f2-e2515b561db3.mp4

[andreahaku]

@SunnyCheung-cp we don't support WC v2.0 for now. We only support WC v1