[bug] getting error when connecting to any wallet in TWA (telegram web app)

[dev-aly3n]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

1.0.11

wagmi Version

1.4.1

When I try to open metamask (or other wallets) to connect in a TWA, it break the app and show the following error:

Webpage not available
The webpage at wc:e0cbf07c74c4e140169a6e8094eab4db72c6cda91aded28e98140dd240422a96@2?relay-protocol=irn&symKey=33687006de92293ca4637ac53c1bd68cba1ae48a6f5653ff4a694dd3209c6350 could not be loaded because:
net::ERR_UNKNOWN_URL_SCHEME

nichitagutu suggested a fix for web3modal with the same behavior:
Only for React though You may want to edit rainbow kit to use it in TWAs. With web3modal the problem was that walletconnect opened pairing link with target _self

and here is the fix that nichitagutu applied to make it work:
nichitagutu/web3modal@a05574f

[DanielSinclair]

@dev-aly3n Thanks for reporting. Do you have a TWA example that I can test against?

[dev-aly3n]

@dev-aly3n Thanks for reporting. Do you have a TWA example that I can test against?

yes please 1- fork this: https://github.com/dev-aly3n/investify
2- then deploy it somewhere like vercel
3- create a bot in telegram using botFather: https://t.me/BotFather
4- replace the token botFather gives you with the one exist in Bot folder in the root of the project you forked (also replace the url of web app in this file with the one you deployed)
5- run "node Bot/bot.js" so the bot that you created with botFather can work.

now you can start the bot in telegram and open the web app.
inside webapp try to connect to metamask with rainbow connect button. it will show that error and app will crash

[DanielSinclair]

@dev-aly3n Thanks. Do you happen to have a Telegram Bot in preview/production that I can try out to simplify the test process?

[dev-aly3n]

@dev-aly3n Thanks. Do you happen to have a Telegram Bot in preview/production that I can try out to simplify the test process?

yes please use this one: https://t.me/investiiify_bot

it only speed up token replacement (as this bot's token is already in the bot.js file)
but you still need to follow other steps (including deploying the app and replacing the deployed url inside bot.js)

[djvang]

https://t.me/investiiify_bot does't start command

[dev-aly3n]

https://t.me/investiiify_bot does't start command

Hi, you need to run "node Bot/bot.js" first. then the bot would work as the bot.js file defined.

[dev-aly3n]

Hi, I revoked the bot KEY. please make another bot with botFather and replace the token. it's super simple. thanks

[djvang]

Do you have any results?

[dev-aly3n]

Do you have any results?

no. I just realized that this issue related to the connectors, not rainbow. as I tested other packages like family kit that uses same connector from viem and wagmi.
do I need to open an issue for viem?

[skhetcho]

@dev-aly3n I am using ConnectKit but it seems like I am facing the ERR_UNKNOWN_URL_SCHEME error on Android phones still. How did you end up solving it?

[dev-aly3n]

@skhetcho sad story I didnt continue the project. please let us know if you found a workaround

[skhetcho]

@dev-aly3n My work around was to use _blank and force open the wc:// url in a new tab. However, it seems like this approach stopped working as of few days ago. Here is the issue linked with the PR in the issue:

family/connectkit#414

[harissatti]

does any one find the solution about this ?