Integrating a crypto wallet into your decentralized application (DApp) is a crucial step in delivering seamless Web3 user experiences. With the growing adoption of The Open Network (TON), developers are increasingly focused on enabling secure, efficient, and user-friendly wallet connectivity. This guide walks you through integrating Bitget Wallet and its variants—Bitget Wallet Lite and Bitget Wallet Chrome Extension—into your TON-based DApp using the TonConnect protocol.
TonConnect is an open-source protocol that establishes a secure bridge between wallets and DApps, supporting both JS Bridge and HTTP Bridge for cross-platform compatibility. By configuring once, you can support multiple Bitget Wallet versions across iOS, Android, macOS, Windows, Linux, and Chrome.
Understanding TonConnect Protocol
The TonConnect protocol standardizes communication between DApps and wallets via a bridge system. When a user initiates a connection, the DApp sends a request through the bridge, which is then handled by the wallet app. Once approved, encrypted data flows securely between both parties.
Key features:
- Cross-platform support: Works on mobile, desktop, and browser extensions.
- Universal and deep linking: Enables smooth redirection from web to app.
- Transaction signing: Securely signs and broadcasts transactions.
- Proof authentication (ton_proof): Verifies user identity without exposing private keys.
This makes TonConnect ideal for building trustless, non-custodial applications on the TON blockchain.
Configure Bitget Wallet Integration
To integrate Bitget Wallet into your DApp, define the wallet configurations in the includeWallets array when initializing TonConnectUI. Below is the complete configuration for both Bitget Wallet and Bitget Wallet Lite:
import { TonConnectUI, THEME } from "@tonconnect/ui";
import React, { useState, useEffect } from "react";
const tonConnectUI = new TonConnectUI({
manifestUrl: "https://app.ston.fi/tonconnect-manifest.json",
walletsListConfiguration: {
includeWallets: [
{
appName: "bitgetWalletLite",
name: "Bitget Wallet Lite",
imageUrl:
"https://raw.githubusercontent.com/bitgetwallet/download/main/logo/png/bitget_wallet_lite_logo.png",
aboutUrl: "https://web3.bitget.com",
universalLink: "https://t.me/BitgetWallet_TGBot?attach=wallet",
bridgeUrl: "https://ton-connect-bridge.bgwapi.io/bridge",
platforms: ["ios", "android", "macos", "windows", "linux"],
},
{
name: "Bitget Wallet",
appName: "bitgetTonWallet",
jsBridgeKey: "bitgetTonWallet",
imageUrl:
"https://raw.githubusercontent.com/bitkeepwallet/download/main/logo/png/bitget%20wallet_logo_iOS.png",
aboutUrl: "https://web3.bitget.com",
bridgeUrl: "https://ton-connect-bridge.bgwapi.io/bridge",
universalLink: "https://bkcode.vip/ton-connect",
deepLink: "bitkeep://",
platforms: ["ios", "android", "chrome"],
},
],
},
});👉 Discover how to build powerful Web3 integrations with secure wallet connectivity.
Customize UI and User Experience
Enhance user experience by setting UI preferences such as language and theme. You can also configure return strategies for Telegram Mini Apps (TMA):
tonConnectUI.uiOptions = {
language: 'en',
uiPreferences: {
theme: THEME.DARK
},
actionsConfiguration: {
twaReturnUrl: "https://t.me/"
}
};This ensures your DApp supports dark mode and properly redirects users after interaction within Telegram environments.
Core Functionalities in Your DApp
Once configured, implement essential functions to manage wallet connections, transactions, and authentication.
Connect to Wallets
Allow users to connect via specific wallets or open a full modal:
const openBitgetWalletLite = async () => {
if (tonConnectUI.connected) await disconnect();
await tonConnectUI.openSingleWalletModal("bitgetWalletLite");
};
const openBitgetTonWallet = async () => {
if (tonConnectUI.connected) await disconnect();
await tonConnectUI.openSingleWalletModal("bitgetTonWallet");
};👉 Learn how to enable frictionless Web3 logins and transactions today.
Check Connection Status
Monitor connection state and account details:
const currentAccount = () => tonConnectUI.account;
const currentIsConnectedStatus = () => tonConnectUI.connected;
const disconnect = async () => await tonConnectUI.disconnect();Use onStatusChange to reactively update UI when the wallet state changes:
useEffect(() => {
const unsubscribe = tonConnectUI.onStatusChange((wallet) => {
console.log("Wallet connected:", wallet);
if (wallet?.connectItems?.tonProof?.proof) {
localStorage.setItem('tonProof', JSON.stringify(wallet.connectItems.tonProof.proof));
}
});
return unsubscribe;
}, []);Send Transactions Securely
Easily send TON transactions using sendTransaction():
const sendTransaction = async () => {
const transaction = {
validUntil: Math.floor(Date.now() / 1000) + 60,
messages: [
{
address: "EQBBJBB3HagsujBqVfqeDUPJ0kXjgTPLWPFFffuNXNiJL0aA",
amount: "20000000"
},
{
address: "EQDmnxDMhId6v1Ofg_h5KR5coWlFG6e86Ro3pc7Tq4CA0-Jn",
amount: "60000000"
}
]
};
return await tonConnectUI.sendTransaction(transaction);
};This method ensures all transactions are reviewed and signed within the user’s wallet for maximum security.
Implement Identity Verification with ton_proof
Use ton_proof to authenticate users without requiring passwords or personal data:
const connectToGetProof = async () => {
if (tonConnectUI.connected) {
await disconnect();
localStorage.removeItem('tonProof');
}
try {
tonConnectUI.setConnectRequestParameters({ state: 'loading' });
const payload = Buffer.from(JSON.stringify({ user_id: "testUserID", amount: 10 }), 'utf-8').toString('hex');
tonConnectUI.setConnectRequestParameters({
state: 'ready',
value: { tonProof: payload }
});
tonConnectUI.openSingleWalletModal('bitgetTonWallet');
} catch (error) {
console.error(error);
}
};After connection, verify the proof on your backend to ensure authenticity.
Frequently Asked Questions
What is TonConnect?
TonConnect is an open protocol that enables secure communication between TON-based DApps and crypto wallets using bridge technology.
Can I support multiple Bitget Wallet versions with one setup?
Yes. By including both bitgetWalletLite and bitgetTonWallet in includeWallets, your DApp automatically supports all variants across platforms.
How does ton_proof work?
ton_proof allows wallets to sign a payload proving ownership of an address. It's used for secure login mechanisms without exposing private keys.
Is Bitget Wallet available on desktop?
Yes. Bitget Wallet supports desktop via Chrome extension, while Bitget Wallet Lite works on macOS, Windows, and Linux through universal links.
Do I need to host my own manifest file?
Yes. The manifestUrl must point to a valid JSON file hosted on your domain that describes your DApp’s name, icon, and URL.
Can I customize the wallet selection modal?
Yes. Using uiOptions, you can set themes, language, and loading states to match your DApp’s design.
👉 Explore advanced tools for developing next-gen blockchain applications.
Final Thoughts
Integrating Bitget Wallet into your TON DApp using TonConnect simplifies user onboarding, enhances security, and broadens accessibility across devices. With support for mobile, desktop, and browser extensions—and powerful features like ton_proof authentication—you can deliver a robust Web3 experience.
By following this guide, you ensure compatibility with one of the fastest-growing wallet ecosystems on TON, positioning your DApp for greater adoption and usability.
Core Keywords: TonConnect, Bitget Wallet, TON DApp, wallet integration, ton_proof, blockchain development, Web3 connectivity