Недавно Telegram официально открыл доступ к Mini App (мини-приложениям) для разработчиков, что позволяет создавать интерактивные возможности, аналогичные нативным приложениям, прямо внутри Telegram. Сегодня мы пошагово создадим простую, но полноценную Web3 мини-игру, где пользователи смогут создать кошелек, просто введя свой email, сыграть в "камень-ножницы-бумага" и получить токены в качестве награды — и все это без необходимости платить за газ.
Этот гайд не только научит вас создавать и разворачивать Telegram Mini App, но и покажет, как использовать бесплатные функции thirdweb SDK для реализации таких ключевых Web3 возможностей, как абстракция аккаунтов (Account Abstraction), создание кошельков и раздача токенов (airdrop).
Telegram имеет более 800 миллионов активных пользователей в месяц и позволяет разработчикам по всему миру бесплатно разворачивать свои приложения. Для Web3 проектов мини-приложения Telegram предлагают следующие преимущества:
Интегрировав технологию абстракции аккаунтов, вы сможете предоставить пользователям возможность создавать блокчейн-кошельки, используя только email, без необходимости устанавливать расширения для браузера. Это критически важно для снижения барьера входа в Web3 проекты.
Основной процесс игры выглядит так:
Весь процесс не требует от пользователя оплаты каких-либо комиссий за газ (gas fees) и не показывает раздражающих окон подтверждения подписи — это и есть настоящий Web3 опыт без ощутимых усилий благодаря абстракции аккаунтов + спонсированию газа.
В поиске Telegram введите @BotFather и найдите официального бота, затем нажмите "Start".
Введите команду для создания нового бота:
/newbot
Следуйте инструкциям, введя имя и юзернейм (должен заканчиваться на bot), например:
Имя: thirdweb YouTube Demo
Юзернейм: thirdwebYouTubeBot
После успешного создания BotFather вернет токен — сохраните его, это ваш ключ для управления ботом.
Продолжайте в BotFather, введя:
/newapp
Выберите вашего только что созданного бота, затем поочередно введите:
thirdweb Rock Paper Scissors DemoWeb3 Rock Paper Scissors Mini GameTelegram попросит предоставить ссылку для доступа к вашему мини-приложению. Для начала мы разработаем приложение, а затем заполним это поле.
Откройте терминал и выполните:
bun create vite
Выберите:
thirdweb-telegram-miniappReactTypeScript + SWCПерейдите в директорию проекта:
cd thirdweb-telegram-miniapp
Установите библиотеку-адаптер для Telegram Web App:
bun add @vov/react-telegram-web-app
Установите thirdweb SDK:
bun add thirdweb
Откройте index.html и добавьте в тег <head>:
<script src="https://telegram.org/js/telegram-web-app.js"></script>
Этот код сообщит Telegram, что ваше веб-приложение должно запускаться в среде мини-приложения.
npm run dev
Сервис запустится по умолчанию на http://localhost:5174.
Поскольку Telegram требует публичный URL для доступа к вашему мини-приложению, мы временно откроем локальный сервис во внешнюю сеть с помощью ngrok.
Запустите:
ngrok http 5174
ngrok предоставит публичный адрес, например:
https://abc123.ngrok.io
Скопируйте эту ссылку. Вернитесь в BotFather и вставьте ее в поле Web App URL.
Теперь, кликнув по ссылке на мини-приложение в Telegram, вы должны увидеть стандартную страницу Vite!
Перейдите на thirdweb Dashboard, в раздел Settings > API Keys и создайте новый Client ID.
Скопируйте Client ID в файл .env.local в корне вашего проекта:
VITE_CLIENT_ID=your_client_id_here
Оберните ваше приложение в 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>
);
Используйте компонент 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";
};
Пользователь нажимает кнопку → генерируется случайный выбор компьютера → определяется результат → отображается итог.
Вернитесь на thirdweb Dashboard, нажмите Contracts > Deploy и выберите Token Drop.
Настройте:
Rock Paper Scissors TokenRPSBase 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 на своем телефоне, найдите вашего бота и нажмите на ссылку мини-приложения:
Все функции thirdweb, используемые в этом гайде, входят в бесплатный тарифный план, включая создание кошельков, взаимодействие с контрактами и абстракцию аккаунтов. Если вы хотите использовать прямой вход через аккаунт Telegram (без подтверждения по email), вам потребуется перейти на платный тариф.
Вы можете добавить в смарт-контракт логику, ограничивающую количество получений для каждого адреса, или использовать функцию Claim Conditions от thirdweb для установки правил, таких как белые списки, временные окна и т. д.
Конечно. Просто замените желаемую сеть в конфигурации getContract и accountAbstraction (например, Polygon, Arbitrum и т. д.). thirdweb поддерживает более 900 EVM-совместимых сетей.
Разверните код на таких платформах, как Vercel, Netlify, и, получив официальный домен, замените URL Web App в BotFather.
Бесплатный тариф thirdweb включает определенный лимит спонсируемого газа в месяц, чего вполне достаточно для небольших проектов или тестирования. При большом трафике вы можете перейти на платный план в соответствии с вашими потребностями.
Этот гайд показал, как создать полноценное Web3 приложение внутри Telegram — от создания кошелька и реализации игровой логики до распределения токенов, все интегрировано бесшовно. Этот стек технологий подходит не только для мини-игр, но и может быть масштабирован для DeFi, NFT, социальных приложений и многого другого.
Обзор
