[TONCONNECT-UI]: TonConnect works in the browser, but does not work inside of Telegram MiniApp.

[KernelPanic0]

Describe the bug

I have a telegram mini app that opens a tonconnect application. Whenever I connect my wallet through the regular browser (Firefox) using the Tonkeeper wallet, Tonkeeper immediately opens up and I get prompted to accept the connection. However when I do the same in the telegram mini app, the tonkeeper wallet does not automatically open. Instead, tonconnect simply infinitely loads. I have added some remotejs code into my webapp which allows for me to remotely view the console of the app running in the miniapp, however there are no errors that point out any obvious flaws... Even when opening the link in the browser externally, it does not immediately invoke the opening of Tonkeeper.

Here is the code (Vue.js framework)
`const tonConnectUI = new TON_CONNECT_UI.TonConnectUI({
manifestUrl: 'url',
buttonRootId: 'connect-div'
});

    const acceptOfferButton = document.getElementById('accept-offer');
    // eslint-disable-next-line

    async function showTonConnectPopup() {
        try {
            // Initialize the connection to the TonConnect wallet
            await tonConnectUI.openModal();

        } catch(e) { console.log(e) }
    }
	
    acceptOfferButton.addEventListener('click', showTonConnectPopup)

    tonConnectUI.onStatusChange(async walletInfo => {
    if (walletInfo) {...`

Expected behavior

Tonconnect opens the Tonkeeper wallet after clicking connect, just like it would in the browser.

Current behavior

Tonconnect infinitely loads.

Steps to Reproduce

Unsure

Environment

Telegram MiniApp

Additional context

No response

[KernelPanic0]

Still having this problem...

[AvetikNersisyan]

Did you find the solution? I still have the same issue.

[ameeetgaikwad]

let me know as well

[iArchin]

same

[KernelPanic0]

If I remember correctly someone mentioned that this may be an issue of versions and using an older version may not have this issue. Sorry if this isnt very helpful

[ArturK1ng]

If this is still relevant, then I just updated the latest version of ton connect ui to the site.

[gh0s1in1hec0de]

I’m facing a similar issue. Everything functions correctly until a page reload. After the reload, every interaction with the blockchain results in a page that says «install tonkeeper», completely forgets connection and don't detect tonkeeper. However, when I close and reopen the web application, everything works fine again.

[b1ender10]

same

[masooddanish87]

Why My Tonkeeper wallet don't accept this mini app?

[jenshenJ]

Hi! Y can't reproduce this issue. Could you provide some steps to reproduce it, video with issue and your environment (telegram version)?

Describe the bug

I have a telegram mini app that opens a tonconnect application. Whenever I connect my wallet through the regular browser (Firefox) using the Tonkeeper wallet, Tonkeeper immediately opens up and I get prompted to accept the connection. However when I do the same in the telegram mini app, the tonkeeper wallet does not automatically open. Instead, tonconnect simply infinitely loads. I have added some remotejs code into my webapp which allows for me to remotely view the console of the app running in the miniapp, however there are no errors that point out any obvious flaws... Even when opening the link in the browser externally, it does not immediately invoke the opening of Tonkeeper.

Here is the code (Vue.js framework) `const tonConnectUI = new TON_CONNECT_UI.TonConnectUI({ manifestUrl: 'url', buttonRootId: 'connect-div' });

    const acceptOfferButton = document.getElementById('accept-offer');
    // eslint-disable-next-line

    async function showTonConnectPopup() {
        try {
            // Initialize the connection to the TonConnect wallet
            await tonConnectUI.openModal();

        } catch(e) { console.log(e) }
    }
	
    acceptOfferButton.addEventListener('click', showTonConnectPopup)

    tonConnectUI.onStatusChange(async walletInfo => {
    if (walletInfo) {...`

Expected behavior

Tonconnect opens the Tonkeeper wallet after clicking connect, just like it would in the browser.

Current behavior

Tonconnect infinitely loads.

Steps to Reproduce

Unsure

Environment

Telegram MiniApp

Additional context

No response

[samyarkd]

I had this issue in next.js

When I manually instantiated TonConnectUI class in an useEffect it worked but it did not when I used the provider, I inspected the library code and found out that the react SDK renders the TonConnectUI without an useEffect which i believe that's the root cause of this issue that some people encounter with SSR. (@thekiba please review this 🙏) this only occurs in Telegram MiniApps somehow.

I suspected it has something to do with hydration and server-side rendering. so, I disabled SSR for ton connect provider and it worked:

Import TonConnectUIProvider this way:

const TonProvider = dynamic(
  () => import("@tonconnect/ui-react").then((mod) => mod.TonConnectUIProvider),
  {
    ssr: false,
  },
);