TON Balance and Transaction Viewer
This is a React application that displays TON balances and transfer history using the TONX SDK. Refer to this sample project's GitHub repository.
Prerequisites
Environment Setup
- Install pnpm globally:
npm install -g pnpm
- Install project dependencies:
pnpm install
Configurations
API Key Setup
- Get your API key from dashboard.tonxapi.com.
- Important: Use a Testnet API key.
- Define
VITE_TONXAPI_KEY
with the testnet API key in the.env
file.
Network Configuration
- Set up the application for the testnet environment. Ensure correct network setting as follows:
const client = new TONXJsonRpcProvider({
network: "testnet", // Keep this as testnet for development
apiKey: import.meta.env.VITE_TONXAPI_KEY,
});
Wallet Address Configuration
The application uses a default wallet address for tracking:
const myTonAddress = "EQDi1eWU3HWWst8owY8OMq2Dz9nJJEHUROza8R-_wEGb8yu6";
To track a different wallet:
- Replace the
myTonAddress
constant with your own address. - Ensure the address is valid and exists on the TON testnet.
Features
- View wallet balance in TON
- Display the latest transaction details
- Direct link to transaction explorer
- Loading state handling
- Error state handling
Running the Application
Start the development server:
pnpm dev
Access the application (usually at http://localhost:4000
)
Component Functionality
The application provides several key features:
Balance Display
- Shows current wallet balance
- Updates on refresh
- Handles error states gracefully
Transaction Viewing
- Displays the latest transaction hash
- Provides clickable links to TON Explorer
- Shows appropriate messages for different states
Error States
The application handles multiple states:
- "No connection" - Initial state
- "Error fetching balance" - Balance fetch failure
- "Error fetching transaction" - Transaction fetch failure
- "No transaction found" - When no transactions exist
- Valid transaction hash - Displays with explorer link
Security Best Practices
- Never commit API keys to version control
- Validate wallet addresses before querying
- Handle API errors appropriately
Troubleshooting
-
API Key Issues
- Verify you're using a testnet API key
- Ensure the environment variable is correctly accessed
-
Balance Not Showing
- Verify the wallet address is correct
- Check if the wallet exists on testnet
- Ensure you have proper network connectivity
-
Transactions Not Loading
- Verify the wallet has a recent transaction history in the last 30 days.
- Check network connection
- Confirm API key permissions