# Build first tgBTC dApp
## 👋 Introduction
The TONX API enables seamless interaction with tgBTC, allowing developers to retrieve tgBTC-related data and execute transactions. Built with React and TypeScript, this project provides web3 developers with a practical implementation for integrating tgBTC into their applications. In this guide, we will explore how to leverage the TONX API for tgBTC integration.
{% hint style="warning" %}
Please note that tgBTC only supports testnet environments, and this API was built by independent community developers, so keep this in mind during development.
{% endhint %}
## 💎 What is TON Teleport BTC?
TON Teleport BTC allows seamless and secure BTC transfers between the Bitcoin and TON networks, without the need for centralized issuers. Its decentralized design and strong security features ensure trust and convenience. You can mint your first tgBTC using [**TON Teleport**](http://sandbox.teleport.tg/app/auth) and [**step-by-step guide**](https://tgbtc.gitbook.io/docs/user-guides/mint-your-first-tgbtc).
## 🦄 What you will learn
* connect your TON testnet wallet using TON Connect
* check and manage your tgBTC balance with ease
* send tgBTC to any account with just a few clicks
* real-time transaction confirmation for full transparency and security using the TONX API[](https://docs.ton.org/v3/guidelines/dapps/tutorials/nft-minting-guide#-prerequisites)
## 💡 Prerequisites
Before you start, ensure you have the following:
* testnet wallet in TON (e.g., Tonkeeper, as shown in our [**previous guide**](https://tgbtc.gitbook.io/docs/getting-started/testnet-in-ton))
* TONX API key (testnet). Get access to the [**TONX API**](https://docs.tonxapi.com/docs/ton-api-quickstart-guide) for free
* basic knowledge of React and TypeScript to follow along with the code
* pnpm package manager installed on your machine
* Node.js (v16 or higher) for running the project
* some tgBTC for testing transfers
## **TONX API for tgBTC**
In this project, we use the [**TONX API**](https://auth.tonxapi.com/signup) and [**@tonx/core SDK**](https://www.npmjs.com/package/@tonx/core) to perform tgBTC transactions. For more details on the SDK, refer to the SDK guide. In particular, we use the following methods to execute tgBTC transactions:
* [**getJettonWallets**](https://docs.tonxapi.com/reference/get-jetton-wallets)
* [**getJettonTransfers**](https://docs.tonxapi.com/reference/get-jetton-transfers)
* [**getTgBTCTransferPayload**](https://docs.tonxapi.com/reference/get-tgbtc-jetton-transfer-payload)
## ⚙ Setup development environment[](https://docs.ton.org/v3/guidelines/dapps/tutorials/nft-minting-guide#-setup-development-environment)
1. Install dependencies
```typescript
npm install -g pnpm
```
2. Install project dependencies
```typescript
pnpm install
```
3. Create a .env file in the root directory
```typescript
VITE_TONXAPI_KEY=your_api_key_here
```
Great! At the end of the setup, replace your\_api\_key\_here with your TONX API key.
### Integrate TON Connect
Update the src/App.tsx file to include TonConnectButton, useTonWallet, and useTonConnectUI:
```typescript
import { TonConnectButton, useTonWallet, useTonConnectUI } from '@tonconnect/ui-react';
```
### Network settings
Configure the TONX API for testnet:
```typescript
const client = new TONXJsonRpcProvider({
network: 'testnet',
apiKey: import.meta.env.VITE_TONXAPI_KEY
});
```
### Retrieve tgBTC balance
Use getJettonWallet to get the tgBTC balance:
```typescript
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);
```
### Send tgBTC
Use getTgBTCTransferPayload API to generate a payload for the transaction message:
```typescript
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",
},
}),
});
```
### Retrieve tgBTC transactions
Use getJettonTransfers to check and confirm a tgBTC transaction after sending out an amount:
```typescript
const transfers = await client.getJettonTransfers({
address: wallet?.account.address,
jetton_master: TGBTC_ADDRESS,
direction: 'out',
});
```
## 🚢 Run the application
1. Start the development server:
```typescript
pnpm dev
```
2. Use your browser to try out the application (default: [**http://localhost:4000**](http://localhost:4000))
## 🖼 User interface
After connecting the TON wallet:
Now you've created your first working tgBTC dApp using the third-party API by TONX.
## 🧐 What's next?
{% hint style="info" %}
For the full implementation and source code, visit the project's [**GitHub repository**](https://github.com/tonxapi/sample/tree/main/react-ts-app/%40tonx-core/my-tgBTC-transfer).
{% endhint %}
With your environment set up and the TONX API integrated, you're ready to start using your application to manage tgBTC transactions. Test sending tgBTC, check balances in real time, and explore advanced features as your project grows.
For more methods, you can go to the next page!
