Skip to main content

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

  1. Learn how the protocol worksHow TON Connect works
  2. Check the Payload cookbook and craft custom transfers → Payload cookbook
Was this article useful?