@ton/appkit

@ton/appkit

A dApp-side integration layer for TON Connect with a unified asset API for TON, Jettons, and NFTs

Overview

• Actions - Standardized blockchain actions
• Connectors - Wallet connection management (TonConnect)
• Queries - TanStack Query options for easy data fetching
• Swap - Swap assets using DEX aggregators (Omniston)

Live Demo: AppKit Minter

Quick start

This guide shows how to integrate @ton/appkit into your dApp for asset operations with TonConnect wallets.

npm install @ton/appkit @ton/core @ton/crypto

Peer Dependencies

@ton/appkit depends on the following packages:

• @ton/core (>= 0.56.0)
• @ton/crypto (>= 3.3.0)
• @tanstack/query-core (>= 5.0.0) - Optional, required only if using usages via QueryClient
• @tonconnect/ui (>= 2.4.1) - Optional, required only if using TonConnectConnector with UI
• @ston-fi/omniston-sdk - Optional, required only if using Swap functionality

Initialize AppKit and wrap wallet

// Initialize AppKit
const appKit = new AppKit({
    networks: {
        [Network.mainnet().chainId]: {
            apiClient: {
                url: 'https://toncenter.com',
                key: 'your-key',
            },
        },
        // Optional: add testnet
        // [Network.testnet().chainId]: {
        //     apiClient: {
        //         url: 'https://testnet.toncenter.com',
        //         key: 'your-key',
        //     },
        // },
    },
    connectors: [
        createTonConnectConnector({
            tonConnectOptions: {
                manifestUrl: 'https://tonconnect-sdk-demo-dapp.vercel.app/tonconnect-manifest.json',
            },
        }),
    ],
});

Usage

Get Balance

const balance = await getBalance(appKit);
if (balance) {
    console.log('Balance:', balance.toString());
}

Transfer TON

const result = await transferTon(appKit, {
    recipientAddress: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
    amount: '0.1', // 0.1 TON (human-readable format)
    comment: 'Hello from AppKit!',
});

console.log('Transfer Result:', result);

See all available actions in the Actions Documentation.

React Integration

If you are using React, you can use @ton/appkit-react which provides hooks for all AppKit actions.

Read more about AppKit React

If you are using another framework (Vue, Svelte, Angular, Solid, etc.), you can use @ton/appkit/queries with TanStack Query to create your own bindings.

Read more about Queries