# Quick Start

Please check our [demo ](http://t.me/tomowalletbot/tomo_sdk_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](https://github.com/FansTech/rainbow-wagmi-example/blob/main/src/pages/wagmi/index.tsx)\
2\. [Rainbowkit](https://github.com/FansTech/rainbow-wagmi-example/blob/main/src/pages/rainbowkit/index.tsx)

### Installation

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

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

or

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

{% code overflow="wrap" %}

```javascript
// 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()
```

{% endcode %}

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

{% code title="" %}

```typescript
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'
    },
  });
}, []);
```

{% endcode %}

### Use the Modal

<img src="/files/QguEl89O6dTRZayKELu7" alt="Modal for user login" class="gitbook-drawing">

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

#### React Framework

{% code overflow="wrap" %}

```typescript
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,
]);

```

{% endcode %}

#### &#x20;pure JavaScript

{% code overflow="wrap" %}

```typescript
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);

```

{% endcode %}

#### 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.&#x20;

{% code overflow="wrap" %}

```typescript
// 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],
};
```

{% endcode %}

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.

<pre class="language-typescript"><code class="lang-typescript">// get provider 
const tomo_ton = window.tomo_ton
<strong>
</strong><strong>// connect wallet
</strong><strong>await tomo_ton?.connectWallet();
</strong><strong>
</strong>// disconnect wallet
await tomo_ton?.disconnect();
</code></pre>

#### GetWalletInfo

After connecting the wallet, we can use `getWalletInfo()`to get which wallet user used.&#x20;

```typescript
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:

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tomo.inc/tomo-sdk/tomo-telegram-sdk/quick-start.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.