Integration¶

TON Connect lets users connect their TON wallets to your dApp. This page shows how to add it with React, Vue or plain HTML/JavaScript.

React¶

Installation¶

Install the @tonconnect/ui-react package:

npm install @tonconnect/ui-react

Initialize TON Connect¶

Wrap your application with TonConnectUIProvider, passing the manifest URL:

import { TonConnectUIProvider } from '@tonconnect/ui-react';

export function App() {
    return (
        <TonConnectUIProvider manifestUrl="https://<YOUR_APP_URL>/tonconnect-manifest.json">
            { /* Your app */ }
        </TonConnectUIProvider>
    );
}

Connect to the wallet¶

Add the TonConnectButton so users can connect their wallets:

import { TonConnectButton } from '@tonconnect/ui-react';

export const Header = () => {
    return (
        <header>
            <span>My App with React UI</span>
            <TonConnectButton />
        </header>
    );
};

Vue¶

Installation¶

Install the @townsquarelabs/ui-vue package at version 2.0.9. The examples below use its TonConnectUIProvider component, which later versions published under the latest tag replace with a TonConnectUIPlugin, so pin the version if you follow them:

npm install @townsquarelabs/ui-vue@2.0.9

Initialize TON Connect¶

Wrap your application with TonConnectUIProvider, setting the manifest URL in the options:

<template>
  <TonConnectUIProvider :options="options">
    <!-- Your app -->
  </TonConnectUIProvider>
</template>

<script>
import { TonConnectUIProvider } from '@townsquarelabs/ui-vue';

export default {
  components: { TonConnectUIProvider },
  setup() {
    const options = {
      manifestUrl: "https://<YOUR_APP_URL>/tonconnect-manifest.json",
    };
    return { options };
  }
}
</script>

Connect to the wallet¶

Add the TonConnectButton so users can connect their wallets:

<template>
  <header>
    <span>My App with Vue UI</span>
    <TonConnectButton />
  </header>
</template>

<script>
import { TonConnectButton } from '@townsquarelabs/ui-vue';

export default {
  components: { TonConnectButton }
}
</script>

HTML/JavaScript¶

Installation¶

Add the script to the <head> of your HTML:

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

Initialize TON Connect¶

Add an element for the connect button and create the TON Connect UI with your manifest URL:

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

<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 Connect button handles clicks on its own. To open the connect modal from code, call openModal(), and to react to the connected wallet, use onStatusChange(). connectWallet() is deprecated in @tonconnect/ui.

<script>
    // Called whenever the connection status changes (connect, disconnect, restore)
    tonConnectUI.onStatusChange(wallet => {
        console.log(wallet); // Handle the connected wallet (or null) as needed
    });

    async function connectToWallet() {
        await tonConnectUI.openModal();
    }

    // Call the function to open the connect modal
    connectToWallet().catch(error => {
        console.error("Error opening the connect modal:", error);
    });
</script>