Ton SDK Integration Guide For Partners

This document provides step-by-step instructions for integrating Ton Connect SDK of Coin98 Telegram Wallet into your application.

1. Create the Manifest

Create a manifest.json - Manifest URL as described in

2. Install the Ton Connect SDK

Install the Ton Connect UI React package from GitHub:

Attach to provider at the outermost part of app

<TonConnectUIProvider
   manifestUrl={MANIFEST_URL}
   uiPreferences={{ theme: THEME.DARK }}
   walletsListConfiguration={{
       includeWallets: [
         {
           appName: "coin98-telegram-wallet-bot",
           name: "Coin98 Telegram Bot",
           imageUrl: "https://coin98.s3.ap-southeast-1.amazonaws.com/SocialLogo/ninetyeight.png",
           aboutUrl: "https://docs.coin98.com",
           bridgeUrl: "https://ton-bridge.coin98.tech/bridge",
           platforms: ["ios", "android", "macos", "windows", "linux"],
           universalLink: "https://t.me/Coin98_bot?attach=wallet"
         }
       ]
   }}
>
<div id=”app”>
   //CODE APP HERE
   {children}
</div>

</TonConnectUIProvider>

3. Ton Connect Core Functions

Currently, we support three main functions:

3.1. Connect with a Specific Wallet

Two distinct connection methods depend on whether you want to set Coin98 Wallet as the default.

3.1.1. Set Coin98 Wallet as default

Clicking "Connect Wallet" via TON SDK automatically opens the Coin98 app without any wallet selection, forcing exclusive use of Coin98 Telegram Wallet;
If you agree, proceed with integration. To open a modal window for a specific wallet, use the openSingleWalletModal() method with the wallet's appName as a parameter (refer to wallets-list.json file)

import { useTonConnectUI } from '@tonconnect/ui-react';

const MyComponent = () => {
  const [tonConnectUI] = useTonConnectUI();

  const handleConnect = async () => {
    // Connect using the specific wallet "coin98-telegram-wallet-bot" 
    // Set Coin98 Telegram Wallet as default
    return tonConnectUI.openSingleWalletModal('coin98-telegram-wallet-bot');
  };

  return (
    <div>
      <button onClick={handleConnect}>Connect Wallet</button>
    </div>
  );
};

export default MyComponent;

3.1.2. Do not set Coin98 Wallet as default

Calling connect method opens TON's modal, allowing users to choose from multiple wallets; to use Coin98 Telegram, select the Coin98 Telegram Wallet option.
To open a modal window for a specific wallet, use the openSingleWalletModal() method with the wallet's appName as a parameter (refer to wallets-list.json file)

import { useTonConnectUI } from '@tonconnect/ui-react';

const MyComponent = () => {
  const [tonConnectUI] = useTonConnectUI();

//Not set Coin98 Telegram Wallet as default
  const handleConnect = async () => {
    return tonConnectUI.openModal();
  };

  return (
    <div>
      <button onClick={handleConnect}>Connect Wallet</button>
    </div>
  );
};

export default MyComponent;

3.2. Sending Transactions

To send TON coins (in nanotons) to a specific address, define your transaction details and call the sendTransaction() method.

import { useTonConnectUI } from '@tonconnect/ui-react';

const transaction = {
  validUntil: Date.now() + 5 * 60 * 1000, // Valid for 5 minutes
  messages: [
    {
      address: "0QD-SuoCHsCL2pIZfE8IAKsjc0aDpDUQAoo-ALHl2mje04A-", // Destination address (user-friendly format)
      amount: "20000000", // Amount in nanotons (20,000,000 nanotons)
    },
  ],
};

const SendTransactionComponent = () => {
  const [tonConnectUI] = useTonConnectUI();

  const handleSignSendTransaction = async () => {
    await tonConnectUI.sendTransaction(transaction);
  };

  return (
    <div>
      <button onClick={handleSignSendTransaction}>Send Transaction</button>
    </div>
  );
};

export default SendTransactionComponent;

3.3. Wallet Disconnection

To disconnect the wallet, simply call the disconnect() method.

import { useTonConnectUI } from '@tonconnect/ui-react';

const DisconnectComponent = () => {
  const [tonConnectUI] = useTonConnectUI();

  const handleDisconnect = async () => {
    await tonConnectUI.disconnect();
  };

  return (
    <div>
      <button onClick={handleDisconnect}>Disconnect Wallet</button>
    </div>
  );
};

export default DisconnectComponent;

Reference

PreviousEthereum Coin98 Telegram Wallet SDK Bot Integration For Vanilla Javascript NextCoin98 Super Wallet

Last updated 3 months ago

<TonConnectUIProvider manifestUrl={MANIFEST_URL} uiPreferences={{ theme: THEME.DARK }} walletsListConfiguration={{ includeWallets: [ { appName: "coin98-telegram-wallet-bot", name: "Coin98 Telegram Bot", imageUrl: "https://coin98.s3.ap-southeast-1.amazonaws.com/SocialLogo/ninetyeight.png", aboutUrl: "https://docs.coin98.com", bridgeUrl: "https://ton-bridge.coin98.tech/bridge", platforms: ["ios", "android", "macos", "windows", "linux"], universalLink: "https://t.me/Coin98_bot?attach=wallet" } ] }} > <div id=”app”> //CODE APP HERE {children} </div> </TonConnectUIProvider>

import { useTonConnectUI } from '@tonconnect/ui-react'; const MyComponent = () => { const [tonConnectUI] = useTonConnectUI(); const handleConnect = async () => { // Connect using the specific wallet "coin98-telegram-wallet-bot" // Set Coin98 Telegram Wallet as default return tonConnectUI.openSingleWalletModal('coin98-telegram-wallet-bot'); }; return ( <div> <button onClick={handleConnect}>Connect Wallet</button> </div> ); }; export default MyComponent;

import { useTonConnectUI } from '@tonconnect/ui-react'; const MyComponent = () => { const [tonConnectUI] = useTonConnectUI(); //Not set Coin98 Telegram Wallet as default const handleConnect = async () => { return tonConnectUI.openModal(); }; return ( <div> <button onClick={handleConnect}>Connect Wallet</button> </div> ); }; export default MyComponent;

import { useTonConnectUI } from '@tonconnect/ui-react'; const transaction = { validUntil: Date.now() + 5 * 60 * 1000, // Valid for 5 minutes messages: [ { address: "0QD-SuoCHsCL2pIZfE8IAKsjc0aDpDUQAoo-ALHl2mje04A-", // Destination address (user-friendly format) amount: "20000000", // Amount in nanotons (20,000,000 nanotons) }, ], }; const SendTransactionComponent = () => { const [tonConnectUI] = useTonConnectUI(); const handleSignSendTransaction = async () => { await tonConnectUI.sendTransaction(transaction); }; return ( <div> <button onClick={handleSignSendTransaction}>Send Transaction</button> </div> ); }; export default SendTransactionComponent;

import { useTonConnectUI } from '@tonconnect/ui-react'; const DisconnectComponent = () => { const [tonConnectUI] = useTonConnectUI(); const handleDisconnect = async () => { await tonConnectUI.disconnect(); }; return ( <div> <button onClick={handleDisconnect}>Disconnect Wallet</button> </div> ); }; export default DisconnectComponent;