@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
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
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago