A professional React application that implements TON Connect integration with mainnet validation and network switching capabilities.
- Seamless TON wallet connection using
@tonconnect/ui-react
- Automatic network validation (mainnet-only)
- Real-time connection status monitoring
- User-friendly network switch alerts
- Responsive and clean UI
- Memoized components for optimal performance
- React 18+
- TypeScript
- TON Connect SDK
- Vite
- CSS Modules
- Clone the repository:
git clone https://github.com/your-username/ton-network-validator.git
- Install dependencies:
yarn install
# or
npm install
- Start the development server:
yarn dev
# or
npm run dev
The application uses a manifest URL for TON Connect configuration. Update the MANIFEST_URL
in src/App.tsx
if needed:
const CONSTANTS = {
TESTNET_CHAIN_ID: '-3',
MANIFEST_URL: 'your-manifest-url'
};
- Launch the application
- Click the TON Connect button to connect your wallet
- The application will automatically validate the network:
- If connected to mainnet: Connection proceeds normally
- If connected to testnet: Connection is rejected with an alert
src/
├── components/
│ └── Alert.tsx # Alert component for network warnings
├── App.tsx # Main application logic
└── main.tsx # Application entry point
- Network validation ensures mainnet-only connections
- Automatic disconnection for non-compliant networks
- Type-safe implementation with TypeScript
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature
) - Commit your changes (
git commit -m 'Add some AmazingFeature'
) - Push to the branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Your Name - @yourtwitter Project Link: https://github.com/your-username/ton-network-validator
Made with ❤️ for the TON Community