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

[T-Damer]

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:

2024-10-17.18.38.15.mp4

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

[email protected] /Users/Damer/Projects/scalr/scalr-frontend
└─┬ @tonconnect/[email protected]
└─┬ @tonconnect/[email protected]
├── @tonconnect/[email protected]
├── @tonconnect/[email protected]
└── @tonconnect/[email protected]

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]

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)