API Reference

Build Your First tgBTC dApp

Introduction

This example project demonstrates the TONX API's capability to retrieve tgBTC-related information and perform tgBTC transactions. Built with React and TypeScript, the sample code will help web3 developers integrate tgBTC into their projects and applications. For the complete project, refer to the Github .


About TON Teleport BTC

TON Teleport BTC represents a groundbreaking advancement in the cryptocurrency space, enabling users to seamlessly and securely transfer BTC between the Bitcoin and TON networks without depending on centralized issuers. Its decentralized framework and robust security protocols provide users with exceptional trust and convenience. You can mint tgBTC using TON Teleport.


Prerequisites

  • Node.js (v16 or higher)
  • pnpm package manager
  • TONX API Key (Testnet)
  • A TON wallet (Testnet)
  • Basic knowledge of React and TypeScript
  • Some tgBTC

TONX API for tgBTC

In this project, we are using TONX API and @tonx/core SDK. You can refer to the SDK Guide for more information. In particular, we use the following methods to perform tgBTC transactions.


Features

  • Connect your TON testnet wallet using TonConnect
  • Check your tgBTC balance
  • Send tgBTC to an account
  • Real-time transaction confirmation

Step-by-Step Guide


1. Environment Setup

a. Install dependencies:

npm install -g pnpm

b. Install project dependencies:

pnpm install

c. Create a .env file in the root directory:

VITE_TONXAPI_KEY=your_api_key_here

Replace your_api_key_here with your TONX API key.


2. Integrate TonConnect

Update the src/App.tsx file to include the TonConnectButton, useTonWallet, useTonWallet

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

3. Network Settings

Configure the TONX API for testnet:

const client = new TONXJsonRpcProvider({
  network: 'testnet',
  apiKey: import.meta.env.VITE_TONXAPI_KEY
});

4. Retrieve tgBTC Balance

Use getJettonWallet to get the tgBTC balance:

const wallets = await client.getJettonWallets({ owner_address: wallet?.account.address });
const tgBTCWallet = wallets.find((wallet: { jetton: string; }) => wallet.jetton === TGBTC_ADDRESS);
setAmount(tgBTCWallet.balance / JETTON_QUANTITY);
setJettonWallet(tgBTCWallet.address);

5. Send tgBTC

Use getTgBTCTransferPayload API to generate a payload for the transaction message:

const getTransferPayload = async () => {
    const response = fetch(`https://testnet-rpc.tonxapi.com/v2/json-rpc/${import.meta.env.VITE_TONXAPI_KEY}`, {
      method: "POST",
      headers: {
        accept: "application/json",
        "content-type": "application/json",
      },
      body: JSON.stringify({
        id: 1,
        jsonrpc: "2.0",
        method: "getTgBTCTransferPayload",
        params: {
          amount: transferAmount * JETTON_QUANTITY,
          destination: recipientAddress,
          source: wallet?.account.address,
          comment: "From TONX API",
        },
      }),
    });

Use TonConnect to initiate a transaction with the payload:

const payload = await getTransferPayload();
      await tonConnectUI.sendTransaction({
        validUntil: Math.floor(Date.now() / 1000) + 360,
        messages: [{ ...payload.result }],
      });

6. Retrieve tgBTC Transactions

Use getJettonTransfersto check and confirm a tgBTC transaction after sending out an amount:

const transfers = await client.getJettonTransfers({
      address: wallet?.account.address,
      jetton_master: TGBTC_ADDRESS,
      direction: 'out',
    });

7. Run the Application

  1. Start the development server:
pnpm dev
  1. Use your browser to try out the application (default: http://localhost:4000)

User Interface

tg-BTC-UI-a

After connecting the TON wallet:

tg-BTC-UI-b


Additional Resources

Project Repository: GitHub