SDK - Connect Wallet

How to Install and Setup the Mojito Connect-wallet SDK module.


The Connect-Wallet SDK is designed to simplify the process of integrating wallet connectivity into your application. It provides a unified interface that allows users to connect their wallets using various options, such as MetaMask, WalletConnect, and email-based connection.

This guide will help you better understand how to use and integrate the Connect-wallet SDK into your application.



For more details, you can refer to the NPM public repository here.


Before proceeding with the installation steps, ensure that you have the following prerequisites in place:

  1. Node.js and NPM/Yarn: Make sure you have Node.js installed on your machine and and the Node.js version should be 18 or higher., along with either NPM (Node Package Manager) or Yarn. You can download and install Node.js from the official website here.
  2. API URL: Determine the appropriate API URL to use based on your environment.

If you are using create-react-app

Add below packages as dependencies in your package.json

  "dependencies": {
    "url": "latest",
    "http": "npm:http-browserify",
    "https": "npm:https-browserify",
    "zlib": "npm:browserify-zlib",
    "http-browserify": "latest",
    "https-browserify": "latest",
    "browserify-zlib": "latest",
    "assert": "^2.0.0",
    "stream": "^0.0.2"

To ignore the sourcemap warnings, create a .env file with the following in your root directory:


Installation and Setup

Step 1: Install the Connect-wallet Module

Install the Mojito Connect-wallet SDK module on your project by using one of the following methods below:

Install using NPM:

  npm i @mojito-inc/connect-wallet

Install using Yarn:

  yarn add @mojito-inc/connect-wallet



Need to install following dependency for this module

yarn add @mui/[email protected] @mui/[email protected] @apollo/client graphql

npm install @mui/[email protected] @mui/[email protected] @apollo/client graphql

Step 2: Wrap the Provider and Set API URL, Bearer Token and Theme

In your project's root file, follow these steps to wrap the provider and configure the API URL, Bearer token and Theme:

  1. Determine the appropriate API URL based on your environment:

    • For the development environment, set API_URL to
    • For the production environment, set API_URL to
  2. Wrap the provider using the ConnectWalletProvider component from the Mojito Connect-wallet SDK.

    • Import the ConnectWalletProvider from @mojito-inc/connect-wallet in your JavaScript file.
    • Use the ConnectWalletProvider component and provide the following props:
      • uri: Set this prop to the determined API_URL based on your environment.
      • token: Pass the obtained JWT token or Auth0 token as the value for this prop. Use the format Bearer <Token>.
import { ConnectWalletProvider } from "@mojito-inc/connect-wallet";
import { ThemeProvider } from '@mui/material/styles';

const [token, setToken] = useState<string>();

const client = useMemo(
    () => ({
      uri: Configuration.API_HOSTNAME,
      token: token ? `Bearer ${ token }` : undefined,

<ThemeProvider theme={ theme }>
    projectId={ Configuration.PROJECT_ID } //wallet connect client id
    clientOptions={ client }
    onAuthenticated={ setToken }
    theme={ theme } >
    { children }

Step 3: Integrate Connect wallet

To use the Connect Wallet feature, follow these steps:

Import the necessary modules from the @mojito-inc/connect-wallet package:

import { ConnectWalletContainer } from "@mojito-inc/connect-wallet";

          open={ open }
          config={ config }
          walletOptions={ walletOptions }
          image={ image }
          isDisConnect={ isDisConnect }
          walletAddress={ walletAddress }
          onCloseModal={ onClickCloseModal } />


Once wallet connected you can able to get wallet details from these hooks:

Network hooks

import { useNetwork } from '@mojitoinc/mojito-connect-wallet';

const { chainID, id, isTestnet, name } = useNetwork();

Wallet details hooks

import { useWallet } from '@mojitoinc/mojito-connect-wallet';

const { address, balance } = useWallet();

Provider hooks

  import { useProvider } from '@mojitoinc/mojito-connect-wallet';

  const { provider, providerType } = useProvider();



Once wallet connected , wallet details can get from hooks or can able to retrieve from session storage using key variable WalletDetails.

Fill in the required parameters for the ConnectWalletContainer

openbooleanβœ…to open modal
contentObjectto customise the contents in UI
isDisConnectboolean-βœ…to disconnect the wallet
walletAddressstringβœ…connected wallet address
isRefetchBalancebooleanto re-fetch balance
onCloseModalfunctionβœ…function to handle close modal

Fill in the required parameters for the config

orgIdstringβœ…organisation id
chainIdnumberβœ…chainId id for paper wallet
paperClientIdstringβœ…paper client id to connect with email

Fill in the required parameters for the paperNetworkName


Fill in the required parameters for the walletOptions

enableMetamaskbooleanβœ…to enable or disable metamask
enableEmailbooleanβœ…to enable or disable email connect
enableWalletConnectbooleanto enable or disable wallet connect

Fill in the required parameters for the Image

errorstringβœ…error icon in svg, png, jpeg or gif format
metamaskstringβœ…metamask icon in svg, png, jpeg or gif format
logostringβœ…logo icon in svg, png, jpeg or gif format
walletConnectstringwallet connect logo icon in svg, png, jpeg or gif format




For complete documentation of the connect-wallet SDK offerings, see the connect-wallet.