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 works → How TON Connect works
  2. Check the Payload cookbook and craft custom transfers → Payload cookbook
Was this article useful?