Quick Start

Tomo Connect SDK provides two important packages:

• tomo-social-react

• social-wallet-sdk

The tomo-social-react provides all the UI components and the social-wallet-sdk provides all the back-end interfaces for interacting with the wallet.

To integrate Tomo Connect SDK, you need to

1. Register your client ID

2. Initialize the TomoSDK from social-wallet-sdkwith social login

3. Place the react components from tomo-social-react in your application

Prepare the Client ID

Apply a client ID from Tomo's social dashboard via https://dashboard.tomo.inc, and config the whitelist origin. For development purposes, http://localhost:port is suggested to add to the whitelist.

Install & Initialize Tomo Connect SDK

The SDK can be installed using package managers like npm or yarn:

yarn add @tomo-inc/social-wallet-sdk

Initialize the SDK using the Client ID from the first step

const {TomoSDK, EthereumProvider, BitcoinProvider, SolanaProvider} = await import('@tomo-inc/social-wallet-sdk');

const defaultChain = {
    chainId: 1,
    rpcUrl: 'https://cloudflare-eth.com',
}
const ethProvider = new EthereumProvider(defaultChain)
const solanaProvider = new SolanaProvider()
await solanaProvider.connect()

const tomoSDK = new TomoSDK({
    clientId: 'your client id',
    ethereumProvider: ethProvider,
    bitcoinProvider: new BitcoinProvider(),
    solanaProvider: solanaProvider,
});

Generally, users don't need to worry about how Tomo handles social media login. This is just a brief overview of how the Tomo Connect SDK manages user login.

Google OAuth2

Login with Google via the SDK

// The method returns true for a successful login, otherwise return false.
const ret = await tomoSDK.login('google');

Twitter Login

Login with Twitter via the SDK

// The method returns true for a successful login, otherwise return false.
const ret = await tomoSDK.login('twitter');

Email Login

// Send a verification code:
const result = await tomoSDK.sendCode(email);
// Verify the code:
const result = await tomoSDK.verifyCode(code);

Install & Initialize the UI Component

The UI component can be installed using package managers like npm or yarn:

yarn add @tomo-inc/tomo-social-react

Initialize the UI view and context provider

import {TomoContextProvider, TomoSocial} from "@tomo-inc/tomo-social-react"

export default function App() {
  return (
    <TomoContextProvider
      evmDefaultChainId={1}
      clientId={
        'your client id'
      }
    >
      <TomoSocial />
    </TomoContextProvider>
  );
};

Once you successfully login and set up the passkey, the wallet page will be displayed.

Demo

Please refer to the online Demo: https://socialwallet-react-prod.tomo.inc/login And the source code: https://github.com/UnyxTech/social-wallet-kit