This article will walk you through the process of integrating the TON wallet into your React.js application using the @tonconnect/ui-react package for a seamless and user-friendly experience.
Prerequisites
Before we begin, ensure the following tools and libraries are set up:
1. React.js Application: Create a new React app using npx create-react-app or use an existing one.
2. Yarn or npm: Ensure you have a package manager like Yarn or npm installed.
3. TON Connect UI: We’ll use the @tonconnect/ui-react package.
Step 1: Install TON Connect UI React
Start by adding the TON Connect UI package to your React project:
yarn add @tonconnect/ui-react
Step 2: Configure the TON Wallet Integration
1. Create a TON Wallet Configuration File
TON wallets require a manifest file. Create a tonconnect-manifest.json file in your public directory with the following content:
Replace https://your-app-url.com and icon.png with your app’s URL and icon file path.
2. Set Up a TON Provider
Add the TON Connect provider in your app. For example, wrap your app with the TON Connect UI provider:
Step 3: Add a TON Wallet Connect Button
Use the built-in Connect Button from the library to allow users to connect their TON wallets.
Step 4: Handle Wallet Events
TON Connect UI provides hooks for managing wallet connections and events. Use useTonConnectUI to handle user actions:
Step 5: TON Wallet Disconnect Button
Step 6: Testing the Integration
1. Run Your React App: Start the development server using yarn start or npm start.
2. Connect TON Wallet: Use the Connect button to link a TON wallet (e.g., Tonkeeper).
3. Send Transactions: Test the transaction functionality.
4. Disconnect TON Wallet: Use the Disconnect button to Disconnect From TON wallet (e.g., Tonkeeper).
Conclusion
Integrating the TON wallet into your React.js application is simple with the @tonconnect/ui-react library. It provides seamless wallet connection and transaction management, enabling you to create secure and scalable decentralized applications on the TON blockchain.
