[BUG] WalletConnect deeplink breaks in Android WebView "wc:3cc..." should be "wc://3cc..."

[skhetcho]

Describe the bug

Deep linking to external wallets (like WalletConnect wc:3cc.... urls) does not seem to work on Android when loaded inside an app. The app crashes with ERR_UNKOWN_URL_SCHEME

To reproduce

A way to produce opening a ConnectKit inside a webview in an android app could be done by creating a Telegram Mini App which creates a webview instance of the webapp inside the Android App.

1- Create a demo webapp using the Get Started guide. 2- Host an https instance of the webapp, (you could use nextjs with vercel) 3- Create a mini app on telegram and supply it with your https url to your webapp 4- Launch the mini app and press on connect wallet. 5- Select Metamask, and it will break.

Expected behavior It should trigger "wc://3cc..." and not "wc:3cc..." - It seems this is only necessary for Android as the wallet connection works seamlessly on the browser, IOS, and desktop.

Screenshots

If applicable, add screenshots to help explain your problem.

Environment details

Android WebView (irrespective of the android version)

Additional context none

[skhetcho]

I rewrote it from "wc:3cc..." to "wc://3cc..." this still didn't trigger the WebView in Android to open metamask wallet this is in packages\connectkit\src\components\Common\ConnectorList\index.tsx

if (deeplink && deeplink.startsWith('wc:')) {
    deeplink = deeplink.replace('wc:', 'wc://');
  }
  console.log('deeplink', deeplink);
  return (
    <ConnectorButton
      type="button"
      as={deeplink ? 'a' : undefined}
      href={deeplink ? deeplink : undefined}
      disabled={context.route !== routes.CONNECTORS}
      onClick={
        deeplink
          ? undefined
          : () => {
            if (redirectToMoreWallets) {
              context.setRoute(routes.MOBILECONNECTORS);
            } else {
              if (shouldConnectImmediately) {
                connect({ connector: wallet?.connector });
              }
              context.setRoute(routes.CONNECT);
              context.setConnector({ id: wallet.id });
            }
          }
      }
    >
    ....

[lochie]

I rewrote it from "wc:3cc..." to "wc://3cc..." this still didn't trigger the WebView in Android to open metamask wallet

@skhetcho thanks for doing all of this research into this problem!

just checking, it sounds like there is no resolve in this PR as the issue still persists even with this change in place?

[skhetcho]

@lochie I just noticed it breaking on a different android phone V-14 Kernel 5.10.198-android12-9-28575147 while working on V-14 Kernel 5.4.254-qgbi-28582291. I am not sure if this matters though. I continue to investigate this issue. The most important line is in https://github.com/family/connectkit/pull/415/commits/4b0d0bea49add10bc652b972bf0ef6f9107d25ef is the addition of line 117

[skhetcho]

I also noticed that I didn't add a fix for wallets inside the "Other" menu

[skhetcho]

found the fix! it shouldn't be browserDetect() === 'chromium-webview`, this condition should be isAndroid() ? then the target should be '_blank'

pr is coming your way. I tested this on multiple android devices

[vimtor]

Hey @skhetcho, we've been considering migrating from RainbowKit because of this and other problems.

We currently have a Telegram Web app with ~100k users. Let me know if we can help you solve/test this issue.

[skhetcho]

@vimtor That's awesome to see the ecosystem helping each other! The CTO of WalletConnect commented on my X thread regarding it being a deprecated version of WalletConnect that's being used. tbh I'm not sure if that's the issue, I was able to get around it but my pr solution is quirky