@mojito-inc/claim-management v1.0.2-beta.88

Using this library in your project Claim Management

You can install this project with one of these commands:

npm install --save @mojito-inc/claim-management

yarn add @mojito-inc/claim-management

Install the following packages:

npm i @mui/material@5.11.11 @mui/icons-material@5.11.11 @apollo/client graphql @web3modal/ethers5 @walletconnect/modal

yarn add @mui/material@5.11.11 @mui/icons-material@5.11.11 @apollo/client graphql @web3modal/ethers5 @walletconnect/modal

Theme Config

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

  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',
        light: '#F5F5F5',
      },
      background: {
        default: '#000',
      },
      text: {
        primary: '#000',
      },
      grey: {
        100: '#868b93',
        500: '#A1A5AB',
      },
      divider: '#fff',
      toastWarning: {
        50: '#FFFFE5',
        100: '#FFFEC0',
        200: '#FCFB99',
        300: '#F8F676',
        400: '#F5F15C',
        500: '#F0EB47',
        600: '#FBDF47',
        700: '#FDC740',
        800: '#FCAD36',
        900: '#F98028',
      },
    },
    MojitoClaim: {
      Header: {
        background: '#000',
      },
      Footer: {
        background: '#000',
        color: '#fff',
      },
      Hero: {
        background: '#356045',
        color: '#fff',
      },
      Discount: {
        inProgressColor: '#F98028',
        inProgressBackground: '#FFFEC0',
      },
      error: '#BF1E18',
      success: '#3E8045',
      deliveryBackgroundColor: '#FAFBFB',
      linkColor: '#6563FD',
      textTertiary: '#868b93',
      borderColor: '#242629'
    },
    MojitoCoreUI: {
      font: {
        primary: 'Slate',
        secondary: 'Slate',
        tertiary: 'Sneak',
      },
    },
  });

Theme Notes for typescript error

If you are faced any type issue in theme, create a file called "mui.d.ts" and paste the below code:

import '@mui/material/styles';
import { MojitoClaimManagementTheme } from './MojitoClaimManagementTheme';

declare module '@mui/material/styles' {
  export interface Theme {
    MojitoClaim?: MojitoClaimManagementTheme
  }
  // allow configuration using `createTheme`
  export interface ThemeOptions {
    MojitoClaim?: MojitoClaimManagementTheme
  }
}

Once the package is installed, you can import the library using import;

For theme configuration Ref above: Theme Config

  import { ClaimManagementProvider } from '@mojito-inc/claim-management';

  const [token, setToken] = useState<string>();
  const client = useMemo(
    () => ({
      uri: 'https://api-sandbox.mojito.xyz/query', // API url
      token: token || undefined, // bearer token
    }),
    [token],
  );

  // note: you can get the bearer token from local storage with a key "token"

  <ClaimManagementProvider
    theme={theme}
    clientOptions={client}
    activeChain={activeChain}
    clientId={clientId}
    onAuthenticated={setToken}
    walletConnectProjectId={ walletConnectProjectId } // project id from wallet connect
    walletOptions={{         // Optional parameter
      enableCrossmint: false,
      enableMetamask: true,
      enableWalletConnect: true,
      enableEmailWallet: true,
    }}
  >
    <Component {...pageProps} />
  </ClaimManagementProvider>

onAuthenticated

when user gets Authenticated gets token as response

Provider parameters

ClaimTokenModal

present claim token modal for following setup

import { ClaimTokenModal } from "@mojito-inc/claim-management";

  <ClaimTokenModal
    open=<open>
    name=<name>
    userEmail=<userEmail>
    config=<Configuration>
    onCloseModal=<onCloseModal>
    onSuccess=<onSuccess>
    onClickBuyToken=<onClickBuyToken>
    isDisConnect=<isDisConnect>
    walletOptions=<walletOptions>
    link=<link>
    claimCode=<claimCode>
    tokenGatingConfig={{
      groupId: <groupId>,
      ruleId: <ruleId>,
    }}
    content=<content>
    claimType=<claimType>
  />

Hooks

useWallet hooks

To get the connected wallet details:

  import { useWallet } from "@mojito-inc/claim-management";

  const { address, balance, networkDetails, provider, providerType } = useWallet();

useTransaction hooks

To get the transaction details:

  import { useTransaction } from "@mojito-inc/claim-management";

  const { error, fetchInvoiceDetail, transactionDetails } = useTransaction();

Transaction interface

interface

Configuration

walletOptions

link

content

tokenGatingConfig

walletOptions

paymentOptions

mixersConfig

contentData

To use Mixers SDK for BuyNow Flow

Note:

In the _app.tsx file, please add the following line: <Script src="https://cdn.checkout.com/js/framesv2.min.js" />. if it was not added, credit card payments won't work.

ClaimTokenModal

present claim token modal for following setup

import { ClaimTokenModal } from "@mojito-inc/claim-management";

  <ClaimTokenModal
    open=<open>
    name=<name>
    userEmail=<userEmail>
    config=<Configuration>
    mixersConfig=<MixersConfiguration>
    onCloseModal=<onCloseModal>
    onSuccess=<onSuccess>
    isDisConnect=<isDisConnect>
    walletOptions=<walletOptions>
    content=<content>
    claimType="BuyNow"
  />

Error page

Create an error page with the page path /payments/failure:

Success page

Create an success page with the page path /payments/success:

Retrieve the paymentId from the query parameters of the URL and pass it as a parameter to the MojitoCheckout component

  <PaymentMixersSuccess
    onClickGoToMarketPlace={onClickGoToMarketPlace} />

Claim Service development

Development setup