Telegram Mini dApp Template

Create Aptos Dapp Telegram Mini dApp Template

This template provides a ready to use clicker game dapp that can be run as a Telegram Mini App. It uses the Aptos Wallet Adapter to give you out of the box support. Under the hood, it’s powered by Mizu Wallet.

With this dapp, you can:

Create a clicker game on Aptos integrated in Telegram.
Modify a pre-made UI to build a Staking dapp users can quickly adjust.
Learn how to write a Move contract and front end connected to that contract.

Generate the Telegram mini dApp template

On your terminal, navigate to the directory you want to work in and run:

Follow the CLI prompts.

Publish the clicker game Move contract

On the project root folder, run the below command to publish the contract.

You will have to confirm the gas fee in the console.

This command will:

Publish the contract to chain.
Set the VITE_MODULE_ADDRESS in the .env file to set the contract object address.

Deploy the dapp to a live server

After you have published the Move contract to chain

Run the app and open the preview.

This will spin up a local server and open the dapp in your browser.

Deploy to a live server

create-aptos-dapp provides an npm command to easily deploy the static site to Vercel.

At the root of the folder, simply run

Then, follow the prompts. Please refer to Vercel docs to learn more about the Vercel CLI

If you are looking for different services to deploy the static site to, create-aptos-dapp utilizes Vite as the development tool, so you can follow the Vite deployment guide. In a nutshell, you would need to:

Run npm run build to build a static site
Run npm run preview to see how your dapp would look like on a live server
Next, all you need is to deploy your static site to a live server, there are some options for you to choose from and can follow this guide on how to use each

Deploy to Telegram

Create a Telegram bot

Start a chat with BotFather, use the /newbot command to create a new bot. You can learn more about the process at Telegram Docs.

Create a Telegram mini app

Use the /newapp command to create a new mini app and link the mini app with the bot you just created. When BotFather asks for the mini app’s URL, provide the URL of the frontend you deployed in the previous step. You can learn more about the process at Telegram Docs.

Set the menu button of the bot to open the mini app

Use the /mybots command to find your bot, choose bot settings -> menu button -> configure menu button, provide the mini app’s name and URL. Now you can access the mini app from your bot’s menu. You can learn more about the process at Telegram Docs.

Ready for Mainnet

If you started your dapp on testnet, and you are happy with your asset testing, you will want to get the asset on mainnet.

Creating an asset on mainnet is the same flow as creating on testnet, but we need to change some configuration.

Note: Make sure you have created an existing account on the Aptos mainnet

Change the APP_NETWORK value to mainnet
Update the MODULE_PUBLISHER_ACCOUNT_ADDRESS to be the existing account address
Update the MODULE_PUBLISHER_PRIVATE_KEY to be the existing account private key
Run npm run move:publish to publish your move module on Aptos mainnet.

API Key

If you are using an API Key, make sure to update the VITE_APTOS_API_KEY with your MAINNET API Key.
If you are not using an API Key, make sure to create one and update the VITE_APTOS_API_KEY with your API Key.

Update the look and feel of the dapp

This template is styled with Tailwind CSS and shadcn/ui. These libraries provide the app with a neutral and clean look and feel while leaving it open to a lot of customization so that you can make the app truly yours.

Please refer to the following questions in the FAQ to learn about how to customize the UI of your dapp: