DePick Telegram Bot Frontend

Minimal, standalone frontend for DePick Telegram bot integration.

Architecture

This is a lightweight Vite + React + TypeScript app with zero dependencies on:

• OAuth providers (Google, LINE)
• Wallet SDKs (Kaia, MetaMask, OKX)
• SSE/WebSocket connections
• Redux/Zustand state management
• i18n/localization

Features

• Predict Page (/predict and /predict/:matchId)

  • View upcoming matches
  • Place predictions with dynamic odds calculation
  • Token-based betting only

• Claim Page (/claim)

  • View claimable winning predictions
  • Claim rewards

Authentication

Authentication is handled via JWT token passed in URL parameter:

/predict?auth_token=<JWT>
/predict/:matchId?auth_token=<JWT>
/claim?auth_token=<JWT>

The JWT is generated by the backend when the Telegram bot user requests a link.

Setup

1. Install dependencies:

npm install

2. Create .env file:

cp .env.example .env

3. Configure API URL in .env:

VITE_API_URL=http://localhost:3000

4. Run development server:

npm run dev

5. Build for production:

npm run build

Bundle Size

Without wallet SDKs, OAuth libraries, and other heavy dependencies, the production bundle is ~80% smaller than the main frontend.

Deployment

To Backend (Recommended)

The bot is deployed directly to the NestJS backend at /bot/ path:

# From DePick.Bot directory
./deploy-to-backend.sh

This will:

1. Build the bot (npm run build)
2. Copy dist/ to ../DePick.BE/public/
3. Backend serves static files at /bot/ prefix

Benefits:

• Single deployment
• No CORS issues (same origin)
• Simpler architecture
• Uses relative API URLs

Access:

• Development: http://localhost:3001/bot/predict?auth_token=JWT
• Production: https://yourdomain.com/bot/predict?auth_token=JWT

Environment Variables

Backend serves the bot, so set in DePick.BE/.env:

URL_HOSTING_TELEGRAM_APP=https://yourdomain.com

Bot uses same origin for API calls (no VITE_API_URL needed).