📱 Telegram Mini App Template

Production-ready шаблон Telegram Mini App с TON Connect

🇷🇺 Русский | 🇬🇧 English

Live Demo • Документация

---

⚡ Быстрый старт

# Клонируйте репозиторий
git clone https://github.com/Chumbayoumba/tg-mini-app-template.git
cd tg-mini-app-template

# Установите зависимости
npm install

# Запустите dev-сервер
npm run dev

---

✨ Особенности

• 📱 @telegram-apps/sdk — официальный SDK для Mini Apps
• 💰 TON Connect — интеграция кошельков TON
• ⚡ Vite + React 18 — быстрая разработка
• 🎨 Tailwind CSS — адаптивные стили
• 📦 TypeScript — полная типизация
• 🌙 Telegram Theme — автоматические темы
• 🔐 Auth — валидация initData

---

📁 Структура проекта

src/
├── components/
│   ├── App.tsx             # Главный компонент
│   ├── MainButton.tsx      # Telegram MainButton
│   ├── BackButton.tsx      # Telegram BackButton
│   └── TonConnect.tsx      # TON Connect UI
├── hooks/
│   ├── useTelegram.ts      # Хук для Telegram WebApp
│   └── useTonConnect.ts    # Хук для TON Connect
├── pages/
│   ├── Home.tsx            # Главная страница
│   ├── Wallet.tsx          # Страница кошелька
│   └── Profile.tsx         # Профиль пользователя
├── utils/
│   ├── telegram.ts         # Telegram утилиты
│   └── ton.ts              # TON утилиты
├── main.tsx
└── index.css

---

🔧 Telegram SDK

Инициализация

import { init, miniApp, themeParams } from '@telegram-apps/sdk';

// Инициализация SDK
init();

// Получение данных
const user = miniApp.initDataUnsafe.user;
console.log(`Hello, ${user?.firstName}!`);

MainButton

import { mainButton } from '@telegram-apps/sdk';

// Показать кнопку
mainButton.setParams({
  text: 'Оплатить',
  isVisible: true,
  isEnabled: true,
});

// Обработчик клика
mainButton.onClick(() => {
  console.log('MainButton clicked!');
});

BackButton

import { backButton } from '@telegram-apps/sdk';

backButton.show();
backButton.onClick(() => {
  // Вернуться назад
});

---

💰 TON Connect

Настройка

Создайте tonconnect-manifest.json в /public:

{
  "url": "https://your-app.com",
  "name": "My Mini App",
  "iconUrl": "https://your-app.com/icon.png"
}

Подключение кошелька

import { TonConnectButton, useTonAddress } from '@tonconnect/ui-react';

function WalletPage() {
  const address = useTonAddress();
  
  return (
    <div>
      <TonConnectButton />
      {address && <p>Кошелёк: {address}</p>}
    </div>
  );
}

Отправка транзакции

import { useTonConnectUI } from '@tonconnect/ui-react';

function PayButton() {
  const [tonConnectUI] = useTonConnectUI();
  
  const sendPayment = async () => {
    await tonConnectUI.sendTransaction({
      messages: [{
        address: 'EQ...',
        amount: '100000000', // 0.1 TON в нанотонах
      }],
    });
  };
  
  return <button onClick={sendPayment}>Оплатить 0.1 TON</button>;
}

---

🚀 Деплой

1. Создайте бота

1. Откройте @BotFather
2. /newbot → следуйте инструкциям
3. /newapp → прикрепите Mini App к боту

2. Задеплойте приложение

# Vercel
npm i -g vercel && vercel

# Или соберите статику
npm run build
# Загрузите dist/ на хостинг

3. Настройте URL

В BotFather → /myapps → Edit Web App → установите URL

---

📦 Зависимости

{
  "@telegram-apps/sdk": "^1.0.0",
  "@tonconnect/ui-react": "^2.0.0",
  "react": "^18.2.0",
  "react-router-dom": "^6.20.0",
  "tailwindcss": "^3.4.0"
}

---

📝 Лицензия

MIT — используйте свободно!

---

Сделано с ❤️ Egor Terskii

⭐ Понравился шаблон? Поставьте звезду!

---

🇬🇧 English

Production-ready Telegram Mini App template with TON Connect integration.

Features: @telegram-apps/sdk, TON Connect, React 18, TypeScript, Vite, Tailwind CSS.

git clone https://github.com/Chumbayoumba/tg-mini-app-template.git
npm install && npm run dev