How To Deploy A Web Application On Telegram Using BNB Chain

Objectives 

• Building a full stack dApp

• Integrating your web app with Telegram

• Creating a game using the mini-app on Telegram

We will start by introducing the different components needed to start a Telegram web app. Then, we will discuss how to deploy the web app on Telegram. Finally, we will deploy a mini-app and create a Telegram game that can be shared with others. A batch of useful resources will be listed at the end of this guide. 

Step by Step Video Guide 

Creating A Web Application 

Let’s start with the web application. We have already created a simple web application for the sole purpose of this demo, as shown in the image below. To begin, head to the “Connect Wallet” button at the top right. Once you click on the button, you will get a long list of wallet options from which you can choose. For this demo, we will be using MetaMask. After selecting MetaMask, you can connect using the wallet account. Once you are connected, you can begin exploring the web application.

The application in this example is a simple counter application. Increment the counter to set the value at 10. Once done, you can claim the game token, called the GT token. Sign the transaction to claim the token. Wait for a few seconds for the tokens to reflect in your wallet. You can open your MetaMask wallet and check if the tokens are present. In some cases, the tokens take a little time to reflect in the wallet. In such a scenario, refresh the list and check again.

Sign the transaction and claim the GT token

Once the GT token has been deposited into your wallet, you can mint the game NFT. You will have to sign another transaction through MetaMask to mint the NFT. Once confirmed, the NFT will be reflected in your wallet.

Mint the NFT using the GT token 

A Deeper Dive Into The Project Structure 

Let’s delve into the code implementation by examining the project structure. The Explorer on the left contains several folders. The contract folder, for instance, houses all the smart contract ABIs. Since we’re using WAGMI, we need to type-assert the ABI file, which involves changing the JSON Format to TypeScript format.

Organizing web components into folders

Once this is done, we can organize the different web components into folders. As can be seen in the Explorer, there is the “claim token” button, the “connect” button, the counter button, and the mint button.

Web3Modal Configuration

Now, let’s look at the Web3Modal configuration. We can get the project ID from the Wallet Connect dashboard. You can also specify the default chain. For our demo, we will be using the BSC test net. Once the chain is selected, we can specify the metadata. Once the configuration is completed, we can create the Web3Modal. Once the Web3Modal has been created, the children components can be wrapped in the wrapper.

Deploying The Web App On Telegram

To deploy as a mini app on Telegram, we will first have to deploy the web app as a static web page. For our demo, we are using GitHub pages. You don’t have to use GitHub pages specifically; you can also use other services. To create a bot, we will create a bot using Bot Father and then link the mini app with the bot. 

Bot Father interface

Now, let’s create a new bot using the command /newbot. You can also give the bot a name. For our bot, we will use the name BNB bot. Once we have named our bot, we have to select a unique username. You can select any available usernames, like “BNB demo bot.” Once the bot is created, it can be used to create a new mini-app. You can use the command /newapp to create the new mini app.

Next, select the bot created (BNB demo bot) and name the new mini app. For our demo, we have named the mini app BNB counter. Once you have named the mini app, you will be required to describe the app. Next, you must upload a photo for the application. Keep in mind however, the photo must be of a specific pixel size.

Once this is done, copy the web app URL and paste it into the Bot Father window. Set a short name for the URL. With this step, the mini app has been created. If we open it, it will open the same web app as in the browser. You can now connect the mini app to MetaMask.

Create A New Telegram Game

Now that we have the Telegram mini app ready, we can create a new Telegram game. In this demo, we will use the mini app URL and set up the game using the command /newgame on Bot Father. After this, we can connect the game to the bot we created. Head back to Bot Father to create the game. We will be using the same bot to create a new game. Before creating a new game, we must set up an inline bot. You can set an inline bot using the /setinline command. Next, select the bot and the inline message for the bot. Once this is done, accept Telegram’s terms and conditions to move ahead.

Now, we can create a new game using the bot. To do this, you will have to repeat a few steps. You will have to enter the name of the game and provide a short description. After this, you will have to upload the photo again. The photo must be of the exact dimensions as the photo uploaded previously. You will then be prompted to add a gif. However, you can skip this step by entering /empty. You can add a GIF later using the /editgame command.

Create a short name for the URL and share the link with your friends on Telegram. For starters, we will send the link to our account. Now, you can set up the game by opening the game URL. To do this, we must configure the buttons to open the URL. Let’s see how.

Simple bot script

To configure the buttons, go to the simple bot script. The simple bot script allows users to type the / command and gives them the inline keyboard, allowing the user to invoke a function using the assigned keyboard function. We can test this function out later.  For now, we will get the bot token from our bot. To do this, select the bot and click on “API Token.” Next, copy it to the environment file and then run the script. In the terminal, type “python main.py” to run the script.

Run the script in the terminal

Now, return to the link sent to our Telegram account and click the “Play” button. This will redirect you to the mini app. Launch the app and see if it is working.The game should launch now. 

Before we wrap up, let’s see how the start buttons to launch the game were configured. To do this, search for the BNB demo bot in the Telegram app and click on the “Start” button. When you press the start button, the bot sends the game message with the “Play game” button and the “Help” button.

Game button configuration

Let’s go back to the code and inspect. In the code, we have added two keyboard buttons, “Play This Game” and “Help.” When the help button is clicked, the bot should send a help message. Similarly, when clicking the “Play This Game” button, the bot should send the mini-game. To test this, go back to the bot and press the “Help” button. You should receive a help message. Click on the “Play This Game” button and it should launch the mini app. 

Resources 

- WebApp demo: https://github.com/kang5647/bnb-telegram-demo 

- Web3Modal SDK: https://docs.walletconnect.com/appkit/overview 

- Connecting TG bot to game: https://github.com/kang5647/bnb-game-bot-py 

- Telegram bot API: https://docs.python-telegram-bot.org/en/stable/index.html