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 SDK for tgBTC

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

• getTgBTCWalletAddressByOwner: Get tgBTC Jetton Wallet address by owner address.
• getTgBTCTransfers: Retrieve a list of tgBTC transfers from the TON blockchain.
• getTgBTCTransferPayload: Create payload for use with TonConnect tgBTC transfers.

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 getTgBTCWalletAddressByOwner to retrieve the Jetton wallet addresses. Then pass the value as the param for getTgBTCBalance to retrieve the balance of the tgBTC wallet.

const getTgBTCAmount = async () => {
    const jettonWallets = await client.getTgBTCWalletAddressByOwner({ owner_address: wallet?.account.address });
    const tgBTCWallet = await client.getTgBTCBalance({ address: jettonWallets.address });
    setAmount(tgBTCWallet.balance / JETTON_QUANTITY);
  };

5. Send tgBTC

Use getTgBTCTransferPayload to generate a payload for the transaction message:

const payload = await client.getTgBTCTransferPayload({
        amount: parseInt(String(transferAmount * JETTON_QUANTITY)),
        destination: recipientAddress,
        source: wallet?.account.address,
        comment: "From TONX API",
      });

Use TonConnect to initiate a transaction with the payload:

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

6. Retrieve tgBTC Transactions

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

const transfers = await client.getTgBTCTransfers({
      address: wallet?.account.address
    });

7. Run the Application

1. Start the development server:

pnpm dev 

2. Use your browser to try out the application (default: http://localhost:4000)
3. After sending a tgBTC transfer, it might take up to 180 seconds to confirm the on-chain transaction.

User Interface

After connecting the TON wallet:

Additional Resources

Project Repository: GitHub