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/[email protected] @mui/[email protected] @apollo/client graphql @web3modal/ethers5 @walletconnect/modal

yarn add @mui/[email protected] @mui/[email protected] @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

|Param |type | Required | Description |:--- | --- | :---:| :---:| |theme| theme|✅| | |client| object |✅| | |activeChain| enum |✅| | |clientId| string |✅| client id for email wallet | |walletConnectProjectId| string |✅| wallet connect project id | |onAuthenticated| function |✅| | |walletOptions| object | | walletOptions |

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

|Param |type | Required | Description |:--- | --- | :---:| :---:| |open| boolean|✅| if true it will open the modal if false the modal will close | |config| Object |✅|Configuration |isDisConnect| boolean |✅| to disconnect wallet| |onCloseModal| function |✅| to close the modal | |link| Object| | link | |claimCode| string| | pass the claim code |listingId| string| | pass the item id for claim process |content| Object| | content to define the content for the popup |onSuccess| function | | function for handle your own logic in success modal button | |skipClaimModal| boolean| | if true it will skip the claim process after connect connect | |skipSuccessModal| boolean| | if true it will skip the success screen after claim completed | |skipConfirmClaimModal| boolean| | if true it will skip the claim confirmation screen and claim will happen automatically once wallet connected | |isPaperWallet| boolean| | if true it will work as paper wallet with email else it will work as thirdweb embedded wallet. | |tokenGatingConfig| Object| | tokenGatingConfig config for token gating | |tokenName| string| | pass the token name for token gating | |onclickBuyToken| function | function to make custom redirection when click on buy token button | |showDisconnectButton| boolean | | if true it will show Disconnect Wallet button in token gating modal | |showBuyButton| boolean| | if false it will hide buy now button in token gating modal | |isClaimWithGas| boolean| | if true the claim process will execute with metamask | |price| string| | pass price to display in claim UI | |claimType| enum| | pass claim type | |loginWithPersonalInformation|boolean| | if true means personal information should be provided by user | |firstName|string| | pass the first name of the user | |lastName|string| | pass the last name of the user | |userEmail|string| | pass the email of the user |

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

|Param |type | Required | Description |:--- | --- | :---:| :---:| |error| boolean| | return true if invoice API fail | |fetchInvoiceDetail| async function(invoiceId) | | to fetch the invoice details. you should pass the invoiceId | |transactionDetails| object | | after successfully claim or refetch the invoice API (fetchInvoiceDetail) you will get transaction object |

interface

Configuration

|Param |type | Required | Description |:--- | --- | :---:| :---:| |chainId| number|✅| | |orgId| string |✅| | |crossmintApiKey| string || | |crossmintEnv| string || | |paperClientId| string || | |paperNetworkName| string || |

walletOptions

|Param |type | Required | Description |:--- | --- | :---:| :---:| |enableCrossmint| boolean|✅| | |enableMetamask| boolean |✅| | |enableWalletConnect| boolean |✅| | |enableEmailWallet| boolean |✅| |

link

|Param |type | Required | Description |:--- | --- | :---:| :---:| |viewTokenTrackerURL| string|✅| | |termsUrl| string |✅| | terms and condition url for claim |privacyUrl| string | | | privacy policy url for claim |additionalTermsUrl| string | | | if more than one terms and condition url for claim |logoUrl| string |✅| | to define app logo

content

|Param |type | Required | Description |:--- | --- | :---:| :---:| |ClaimCodeContent| Object|| contentData | |SuccessContent| Object || contentData | |ConnectWalletContent| Object || contentData | |LoaderContent| Object || | |RecoveryCodeModal| Object || | |ClaimWithGasContent| Object || | |TokenGatingContent| Object || | |TokenGatingNotEligibleContent| Object || | |ClaimErrorContent| Object || |

tokenGatingConfig

|Param |type | Required | Description |:--- | --- | :---:| :---:| |groupId| string |✅| | |ruleId| string |✅| |

walletOptions

|Param |type | Required | Description |:--- | --- | :---:| :---:| |enableMetamask| boolean |✅| | |enableWalletConnect| boolean |✅| | |enableEmailWallet| boolean |✅| |

paymentOptions

|Param |type | Required | Description |:--- | --- | :---:| :---:| |creditCard| boolean |✅| | |walletConnect| boolean |✅| | |wire| boolean |✅| | |coinbase| boolean |✅| |

mixersConfig

|Param |type | Required | Description |:--- | --- | :---:| :---:| |lotId| string |✅| | |paymentId| string || | |discountCode| string || | |walletOptions| object | | walletOptions | | |paymentOptions| object | | paymentOptions | | |errorPageUrl| string | | redirection url during checkout payment error |successPageUrl| string | | redirection url for success page |isAutoFillCountryCode| boolean | | To enable or disable auto country code import |breadCrumbs| array | | Custom bread crumbs name |onClickGoToMarketPlace| function | | custom function when click on back to marketplace after payment in mixers

contentData

|Param |type | Required | Description |:--- | --- | :---:| :---:| |title| string|| | |description| string || | |buttonName| string || | |breadcrumbsLabel| string || |; |agreeTermsAndConditionsMessage| string || |; |additionalTermsAndConditionsLabel| string || |; |privacyPolicyLabel| string || |; |termsandConditionsLabel| string || |; |titleImageURL| string || |;

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"
  />

|Param |type | Required | Description |:--- | --- | :---:| :---:| |open| boolean|✅| if true it will open the modal if false the modal will close | |config| Object |✅|Configuration |isDisConnect| boolean |✅| to disconnect wallet| |walletOptions| Object |✅| walletOptions | |onCloseModal| function |✅| to close the modal | |link| Object| | link | |listingId| string| | pass the item id for claim process |content| Object| | content to define the content for the popup |onSuccess| function | | function for handle your own logic in success modal button | |showDisconnectButton| boolean | | if true it will show Disconnect Wallet button in token gating modal | |showBuyButton| boolean| | if false it will hide buy now button in token gating modal | |isClaimWithGas| boolean| | if true the claim process will execute with metamask | |claimType| enum| | pass claim type | |loginWithPersonalInformation|boolean| | if true means personal information should be provided by user | |firstName|string| | pass the first name of the user | |lastName|string| | pass the last name of the user | |userEmail|string| | pass the email of the user | |mixersConfig| Object|✅| mixersConfig config for mixers buy now|

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