Ton Mini App Integration Guide

For Ton DApp, Bitget Wallet currently provides integration through TonConnect. By completing the steps in this guide, you can achieve full-scenario integration in one go:

• Integrate Bitget Wallet and Bitget Wallet Lite in Web DApp
• Integrate Bitget Wallet and Bitget Wallet Lite in Telegram Mini App

TonConnect

TonConnect is an open protocol that connects wallets and DApps (Web3 applications). It uses a bridge (JS Bridge or Http Bridge) to establish a connection between two applications and/or devices and starts communication.

Bitget Wallet fully supports TonConnect.

Interaction Forms of TonConnect:

1. When accessing the DApp through a desktop browser, you can choose to connect via a plugin or QR code. If the plugin wallet is not installed, it will redirect to the plugin wallet download page. You can also scan the QR code with the mobile wallet app to connect.
2. When opening the DApp in the mobile wallet app, it will directly connect to the wallet if supported; otherwise, it will open the corresponding wallet download page.
3. When opening the DApp in a non-wallet mobile app (including mobile browsers), it will use a deeplink to open the wallet app.

Install

#Add @tonconnect/ui package, up to latest
npm i @tonconnect/ui

Development Example

There are two configuration methods to integrate Bitget Wallet into the wallet connection options of Ton Connect:

1. By setting the value of walletsListConfiguration.includeWallets to add the custom wallet to the wallets-list.
2. The recommended method is to directly specify the connection to Bitget Wallet using await tonConnectUI.openSingleWalletModal(“bitgetTonWallet”), as shown in the image below:

Bitget Wallet

Bitget Wallet Lite

Here is the code example:

TonConnect Demo Full Code 

Related Reading

• TonConnect Official Development Documentation 
• TonConnect Wallet-list Integration checklist