In the context of Vite development, how might you ensure TonConnectUI from @tonconnect/ui doesn't interfere with HMR?

For instance, let's consider an application with @tonconnect/ui + Solid.js + Vite.
We have an updated App.tsx after the command pnpm create vite solidjs-vite-tonconnect2.0 --template solid-ts:

import { createSignal, onMount } from 'solid-js'
import { TonConnectUI } from '@tonconnect/ui'
import './App.css'

function App() {
const [connectedWallet, setConnectedWallet] = createSignal<boolean>(localStorage.getItem('dAppToken') ? true : false);
  const tonConnectUI = new TonConnectUI({
    manifestUrl: 'https://about.systemdesigndao.xyz/ton-connect.manifest.json',
    buttonRootId: null,
  });

  onMount(() => {
    const run = async () => {
       tonConnectUI.uiOptions = {
          ...tonConnectUI.uiOptions,
          buttonRootId: 'ton-connect2-container',
      }

      // enable ui loader
      tonConnectUI.setConnectRequestParameters({ state: 'loading' });
  
      // fetch you tonProofPayload from the backend
      const d = await postData('https://demo.tonconnect.dev/ton-proof/generatePayload');
      const { payload } = await d.json();
  
      if (!payload) {
          // remove loader, connect request will be without any additional parameters
          tonConnectUI.setConnectRequestParameters(null);
      } else {
          // add tonProof to the connect request
          tonConnectUI.setConnectRequestParameters({
              state: "ready",
              value: { tonProof: payload }
          });
      }
  
      const unsubscribe = tonConnectUI.onStatusChange(
        async wallet => {
          if (!wallet) {
            return;
          }
    
          const tonProof = wallet.connectItems?.tonProof;
    
          if (tonProof) {
            if ('proof' in tonProof) {
              const obj = {
                  proof: {
                    ...tonProof.proof,
                    state_init: wallet.account.walletStateInit,
                  },
                  network: wallet.account.chain,
                  address: wallet.account.address
              };

              try {
                tonConnectUI.setConnectRequestParameters({
                  state: "loading",
                });

                const d = await postData('https://demo.tonconnect.dev/ton-proof/checkProof', obj);
                const { token } = await d.json();
                const r = await fetch(`https://demo.tonconnect.dev/dapp/getAccountInfo?network=${obj.network}`, {
                        headers: {
                          Authorization: Bearer ${token},
                          'Content-Type': 'application/json',
                        }
                });
                const data = await r.json();
    
                console.log('success: ', data);

                tonConnectUI.setConnectRequestParameters({
                  state: "ready",
                  value: { tonProof: payload }
                });

                setConnectedWallet(true);
                localStorage.setItem('dAppToken', `Bearer ${token}`);
              } catch (err) {
                console.error(err);
                
                setConnectedWallet(false);
                localStorage.removeItem('dAppToken');
              }
            }
          }
        }
      );

      return unsubscribe;
    }

    run();
  });
  
  return (
    <>
      <div id="ton-connect2-container"></div>
      {connectedWallet() && <div style={{ 'display': 'flex', 'align-items': 'center', "flex-direction": "column" }}>
        <pre>Connected: {JSON.stringify(connectedWallet())}</pre>
      </div>}
    </>
  )
}

export default App

Then, we insert something into jsx and save - HMR doesn't trigger.

Let's consider the next scenario where we remove everything related to tonconnect2.0:

import './App.css'

function App() {  
  return (
    <>
      <span>hmr works 1</span> 
    </>
  )
}

export default App

Restart Vite with Ctrl + C and then pnpm run dev. This is needed because HMR isn't working.
Normally, you'd only see the span update without the tonconnect2.0 logic. After restarting, you should see the span displaying 'hmr works 1'

Insert:

      <br />
      <span>hmr works 2</span>

Save.

And we see that the new span was inserted into jsx and rendered in the browser.

However, if we keep the logic related to ton-connect2.0, then #tc-root won't re-render and we'll see errors in the browser console:

web-api.ts:87 Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "tc-root" has already been used with this registry
    at defineStylesRoot (http://localhost:4001/node_modules/.vite/deps/@tonconnect_ui.js?v=bd6b2e50:7465:18)
    at App (http://localhost:4001/node_modules/.vite/deps/@tonconnect_ui.js?v=bd6b2e50:15244:3)
    at http://localhost:4001/node_modules/.vite/deps/@tonconnect_ui.js?v=bd6b2e50:6411:24
    at untrack (http://localhost:4001/node_modules/.vite/deps/@tonconnect_ui.js?v=bd6b2e50:5951:12)
    at createComponent (http://localhost:4001/node_modules/.vite/deps/@tonconnect_ui.js?v=bd6b2e50:6411:10)
    at http://localhost:4001/node_modules/.vite/deps/@tonconnect_ui.js?v=bd6b2e50:15298:51
    at http://localhost:4001/node_modules/.vite/deps/@tonconnect_ui.js?v=bd6b2e50:6764:53
    at updateFn (http://localhost:4001/node_modules/.vite/deps/@tonconnect_ui.js?v=bd6b2e50:5770:38)
    at runUpdates (http://localhost:4001/node_modules/.vite/deps/@tonconnect_ui.js?v=bd6b2e50:6182:17)
    at createRoot (http://localhost:4001/node_modules/.vite/deps/@tonconnect_ui.js?v=bd6b2e50:5774:12)

Describe the bug
A clear and concise description of what the bug is.
Unable to connect with tonkeeper app on Android devices (Telegram for Android v10.0.4 (3802))
Connect Button redirects to Tonkeeper download screen
Sign in with Tonkeeper gives webpage not available, net::ERR_UNKNOWN_URL_SCHEME

To Reproduce
Steps to reproduce the behavior:

1. Use Telegram for Android v10.0.4 (3802), also install TonKeeper android app
2. Click on Connect Button
3. Sigin in with TonKeeper
4. Error: Sign in with Tonkeeper gives webpage not available, net::ERR_UNKNOWN_URL_SCHEME

Expected behavior
It should redirect to Tonkeeper app, and it should connect the TWA

Screenshots
If applicable, add screenshots to help explain your problem.

• Telegram for Android v10.0.4 (3802)
• Package version "@tonconnect/ui-react": "^1.0.0-beta.9"

Additional context
Attached a video for you ref

The address manifestUrl.json file cannot be found when the APP connects？

When transaction is canceled by the user and the corresponding notification pops up, it can't be closed if user clicks on the "close" button.

Environment:
React 18.2.0
Next.js 13.1.5
tonconnect/ui-react 0.0.13

TonConnect ReactUI fails to initialize when NextJs app is built and served statically. This doesn't happen as long as the app is ran with yarn dev

Steps to reproduce:

1. yarn create next-app --typescript (any name, use eslint - yes, use src/ - yes, use app/ - no, import alias - default)
2. yarn add @tonconnect/ui-react
3. Wrap app with TonConnectUIProvider as per docs
4. yarn build
5. yarn start
6. Go to localhost:3000

Result:

Uncaught SyntaxError: Identifier 'r' has already been declared (at _app-6faa08e70223d641.js:5:26019) in the console

package.json dependencies:

"dependencies": {
    "@next/font": "13.1.5",
    "@tonconnect/ui-react": "^0.0.13",
    "@types/node": "18.11.18",
    "@types/react": "18.0.27",
    "@types/react-dom": "18.0.10",
    "eslint": "8.32.0",
    "eslint-config-next": "13.1.5",
    "next": "13.1.5",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.4"
  }```

➜  sdk git:(main) npm run compile 

> [email protected] compile
> ttsc

src/ton-connect/core/models/index.ts:2:41 - error TS2307: Cannot find module './transaction-request' or its corresponding type declarations.

2 export type { TransactionRequest } from './transaction-request';
                                          ~~~~~~~~~~~~~~~~~~~~~~~

src/ton-connect/core/models/index.ts:3:34 - error TS2307: Cannot find module './sign-request' or its corresponding type declarations.

3 export type { SignRequest } from './sign-request';
                                   ~~~~~~~~~~~~~~~~

src/widget/widget-controller.ts:30:9 - error TS2322: Type 'SendTransactionResponse' is not assignable to type 'boolean'.

30         return this.connector.sendTransaction(tx);
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/widget/widget-controller.ts:41:9 - error TS2322: Type 'SignMessageResponse' is not assignable to type 'string'.

41         return this.connector.sign(signRequest);
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

So apparently some files are missing

Subscription contracts are unusable within web app based on TON Connect 2.
There is no way to add a plugin to wallet, nor to remove it.

I want a method connector.deployAndAddPlugin to be available. It must accept plugin stateInit (so that subscription code is not unnecessarily fixed), its workchain, amount of funds to send there, etc (like in TonWeb) + optionally wallet address, so that subscription is not activated on the wrong account.
Optionally, methods connector.addPlugin, connector.deletePlugin, etc could be added as well.

These methods are crucially important for plugins usage. I'd be grateful if they are added before the end of current Hack-a-TONx.

I wanted to send some data with transaction and check it on server.
Need help.

const defaultTx = {
        validUntil: Date.now() + 1000000,
        messages: [
            {
                address: '0:0####',
                amount: '20000000',
                payload: 'causes error',
                stateInit: 'causes error'
            }
        ],
        message: 'message ? does not appear'
    };

const result = await connector.sendTransaction(defaultTx);

Describe the bug
The name of the MyTonWallet does not fit in the interface, although it is not long.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://dns.ton.org or other site with TonConnect UI
2. Click on 'Connect wallet'
3. See cutted 'MyTonW...'

Expected behavior
The name is displayed in full.

Screenshots

• Any desktop OS
• Any browser

Currently you'd have to subscribe to events with onStatusChange, but it's contradictory to how hooks are expected to work.

It'd make more sense that whenever any connection state changes, useTonConnectUI would return it (similar to useState).

TonConnectButton's dropdown goes off the screen on mobile and on desktop, if the window is resized. In my case the button is mounted inside the MUI's Toolbar, if that matters.

Steps to reproduce:

1. Add tonconnect button to the top-right part of the screen
2. Open developer tools and enable responsive view
3. Click on the TonConnect button

Alternatively, this can be achieved just by clicking on the button on the mobile device.

Demo video:

Is your feature request related to a problem? Please describe.
When working with dApp for Desktop, there may be a situation when the user refuses to make a transaction and click close on "Confirm the transaction popup".

After the popup is closed, the Promise still wait for the transaction confirmation result.

Problem: I would like to make the transaction button disabled, for the duration of the transaction, in which case the button remains disabled, because the transaction has not been completed.

Describe the solution you'd like
It would be convenient to have an event/handler to close the popup so that the interface can also respond to this.

В документации есть способ вызова модального окна авторизации
https://github.com/ton-connect/sdk/tree/main/packages/ui#call-connect

const connectedWallet = await tonConnectUI.connectWallet();

Однако он не будет работать правильно если пользователь в первый раз откажется от авторизации. В этом случае промис вернет ошибку, но UI не скроется, пользователь может повторно авторизоваться, но результат авторизации уже не будет обработан.

Вот пример сайта демонстрирующий проблему

<div class="center">
    <button onclick="connectWallet()">Connect wallet</button>
</div>
</body>
<script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>
<script>
  const tonConnectUI = new TON_CONNECT_UI.TonConnectUI({
    manifestUrl: 'https://stels-cs.github.io/ton-connect-ui/tcm.json',
    restoreConnection: false,
  });

  async function connectWallet() {
    const connectedWallet = await tonConnectUI.connectWallet(); // Problem
    console.log('connectedWallet', connectedWallet);
  }
</script>

Шаги

1. Перейти сюда https://stels-cs.github.io/ton-connect-ui/demo-ton-ui.html, Нажать кнопку Connect Wallet
2. Отсканировать QR код в приложении Tonkeeper
3. Закрыть диалог авторизации в Tonkeeper, в это время сайт получит сообщение об ошибке, это ожидаемое поведение
4. Так как UI все еще отображается мы можем заново отсканировать QR код в Tonkeeper и авторизоваться
5. Результат авторизации не будет обработан, так как промис уже вернул ошибку

Корректно обработать авторизацию можно только если подписываться на изменение статуса https://github.com/ton-connect/sdk/tree/main/packages/ui#subscribe-to-the-connection-status-changes

Uncaught (in promise) Error: [TON_CONNECT_SDK_ERROR] Reject request at ConnectErrorsParser.parseError (index.js:2720:12) at TonConnect.onWalletConnectError (index.js:3756:39) at TonConnect.walletEventsListener (index.js:3727:14) at index.js:3358:46 at Array.forEach (<anonymous>) at InjectedProvider.<anonymous> (index.js:3358:24) at Generator.next (<anonymous>) at fulfilled (index.js:3254:24)

Uncaught (in promise) Error: [TON_CONNECT_SDK_ERROR] Wallet declined the request at ConnectErrorsParser.parseError (index.js:2720:12) at TonConnect.onWalletConnectError (index.js:3756:39) at TonConnect.walletEventsListener (index.js:3727:14) at index.js:3190:44 at Array.forEach (<anonymous>) at BridgeProvider.<anonymous> (index.js:3190:22) at Generator.next (<anonymous>) at index.js:3071:67 at new Promise (<anonymous>) at __awaiter$4 (index.js:3053:10)

Uncaught (in promise) Error: [TON_CONNECT_SDK_ERROR] Close PopUp at ConnectErrorsParser.parseError (index.js:2720:12) at TonConnect.onWalletConnectError (index.js:3756:39) at TonConnect.walletEventsListener (index.js:3727:14) at index.js:3358:46 at Array.forEach (<anonymous>) at InjectedProvider.<anonymous> (index.js:3358:24) at Generator.next (<anonymous>) at fulfilled (index.js:3254:24)

Hi people :)

I wanna know if can it be possible to use cdns to serve manifest file for TonConnect?
I wanna use this awesome library to create an extension for no-code app builder, which allows storing files in the root folder of the project only on a paid plan, which is useless in case I wanna build this extension without possibility to store tonconnect-manifest file in the root folder.
If it isn't possible now, will it be possible in the future maybe?

Some screens:

1. manifest file
   

2. after connect, deeplink converted into a QR code
   

3. after scanning the QR code using Tonkeeper, in the connector "OnStatusChange" I'm getting in trouble )
   

If you can help me figure it out how to use manifest file stored on a cdn service, it will be a great boost to bring no-code platforms to build dapps using TonConnector <3

Cheers

On my website I use tonconnect/ui.
It used to work, but today, when I try to connect a wallet, I get this message on tonConnect.connectWallet()

Access to resource at 'https://tonconnectbridge.mytonwallet.org/bridge/events?client_id=....' 
from origin 'https://.....' has been blocked by CORS policy: 
The 'Access-Control-Allow-Origin' header has a value
'https://mytonwallet.app' that is not equal to the supplied origin.

Hello, how should I call up the signature? For example, TonMask provides a method (ton_requestWallets)

I got an error Error: [TON_CONNECT_SDK_ERROR] Response id 12 doesn't match any request's id after transaction rejected.
How can I fix it?

Error in Safari

Compiled with problems:
×
ERROR
Illegal constructor
HTMLDivElement@[native code]
TcRootElement@
createElement@[native code]
@http://localhost:3000/static/js/bundle.js:16573:75
runComputation@http://localhost:3000/static/js/bundle.js:15619:24
updateComputation@http://localhost:3000/static/js/bundle.js:15612:17
createMemo@http://localhost:3000/static/js/bundle.js:15356:20
untrack@http://localhost:3000/static/js/bundle.js:15491:14
children@http://localhost:3000/static/js/bundle.js:24506:38
children@http://localhost:3000/static/js/bundle.js:16663:19
@http://localhost:3000/static/js/bundle.js:15802:34
runComputation@http://localhost:3000/static/js/bundle.js:15619:24
updateComputation@http://localhost:3000/static/js/bundle.js:15612:17
createMemo@http://localhost:3000/static/js/bundle.js:15356:20
children@http://localhost:3000/static/js/bundle.js:15541:31
untrack@http://localhost:3000/static/js/bundle.js:15491:14
@http://localhost:3000/static/js/bundle.js:15798:43
runComputation@http://localhost:3000/static/js/bundle.js:15619:24
updateComputation@http://localhost:3000/static/js/bundle.js:15612:17
createRenderEffect@http://localhost:3000/static/js/bundle.js:15342:20
provider@http://localhost:3000/static/js/bundle.js:15798:23

Describe the bug
TonConnectButton disappears once I move to another page.

1. When the application is initiated first, the TonConnectButton shows.

2. However, when moving to another page, the button disappears. From the console, the top parent div for TonConnectButton is loaded but the remaining components are not loaded for the button.

3. When I refreshed the browser with 'command + R', the button appears again.

To Reproduce
Steps to reproduce the behavior:

1. Put the TonConnectButton on each two pages
2. Run the application and move to another page
3. See that the TonConnectButton disappeared.

Expected behavior
The TonConnectButton should be loaded in the same way as it did when initializing the application.

Screenshots
If applicable, add screenshots to help explain your problem.

• OS: macOS 12.3.1
• Browser: Chrome
• Package version: 0.0.14
• My project: react with next.js ("react": "18.2.0", "next": "13.2.3")

Additional context
TonConnectButton is included in the 'Header' component and it is loaded from each page (index.tsx, discover.tsx).

// component/Header.tsx
import { TonConnectButton } from '@tonconnect/ui-react';
...

const Header = (props: { menuName: EHeaderMenu }) => {
  return (
    <StHeader>
      ....
      <TonConnectButton />
    </StHeader>
  )
}

// page/index.tsx
const Home: NextPage = () => {
  return (
    <StWrapper>
      <Header />
    </StWrapper>
  )
}
...

// page/discover.tsx
const Discover: NextPage = () => {
  return (
    <StWrapper>
      <Header />
    </StWrapper>
  )
}

I have tried to solve this issue but decided to ask you after 2-day debugging..🥹
Thank you for your work in advance.

Everything is fine in next dev, but after next build, when connecting tonkeeper:
caught (in promise) Error: Decryption error:
message: 108,76,47,24,72,92,33,170,247,100,200,158,144,189,199,112,199,203,207,12,221,20,185,238,39,135,14,170,230,55,135,70,243,63,17,184,54,219,166,191,80,54,191,14,104,65,253,150,156,192,88,132,212,246,72,78,198,193,235,135,253,63,36,6,50,6,108,197,131,199,111,146,219,21,122,141,58,233,206,80,10,171,148,18,49,21,210,139,60,246,122,179,247,212,43,158,193,60,174,112,151,47,54,86,65,41,231,159,83,46,2,114,95,169,241,141,20,130,187,157,165,51,241,138,3,99,45,228,127,23,19,67,134,162,39,178,183,115,66,1,70,82,231,127,210,92,129,65,17,143,123,185,49,163,247,232,49,32,186,165,225,221,1,133,213,110,160,219,142,34,20,154,193,8,38,36,47,44,113,10,111,170,224,130,229,136,233,201,75,137,220,197,99,67,137,57,248,180,106,171,51,142,220,133,232,136,134,128,162,158,220,43,67,145,85,59,4,198,232,192,234,131,132,47,42,1,169,32,179,60,142,146,152,10,242,119,108,202,235,171,62,243,79,149,119,125,82,114,14,95,99,83,147,206,205,248,34,1,222,147,194,250,182,239,1,197,150,80,68,235,102,113,7,189,142,217,113,119,218,231,118,3,180,209,45,67,30,157,76,248,220,98,231,18,80,244,202,115,197,12,154,221,175,71,76,12,142,77,214,2,185,65,33,195,150,183,16,147,165,51,59,92,119,192,209,221,73,79,139,107,19,228,154,179,40,26,143,163,137,12,207,98,137,177,206,135,13,183,37,22,77,66,144,249,18,177,221,5,34,120,66,213,86,61,152,30,113,163,53,241,150,144,159,105,77,176,133,100,93,169,234,160,55,54,172,39,165,155,106,59,207,168,247,21,168,154,249,103,130,30,164,56,239,101,78,245,191,23,55,236,135,90,130,235,42,32,69,131,216,34,243,47,132,196,197,59,192,131,47,136,4,14,84,57,188,226,145,208,245,14,125,246,123,124,217,233,185,254,110,96,26,124,236,65,121,0,151,246,49,244,185,104,200,137,179,94,14,217,93,204,169,230,226,164,166,62,7,38,86,20,194,114,171,149,156,35,34,227,32,48,194,32,92,70,97,199,80,149,60,213,102,62,217,244,70,67,21,44,203,164,195,234,150,97,245,254,37,6,81,61,65,45,251,119,211,184,16,174,169,132,198,105,25,122,35,85,69,70,160,128,35,225,174,216,154,80,24,45,147,135,62,40,88,119,79,67,178,197,50,134,146,60,106,124,173,236,191,237,47,175,24,236,192,8,158,14,34,51,137,171,31,107,231,200,23,187,102,104,228,231,205,71,223,30,84,128,51,47,218,191,234,42,106,141,225,108,60,11,66,150,11,225,194,236,91,142,34,205,168,106,205,160,116,97,236,126,193,224,44,34,17,121,35,231,103,63,252,102,105,204,178,156,253,56,52,60,219,75,245,26,170,93,182,229,178,26,114,56,54,109,129,92,218,29,108,33,68,192,178,150,59,3,17,33,124,136,192,196,72,51,251,210,110,128,249,8,225,131,143,157,193,55,187,232,69,214,42,56,108,196,47,90,237,20,27,250,251,233,247,109,144,89,155,15,246,208,108,52,88,32,44,235,143,70,204,9,168,89,206,144,213,47,205,142,7,171,97,102,1,105,198,155,136,68,213,58,150,28,147,205,92,16,234,199,31,187,5,148,86,48,241,115,50,119,74,184,130,38,91,145,187,228,204,152,10,80,225,97,42,0,132,105,7,172,6,97,189,147,127,181,118,10,3,140,214,164,248,51,31,154,19,90,56,120,201,119,208,59,134,39,248,194,70,242,69,88,14,94,175,69,228,2,1,222,5,76,16,71,23,123,153,191,198,237,181,150,74,163,130,240,54,232,201,202,209,218,97,44,112,234,67,248,2,173,192,75,250,59,165,93,49,90,75,123,125,214,234,177,33,62,116,195,42,151,180,68,60,189,158,92,111,202,149,216,134,62,43,246,49,126,5,146,102,38,56,202,107,166,137,105,31,239,134,4,49,79,78,36,6,224,99,41,6,229,241,38,39,250,38,241,221,215,100,66,134,190,53,210,82,8,13,202,180,219,156,197,5,238,79,199,29,194,239,219,57,67,85,76,28,186,81,207,98,69,128,155,186,60,59,140,16,225,93,122,59,217,22,70,164,91,200,185,6,14,85,53,26,206,39,242,34,218,223,215,204,57,224,169,95,119,37,252,148,47,228,130,146,139,226,174,45,183,234,92,84,117,183,122,246,163,228,39,67,66,148,76,57,13,113,203,128,146,234,51,255,47,29,34,234,58,48,206,90,57,196,101,125,68,224,205,136,245,13,220,145,78,95,97,0,93,164,153,211,189,214,11,202,187,89,109,218,250,36,166,227,133,202,123,178,129,183,154,197,223,172,124,235,165,144,156,138,121,31,93,78,211,201,184,102,157,193,60,164,25,115,191,139,2,97,108,161,137,207,191,2,51,161,229,52,131,30,204,20,103,181,238,6,85,226,216,135,246,209,39,240,169,76,166,45,251,175,52,171,37,231,75,206,66,45,89,75,141,163,59,196,254,2,233,79,205,87,202,9,237,76,127,253,16,148,18,100,202,211,212,136,17,241,31,30,217,231,4,209,25,142,5,175,41,36,240,109,105,84,157,182,108,94,60,110,125,207,138,227,145,92,57,116,168,174,28,190,36,39,53,28,1,224,14,76,134,153,88,191,241,78,219,85,33,200,180,31,179,67,156,58,176,136,155,113,253,157,211,245,211,140,16,238,34,50,51,34,225,160,239,66,142,221,73,30,151,185,191,2,252,76,21,237,177,191,151,187,200,148,193,134,67,10,32,172,86,227,138,72,66,39,240,67,132,0,49,19,148,38,219,23,25,193,181,109,216,146,105,53,106,149,91,196,99,93,168,183,113,130,34,165,126,48,91,15,72,218,150,215,154,231,27,107,88,17,166,126,161,127,103,180,122,146,76,249,214,186,111,2,75,118,103,61,159,117,21,85,156,86,16,105,56,18,54,36,136,202,216,204,203,87,50,49,3,174,163,142,33,20,177,208,228,86,35,80,29,154,226,87,126,100,191,56,109,58,73,152,24,26,157,226,2,209,196,73,150,159,57,101,207,160,222,229,238,242,32,196,11,187,37,208,12,46,227,171,80,144,76,74,26,199,74,46,196,162,215,156,167,172,50,6,8,150,44,197,70,254,213,118,6,198,113,50,15,239,3,74,137,76,102,11,119,45,82,117,254,241,22,194,54,158,167,202,108,146,225,45,151,137,99,240,82,118,254,171,101,163,97,218,29,32,98,23,83,68,246,116,213,90,200,12,109,241,44,178,242,82,253,3,151,76,44,85,28,144,128,50,93,145,243,204,33,57,229,252,34,44,77,253,178,225,32,237,233,18,166,232,217,56,13,32,135,119,162,6,135,136
sender pubkey: 238,45,221,251,226,148,158,71,8,201,162,206,126,13,184,219,60,59,153,188,169,94,100,152,91,48,223,47,126,0,170,34
keypair pubkey: 112,172,50,229,38,78,181,78,113,62,237,96,252,34,107,188,182,98,133,140,32,9,194,118,49,134,180,135,212,170,50,122
keypair secretkey: 212,156,126,70,20,156,116,42,151,156,27,31,214,253,32,0,222,164,157,74,250,6,82,183,199,128,192,11,42,207,7,127
at A.decrypt (_app-9bd8bb6ba70b5a0f.js:330:8229)
at ec. (_app-9bd8bb6ba70b5a0f.js:347:13290)
at Generator.next ()
at _app-9bd8bb6ba70b5a0f.js:347:705
at new Promise ()
at C (_app-9bd8bb6ba70b5a0f.js:347:502)
at ec.gatewayListener (_app-9bd8bb6ba70b5a0f.js:347:13213)
at er. (_app-9bd8bb6ba70b5a0f.js:347:6828)
at Generator.next ()
at s (_app-9bd8bb6ba70b5a0f.js:347:558)

Improve network support in TC2

Current state

Upon connection, TC2 reports back the network ID.
However, the user could be using a dapp that "thinks" it's in testnet mode, not paying attention that the wallet reported back is actually connected to a mainnet wallet.

This is a source for UX confusion, and a boilerplate effort for dapp owners to handle network mismatches.

In this example, the dapp could easily ignore the network mismatch.

Proposed solution

1. Add a network parameter (default: mainnet) to the TonConnect (and TonConnectUIProvider etc.) constructor
2. Persist different storage keys per network, so that if the app "thinks" it's in testnet, it cannot restore a mainnet connection and vice-versa
3. Provide the network parameter to the wallet via the bridge, so wallets are encouraged to prompt the user to switch between networks.
4. Throw an error from TonConnect in case a different network was reported back from the wallet than the one requested.

Is your feature request related to a problem? Please describe.

TonConnect UI widget currently handles mobile and desktop device, providing the best UX for both. But there is a special case with Telegram's TWA, more precisely with the Telegram Desktop one. The window is small and can't be resized, thus making the UI lib think it's a mobile device. This makes it impossible to connect the wallet using the UI that SDK provides in dApps opened on the desktop version of Telegram.

Describe the solution you'd like

I'd like to ask for a change that adds an exception to the current wallet selection logic that won't use the universal link method on Telegram Desktop TWA browser.

Describe alternatives you've considered

I have considered implementing a workaround for this case, but this workaround ruins the idea of ready-to-go UI kit and only solves the solution for me, not for every TonConnect/Telegram user.

Additional context

This is how it currently looks like:

Goal:
We do not want to show the choice of wallets by default. It will be better to show a unified QR code.

Problem:

1. Wallets work only with their universal links now.
2. SDK listens to the bridge of the wallet selected by the user.

Suggested solution:

1. Wallets support the link https://connect.ton.org?.
2. SDK supports 3 connection options ('c.' is a new one)
   a. connect({ jsBridgeKey }) - connects to an embedded wallet or browser extension
   b. connect({ bridgeUrl, universalLink }) — connects to the bridge of the specified wallet and generates a link with the universalLink of this wallet
   c. connect([ bridge1Url, bridge2Url, bridge3Url ]) - connects to all passed bridges and generates a universal link with connect.ton.org
3. Change the UX of the @tonconnect/ui

Describe the bug

warn ./node_modules/@tonconnect/isomorphic-fetch/node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '/Users/sevapp/projects/tests/bobster-bot/webapp2/node_modules/@tonconnect/isomorphic-fetch/node_modules/node-fetch/lib'

Import trace for requested module:
./node_modules/@tonconnect/isomorphic-fetch/node_modules/node-fetch/lib/index.js
./node_modules/@tonconnect/isomorphic-fetch/index.mjs
./node_modules/@tonconnect/sdk/lib/esm/index.mjs
./node_modules/@tonconnect/ui/lib/index.js
./node_modules/@tonconnect/ui-react/lib/index.js
./app/components/Ton.tsx

Additional context
I use ui-react in nextjs app.

Describe the bug
Call tonConnectUI.connectWallet() will open authorization popup, but if user close this popup promise will no throw e Error

Expected behavior
If user close popup promise should throw an AbortError

Bug description
I use react-router-dom and @ton-connect/ui-react and they don't seem to work well together.

Let's say we have the 'Connect wallet' button on the '/' route, and we also have an '/about' route with some content.

When using the <Link /> component provided by the react-router-dom package, if we go from '/' to '/about' and then back to '/' (using <Link /> or the back arrow in the browser), the 'Connect wallet' button just disappears.

Steps to reproduce the behavior:

1. Clone this repo with an example - https://github.com/manylovv/ton-button-issue
2. Run npm install and npm run dev command in the console
3. Open localhost:5173 in your browser
4. Click the 'Go to about page' link
5. Go back to the home page by clicking 'Go to home page' link (you can also use browser history back arrow)
6. You can see that 'Connect wallet' button just disappears.

Expected behavior
The button should be on the page after going back to the page

Screen recording with the issue
https://www.loom.com/share/fd9ad90a1eb44836829f54012fce2c02

• OS: macOS
• Browser: Chrome
• Package version: 1.0.0-beta.5

Add Ton Connect Vue Kit.

When using TonKeeper to connect to a website with a fragment link, I found that there is a "Back to" button to return to the fragment website.

Can this feature be achieved using an SDK library? How can it be implemented? Can you give me some idea?

Hi guys!

Describe the bug
Using ui-react-2.0.0-beta.1 & Next.js returns the error window.localStorage is undefined. localStorage is required for TonConnectUI Error.

To Reproduce
Steps to reproduce the behavior:

1. Create new next.js project npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
2. cd nextjs-blog
3. Add "@tonconnect/ui-react": "^2.0.0-beta.1" to depencencies in packages.json
4. Install depencencies with yarn install
5. Add import { TonConnectUIProvider, TonConnectButton } from "@tonconnect/ui-react"; in pages/index.js
6. Run yarn dev
7. See error

Expected behavior
No errors should be returned from yarn dev or yarn build

Screenshots

• OS: Ventura 13.5.1
• Package version 2.0.0-beta.1

Additional context
I think checkLocalStorageExists can be removed.

When wallet not listed in wallets list is connected via unified QR, tonconnect/ui stops working

If the user disconnects and reconnects their wallet, then they'll see the last notification they received prior to disconnecting the wallet.

Steps to reproduce:

1. Connect the wallet
2. Initiate a transaction
3. Decline it in the wallet app (the "Action cancelled" notification will appear)
4. Disconnect wallet in the web app
5. Reconnect the wallet

Result: "Action cancelled" notification appears again, but there was nothing to cancel.

This bug occurs even if the previously connected wallet was different from the current one.

At the moment, I believe the behavior is the messages are sent with bounce: true always.
Can we specify somehow that a message should be non-bounceable?

Use case - top-up a frozen contract, as done in Unfreezer.
Currently it may reject the extra balance sent to it if the message is bounceable.

Is there any way of getting ContractProvider/Sender attached to the connected account like the one from ton-core? Or even KeyPair like from ton-crypto/dist/primitives/nacl? The session contains the sessionCrypto with the KeyPair but that's not available in a public interface :(

export interface ContractProvider {
    getState(): Promise<ContractState>;
    get(name: string, args: TupleItem[]): Promise<ContractGetMethodResult>;
    external(message: Cell): Promise<void>;
    internal(via: Sender, args: { value: bigint | string, bounce?: Maybe<boolean>, sendMode?: SendMode, body?: Maybe<Cell | string> }): Promise<void>;
}

caught (in promise) Error: Decryption error:
message: 247,155,26,191,99,91,197,222,105,174
.....................

ender pubkey: 60,202,146,254,119,156,176,9,203,242,195,109,131,218,69,35,100,101,75,64,246,221,172,202,0,185,233,242,79,122,71,7
keypair pubkey: 76,184,199,13,253,162,22,168,182,143,163,157,199,214,105,62,147,138,72,101,230,92,70,64,94,32,128,198,131,179,72,31
keypair secretkey: 144,101,177,234,137,23,71,244,76,41,14,218,40,10,108,30,83,213,183,101,125,238,89,6,225,165,243,129,83,10,102,224'

Describe the bug
For android users it's common to close popups by press back button on system ui. But it doesn't close connect popup.

To Reproduce
Steps to reproduce the behavior:
0. You need android phone

1. Go to https://ton-connect.github.io/demo-dapp-with-react-ui/
2. Click on "Connect Wallet"
3. Click on Back button
4. Popup will not close

Expected behavior
Popup should close like in Tonkeeper when we see transaction info

Describe the bug*
When having both @tonconnect/sdk and @tonconnect/ui[-react] in package.json, this exception is thrown if the user doesn't visit the dapp for a couple of days.

Steps to reproduce

1. Add sdk and ui packages to package.json and implement Ton Connect in your dapp
2. Visit the dapp and connect the walet
3. Close dapp and don't open it for several days
4. Open the dapp, the error will appear

Expected behavior
It's expected for Ton Connect to work properly without throwing such exception

Context

Currently, user has to provide a URL which contains the manifest. This creates friction and slows down development cycles, leading to weird workaround such as reusing an already existing manifest etc.

Suggestion

1. Allow url, iconUrl to be optional (currently the work with empty strings but we can make it more explicity)
2. Allow passing in metadata props to the bridge directly (in addition to the URL as being done today)

I'd suggest showing a warning if data was passed directly, but since there's no verification being done (i.e. you could pass in any existing manifest belonging to a different app) at the moment I'm not sure that's required.

Describe the bug
The package installs dependencies for solid when the library for react is used.

To Reproduce
Steps to reproduce the behavior:
install "@tonconnect/ui-react": "0.0.14"
see package.lock

Expected behavior
solid deps will not in package.lock

Screenshots

When I try send a transaction with sendTransaction(tx) I have the response {"message":"OK","statusCode":200} .
but nothing happens (tonkeeper wallet doesn't show anything, ton explorer doesn't show any changes)

Exception is thrown: Property 'EventSource' doesn't exist

Describe the bug
got error during use node app for auth with tonconnect
set up express web server to make auth with tonconnect
see this error in console

To Reproduce
build same app))

Expected behavior
dont know

Screenshots
not need

Additional context
not have

On mobile version we see MyTonWallet icon

But this wallet not support mobile devices, so login is not possible

only desktop supported (from https://ton.org/wallets?pagination[limit]=-1)

Hi, we have made a library for TON Connect:

• github
• pub.dev
• Example of usage

We are writing this,if suddenly you want to add links to the Readme.

P.S Dart allows you to create cross-platform applications on Flutter

if you'll use react-ui in Next.js, you will get an error

Describe the bug
As I understand from your manuals and tutorials, tonconnect v2 backend authentication idea is that the frontend should receive a "proof" from the server, pass it to tonkeeper and receive the "signature" back.

But problem is that signature is generated using the wallet private key. So the backend needs the wallet public key to check it. And that's indeed how you implemented the check in your demo-dapp-backend.

BUT if the wallet is not initialized, its public key is NOT PRESENT in the blockchain! So it's impossible to take it from there and verify the proof signature.

To Reproduce
Steps to reproduce the behavior:

1. Try to authenticate in demo-dapp-backend with a new wallet
2. Tonkeeper says it's authenticated
3. Get an error "wallet is not initialized" when trying to access https://tonapi.io/v1/wallet/getWalletPublicKey

Expected behavior
Authentication with backend proof works :)

When I use the demo-dapp-with-react-ui to log in on the browser inside TonKeeper wallet, clicking refresh does not reconnect and it seems like localStorage key ton-connect-storage_bridge-connection has been deleted, causing the inability to reconnect, but other localStorage key still exist.

How can I solve the issue of the refresh button not reconnecting automatically in my application?

Describe the bug
The frontend crashes wherever @tonconnect/ui is used, resulting in a white screen.

To Reproduce
Steps to reproduce the behavior:

Go to 'buymeacoffee-on-ton.vercel.app' in Safari Browser
The application loads.
Observe a white screen error.

Expected behavior
The application should load and display content without crashing.

Screenshots

Additional context
I suspect the problem might be related to these lines in the SDK:

last-selected-wallet-info-storage.ts#L5
last-selected-wallet-info-storage.ts#L12
web-api.ts#L96

The source code for the app can be found here:
designervoid/buymeacoffee_on_ton.

UI modal files takes a lot of space, but used only once per user session. It would be great to have some way to separate it from main app bundle.