Get started with TON Connect

{
  "url": "https://yourapp.com",
  "name": "Your App",
  "iconUrl": "https://yourapp.com/icon-180.png"
}

{
  "termsOfUseUrl": "https://yourapp.com/terms",
  "privacyPolicyUrl": "https://yourapp.com/privacy"
}

npm i @tonconnect/ui-react

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

export function App() {
    return (
        <TonConnectUIProvider manifestUrl="https://yourapp.com/tonconnect-manifest.json">
            <YourApp />
        </TonConnectUIProvider>
    );
}

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

export function Header() {
    return (
        <header>
            <TonConnectButton />
        </header>
    );
}

<TonConnectButton className="my-class" style={{ float: 'right' }} />

import {
    useIsConnectionRestored,
    useTonAddress,
    useTonWallet,
} from '@tonconnect/ui-react';

function Status() {
    const address = useTonAddress();
    const wallet = useTonWallet();
    const restored = useIsConnectionRestored();

    if (!restored) return <span>Restoring…</span>;
    if (!wallet) return <span>Not connected</span>;
    return <span>Connected as {address}</span>;
}

import { useTonAddress, useTonConnectUI, useTonWallet } from '@tonconnect/ui-react';

function PayButton() {
    const [tonConnectUi] = useTonConnectUI();
    const wallet = useTonWallet();
    const address = useTonAddress();

    const handlePay = async () => {
        if (!address) return;
        try {
            await tonConnectUi.sendTransaction({
                validUntil: Math.floor(Date.now() / 1000) + 300,
                network: '-239', // mainnet
                messages: [
                    { address, amount: '100000000' }, // 0.1 Gram
                ],
            });
        } catch (e) {
            console.error(e);
        }
    };

    return (
        <button onClick={handlePay} disabled={!wallet}>
            Send 0.1 Gram
        </button>
    );
}

npm i @tonconnect/ui-react

public/tonconnect-manifest.json

// app/providers.tsx
'use client';

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

export function Providers({ children }: { children: React.ReactNode }) {
    return (
        <TonConnectUIProvider manifestUrl="https://yourapp.com/tonconnect-manifest.json">
            {children}
        </TonConnectUIProvider>
    );
}

// app/layout.tsx
import { Providers } from './providers';

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html>
            <body>
                <Providers>{children}</Providers>
            </body>
        </html>
    );
}

import dynamic from 'next/dynamic';
import type { AppProps } from 'next/app';

const TonConnectUIProvider = dynamic(
    () => import('@tonconnect/ui-react').then(m => m.TonConnectUIProvider),
    { ssr: false }
);

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <TonConnectUIProvider manifestUrl="https://yourapp.com/tonconnect-manifest.json">
            <Component {...pageProps} />
        </TonConnectUIProvider>
    );
}

export default MyApp;

npm i @tonconnect/ui

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

<div id="ton-connect"></div>
<button id="send" disabled>Send 0.1 Gram</button>

const ui = new TON_CONNECT_UI.TonConnectUI({
    manifestUrl: 'https://yourapp.com/tonconnect-manifest.json',
    buttonRootId: 'ton-connect',
});

import { TonConnectUI } from '@tonconnect/ui';
const ui = new TonConnectUI({ /* same options */ });

ui.onStatusChange(wallet => {
    document.getElementById('send').disabled = !wallet;
});

import { toUserFriendlyAddress } from '@tonconnect/ui';

document.getElementById('send').onclick = async () => {
    const wallet = ui.wallet;
    if (!wallet) return;
    const address = toUserFriendlyAddress(wallet.account.address);  // or window.TON_CONNECT_UI.toUserFriendlyAddress
    try {
        await ui.sendTransaction({
            validUntil: Math.floor(Date.now() / 1000) + 300,
            network: '-239',
            messages: [
                { address, amount: '100000000' }, // 0.1 Gram
            ],
        });
    } catch (error) {
        console.error('Transaction failed:', error);
    }
};

npm i @tonconnect/sdk

import TonConnect from '@tonconnect/sdk';

const connector = new TonConnect({
    manifestUrl: 'https://yourapp.com/tonconnect-manifest.json',
    storage: myStorage,
});

await connector.restoreConnection();

interface IStorage {
    setItem(key: string, value: string): Promise<void>;
    getItem(key: string): Promise<string | null>;
    removeItem(key: string): Promise<void>;
}

class MemoryStorage implements IStorage {
    private data = new Map<string, string>();
    async setItem(key: string, value: string) { this.data.set(key, value); }
    async getItem(key: string) { return this.data.get(key) ?? null; }
    async removeItem(key: string) { this.data.delete(key); }
}

const wallets = await connector.getWallets();

interface WalletInfoBase {
    name: string;        // human-readable display name
    appName: string;     // stable identifier
    imageUrl: string;
    aboutUrl: string;
    tondns?: string;
    platforms: ('ios' | 'android' | 'macos' | 'windows'
              | 'linux' | 'chrome' | 'firefox' | 'safari')[];
    features?: Feature[];
}

interface WalletInfoRemote extends WalletInfoBase {
    universalLink: string;
    bridgeUrl: string;
    deepLink?: string;
}

interface WalletInfoInjectable extends WalletInfoBase {
    jsBridgeKey: string;
    injected: boolean;
    embedded: boolean;
}

type WalletInfo =
    | WalletInfoRemote
    | WalletInfoInjectable
    | (WalletInfoRemote & WalletInfoInjectable);

const link = connector.connect({
    universalLink: 'https://connect.mytonwallet.org',
    bridgeUrl: 'https://tonconnectbridge.mytonwallet.org/bridge/',
});

connector.connect({ jsBridgeKey: 'mytonwallet' });

connector.connect(
    { universalLink, bridgeUrl },
    { request: { tonProof: nonce } },
);

const unsubscribe = connector.onStatusChange(wallet => {
    if (wallet) {
        // wallet.account.address — raw 0:<hex> (convert to user-friendly before passing to sendTransaction)
        // wallet.account.publicKey — hex string without 0x, optional (some wallets omit it)
        // wallet.connectItems?.tonProof — TonProofItemReply, may carry proof or error
    } else {
        // disconnected — by the user or by the wallet
    }
});

const result = await connector.sendTransaction({
    validUntil: Math.floor(Date.now() / 1000) + 300,
    network: '-239', // mainnet (use '-3' for testnet)
    messages: [
        { address: 'UQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJKZ', // burn address
          amount: '20000000' },
    ],
});

console.log(result.boc); // base64 BoC of the signed external message