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

https://docs.ton.org/v3/guidelines/ton-connect/guidelines/creating-manifest

---

2. Install the Ton Connect SDK

• Install the Ton Connect UI React package from GitHub:

https://github.com/ton-connect/sdk/tree/main/packages/ui-react

• 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

For further questions or issues, please refer to https://docs.ton.org/