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.
npmi@tomo-inc/tomo-telegram-sdk
or
pnpmi@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 featuresimport { TomoWalletTgSdkV2 } from'@tomo-inc/tomo-telegram-sdk';// Initiate with UInewTomoWalletTgSdkV2({ injected:true })// If you do not want UI, you can use newTomoWalletTgSdkV2()
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(() => {newEthereumProvider({ injected:true, overrideRpcUrl: {// Please specify all networks you want to use!// 80084: 'https://bartioXXX.rpc.berachain.com' }, });}, [])
Use the Modal
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' } asRecord<number,string>}><YourApp /></TomoProvider>const { openConnectModal, providers } =useTomo();openConnectModal();// get provider, for example, ton provideruseEffect(() => {consttomo_ton=providers.tomo_ton; tomo_ton &&setTomoTonProvider(tomo_ton);}, [providers.tomo_ton?.connected,providers.tomo_ton?.account,]);
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 wayawaitinitTomoModal({... supportedConnects: [CONNECT_MAP.TOMO_MINI_APP,CONNECT_MAP.OKX_CONNECT,CONNECT_MAP.TON_CONNECT,CONNECT_MAP.BITGET_WALLET,CONNECT_MAP.UXUY_WALLET, ],...} asinitTomoModalParams);// Supported CONNECT_MAP and chain typeexportenumCONNECT_MAP { TOMO_MINI_APP ='Tomo Mini App', OKX_CONNECT ='OKX Connect', TON_CONNECT ='TON Connect', BITGET_WALLET ='Bitget Wallet', UXUY_WALLET ='UXUY',}exportconstChainIdWithConnectsMap= { 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 consttomo_ton=window.tomo_ton// connect walletawaittomo_ton?.connectWallet();// disconnect walletawaittomo_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: