Quick-start
Create a manifest
A TON Connect manifest is a small JSON file that lets wallets discover your DApp:
{
"url": "<app-url>", // required
"name": "<app-name>", // required
"iconUrl": "<app-icon-url>", // required
"termsOfUseUrl": "<terms-of-use-url>", // optional
"privacyPolicyUrl": "<privacy-policy-url>" // optional
}
Place the file at https://myapp.com/tonconnect-manifest.json
so that wallets can fetch it with a simple GET request (no CORS or auth).
Install TON Connect
Looking for plain JS or Python? See JS SDK / Python SDK.
npm i @tonconnect/ui-react
Minimal react example
App.tsx
import { TonConnectUIProvider, ConnectButton } from '@tonconnect/ui-react';
export default function App() {
return (
<TonConnectUIProvider
manifestUrl="https://myapp.com/tonconnect-manifest.json">
<ConnectButton />
</TonConnectUIProvider>
);
}
Once the user has connected you can build and send a transaction:
await tonConnectUI.sendTransaction({
validUntil: Math.floor(Date.now() / 1000) + 300,
messages: [{
address: wallet.account.address,
amount: '1000000000' // 1 TON in nanoTON
}]
});
Run the demo locally (optional)
Testnet vs Mainnet
The demo below sends real TON from the connected wallet.
Try it with a testnet wallet first or send 0.01 TON to avoid surprises.
Clone the minimal react-ui-example
repository:
git clone https://github.com/memearchivarius/react-ui-example.git
cd react-ui-example
npm install
npm run dev # default on http://localhost:5173
Open your browser at http://localhost:5173
, connect a wallet and try the Send 1 TON button.
HTML sandbox for quick testing
For quick testing, you can use a single-file HTML example (see TON Connect demo).
Click to view a single-file HTML example
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>TON Connect sandbox</title>
<script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>
</head>
<body>
<div id="ton-connect"></div>
<button id="send" disabled>Send 1 TON</button>
<script>
const ui = new TON_CONNECT_UI.TonConnectUI({
manifestUrl: 'https://ton-connect.github.io/demo-dapp-with-react-ui/tonconnect-manifest.json',
buttonRootId: 'ton-connect'
});
ui.onStatusChange(w => document.getElementById('send').disabled = !w);
document.getElementById('send').onclick = async () => {
await ui.sendTransaction({
validUntil: Math.floor(Date.now()/1000)+300,
messages:[{address: ui.account.address, amount: '1000000000'}]
});
};
</script>
</body>
</html>
Next steps
- Learn how the protocol works → How TON Connect works
- Check the Payload cookbook and craft custom transfers → Payload cookbook
Was this article useful?