​
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.

You can see a live example of a Dynamic integration in a TMA when using Flooz.

​
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:

<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.

Bear in mind if you’re enabling branded wallet login support, you’ll want to set the mobileExperience prop to redirect in the Dynamic Context Provider. We default to the in-app browser, but this can cause issues for the Telegram Mini App implementation.

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.

Was this page helpful?

Deploy a Safe account with DynamicCo:Create & Dynamic Integration