Openfort has expanded its reach by deploying its wallet technology to Saakuru, a gaming blockchain platform

Openfort smart wallet deployment on Saakuru gaming blockchain

Openfort adds Saakuru


You can now design and deploy your own ecosystem wallet directly from your browser. Our new **Ecosystem Customization Tool** lets you control everything from visual themes to technical setup without writing a single line of code.

## What is the Ecosystem Customization Tool?

The Ecosystem Customization Tool is a visual interface within the Openfort dashboard that allows developers to brand and configure their cross-app wallets. You can select themes, define color palettes, and manage package dependencies intuitively. This tool removes the technical friction of manual wallet configuration, ensuring your ecosystem has a unified look and feel across every application.

## How we got here
When we launched **Ecosystem V1** two months ago, we prioritized giving developers the flexibility to customize essential parts of their wallet stack. This approach resonated with technical users, enabling them to fine-tune their wallets with precision.

However, we noticed an opportunity to make this process more accessible for everyone, regardless of technical expertise. That’s why we created the **Ecosystem Customization Tool**: to empower all users—developers and non-developers alike—to shape their wallet experience intuitively.

## How it works

![customize-ecosystem.png](/images/blog/customize_ecosystem_299be739d8.png)

The Ecosystem Customization Tool is designed to be straightforward and user-friendly. Here’s what you can do:

1. **Choose a theme:** Select from a range of prebuilt themes or start fresh with a blank canvas.
2. **Customize colors:** Define a color palette that matches your brand or personal preferences.
3. **Download packages with ease:** Streamline the setup process by managing dependencies through an intuitive downloader.

With these features, creating a wallet that reflects your style and functionality is just a few clicks away.

## What's next
This is just the beginning. As we continue to improve the **Ecosystem Customization Tool**, we aim to add even more options for design and functionality, ensuring you have everything needed to craft a seamless wallet experience.

Start building your [customized ecosystem wallet today](https://www.openfort.io/docs/products/cross-app-wallet/setup/react/wallet-ui).

## Related reading

- [Announcing Ecosystem Wallet V2](/blog/announcing-ecosystem-wallet-2) -- the V2 release that introduced the foundation this customization tool builds on
- [Ecosystem V3: improvements on UX and DevEx](/blog/ecosystem-v3) -- the latest ecosystem release with advanced theming, responsive UI, and agnostic signers
- [Cross-app wallets explained](/blog/cross-app-wallet-explained) -- understand why cross-app wallets need consistent branding and customization
- [Embedded wallets explained](/blog/embedded-wallet-explained) -- learn how embedded wallets work alongside ecosystem wallets
- [Introducing global wallets with the Ecosystem SDK](/blog/gaming-ecosystems) -- see the broader vision for ecosystem wallets across games and apps


Enabling an even easier way to customize your ecosystem wallet directly from your browser

Ecosystem wallet customization tool for no-code design and deployment

Ecosystem Customization Tool


Telegram Mini-Apps allow developers to reach over 950 million active users within a single messenger. Built with standard web technologies like React, these lightweight apps bypass the friction of separate downloads.

## What is a Telegram Mini-App?

A Telegram Mini-App is a web application that runs directly inside the Telegram interface. It uses the Telegram Web Apps SDK to interact with the bot API, allowing for a seamless experience that feels native to the messenger. By integrating Openfort, developers can add on-chain features like non-custodial wallets and NFT minting, making it easy for players to earn and trade digital assets without leaving their chat.

In this guide, you’ll learn how to build a React-based Mini-App with Openfort to handle on-chain interactions.


**The repository for this tutorial can be found [here](https://github.com/openfort-xyz/sample-telegram).**

Test it live via Telegram by chatting with **@OpenfortMiniAppBot**.

## Step 0: Overview and Architecture

Before diving into the implementation, it’s important to understand the high-level structure and flow of the Telegram Mini-App you’ll build.

### Key Components

1. **Frontend (Client-Side)**:
   - Built with **React** using the Telegram Web Apps SDK.
   - Handles the user interface and state management.
   - Processes `initData` received from Telegram for authentication.
   - Provides interactions for minting NFTs and viewing wallet information.

2. **Backend (Server-Side)**:
   - Built with **Node.js** and **Express**.
   - Validates `initData` for security and ensures the user is authenticated.
   - Integrates with Openfort’s SDK to manage smart wallets and sponsored transactions.
   - Exposes API endpoints for NFT minting and wallet generation.

### Telegram Authentication Flows

Telegram provides two distinct methods for authentication within Mini-Apps:

1. **`initData` Flow**:
   - Used within the Mini-App environment.
   - Relies on Telegram to authenticate the user via the `initData` object.
   - No refresh token is involved, as Telegram handles re-authentication for subsequent sessions.

2. **OAuth Flow**:
   - More versatile and works in browsers or platforms outside the Mini-App context.
   - Returns an access token/refresh token pair, similar to logging in with Google.
   - Suitable for broader integrations where the user isn't already within the Telegram app.

**This guide focuses on the `initData` flow**, which is specially designed for seamless use in Telegram Mini-Apps.

### High-Level Flow

![telegram-screenshot.png](/images/blog/telegram_screenshot_601db8f889.png)

Here’s how the application will work end-to-end:

1. The user opens the Telegram Mini-App from a bot.
2. Telegram sends `initData` to the Mini-App containing signed user information.
3. The frontend sends this `initData` to the backend for validation.
4. The backend:
   - Validates `initData` using Telegram-provided cryptographic methods.
   - Creates a self-custodial wallet using Openfort.
   - Returns relevant user data and wallet information to the frontend.
5. The user interacts with the Mini-App:
   - Minting NFTs.
   - Viewing wallet details.
   - Executing blockchain transactions.

## Objectives

By the end of this tutorial, you will have:

1. Set up a **Telegram Mini-App** using React.
2. Integrated Openfort’s SDK for **embedded wallet creation**.
3. Built backend routes to handle Telegram authentication and on-chain interactions.


## Step 1: Set Up the Telegram Mini-App

### 1.1 Create a Bot and Mini-App with BotFather
1. Add BotFather to your Telegram and run `/newbot`.
2. Follow the prompts to name your bot and get its access token.
3. Add this token to the [Openfort authentication provider settings](https://dashboard.openfort.io/players/auth/providers).
4. Run `/newapp` to create a Mini-App linked to your bot. Use your ngrok URL as the app’s URL (we’ll set this up next).

## Step 2: Clone and Configure the Project

### 2.1 Clone the Repository
```bash
git clone https://github.com/openfort-xyz/sample-telegram-mini-app-embedded-wallet
cd sample-telegram-mini-app-embedded-wallet
```

### 2.2 Set Up Environment Variables
In the `/frontend` and `/backend` directories, copy and configure `.env.example` files:
```bash
cp .env.example .env
```

- **Frontend `.env`:**
  ```env
  NEXT_PUBLIC_TELEGRAM_BOT_TOKEN=<your-bot-token>
  NEXT_PUBLIC_OPENFORT_PUBLISHABLE_KEY=<your-publishable-key>
  NEXT_PUBLIC_OPENFORT_POLICY_ID=<your-policy-id>
  NEXT_PUBLIC_OPENFORT_CHAIN_ID=<your-chain-id>
  ```

- **Backend `.env`:**
  ```env
  BOT_TOKEN=<your-bot-token>
  FRONTEND_APP_ORIGIN=<your-ngrok-url>
  ```

## Step 3: Run the Application

### 3.1 Install Dependencies
```bash
# In frontend directory
cd frontend && yarn install

# In backend directory
cd ../backend && yarn install
```

### 3.2 Start Services
```bash
# Start frontend
yarn start

# Start backend
yarn dev
```

Use `ngrok` to expose your local server:
```bash
ngrok http 3000
```

Update the Mini-App URL in BotFather with your ngrok HTTPS link.

## Step 4: Key Integration Features

### Telegram Authentication
The app uses `initDataRaw` from the Telegram Web Apps SDK for third-party authentication. No additional refresh tokens are needed.

### Embedded Wallet
With Openfort’s SDK, users can:
1. Create a **non-custodial wallet**.
2. Mint NFTs using predefined policies.

### API Routes
The backend provides endpoints for:
1. `/api/createAuthConfig`: Configures authentication.
2. `/api/createEncryptionSession`: Sets up a session for wallet creation.
3. `/api/mintNft`: Facilitates NFT minting.

## Example Code Snippets

### Telegram Bot Integration
In `/backend/src/bot/features/openfort.ts`:
```typescript
feature.command('start', async (ctx) => {
  const keyboard = new InlineKeyboard().webApp(
    'Launch App',
    `${process.env.FRONTEND_APP_ORIGIN}/login/telegram`,
  )
  return ctx.reply('Click to launch.', { reply_markup: keyboard })
})
```

### Wallet Initialization
In `/frontend/src/app/login/telegram/page.tsx`:
```typescript
useEffect(() => {
  const initTelegram = async () => {
    const telegramSDK = Telegram.WebApp;
    telegramSDK.ready();
    const wallet = await openfort.createWallet({ user: telegramSDK.initData });
    setWallet(wallet);
  };
  initTelegram();
}, []);
```

## Conclusion

You’ve built a Telegram Mini-App with **React** that:
- Authenticates users via the Telegram SDK.
- Generates EVM-compatible **non-custodial wallets**.
- Facilitates on-chain interactions, such as NFT minting.


For further details, check:
- [Openfort Documentation](https://www.openfort.io/docs/)
- [Telegram Web Apps SDK Docs](https://core.telegram.org/bots/webapps)
- [Repository README](https://github.com/openfort-xyz/sample-telegram-mini-app-embedded-wallet)

## Related reading

- [How to build a Telegram Mini-App with Unity WebGL](/blog/how-to-build-telegram-mini-app-in-unity-webgl) -- if you are building a game-based Mini-App, this guide covers Unity WebGL integration with Openfort
- [Embedded wallets explained](/blog/embedded-wallet-explained) -- understand how the non-custodial wallets created in this tutorial work under the hood
- [Cross-app wallets explained](/blog/cross-app-wallet-explained) -- learn how wallets can follow users across multiple apps in an ecosystem
- [Onboard users instantly with guest accounts](/blog/guest-accounts) -- reduce onboarding friction even further by letting users start without authentication
- [Introducing global wallets with the Ecosystem SDK](/blog/gaming-ecosystems) -- see how ecosystem wallets unify the player experience across games and apps


Learn to build a Telegram Mini-App in React with Openfort's SDK for non-custodial wallet creation, NFT minting, and smooth Web3 transactions. Try it now!

Telegram Mini-App development with React and Web3 wallet integration

How to Build Telegram Mini-Apps with React

- [What is Saakuru?](#what-is-saakuru)
- [Saakuru: A Next-Generation Gaming Blockchain](#saakuru-a-next-generation-gaming-blockchain)
- [Openfort: Empowering Wallet Abstractions](#openfort-empowering-wallet-abstractions)
- [The Collaboration](#the-collaboration)

Saakuru: A Next-Generation Gaming Blockchain

Openfort has deployed its smart wallet infrastructure to Saakuru, a gaming-focused blockchain. This collaboration makes it easier for developers to launch onchain games with seamless player onboarding and gasless transactions.

 is an EVM-compatible Layer 2 blockchain designed for high-performance gaming. Built on Oasys rollups, it offers 1-second transaction confirmation times and a "gas-less" environment for players. By using a fee delegation model, the network allows developers to absorb transaction costs, ensuring that the blockchain stays invisible and friction-free for the end user.

[Saakuru](https://saakuru.com/) is an EVM-compatible Layer 2 blockchain designed for high-performance gaming. Built on Oasys rollups, it offers 1-second transaction confirmation times and a "gas-less" environment for players. By using a fee delegation model, the network allows developers to absorb transaction costs, ensuring that the blockchain stays invisible and friction-free for the end user.

[Saakuru: A Next-Generation Gaming Blockchain](#saakuru-a-next-generation-gaming-blockchain)

Saakuru is an all-in-one blockchain app and L2 infrastructure serving both business (B2B) and consumer (B2C) users. Key features include:

: Saakuru is a public, permissioned Layer 2 blockchain built on Oasys rollups, compatible with the Ethereum Virtual Machine (EVM).

**EVM-Compatible Layer 2**: Saakuru is a public, permissioned Layer 2 blockchain built on Oasys rollups, compatible with the Ethereum Virtual Machine (EVM).

: It achieves an average transaction confirmation time of 1 second, significantly enhancing performance.

**High-Speed Transactions**: It achieves an average transaction confirmation time of 1 second, significantly enhancing performance.

: Saakuru adopts a fee delegation model where the network operator absorbs transaction fees, creating a gas-less environment for users.

**Gas-Free Environment**: Saakuru adopts a fee delegation model where the network operator absorbs transaction fees, creating a gas-less environment for users.

[Openfort: Empowering Wallet Abstractions](#openfort-empowering-wallet-abstractions)

Openfort provides the infrastructure that scales onchain game development. Here is what we bring to the Saakuru ecosystem:

: Leveraging the ERC-4337 standard, Openfort enables seamless in-game transactions without continuous signatures or verification.

**Wallet Abstraction**: Leveraging the ERC-4337 standard, Openfort enables seamless in-game transactions without continuous signatures or verification.

: Openfort's backend servers can handle up to 500 write transactions per second, making them ideal for high-performance gaming applications.

**Transaction Cloud**: Openfort's backend servers can handle up to 500 write transactions per second, making them ideal for high-performance gaming applications.

: The Openfort Identity service organizes onchain identities into Auth, Signer, and Account layers, offering a modular structure for developers.

**Flexible Identity Management**: The Openfort Identity service organizes onchain identities into Auth, Signer, and Account layers, offering a modular structure for developers.

By deploying its infrastructure on Saakuru, Openfort is set to enhance the blockchain's ecosystem in several ways:

: Game developers on Saakuru can now use Openfort's tools to create more engaging and user-friendly onchain games.

**Improved Developer Experience**: Game developers on Saakuru can now use Openfort's tools to create more engaging and user-friendly onchain games.

: The combination of Saakuru's high-speed transactions and Openfort's efficient infrastructure leads to a better player experience.

**Enhanced Performance**: The combination of Saakuru's high-speed transactions and Openfort's efficient infrastructure leads to a better player experience.

: Openfort's Embedded Wallet solution provides a smooth entry point for new players on the Saakuru platform.

**Seamless Onboarding**: Openfort's Embedded Wallet solution provides a smooth entry point for new players on the Saakuru platform.

Openfort adds Saakuru

In this article

Let your business run on stablecoins

In this article

Let your business run on stablecoins

What is Saakuru?

Saakuru: A Next-Generation Gaming Blockchain

Openfort: Empowering Wallet Abstractions

The Collaboration

Keep Reading

How to Build Telegram Mini-Apps with React

Ecosystem Customization Tool

Try Openfort Free