TON Connect for JS
This guide will help you integrate TON Connect into your Javascript application for user authentication and transactions.
If you're using React for your DApp, take a look at the TON Connect UI React SDK.
If you're using Vue for your DApp, take a look at the TON Connect UI Vue SDK.
Implementation
Installation
- CDN
- NPM
Add the script to the HEAD element of your website:
<script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>
To begin the integration of TON Connect into your app, install the @tonconnect/ui package:
- npm
- Yarn
- pnpm
npm i @tonconnect/ui
yarn add @tonconnect/ui
pnpm add @tonconnect/ui
TON Connect Initiation
After installing the package, create a manifest.json file for your application. More information on how to create a manifest.json file can be found here.
Add a button with 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 application 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 "Connect" button (which is added at buttonRootId) automatically handles clicks.
But you can open "connect modal" programmatically, e.g. after click on 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 take a look at the example of using the TON Connect UI in the application.
Sending messages
Here is 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 = {
messages: [
{
address: "EQABa48hjKzg09hN_HjxOic7r8T1PleIy1dRd8NvZ3922MP0", // destination address
amount: "20000000" //Toncoin in nanotons
}
]
}
const result = await tonConnectUI.sendTransaction(transaction)
- Get more examples here: Preparing Messages.
Understanding Transaction Status by Hash
The principle located in Payment Processing (using tonweb). See more
Signing and Verification
Understand how to sign and verify messages using the TON Connect:
Wallet Disconnection
Call to disconnect the wallet:
await tonConnectUI.disconnect();