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 getTgBTCTransfers
to check and confirm a tgBTC transaction after sending out an amount:
const transfers = await client.getTgBTCTransfers({
address: wallet?.account.address
});
7. Run the Application
- Start the development server:
pnpm dev
- Use your browser to try out the application (default:
http://localhost:4000
) - 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