UI Integration Guide: Connecting to TON App or Mini Wallet with API DEX Documentation

Overview

This guide explains how to integrate TON wallet connectivity into your DApp using our UI interface. Whether your users are accessing via Telegram or standalone browsers, they can seamlessly connect through the mobile App Wallet or OKX Mini Wallet.

Key Features:

• Telegram Mini App Support: Users remain within Telegram while accessing wallet functions
• Cross-Platform Compatibility: Works with both mobile apps and web interfaces
• Reduced Development Costs: Familiar Ton Connect/OKX Connect integration paths

Installation and Initialization

npm Installation

npm install @okx/ton-connect-ui

Initialization Parameters

Create the connection object with these configurable options:

new OKXTonConnectUI(
  dappMetaData,          // Your DApp metadata
  buttonRootId,          // HTML element ID for connect button
  actionsConfiguration,  // Transaction behavior settings
  uiPreferences,         // UI theme/language preferences
  language,              
  restoreConnection      // Auto-reconnect toggle
)

Parameter Details:

Core Functionality

Wallet State Monitoring

Track connection events with real-time updates:

const unsubscribe = okxTonConnectUI.onStatusChange((wallet) => {
  if (wallet) {
    console.log('Connected to:', wallet.device.appName);
  }
});

// Remember to unsubscribe when done
unsubscribe();

Connection Flow

Users can connect either through:

1. UI Button (if buttonRootId provided)

2. Programmatic Call:

   await okxTonConnectUI.openModal();

Transaction Handling

Sending Transactions

const result = await okxTonConnectUI.sendTransaction(
  {
    validUntil: Date.now() + 1000000,
    messages: [{
      address: "EQ...",
      amount: "10000000",
      payload: "<boc>"
    }]
  },
  {
    modals: ['before', 'success'],
    returnStrategy: 'tg://resolve'
  }
);

Advanced Configuration

Dynamic Proof Configuration

// Set loading state
okxTonConnectUI.setConnectRequestParameters({
  state: 'loading'
});

// When ready
okxTonConnectUI.setConnectRequestParameters({
  state: 'ready',
  value: {
    tonProof: "<your_proof>"
  }
});

UI Customization

Update theme/language dynamically:

okxTonConnectUI.updateUIConfig({
  theme: 'DARK',
  language: 'fr_FR'
});

Event Handling

Monitor key wallet interactions:

👉 Explore more integration examples

FAQ Section

Q: Can I use this with existing Ton Connect implementations?

A: Yes! The SDK maintains backward compatibility while adding new features.

Q: What's the difference between mobile and Mini Wallet connections?

A: Mobile opens the native OKX app, while Mini Wallet stays within Telegram with lighter functionality.

Q: How do I handle transaction errors?

A: Listen for OKX_UI_TRANSACTION_SIGNING_FAILED events and implement fallback logic.

👉 Get support from our developer community

Error Reference

For production deployments, we recommend implementing comprehensive error handling with user guidance at each failure point.