TG-Omnichain-Mini-App

This repository contains three main components:

1. Mini App - A Telegram Mini App frontend.
2. Telegram Bot - A backend node server for generating URLs to perform EVM transactions and handle bot interactions.
3. Web3 Bridge UI - A frontend application where users can execute transactions via the links generated by the server.

---

Table of Contents

1. Overview
2. Folder Structure
3. Installation and Setup
4. Mini App
   • Features
   • Tech Stack
   • How to Run
5. Telegram Bot
   • Features
   • Tech Stack
   • How to Run
6. Web3 Bridge UI
   • Features
   • Tech Stack
   • How to Run
7. Contribution
8. License

---

Overview

The TG-Omnichain-Mini-App is a Telegram Mini App integrated with a backend server (Telegram bot) and a Web3 bridge. The mini-app allows users to interact with EVM blockchains directly from within Telegram, performing various operations like token transfers, approvals, and minting.

Folder Structure

tg-omnichain-mini-app/
│
├── mini-app/          # Frontend for the Telegram Mini App
│
├── telegram-bot/      # Node server and bot for URL generation and backend services
│
└── web3-bridge-ui/    # Frontend UI for executing Web3 transactions

Installation and Setup

1. Clone the repository:

   git clone https://github.com/CJskii/tg-omnichain-mini-app.git
   cd tg-omnichain-mini-app

2. Each component (mini-app, telegram-bot, web3-bridge-ui) has its own dependencies and setup. Navigate to the respective folders and follow the instructions below.

---

Mini App

Features

• User-friendly interface for initiating EVM transactions within Telegram.
• Allows users to connect their wallets and execute transactions like approve, mint and bridge NFTs.
• Integrated modals and components for a smooth user experience.

Tech Stack

• Framework: Next.js
• Styling: Tailwind CSS
• Telegram SDK: @telegram-apps/sdk-react

How to Run (Mini App)

1. Navigate to the mini-app directory:

   cd mini-app

2. Install the dependencies:

   npm install

3. Create a .env.local file with the necessary environment variables:

   NEXT_PUBLIC_ENVIROMENT="local" # local | production
   NEXT_PUBLIC_PROD_API_URL="" # Production API URL
   NEXT_PUBLIC_LOCAL_API_URL="" # Local API URL

4. Start the development server:

   npm run dev

5. Open the app in your browser: http://localhost:3000.

---

Telegram Bot

Features

• Serves URL links for EVM transactions to the mini app.
• Listens to transactions of specified wallets using WebSockets.
• Supports multiple wallets and chains (e.g., Arbitrum, Base, BSC).

Tech Stack

• Backend: Node.js, Express, Grammy (tg-bot)

How to Run (Telegram Bot)

1. Navigate to the telegram-bot directory:

   cd telegram-bot

2. Install the dependencies:

   npm install

3. Create a .env file with the necessary environment variables:

   # Server variables
   NODE_ENV= # development | production
   PORT=3001 # Port to run the server
   BRIDGE_URL= # URL of the web3 bridge
   NODE_SERVER_URL= # URL of the server
   
   # Telegram bot variables
   TELEGRAM_BOT_API_KEY= # Telegram bot API key
   TELEGRAM_APP_EXTERNAL_URL= # your mini app's external URL
   TELEGRAM_GAME_URL= # generated from BotFather

4. Start the server:

   npm run start

5. The server will be running at http://localhost:3001.

---

Web3 Bridge UI

Features

• Acts as a bridge to execute Web3 transactions based on links generated by the server.
• Allows users to sign transactions and interact with the blockchain directly from the mini app UI.

Tech Stack

• Framework: Next.js
• Blockchain Interaction: ethers, wagmi, viem, rainbowkit
• Styling: Tailwind CSS

How to Run (Web3 Bridge UI)

1. Navigate to the web3-bridge-ui directory:

   cd web3-bridge-ui

2. Install the dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open the app in your browser: http://localhost:3002.

---

Contribution

1. Fork the repository.
2. Create a new branch for your feature or bug fix:

   git checkout -b feature-name

3. Commit your changes and open a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.