# Quick Start

To use Tomo Web SDK, you need to install the following:

```bash
npm install @tomo-inc/tomo-web-sdk
```

or

```bash
pnpm i @tomo-inc/tomo-web-sdk
```

### Prepare the Client ID

1. [Talk to us](https://docs.google.com/forms/d/e/1FAIpQLSfqMQH80c9Py0V1rNDgfXqL8kNXKn66WMCgtczNLriruJicjw/viewform) to create an developer account.
2. Log in to the [Tomo Developer Dashboard](https://dashboard.tomo.inc/).
3. Create a new project and copy the generated `clientId`.
4. Use this `clientId` in your `TomoContextProvider`.

<figure><img src="https://159454010-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKx6QtlW3V2up9KOIn1lx%2Fuploads%2FCcdpUAY5vK19Tv5FgORS%2FScreenshot%202025-02-15%20at%2008.38.48.png?alt=media&#x26;token=14062adb-d227-4347-8d25-ff1d5f81b8aa" alt=""><figcaption><p>Tomo's Developer Dashboard</p></figcaption></figure>

### Initialize Tomo Web SDK

Set up  `TomoContextProvider` using the `clientId` from the first step. For react framework:

{% code overflow="wrap" %}

```tsx
import { TomoContextProvider } from '@tomo-inc/tomo-web-sdk';

<TomoContextProvider
  theme="light"
  chainTypes={['solana','tron','movement']}
  clientId="your client Id"
>
  <YourApp />
</TomoContextProvider>
```

{% endcode %}

For pure Javascript project:

<pre class="language-javascript"><code class="lang-javascript">import { initTomoModal } from '@tomo-inc/tomo-web-sdk';
import '@tomo-inc/tomo-web-sdk/style.css'

initTomoModal({
  theme: "light",
  clientId: "your client Id",
  chainTypes: ['solana'],
<strong>  onConnect: (walletState) => {
</strong>    console.log('onConnect', walletState)
  },
})
</code></pre>

#### Use Tomo

We expose the wallet state and functions through `useTomo()` method

```tsx
function useTomo() {
  const tomoModal = useAtomValue(tomoModalAtom)
  const tomoModalControl = useTomoModalControl()
  const tomoWalletState = useTomoWalletState()
  const tomoClientMap = useTomoClientMap()
  const tomoWalletConnect = useTomoWalletConnect()

  return {
    opened: tomoModal.open,
    openConnectModal: tomoModalControl.open,
    closeConnectModal: tomoModalControl.close,
    connected: tomoWalletState.isConnection,
    disconnect: tomoWalletConnect.disconnect,
    solanaAddress: tomoWalletState.solanaAddress,
    providers: {
      solanaProvider: tomoClientMap.solanaProvider
    }
  }
}
```

To connect a wallet, call `openConnectModal` to display the modal.

```tsx
// react
const { openConnectModal } = useTomo();
openConnectModal();

// pure js
window.openTomoConnectModal?.()
```

<figure><img src="https://159454010-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKx6QtlW3V2up9KOIn1lx%2Fuploads%2Fc0yWyE6kTUoT7Qg02i8C%2FFrame%202085662508.png?alt=media&#x26;token=6a8fb174-2b76-4e2c-a97c-746169f36492" alt=""><figcaption></figcaption></figure>

Checking connection status:

```tsx
import { getWalletState } from '@tomo-inc/tomo-web-sdk';

// react
const { connected } = useTomo();

// pure js or react
const walletState = getWalletState()
const connected = walletState.isConnected
```

Disconnect the wallet:

```typescript
// react
const { disconnect } = useTomo();
disconnect()

// pure js
window.tomo_sol?.disconnect
```

### Demo

We provide a demo application to show the functionalities and UI components:

<https://socialwallet-react-demo.tomo.inc/>\\

### FAQ

1. How to use with Next.js?

```typescript
/** @type {import('next').NextConfig} */
module.exports = {
  ...
  transpilePackages: ['@tomo-inc/tomo-web-sdk', '@tomo-wallet/uikit', '@tomo-inc/shared-type'],
  ...
}
```

Additionally, manually install `core-js-pure`.