@mojito-inc/connect-wallet
TypeScript icon, indicating that this package has built-in type declarations

1.0.5-beta.2 • Public • Published

☁️ Mojito Modules - Connect Wallet - Token Gating



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


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

Install following dependency also

yarn add @mui/material@5.11.11 @mui/icons-material@5.11.11 @apollo/client graphql

Config theme for your project

To config custom theme please follow below steps:

Step 1:

Note: If you encounter any type errors in the themes config, create a file named mui.d.ts and add the following code:

  import '@mui/material/styles';

  declare module '@mui/material/styles' {
    export interface Palette {
      backgroundColor?: {
        primary?: string
        secondary?: string
      }
      toastError?: ColorPartial
      toastSuccess?: ColorPartial
      toastWarning?: ColorPartial
      iconColor?: string
    }
    // allow configuration using `createTheme`
    export interface PaletteOptions {
      backgroundColor?: {
        primary?: string
        secondary?: string
      }
      toastError?: ColorPartial
      toastSuccess?: ColorPartial
      toastWarning?: ColorPartial
      iconColor?: string
    }
  }

Create a new file and place the following code and replace the colors with your custom colors. export the theme and add into the provider.

  import { createTheme } from '@mui/material';

  export const theme = createTheme({
    typography: {
      fontFamily: 'Slate',
    },
    components: {
      MuiTextField: {
        styleOverrides: {
          root: {
            '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button':
            {
              display: 'none',
            },
            '& input[type=number]': {
              MozAppearance: 'textfield',
            },
          },
        },
      },
      MuiCssBaseline: {
        styleOverrides: `
                @font-face {
                  font-family: "Slate";
                  font-style: normal;
                  font-display: swap;
                  font-weight: 400;
                  text-transform: none;
                  font-size: 16px;
                }
              `,
      },
      MuiButton: {
        styleOverrides: {
          root: {
            fontFamily: 'Slate',
            textTransform: 'none',
            borderRadius: '4px',
            fontWeight: 700,
            fontSize: '16px',
            backgroundColor: '#FDCC35',
            color: '#000',
            '&:hover': {
              backgroundColor: '#FDCC35',
              color: '#000',
              opacity: 0.5,
            },
          },
        },
      },
      MuiDialog: {
        styleOverrides: {
          paper: {
            border: '1px solid #D7D8DB',
            boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.08)',
            borderRadius: '4px',
          },
        },
      },
      MuiDivider: {
        variants: [
          {
            props: { orientation: 'horizontal' },
            style: {
              ':before': {
                borderTop: 'thin solid #D7D8DB',
              },
              ':after': {
                borderTop: 'thin solid #D7D8DB',
              },
            },
          },
        ],
      },
    },
    palette: {
      primary: {
        main: '#FDCC35',
      },
      secondary: {
        main: '#356045',
      },
      backgroundColor: {
        primary: '#ffffff',
        secondary: '#000000',
      },
      grey: {
        100: '#868b93',
        500: '#A1A5AB',
      },
      toastError: {
        500: '#CE2818',
      },
      iconColor: '#000',
    },
  });


API URL:

  1. https://api-sandbox.mojito.xyz/query - Sandbox environment
  2. https://api.mojito.xyz/query - Production environment


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

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

    const [token, setToken] = useState<string>();
    const client = useMemo(
      () => ({
        uri: API_HOSTNAME,
        token: token || undefined,
      }),
      [token],
    );

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

  export default WalletProvider;
Param type Required Description
theme Theme To Customize the theme
clientId string Pass the client id for email wallet
activeChain enum pass the network name to connect with email
walletConnectProjectId string Pass the wallet connect project id
onAuthenticated function in callback you will get an auth token
clientOptions object pass the bearer token and api url
metaData object To customize the wallet connect Modal metadata

After setup ConnectWallet Provider

Following step:

  1. Connect Wallet Container

ConnectWalletContainer

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

  const ConnectWalletPage = () => {

    return (
      <ConnectWalletContainer
        open={ openModal }
        organizationId: organizationId,
        walletOptions={{
          enableMetamask: true,
          enableEmail: true,
          enableWalletConnect: true,
        }}
        image={{
          logo: YOUR_LOGO, // pass URL or path, if you are importing an image from local please add ".src" at end
          metamask: Images.METAMASK.src,
          error: Images.METAMASK.src,
          walletConnect: Images.METAMASK.src,
        }}
        isDisConnect={ disconnect }
        isRefetchBalance={ isRefetchBalance }
        onCloseModal={ onClickCloseModal } />
    );
  };

  export default ConnectWalletPage;

Param type Required Description
open boolean if true it will open modal if false modal will close
config Object config
walletOptions Object walletOptions
image Object image To customize the image
isDisConnect boolean if true it will disconnect the wallet
isRefetchBalance boolean if true it will refetch the wallet balance
onCloseModal function To close the Modal
content Object content to customize the title, description in modal
isPaperWallet boolean if true it will work as paper wallet with email else it will work as thirdweb embedded wallet.
isWeb2Login boolean if true it will work as web2 login example auth0.
skipSignature boolean if true it will skip the signature process for connect wallet.
userEmail string Pass user email address to pre populate email in input fields.

interface

config

Param type Required Description
organizationId string Pass the organization id
paperClientId string
paperNetworkName enum paper Network Name

walletOptions

Param type Required Description
enableMetamask boolean
enableEmail boolean
enableWalletConnect boolean

image

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

Paper Network Name

Enum
Ethereum
Sepolia
Goerli
Polygon
Mumbai

content

Param type Required Description
walletOptionsContentData object ContentData
otpContentData object ContentData
emailContentData object ContentData
loadingContentData object ContentData
recoverCodeContentData object ContentData

ContentData

Param type Required Description
title string
description string

Hooks

To get the connected wallet details use these following hooks:

Wallet Details Hooks

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

  const { address, balance } = useWallet();

Network Hooks

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

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

Provider Hooks

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

  const { provider, providerType } = useProvider();

Token Gating Container

  import { TokenGatingContainer } from '@mojito-inc/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 ?? '',
            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
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
logo string logo icon in svg, png, jpeg or gif format

walletOptions

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

Package Sidebar

Install

npm i @mojito-inc/connect-wallet

Weekly Downloads

15

Version

1.0.5-beta.2

License

ISC

Unpacked Size

372 kB

Total Files

164

Last publish

Collaborators

  • vivek_mojito
  • kameshkishoreionixx
  • vivek_ionixx
  • alexinx