Skip to main content

TON Connect for JS

This guide will help you integrate TON Connect into your Javascript app for user authentication and transactions.

If using React for your DApp, look at the TON Connect UI React SDK.

If you're using Vue for your DApp, look at the TON Connect UI Vue SDK.

Implementation​

Installation​

Add the script to the <HEAD> element of your website:



<script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>

TON Connect initiation​

After installing the package, create a manifest.json file for your app. More information on how to create a manifest.json file can be found here.

Add a button with a ton-connect id to connect to the wallet:

<div id="ton-connect"></div>

After this tag, add a script for tonConnectUI in the <body> part of the app page:

<script>
    const tonConnectUI = new TON_CONNECT_UI.TonConnectUI({
        manifestUrl: 'https://<YOUR_APP_URL>/tonconnect-manifest.json',
        buttonRootId: 'ton-connect'
    });
</script>

Connect to the wallet​

The 'ton-connect' button in buttonRootId will automatically manage clicks.

But you can open connect modal programmatically, for example, after clicking on the custom button:

<script>
    async function connectToWallet() {
        const connectedWallet = await tonConnectUI.connectWallet();
        // Do something with connectedWallet if needed
        console.log(connectedWallet);
    }

    // Call the function
    connectToWallet().catch(error => {
        console.error("Error connecting to wallet:", error);
    });
</script>

Redirects​

Customizing return strategy​

To redirect the user to a specific URL after connection, you can customize your return strategy.

Telegram Mini Apps​

To redirect the user to a Telegram Mini App after wallet connection use the twaReturnUrl option:

tonConnectUI.uiOptions = {
      twaReturnUrl: 'https://t.me/YOUR_APP_NAME'
  };

Read more in SDK documentation

UI customization​

TonConnect UI provides an interface that should be familiar and recognizable to the user when using various apps. However, the app developer can modify this interface to keep it consistent with the app's interface.

SDK documentation​

Usage​

Let's look at the example of using the TON Connect UI in the app.

Sending messages​

Here's an example of sending a transaction using the TON Connect UI:

import TonConnectUI from '@tonconnect/ui';

const tonConnectUI = new TonConnectUI({ //connect application
    manifestUrl: 'https://<YOUR_APP_URL>/tonconnect-manifest.json',
    buttonRootId: '<YOUR_CONNECT_BUTTON_ANCHOR_ID>'
});

const transaction = {
  validUntil: Math.floor(Date.now() / 1000) + 60, // 60 sec
  messages: [
        {
            address: "EQABa48hjKzg09hN_HjxOic7r8T1PleIy1dRd8NvZ3922MP0", // destination address
            amount: "20000000" //Toncoin in nanotons
        }
    ]
}

const result = await tonConnectUI.sendTransaction(transaction)
tip

Get more examples on the Preparing messages page.

Understanding transaction status by hash​

Learn the principle explained in payment processing using the tonweb library.

Signing and verification​

Understand how to sign and verify messages using the TON Connect:

Wallet disconnection​

Call to disconnect the wallet:

await tonConnectUI.disconnect();

See also​