AppKit
| Goal | Read |
|---|---|
| Add AppKit to a new app | Get started |
| Understand the moving parts | How to |
| Look up functions and types | Reference |
| Check upgrade notes | Changelog |
| Diagnose common issues | FAQ and troubleshooting |
What AppKit is
AppKit is an open-source SDK for integrating TON into React and JavaScript/TypeScript decentralized applications and Telegram Mini Apps.
With AppKit, you have a single place to configure networks, wallet connectors, DeFi providers, and React integration around TON wallet operations. It also includes an out-of-the-box UI with sub-second updates.
Use AppKit to do the following:
- Connect a TON wallet
- Send Toncoin and jettons, work with NFTs
- Request swap, staking, or signing operations
- Read wallet data and asset balances
An application built with AppKit can interact with your own smart contract. To create a contract, use Acton and explore primitives, such as Messages & Transactions and others.
How it works
This is how AppKit fits into the TON ecosystem:
- AppKit prepares requests, tracks application state, and bridges the application interface to wallets and providers.
- Wallets sign transactions and data.
- Backends verify orders, signatures, and business rules.
AppKit is the user-facing layer of the connection between applications and wallets. Its wallet-side counterpart is WalletKit — an SDK integrating wallet services with TON.
AppKit builds on top of the following components:
- TON Connect: A protocol enabling interaction between applications and wallets
- TanStack Query and hooks
- TON Center API, TON Center Streaming API v2, and TonApi
- Open interfaces for integrating embedded wallets, on-chain/off-chain on-ramps, and DeFi protocols, such as staking and swaps
AppKit integrates with DeFi protocols through providers.
Packages
| Package | Use |
|---|---|
@ton/appkit | Core AppKit instance, actions, connectors, providers, and types. |
@ton/appkit/queries | Query and mutation helpers for data fetching. |
@ton/appkit-react | React provider, hooks, components, and core re-exports. |
@ton/appkit-react/styles.css | Default component styles. |
@ton/appkit/swap/omniston | Omniston swap provider. |
@ton/appkit/swap/dedust | DeDust swap provider. |
@ton/appkit/staking/tonstakers | Tonstakers staking provider. |
Examples
The appkit-minter example wires AppKit into a Vite + React application.
This example implements wallet connection, balance and jetton queries, transaction sending, and streaming watches in one place.
What's next
- Walk through Get started to install AppKit and reach a working app.
- Switch to How to for task-level recipes once the baseline is in place.
- Look up types and signatures in Reference.
Last updated on