Quick Start

Please check our demo application to experience what you can do with Tomo Telegram SDK.

Installation

Tomo Telegram SDK is published and maintained through NPM. Use the following commands for installing the package.

npm i @tomo-inc/tomo-telegram-sdk

or

pnpm i @tomo-inc/tomo-telegram-sdk

Initialization

Initiate the SDK with the following code once in the application.

import { TomoWalletTgSdkV2 } from '@tomo-inc/tomo-telegram-sdk';

new TomoWalletTgSdkV2({ injected: true })

Use the Modal

Modal for user login

Developers need to associate the modal with the login button in UI so the user can log in through our SDK.

import { TomoProvider, CONNECT_MAP, useTomo } from '@tomo-inc/tomo-telegram-sdk';
import '@tomo-inc/tomo-telegram-sdk/dist/styles.css'

// Configure your app with ton provider, for example, use Ton provider
<TomoProvider
  theme='light'
  supportedProviders={['TON']}
  manifestUrl={'https://d8o5s6z018yzr.cloudfront.net/manifestUrl.json'}
  tomoOptions = {{
    metaData: {
      name: 'your app name',
      icon: 'icon url'
    }
  }}
>
  <YourApp />
</TomoProvider>

const { openConnectModal, providers } = useTomo();

openConnectModal();

// get provider, for example, ton provider
useEffect(() => {
  const tomo_ton = providers.tomo_ton;
  tomo_ton && setTomoTonProvider(tomo_ton);
}, [
  providers.tomo_ton?.connected,
  providers.tomo_ton?.account,
]);

In addition to the react framework, we support pure JavaScript for initiating the modal.

import '@tomo-inc/tomo-telegram-sdk/dist/styles.css';
import { initTomoModal, initTomoModalParams, CONNECT_MAP } from '@tomo-inc/tomo-telegram-sdk';

await initTomoModal({
  onConnect: () => {
    console.log('connected!');
  },
  supportedProviders: ['TON'],
  manifestUrl: 'https://d8o5s6z018yzr.cloudfront.net/manifestUrl.json', // manifest for ton connect
} as initTomoModalParams);

In addition to the Tomo native provider based on the user's Tomo Telegram SDK Wallet, users can connect to their OKX Telegram wallet/ OKX web3 wallet by selecting OKX Connect or TON Native Wallet by TON Connect. The developer can control this through the parameters of supportedConnects in the TomoProvider. More EVM connectors are coming soon.

// react way
<TomoProvider
  ...
  supportedConnects={[CONNECT_MAP.TOMO_MINI_APP, CONNECT_MAP.OKX_CONNECT, CONNECT_MAP.TON_CONNECT ]}
  ...
>
  <YourApp />
</TomoProvider>>

// javascript way
await initTomoModal({
 ...
  supportedConnects: [
    CONNECT_MAP.TOMO_MINI_APP,
    CONNECT_MAP.OKX_CONNECT,
    CONNECT_MAP.TON_CONNECT,
  ],
  ...
} as initTomoModalParams);

// Supported CONNECT_MAP and chain type
export enum CONNECT_MAP {
  TOMO_MINI_APP = 'Tomo Mini App',
  OKX_CONNECT = 'OKX Connect',
  TON_CONNECT = 'TON Connect',
}

export const ChainIdWithConnectsMap = {
  SOL: [CONNECT_MAP.TOMO_MINI_APP],
  TON: [CONNECT_MAP.TOMO_MINI_APP, CONNECT_MAP.OKX_CONNECT, CONNECT_MAP.TON_CONNECT],
  EVM: [CONNECT_MAP.TOMO_MINI_APP, CONNECT_MAP.OKX_CONNECT],
};

We unify the providers' interfaces into providers across all different wallet solutions so you can use them transparently.

Connect/Disconnect Wallet Providers

You can connect wallet providers for the chain you want to use. Currently, our SDK supports the EVM chains, Solana, and TON networks, and we plan to add support for BTC and Sui soon.

// get provider 
const tomo_ton = window.tomo_ton

// connect wallet
await tomo_ton?.connectWallet();

// disconnect wallet
await tomo_ton?.disconnect();