Ton DApp Wallet Integration Guide: Connecting Bitget Wallet to Your DApp

·

TonConnect is an open protocol that links cryptocurrency wallets with decentralized applications (DApps). It establishes secure communication between applications and/or devices using bridges like JS Bridge or HTTP Bridge. This guide will walk you through integrating Bitget Wallet into your DApp with just one configuration that simultaneously supports:

👉 Discover seamless wallet integration solutions

How TonConnect Works

TonConnect operates through:

  1. Bridge Connection: Establishes a secure link between wallet and DApp
  2. Protocol Communication: Enables transaction signing and message passing
  3. Multi-Platform Support: Works across mobile, desktop, and browser environments

Implementation Code

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"]
  }
]

Complete React Implementation Example

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: [
      // Wallet configurations shown above
    ]
  }
});

// UI Configuration
tonConnectUI.uiOptions = {
  language: 'en',
  uiPreferences: {
    theme: THEME.DARK
  },
  actionsConfiguration: {
    twaReturnUrl: "https://t.me/"
  }
};

export default function TonConnectDApp() {
  const [currentInfo, setCurrentInfo] = useState({});
  const [proof, setProof] = useState('');

  // Wallet connection functions
  const getWallets = async () => await tonConnectUI.getWallets();
  const openModal = async () => await tonConnectUI.openModal();
  const closeModal = async () => tonConnectUI.closeModal();
  
  const openBitgetWalletLite = async () => {
    if (tonConnectUI.connected) await disconnect();
    await tonConnectUI.openSingleWalletModal("bitgetWalletLite");
  };

  // Transaction handling
  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);
  };

  // Proof generation
  const connectToGetProof = async () => {
    if (tonConnectUI.connected) {
      await disconnect();
      localStorage.removeItem('tonProof');
      setProof('');
    }
    try {
      tonConnectUI.setConnectRequestParameters({
        state: 'loading'
      });
      
      const messageJson = {
        user_id: "testUserID",
        amount: 10
      };
      
      const payload = Buffer.from(JSON.stringify(messageJson), 'utf-8').toString('hex');
      
      tonConnectUI.setConnectRequestParameters({
        state: 'ready',
        value: { tonProof: payload }
      });
      
      tonConnectUI.openSingleWalletModal('bitgetTonWallet');
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <>
      <h1>Ton Connect DApp Demo</h1>
      {/* UI implementation continues */}
    </>
  );
}

Key Features

  1. Multi-Wallet Support: Single integration for all Bitget Wallet variants
  2. Secure Transactions: Built-in transaction validation
  3. Proof Generation: Cryptographic proof of wallet ownership
  4. Cross-Platform: Works on all major operating systems

👉 Explore advanced blockchain integration techniques

Frequently Asked Questions

What is TonConnect?

TonConnect is a protocol that enables secure communication between TON blockchain wallets and decentralized applications.

How many wallets can I integrate simultaneously?

The shown configuration integrates three Bitget Wallet variants with one code implementation.

Is proof generation mandatory?

No, but it provides enhanced security for user verification when needed.

What's the difference between regular and Lite wallet integration?

The Lite version offers broader platform support including desktop OSes, while the regular version focuses on mobile and browser extensions.

Can I customize the UI theme?

Yes, the UI supports both light and dark themes as shown in the configuration.

Best Practices

  1. Error Handling: Always implement try-catch blocks for wallet operations
  2. User Experience: Provide clear status updates during connection processes
  3. Security: Validate all transactions on both client and server sides
  4. Testing: Thoroughly test across all target platforms before deployment

This complete implementation guide ensures your DApp will have robust wallet connectivity with all Bitget Wallet products while maintaining high security standards and user experience quality.