@mojito-inc/connect-wallet

☁️ Mojito Modules - Connect Wallet

👨‍💻 React components for the Mojito Platform, Reference App and third-party projects, including Connect Wallet.

Version: 1.0.1

Using this library in your project

You can install this project with one of these commands:

npm install @mojito-inc/connect-wallet

yarn add @mojito-inc/connect-wallet

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

  const WalletProvider = ({ children }: WalletProviderProps) => {

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

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

    return (
      <ConnectWalletProvider
        theme={ theme }
        onAuthenticated={ setToken }
        clientOptions={ client }>
        { children }
      </ConnectWalletProvider>
    );
  };

  export default WalletProvider;

After setup ConnectWallet Provider

Following step:

1. Connect Wallet Container

ConnectWalletContainer

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

  const ConnectWalletPage = () => {

    const config = {
      ORG_ID: Configuration.ORG_ID ?? '',
      paperClientId: Configuration.PAPER_CLIENT_ID ?? '',
      paperNetworkName: Configuration.PAPER_NETWORK_NAME ?? '',
      projectId: Configuration.PROJECT_ID ?? '',
    }

    const walletOptions = {
      enableMetamask: true,
      enableWalletConnect: true,
      enableEmail: true,
    }

    const image = {
      logo: 'https://res.cloudinary.com/duwztsuxj/image/upload/v1683870261/Frame_238173_cpwne5.png',
      metamask: Images.METAMASK.src,
      walletConnect: Images.WALLET_CONNECT.src,
      error: 'https://res.cloudinary.com/duwztsuxj/image/upload/v1683870261/Frame_238173_cpwne5.png',
    }

    return (
        <ConnectWalletContainer
          open={ openModal }
          config={ config }
          walletOptions={ walletOptions }
          image={ image }
          isDisConnect={ disconnect }
          walletAddress={ walletDetails.walletAddress }
          onChangeWalletAddress={ onChangeWalletAddress }
          onCloseModal={ onClickCloseModal } />
    );
  };

  export default ConnectWalletPage;

Param	type	Required	Description
open	boolean	✅
walletAddress	string	✅
isDisConnect	boolean	✅
config	Object	✅	config
walletOptions	Object	✅	walletOptions
image	Object	✅	image
content	Object		ContentData
isRefetchBalance	boolean
onCloseModal	function	✅	To close the Modal

interface

config

Param	type	Required	Description
ORG_ID	string	✅
paperClientId	string
projectId	string
paperNetworkName	any

walletOptions

Param	type	Required	Description
enableMetamask	boolean	✅
enableWalletConnect	boolean	✅
enableEmail	boolean	✅

image

Param	type	Required	Description
logo	string	✅
metamask	string	✅
walletConnect	string	✅
error	string	✅

ContentData

Param	type	Required	Description
title	string
description	string