View live demo on Telegram: https://t.me/KittyKombatLiteBot/app/
Watch tutorial: https://youtu.be/w70ICeVh6fY
Deploy your own onchain Telegram game powered by Flow blockchain: 1-Click Starter
You can follow this video tutorial on how to setup your onchain Telegram game
- Create accounts and gather credentials:
- Vercel account for deployment
- Magic.link account for custodial wallets
-
Visit Vercel and sign in
-
Add a new project and import your repo
- Before you click deploy, choose
build and output settings
and add the following custominstall command
npm install --legacy-peer-deps
- Click on the Deploy button and save your domain URL
-
Visit https://magic.link and sign in
-
Create a
new app
and enableemail
andsms
login
- Go to
Settings
andAdd Domain
from your Vercel deployment toAllowed Origins & Redirects
and pressSave
- Save your publishable api key and add it to your Vercel
Environment Variables
under your Vercel project'sSettings
. Remember to pressSave
NEXT_PUBLIC_MAGIC_API_KEY
- Redeploy your latest build to make sure the magic api key environment variable gets added to your app.
-
Go to BotFather on Telegram, the official bot for managing Telegram bots and web apps.
-
Create a Telegram Bot
Use the command
/newbot
- Create a Telegram App
Use the command
/newapp
- Configure Menu Button
Use the command /mybots
, choose your Telegram bot to access Bot Settings
-> Menu Button
-> Configure menu button
, type in your domain URL and enter the text to be displayed on your button (E.g. "Play")
- Configure Mini App
Go to Bot Settings
-> Configure Mini App
-> Enable Mini App
and type in your domain URL.
-
Your Magic.link publishable key
NEXT_PUBLIC_MAGIC_API_KEY
is safe to commit -
Add
.env
to your.gitignore
file if it's not already there
- Create a
.env
file in your project root:
NEXT_PUBLIC_MAGIC_API_KEY=your_magic_publishable_key
- Install dependencies:
npm install
- Run the project:
npm run dev