Web3 Telegram Mini App Boilerplate

A ready-to-use boilerplate for building Web3 Telegram Mini Apps. This tech stack includes:

• React + Express
• Wagmi + WalletConnect
• TON Connect
• @telegram-apps SDK
• Telegram UI

Install Dependencies

Install the project dependencies using:

yarn install

Scripts

This project contains the following scripts:

• dev: Runs the application in development mode
• build: Builds the application for production
• start: Starts the production server
• test: Runs tests
• eject: Ejects from create-react-app

Supported Wallets

• MetaMask
• Binance Wallet
• OKX Wallet
• Bitget Wallet
• Trust Wallet
• TONConnect

Note: Deep link support is implemented for common wallets and can be extended in App.js:

• bitkeep://
• metamask://
• trust://
• wc://
• okex://
• bnc://

Setup and Development

Environment Setup

1. Create a .env file in the root directory:

WC_WEB3_PROJECT_ID=your_walletconnect_project_id  # Get this from https://cloud.walletconnect.com/
REACT_APP_PUBLIC_URL=your dApp public url

2. Configure TON Connect manifest: The TON Connect manifest is stored in public/tonconnect-manifest.json. Remember to configure this file according to your project's information.

3. Install dependencies:

yarn install

4. Start the development server:

yarn dev

The app will be available at http://localhost:3000.

Production

1. Build the application:

yarn build

2. Start the production server:

yarn start

Note: Always ensure your .env file is properly configured before starting either development or production servers.

Useful Links

• Telegram Mini Apps Documentation
• Wagmi Documentation
• TON Connect Documentation
• Telegram UI Components
• Telegram Developers Community