@mojito-inc/connect-wallet v1.0.5-beta.32

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:

  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;

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,
        }}
        customErrorMessage={{
            externalWalletConnection: {
              wrongWalletMessage: 'Custom Message',
              highRiskMessage: 'Custom Message',
              defaultMessage: 'Custom Message',
            },
        }}
        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;

interface

config

walletOptions

image

Paper Network Name

content

ContentData

customErrorMessage

externalWalletConnection

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();

Get Status Hooks

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

  const { disconnectStatus, refetchBalanceStatus, connectStatus } = useWalletStatus();

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 } />
    )
  }

interface

Configuration

walletConnectScreenDetails

errorScreenDetails

screenConfig

claimTokenScreenDetails

tokenDetail

WalletImages

walletOptions