@mojito-inc/connect-wallet

☁️ Mojito Modules - Connect Wallet - Token Gating

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

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

Token Gating Container

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

const TokenGatingPage = () => {
  return (
    <TokenGatingContainer
        onCloseModal={ onCloseModal }
        open={ openModal }
        config={{
          orgId: Configuration.ORG_ID ?? '',
          paperClientId: Configuration.PAPER_CLIENT_ID ?? '',
          paperNetworkName: Configuration.PAPER_NETWORK_NAME ?? '',
          chainId: 5,
          projectId: Configuration.PROJECT_ID ?? '',
          groupId: tokenGatingDetails?.groupId,
          ruleId: tokenGatingDetails?.ruleId,
          isClaimToken: false,
          collectionItemId: tokenGatingDetails?.collectionItemId,
          invoiceId,
        }}
        screenConfig={{
          title: ,
          subTitle: 'Holders of the Myers Manx collection can now get 50%. Connect your wallet to proceed.',
        }}
        gatingErrorDetails={ gatingErrorDetails }
        walletConnectScreenDetails={ walletConnectScreenDetails }
        errorScreenDetails={ errorScreenDetails }
        claimTokenScreenDetails={ claimTokenScreenDetails }
        setInvoice={ setInvoice } />
  )
}

Param	type	Required	Description
open	Boolean	✅
config	Object	✅	Configuration
walletConnectScreenDetails	Object	✅	walletConnectScreenDetails
errorScreenDetails	Object	✅	errorScreenDetails
screenConfig	Object	✅	screenConfig
claimTokenScreenDetails	Object	✅	claimTokenScreenDetails
gatingLoaderDetails	Object
gatingErrorDetails	Object
invoiceID	string
onCloseModal	function	✅
onChangeWalletAddress	function
setInvoice	function
getInvoiceDetails	function

interface

Configuration

Param	type	Required	Description
orgId	string	✅	organization id
chainId	Number	✅
paperClientId	string		paper client id to connect with email
paperNetworkName	any
projectId	string
groupId	string		for Checking Token Gating based on GroupId
ruleId	string		for Checking Token Gating based on ruleId
isClaimToken	boolean		if true, call mojito claim api
collectionItemId	string
invoiceId	string

walletConnectScreenDetails

Param	type	Required	Description
title	string
subTitle	string
walletOptions	walletOptions	✅	walletOptions
image	WalletImages	✅	WalletImages

errorScreenDetails

Param	type	Required	Description
title	string
primaryButtonTitle	string
secondaryButtonTitle	string
tertiaryButtonTitle	string
onClickTertiaryButton	function
onClickSecondaryButton	function
onClickPrimaryButton	function

screenConfig

Param	type	Required	Description
title	string
subTitle	string

claimTokenScreenDetails

Param	type	Required	Description
tokenDetail	Object		tokenDetail
redirectionPageURL	string
onSuccess	function

tokenDetail

Param	type	Required	Description
tokenImage	string
tokenName	string
tokenSubtitle	string
tokenButtonText	string

WalletImages

Param	type	Required	Description
error	string		error icon in svg, png, jpeg or gif format
metamask	string		metamask icon in svg, png, jpeg or gif format
walletConnect	string		wallet connect icon in svg, png, jpeg or gif format
logo	string		logo icon in svg, png, jpeg or gif format

walletOptions

Param	type	Required	Description
enableMetamask	boolean	✅	to enable or disable metamask
enableWalletConnect	boolean	✅	to enable or disable wallet connect
enableEmail	boolean	✅	to enable or disable email connect