Telegram Mini App

​

Introduction

Telegram Mini Apps (or TMAs) are web applications that run inside the Telegram messenger.

Dynamic works out of the box with TMAs, all you need to do is get your app scaffolded, and add Dynamic by following the quickstart guide.

​

Intregration guide

To get started, you can use one of the TMA templates outlined here.

The basic command to scaffold a new TMA is:

npx @telegram-apps/create-mini-app@latest

Cd into the src/components/ directory in Root.tsx file and add the Dynamic Context Provider in the returned TSX:

• Before
• After

<AppRoot
appearance={miniApp.isDark ? 'dark' : 'light'}
platform={['macos', 'ios'].includes(lp.platform) ? 'ios' : 'base'}
>
    <Router location={location} navigator={reactNavigator}>
        <Routes>
        {routes.map((route) => <Route key={route.path} {...route} />)}
        <Route path='*' element={<Navigate to='/'/>}/>
        </Routes>
    </Router>
</AppRoot>

Make sure that you’ve also added the correct imports and the variable for your Dynamic environment ID:

import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core';
import { EthereumWalletConnectors } from '@dynamic-labs/ethereum';

const dynEnv = import.meta.env.VITE_DYNAMIC_ENV_ID || process.env.DYNAMIC_ENV_ID;

That’s it! You should now be able to use Dynamic in your Telegram Mini App..

You can customize the integration further by following the documentation in the generated project README file.

If you have any questions or need help with the integration, feel free to reach out to us in Slack.