V3 — Telegram Mini App Template

V3 — Telegram Mini App template with TON wallet, trading data, multi-chain explorers, and games. React + TypeScript + Vite.

Live Demo: https://bitopencode.github.io/V3/
Telegram Mini App: @BTCPunkBot

Open-source template. No backend. No data collection. Connect wallet works only for monitoring your wallet and transactions.

git clone https://github.com/BitOpenCode/V3.git
cd V3
npm install
npm run dev   # http://localhost:5180

npm run build   # docs/ for GitHub Pages
npm run lint

• React 18, TypeScript, Vite
• Tailwind CSS, Framer Motion
• Zustand, React Hook Form, Zod
• TON Connect, ton-api
• Three.js, React Three Fiber

• Space (default) / Light / Bubbles — persist in localStorage

Header:

• Mempool / News / Connect Wallet / Wallet / Menu

BottomNav:

• Chart / Tickers / OrderBook / Share / Calculator / Portfolio

• BubbleButton — lava lamp + bubbles
• BubbleCard — same + optional title
• SocialCard — astronaut + social links
• ShootingStars — animated background

• Binance: /api/v3/ticker/24hr, /api/v3/depth, WebSocket
• TON | GRAM: tonapi.io/v2
• News: newsapi.org/v2, newsdata.io/api/1/crypto
• Mempool Bitcoin: mempool.space/api
• TRC20 | Tron: apilist.tronscan.org/api

This project uses external APIs that require keys:

• NewsData.io — for crypto news (VITE_NEWS_API_KEY)
• NewsAPI.org — for crypto news (VITE_NEWSAPI_KEY)

1. NewsData.io — sign up at newsdata.io (free tier available)
2. NewsAPI.org — sign up at newsapi.org (free tier available)

Create a .env file in the root directory:

VITE_NEWS_API_KEY=your_newsdata_io_key
VITE_NEWSAPI_KEY=your_newsapi_org_key

TradingView widgets used:

src/pages/
├── Avatars/          # Avatar selection
├── Calculator/       # Crypto converter & PnL
├── Chart/            # TradingView widgets
├── ComingSoon/       # Placeholder for WIP features
├── Games/            # SpaceShip, RunRoad
├── Home/             # Main dashboard
├── Mempool/          # BTC mempool + TON/TRC20 lookup
├── Menu/             # Settings, themes, language
├── News/             # Crypto news aggregator
├── OrderBook/        # Binance order book
├── Portfolio/        # Positions, PnL tracking
├── Profile/          # User stats
├── Progress/         # Achievements & level
├── Results/          # Game & trading history
├── Share/            # Share tickers with price/percent
├── Tickers/          # Real-time prices from Binance
├── TradeRoom/        # 3D Three.js scenes
├── Wallet/           # TON wallet dashboard
└── index.ts          # Page exports

npm run build   # output to docs/

Repo settings → Pages → branch main + folder /docs

Set your deployment URL in @BotFather

BitOpenCode — GitHub • Telegram

MIT © BitOpenCode

---