Как создать Web3 мини‑игру в Telegram Mini Apps без газ-фис

Этот гайд не только научит вас создавать и разворачивать Telegram Mini App, но и покажет, как использовать бесплатные функции thirdweb SDK для реализации таких ключевых Web3 возможностей, как абстракция аккаунтов (Account Abstraction), создание кошельков и раздача токенов (airdrop).

---

Почему стоит выбрать Telegram Mini App для Web3 проектов?

Нативный трафик из социальных сетей + нулевой порог входа

Telegram имеет более 800 миллионов активных пользователей в месяц и позволяет разработчикам по всему миру бесплатно разворачивать свои приложения. Для Web3 проектов мини-приложения Telegram предлагают следующие преимущества:

• Не требуют скачивания и установки: Пользователи используют их прямо внутри Telegram.
• Быстрая виральность через социальные сети: Делитесь ссылкой, чтобы привлекать новых пользователей.
• Единый стек технологий: Основан на веб-технологиях, поддерживает популярные фреймворки, такие как React/Vue.
• Адаптация для мобильных устройств: Отлично работает как на мобильных, так и на настольных клиентах.

Интегрировав технологию абстракции аккаунтов, вы сможете предоставить пользователям возможность создавать блокчейн-кошельки, используя только email, без необходимости устанавливать расширения для браузера. Это критически важно для снижения барьера входа в Web3 проекты.

---

Что мы будем создавать? Полноценную Web3 игру "Камень-Ножницы-Бумага"

Основной процесс игры выглядит так:

1. Пользователь открывает мини-приложение в Telegram.
2. Входит через email, и автоматически создается смарт-кошелек (Smart Account).
3. Играет в "камень-ножницы-бумага".
4. После победы нажимает "Получить награду" и бесплатно получает токены на свой кошелек.
5. Баланс отображается в реальном времени, можно продолжить игру или выйти.

Весь процесс не требует от пользователя оплаты каких-либо комиссий за газ (gas fees) и не показывает раздражающих окон подтверждения подписи — это и есть настоящий Web3 опыт без ощутимых усилий благодаря абстракции аккаунтов + спонсированию газа.

---

Ключевые технологии и инструменты

Фронтенд-фреймворк

• Vite + React: Для быстрой сборки интерфейса.
• TypeScript: Для повышения надежности кода.

Интеграция Web3 возможностей

• thirdweb SDK: Предоставляет подключение кошельков, абстракцию аккаунтов, взаимодействие с контрактами.
• vov/react-telegram-web-app: Официальная библиотека-адаптер для Telegram.

Блокчейн-сеть

• Base Sepolia Testnet (тестовая сеть): Бесплатная и быстрая, подходит для демонстрации.

Инструменты разработки

• ngrok: Позволяет сделать локальную среду разработки доступной через публичный интернет, что удобно для отладки.

---

Шаг первый: Создание Telegram Mini App

1. Добавьте BotFather и создайте бота

В поиске Telegram введите @BotFather и найдите официального бота, затем нажмите "Start".

Введите команду для создания нового бота:

/newbot

Следуйте инструкциям, введя имя и юзернейм (должен заканчиваться на bot), например:

Имя: thirdweb YouTube Demo
Юзернейм: thirdwebYouTubeBot

После успешного создания BotFather вернет токен — сохраните его, это ваш ключ для управления ботом.

2. Создание Mini App

Продолжайте в BotFather, введя:

/newapp

Выберите вашего только что созданного бота, затем поочередно введите:

• Заголовок: thirdweb Rock Paper Scissors Demo
• Описание: Web3 Rock Paper Scissors Mini Game
• Изображение: Загрузите главное изображение (рекомендуемый размер 640×360).
• URL Web App: Оставьте пока пустым, мы заполним его позже.

Telegram попросит предоставить ссылку для доступа к вашему мини-приложению. Для начала мы разработаем приложение, а затем заполним это поле.

---

Шаг второй: Настройка локальной среды разработки

Инициализация проекта

Откройте терминал и выполните:

bun create vite

Выберите:

• Имя проекта: thirdweb-telegram-miniapp
• Фреймворк: React
• Вариант: TypeScript + SWC

Перейдите в директорию проекта:

cd thirdweb-telegram-miniapp

Установка зависимостей

Установите библиотеку-адаптер для Telegram Web App:

bun add @vov/react-telegram-web-app

Установите thirdweb SDK:

bun add thirdweb

Конфигурация скрипта Telegram

Откройте index.html и добавьте в тег <head>:

<script src="https://telegram.org/js/telegram-web-app.js"></script>

Этот код сообщит Telegram, что ваше веб-приложение должно запускаться в среде мини-приложения.

Запуск сервера разработки

npm run dev

Сервис запустится по умолчанию на http://localhost:5174.

---

Шаг третий: Открытие локальной ссылки через ngrok

Поскольку Telegram требует публичный URL для доступа к вашему мини-приложению, мы временно откроем локальный сервис во внешнюю сеть с помощью ngrok.

Запустите:

ngrok http 5174

ngrok предоставит публичный адрес, например:

https://abc123.ngrok.io

Скопируйте эту ссылку. Вернитесь в BotFather и вставьте ее в поле Web App URL.

Теперь, кликнув по ссылке на мини-приложение в Telegram, вы должны увидеть стандартную страницу Vite!

---

Шаг четвертый: Интеграция thirdweb SDK и подключение кошелька

Создание Client ID

Перейдите на thirdweb Dashboard, в раздел Settings > API Keys и создайте новый Client ID.

Скопируйте Client ID в файл .env.local в корне вашего проекта:

VITE_CLIENT_ID=your_client_id_here

Настройка thirdweb Provider

Оберните ваше приложение в src/main.tsx:

import { ThirdwebProvider } from "thirdweb/react";
import { createThirdwebClient } from "thirdweb";

const client = createThirdwebClient({
  clientId: import.meta.env.VITE_CLIENT_ID,
});

root.render(
  <ThirdwebProvider>
    <App />
  </ThirdwebProvider>
);

Добавление функции входа через email

Используйте компонент ConnectButton от thirdweb:

import { ConnectButton } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";

<ConnectButton
  client={client}
  wallets={[
    inAppWallet({
      auth: {
        options: ["email"],
      },
    }),
  ]}
/>

Пользователь вводит email → получает код подтверждения → после успешной верификации автоматически создается кошелек → готово!

---

Шаг пятый: Реализация логики игры "Камень-Ножницы-Бумага"

Реализуйте основную логику в src/components/RockPaperScissors.tsx:

type Choice = "rock" | "paper" | "scissors";
type Result = "win" | "lose" | "tie";

const choices: Choice[] = ["rock", "paper", "scissors"];

const getComputerChoice = (): Choice => {
  return choices[Math.floor(Math.random() * 3)];
};

const determineWinner = (player: Choice, computer: Choice): Result => {
  if (player === computer) return "tie";
  if (
    (player === "rock" && computer === "scissors") ||
    (player === "paper" && computer === "rock") ||
    (player === "scissors" && computer === "paper")
  ) {
    return "win";
  }
  return "lose";
};

Пользователь нажимает кнопку → генерируется случайный выбор компьютера → определяется результат → отображается итог.

---

Шаг шестой: Развертывание контракта токена ERC-20

Вернитесь на thirdweb Dashboard, нажмите Contracts > Deploy и выберите Token Drop.

Настройте:

• Название: Rock Paper Scissors Token
• Символ: RPS
• Сеть: Base Sepolia

После успешного развертывания, в разделе Claim Conditions установите "Публичный доступ, без ограничений".

Скопируйте адрес контракта и добавьте его в код:

import { getContract } from "thirdweb";
import { baseSepolia } from "thirdweb/chains";

const contract = getContract({
  client,
  chain: baseSepolia,
  address: "0xYourContractAddress",
});

---

Шаг седьмой: Реализация абстракции аккаунтов + получение токенов без газа

Включение абстракции аккаунтов

Добавьте в ConnectButton:

<ConnectButton
  client={client}
  wallets={[inAppWallet({ auth: { options: ["email"] } })]}
  accountAbstraction={{
    chain: baseSepolia,
    sponsorGas: true,
  }}
/>

Таким образом, создаваемые пользователем кошельки станут смарт-кошельками (Smart Accounts), и мы сможем оплачивать за них комиссии за газ.

Кнопка получения токенов

import { TransactionButton } from "thirdweb/react";
import { claimTo } from "thirdweb/extensions/erc20";

<TransactionButton
  transaction={() =>
    claimTo({
      contract,
      to: account.address,
      quantity: "10",
    })
  }
  onTransactionConfirmed={() => alert("Токены получены!")}
>
  Получить 10 RPS
</TransactionButton>

Пользователь нажимает кнопку → thirdweb автоматически обрабатывает транзакцию → токены поступают на счет → пользователю не нужно ничего платить!

---

Шаг восьмой: Отображение баланса и функция выхода

Чтение баланса токена

import { useReadContract } from "thirdweb/react";
import { getBalance } from "thirdweb/extensions/erc20";

const { data: tokenBalance } = useReadContract(getBalance, {
  contract,
  address: account.address,
});

<div>Баланс: {tokenBalance?.displayValue} RPS</div>

Добавление кнопки выхода

import { useDisconnect, useActiveWallet } from "thirdweb/react";

const wallet = useActiveWallet();
const { disconnect } = useDisconnect();

<button onClick={() => disconnect(wallet)}>Выйти</button>

---

Тестирование полного цикла на мобильном устройстве

Откройте Telegram на своем телефоне, найдите вашего бота и нажмите на ссылку мини-приложения:

1. Введите email → подтвердите → кошелек создан.
2. Сыграйте в игру → нажмите "Получить награду" после победы.
3. Токены начислены, баланс обновлен.
4. Никаких плагинов или подтверждений подписи не требуется!

---

FAQ

Этот способ бесплатный?

Все функции thirdweb, используемые в этом гайде, входят в бесплатный тарифный план, включая создание кошельков, взаимодействие с контрактами и абстракцию аккаунтов. Если вы хотите использовать прямой вход через аккаунт Telegram (без подтверждения по email), вам потребуется перейти на платный тариф.

Как избежать повторного получения токенов пользователями?

Вы можете добавить в смарт-контракт логику, ограничивающую количество получений для каждого адреса, или использовать функцию Claim Conditions от thirdweb для установки правил, таких как белые списки, временные окна и т. д.

Можно ли использовать другую блокчейн-сеть?

Конечно. Просто замените желаемую сеть в конфигурации getContract и accountAbstraction (например, Polygon, Arbitrum и т. д.). thirdweb поддерживает более 900 EVM-совместимых сетей.

Как развернуть в продакшн?

Разверните код на таких платформах, как Vercel, Netlify, и, получив официальный домен, замените URL Web App в BotFather.

Насколько дорого спонсировать газ?

Бесплатный тариф thirdweb включает определенный лимит спонсируемого газа в месяц, чего вполне достаточно для небольших проектов или тестирования. При большом трафике вы можете перейти на платный план в соответствии с вашими потребностями.

---

Заключение

Этот гайд показал, как создать полноценное Web3 приложение внутри Telegram — от создания кошелька и реализации игровой логики до распределения токенов, все интегрировано бесшовно. Этот стек технологий подходит не только для мини-игр, но и может быть масштабирован для DeFi, NFT, социальных приложений и многого другого.