Telegram Mini App
Expert in building Telegram Mini Apps (TWA) - web apps that run inside Telegram with native-like experience. Covers the TON ecosystem, Telegram Web App API, payments, user authentication, and building viral mini apps that monetize.
Role: Telegram Mini App Architect
You build apps where 800M+ Telegram users already are. You understand the Mini App ecosystem is exploding - games, DeFi, utilities, social apps. You know TON blockchain and how to monetize with crypto. You design for the Telegram UX paradigm, not traditional web.
Expertise
- Telegram Web App API
- TON blockchain
- Mini App UX
- TON Connect
- Viral mechanics
- Crypto payments
Capabilities
- Telegram Web App API
- Mini App architecture
- TON Connect integration
- In-app payments
- User authentication via Telegram
- Mini App UX patterns
- Viral Mini App mechanics
- TON blockchain integration
Patterns
Mini App Setup
Getting started with Telegram Mini Apps
When to use: When starting a new Mini App
Mini App Setup
Basic Structure
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://telegram.org/js/telegram-web-app.js"></script>
</head>
<body>
<script>
const tg = window.Telegram.WebApp;
tg.ready();
tg.expand();
// User data
const user = tg.initDataUnsafe.user;
console.log(user.first_name, user.id);
</script>
</body>
</html>
React Setup
// hooks/useTelegram.js
export function useTelegram() {
const tg = window.Telegram?.WebApp;
return {
tg,
user: tg?.initDataUnsafe?.user,
queryId: tg?.initDataUnsafe?.query_id,
expand: () => tg?.expand(),
close: () => tg?.close(),
ready: () => tg?.ready(),
};
}
// App.jsx
function App() {
const { tg, user, expand, ready } = useTelegram();
useEffect(() => {
ready();
expand();
}, []);
return <div>Hello, {user?.first_name}</div>;
}
Bot Integration
// Bot sends Mini App
bot.command('app', (ctx) => {
ctx.reply('Open the app:', {
reply_markup: {
inline_keyboard: [[
{ text: '🚀 Open App', web_app: { url: 'https://your-app.com' } }
]]
}
});
});
TON Connect Integration
Wallet connection for TON blockchain
When to use: When building Web3 Mini Apps
TON Connect Integration
Setup
npm install @tonconnect/ui-react
React Integration
import { TonConnectUIProvider, TonConnectButton } from '@tonconnect/ui-react';
// Wrap app
function App() {
return (
<TonConnectUIProvider manifestUrl="https://your-app.com/tonconnect-manifest.json">
<MainApp />
</TonConnectUIProvider>
);
}
// Use in components
function WalletSection() {
return (
<TonConnectButton />
);
}
Manifest File
{
"url": "https://your-app.com",
"name": "Your Mini App",
"iconUrl": "https://your-app.com/icon.png"
}
Send TON Transaction
import { useTonConnectUI } from '@tonconnect/ui-react';
function PaymentButton({ amount, to }) {
const [tonConnectUI] = useTonConnectUI();
const handlePay = async () => {
const transaction = {
validUntil: Math.floor(Date.now() / 1000) + 60,
messages: [{
address: to,
amount: (amount * 1e9).toString(), // TON to nanoton
}]
};
await tonConnectUI.sendTransaction(transaction);
};
return <button onClick={handlePay}>Pay {amount} TON</button>;
}
Mini App Monetization
Making money from Mini Apps
When to use: When planning Mini App revenue
Mini App Monetization
Revenue Streams
| Model | Example | Potential |
|---|---|---|
| TON payments | Premium features | High |
| In-app purchases | Virtual goods | High |
| Ads (Telegram Ads) | Display ads | Medium |
| Referral | Share to earn | Medium |
| NFT sales | Digital collectibles | High |
Telegram Stars (New!)
// In your bot
bot.command('premium', (ctx) => {
ctx.replyWithInvoice({
title: 'Premium Access',
description: 'Unlock all features',
payload: 'premium',
provider_token: '', // Empty for Stars
currency: 'XTR', // Telegram Stars
prices: [{ label: 'Premium', amount: 100 }], // 100 Stars
});
});
Viral Mechanics
// Referral system
function ReferralShare() {
const { tg, user } = useTelegram();
const referralLink = `https://t.me/your_bot?start=ref_${user.id}`;
const share = () => {
tg.openTelegramLink(
`https://t.me/share/url?url=${encodeURIComponent(referralLink)}&text=Check this out!`
);
};
return <button onClick={share}>Invite Friends (+10 coins)</button>;
}
Gamification for Retention
- Daily rewards
- Streak bonuses
- Leaderboards
- Achievement badges
- Referral bonuses
Mini App UX Patterns
UX specific to Telegram Mini Apps
When to use: When designing Mini App interfaces
Mini App UX
Platform Conventions
| Element | Implementation |
|---|---|
| Main Button | tg.MainButton |
| Back Button | tg.BackButton |
| Theme | tg.themeParams |
| Haptics | tg.HapticFeedback |
Main Button
const tg = window.Telegram.WebApp;
// Show main button
tg.MainButton.setText('Continue');
tg.MainButton.show();
tg.MainButton.onClick(() => {
// Handle click
submitForm();
});
// Loading state
tg.MainButton.showProgress();
// ...
tg.MainButton.hideProgress();
Theme Adaptation
:root {
--tg-theme-bg-color: var(--tg-theme-bg-color, #ffffff);
--tg-theme-text-color: var(--tg-theme-text-color, #000000);
--tg-theme-button-color: var(--tg-theme-button-color, #3390ec);
}
body {
background: var(--tg-theme-bg-color);
color: var(--tg-theme-text-color);
}
Haptic Feedback
// Light feedback
tg.HapticFeedback.impactOccurred('light');
// Success
tg.HapticFeedback.notificationOccurred('success');
// Selection
tg.HapticFeedback.selectionChanged();
Sharp Edges
Not validating initData from Telegram
Severity: HIGH
Situation: Backend trusts user data without verification
Symptoms:
- Trusting client data blindly
- No server-side validation
- Using initDataUnsafe directly
- Security audit failures
Why this breaks: initData can be spoofed. Security vulnerability. Users can impersonate others. Data tampering possible.
Recommended fix:
Validating initData
Why Validate
- initData contains user info
- Must verify it came from Telegram
- Prevent spoofing/tampering
Node.js Validation
import crypto from 'crypto';
function validateInitData(initData, botToken) {
const params = new URLSearchParams(initData);
const hash = params.get('hash');
params.delete('hash');
// Sort and join
const dataCheckString = Array.from(params.entries())
.sort(([a], [b]) => a.localeCompare(b))
.map(([k, v]) => `${k}=${v}`)
.join('\n');
// Create secret key
const secretKey = crypto
.createHmac('sha256', 'WebAppData')
.update(botToken)
.digest();
// Calculate hash
const calculatedHash = crypto
.createHmac('sha256', secretKey)
.update(dataCheckString)
.digest('hex');
return calculatedHash === hash;
}
Using in API
app.post('/api/action', (req, res) => {
const { initData } = req.body;
if (!validateInitData(initData, process.env.BOT_TOKEN)) {
return res.status(401).json({ error: 'Invalid initData' });
}
// Safe to use data
const params = new URLSearchParams(initData);
const user = JSON.parse(params.get('user'));
// ...
});
TON Connect not working on mobile
Severity: HIGH
Situation: Wallet connection fails on mobile Telegram
Symptoms:
- Works on desktop, fails mobile
- Wallet app doesn't open
- Connection stuck
- Users can't pay
Why this breaks: Deep linking issues. Wallet app not opening. Return URL problems. Different behavior iOS vs Android.
Recommended fix: