search

ton-connect / sdk

SDK for TON Connect 2.0 — a comprehensive communication protocol between wallets and apps in TON ecosystem
Apache License 2.0
326 stars 92 forks source link

[UI or UI-REACT]: `ERR_UNKNOWN_URL_SCHEME` on Android device when using 3rd party wallets (Tonkeeper, MyTonWallet) #272

Closed T-Damer closed 1 month ago

T-Damer commented 1 month ago

Describe the bug

When trying to connect any 3rd party wallet via @tonconnect/ui or @tonconnect/ui-react on Android it leads to deeplinking issue (ERR_UNKNOWN_URL_SCHEME). I noticed that other apps don't suffer from this problem. Hers' the demo:

https://github.com/user-attachments/assets/00d14bce-c00c-4195-9195-bb2681f813d8

Basically I initialize the library and try to connect the wallet:

const tonConnect = new TonConnectUI({
  manifestUrl: `${location.origin}/tonconnect-manifest.json`,
  actionsConfiguration: {
    twaReturnUrl: env.VITE_APP_BASE_LINK as `${string}://${string}`,
  },
  uiPreferences: { theme: THEME.DARK },
})

const onConnect = () => tonConnect.openModal()

<button onClick={onConnect}>Connect wallet</button>

I have Tonkeeper and MyTonWallet installed on my system, when using Tonkeeper built-in browser, everything works fine

Expected behavior

It should immediately open the external app and suggest to connect, it shouldn't lead

Current behavior

It open webpage of the wallet which tries to open the external wallet and falls into ERR_UNKNOWN_URL_SCHEME

Steps to Reproduce

  1. Intialize the library
  2. Pass the connect method to the button
  3. Try to connect with any 3rd party wallet on Android

Environment

scalr-frontend@1.0.0 /Users/Damer/Projects/scalr/scalr-frontend └─┬ @tonconnect/ui@2.0.9 └─┬ @tonconnect/sdk@3.0.5 ├── @tonconnect/isomorphic-eventsource@0.0.2 ├── @tonconnect/isomorphic-fetch@0.0.3 └── @tonconnect/protocol@2.2.6

Android specific Tested on latest WebView engine, Android 14, I have reports from users with older system versions (11-13)

Additional context

No response

T-Damer commented 1 month ago

Ok, the fix is: use @tonconnect/ui-react (obvious, I know, but I used @tonconnect/ui with event listeners, which didn't work, because it has no context and maybe wasn't intended to be used in TMA, I don't know), you should wrap your app high enough (I tried wrapping inside 1 route, which led to this issue. I moved the wrapper higher and deeplinking worked). I also used patched version for preact from this PR (I used locally built version)