Quick Start

Please check our demo application to experience what you can do with Tomo Telegram SDK. We provide some demo examples for you to initiate a project with Tomo SDK: 1. Wagmi 2. Rainbowkit

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 one of the following choices according to your application once in the application.

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

// Initiate with UI
new TomoWalletTgSdkV2({ injected: true })

// If you do not want UI, you can use 
new TomoWalletTgSdkV2()

If you only use EVM providers, you can use the following way to initiate the EVM provider only:

import { EthereumProvider } from '@tomo-inc/tomo-telegram-sdk/tomoEvmProvider.esm';

useEffect(() => {
  const ethereumProvider = new EthereumProvider({
    injected: true,
    overrideRpcUrl: {
      // Specify all networks you want to use here.
      // Example:
      // 80084: 'https://bartioXXX.rpc.berachain.com'
    },
  });
}, []);

Use the Modal

Modal for user login

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

React Framework

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

// Configure your app with Tomo provider. 
// For example, use the Ton provider only
<TomoProvider
  theme='light'
  supportedProviders={['TON']}
  manifestUrl={'https://d8o5s6z018yzr.cloudfront.net/manifestUrl.json'}
  tomoOptions={{
    metaData: {
        icon:
        'your app icon',
        name: 'your app name',
        url: location.origin + '/testing'
    },
    }}
    overrideTomoRpcUrls={{
      // Please specify all EVM RPC nodes you want to use!
      // 80084: 'https://bartioXXX.rpc.berachain.com'
    } as Record<number, string>}
>
  <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,
]);

pure JavaScript

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'],
  supportedConnects:['CONNECT_MAP.TON_CONNECT']
  manifestUrl: 'https://d8o5s6z018yzr.cloudfront.net/manifestUrl.json', // manifest for ton connect
} as initTomoModalParams);

Connect Other Wallets

Other than the Tomo native provider based on the user's Tomo Telegram SDK Wallet, users can connect to their OKX Telegram wallet/OKX web3 wallet, Bitget Wallet, UXUY wallet, or TON Native Wallet by different connect maps. The developer can control this through the parameters of supportedConnects in the TomoProvider⁣. More EVM connectors are coming soon.

// react way
<TomoProvider
  ...
  supportedProviders={['EVM']}
  supportedConnects={[CONNECT_MAP.TOMO_MINI_APP, CONNECT_MAP.OKX_CONNECT, CONNECT_MAP.TON_CONNECT,
    CONNECT_MAP.BITGET_WALLET]}
  tomoOptions={{
        metaData: { // this is required by OKX and Bitget wallet
              icon:'your app icon',
              name: 'your app name',
              url: location.origin + '/testing'
        },
    }}
    useEvmChains={chains} // an array of numbers to indicate chained when connecting to OKX and Bitget. OKX and Bitget wallet require this field.
    ...
>

>
  <YourApp />
</TomoProvider>>

// javascript way
await initTomoModal({
 ...
  supportedConnects: [
    CONNECT_MAP.TOMO_MINI_APP,
    CONNECT_MAP.OKX_CONNECT,
    CONNECT_MAP.TON_CONNECT,
    CONNECT_MAP.BITGET_WALLET,
    CONNECT_MAP.UXUY_WALLET, 
  ],
  ...
} 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',
  BITGET_WALLET = 'Bitget Wallet',
  UXUY_WALLET = 'UXUY',
}

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, CONNECT_MAP.BITGET_WALLET, CONNECT_MAP.UXUY_WALLET],
};

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, Sui, Solana, and TON networks, and we plan to add support for BTC soon.

// get provider 
const tomo_ton = window.tomo_ton

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

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

GetWalletInfo

After connecting the wallet, we can use getWalletInfo()to get which wallet user used.

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

getWalletInfo()

// return value contains:
// {
//    name: 'wallet name',
//    icon: 'url to icon',
//    type: CONNECT_MAP,
// }

In react framework, you can directly fetch the wallet info:

const {openConnectModal, providers, walletInfo} = useTomo();