Make TON Telegram Mini App 4: Connect TON Wallet, Display TON Wallet Address

Welcome to the fourth guide in the Make TON Telegram Mini App series! This project demonstrates how to implement TON wallet connection functionality and display the connected wallet address in a Telegram Mini App using Next.js 14, TypeScript, and the @tonconnect/ui-react library.

Project Overview

This Telegram Mini App showcases:

Setting up a Next.js 14 project with TypeScript
Implementing TON wallet connection using @tonconnect/ui-react
Managing wallet connection state
Displaying the connected TON wallet address
Formatting and truncating the wallet address for better user experience
Basic TypeScript usage for type safety

Prerequisites

Node.js (version 14 or higher)
npm (comes with Node.js)
A Telegram account
A Telegram Bot Token
GitHub account
Vercel account

Getting Started

Clone the repository:

git clone https://github.com/your-username/Make-TON-Telegram-Mini-App-4.git
cd Make-TON-Telegram-Mini-App-4

Install dependencies:
```
npm install
```

Deployment and Usage

As this is a Telegram Mini App, you can't see the result directly in development mode. Follow these steps to deploy and use the app:

Push your code to a GitHub repository.
Sign up for a Vercel account if you haven't already.
Connect your GitHub repository to Vercel and deploy the app.
Once deployed, Vercel will provide you with a URL for your app.
Use this URL to set up your Telegram Mini App:
- Go to @BotFather on Telegram
- Send the command /newapp or choose to edit an existing bot
- Follow the prompts to set up your Mini App, using the Vercel URL as the Web App URL
Once set up, you can access your Mini App through Telegram on mobile devices or in the Web version of Telegram.

Project Structure

app/layout.tsx: Root layout component with TonConnectUIProvider
app/page.tsx: Main page component with wallet connection logic and address display

Key Features

TON wallet connection and disconnection
Display of connected wallet address with proper formatting
Loading state management
Responsive design with Tailwind CSS

Note on TonConnect Manifest

This demo uses a TonConnect manifest hosted on IPFS. In a production application, you should host your own manifest file and update the URL in the TonConnectUIProvider.

YouTube Channel

For video tutorials and more in-depth explanations, check out my YouTube channel: Nikandr Surkov

Next Steps

Stay tuned for the next guide in the Make TON Telegram Mini App series, where we'll explore more advanced features and deeper TON blockchain integration!

nikandr-surkov/Make-TON-Telegram-Mini-App-4