Quick Start

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

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

or

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

Prepare the Client ID

1. Talk to us to create an developer account.

2. Log in to the Tomo Developer Dashboard.

3. Create a new project and copy the generated clientId.

4. Use this clientId in your TomoContextProvider.

Tomo's Developer Dashboard

Initialize Tomo Web SDK

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

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

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

For pure Javascript project:

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'],
  onConnect: (walletState) => {
    console.log('onConnect', walletState)
  },
})

Use Tomo

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

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.

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

// pure js
window.openTomoConnectModal?.()

Checking connection status:

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:

// 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?

/** @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.