Auction Kit
⚙️ How to Install and Setup the Mojito-auction SDK module.
Overview
The mojito-auction SDK is a library that provides abstractions and functionalities to simplify interaction with the on-chain auction in a Typescript/Javascript environment. It offers a comprehensive solution for integrating the auction feature into your application with a pre-designed user interface.
This guide will help you better understand how to use and integrate the Auction SDK into your application.
Prerequisites
Before proceeding with the installation steps, ensure that you have the following prerequisites in place:
- Node.js and NPM/Yarn: Make sure you have Node.js installed on your machine, and the Node.js version should be 18 or higher, along with either NPM (Node Package Manager) or Yarn. You can download and install Node.js from the official website here.
- Authentication Provider: To obtain the necessary token for authentication, you need to have an authentication provider set up. This can be a JWT (JSON Web Token) or an Auth0 token, which will be passed as the "token" property in the configuration.
- API URL: Determine the appropriate API URL to use based on your environment.
- NEXT js: We are recommended to use Next.js for this SDK.
- Personal Access Token: Create a personal access token on GitHub. You can generate a new token by visiting the following link. Make sure to enable the "read:packages" permission.
Installation and Setup
Step 1: Install the Auction Module
Install the Mojito Auction SDK module on your project by using one of the following methods below:
Install using NPM:
npm install --save @mojito-inc/mojito-auction
Install using Yarn:
yarn add @mojito-inc/mojito-auction
Also install following packages:
yarn add @mui/[email protected] @mui/[email protected] @apollo/client graphql
or
npm install @mui/[email protected] @mui/[email protected] @apollo/client graphql
Step 2: Wrap the Provider and Set API URL and Bearer Token
To configure the API URL and Bearer token and wrap the provider in your project's root file, follow these steps:
-
Determine the appropriate API URL for your desired environment:
- For the development environment, set the
API_URL
tohttps://api-dev.mojito.xyz/query
. - For the staging environment, set the
API_URL
tohttps://api-stg.mojito.xyz/query
. - For the sandbox environment, set the
API_URL
tohttps://api-sandbox.mojito.xyz/query
. - For the production environment, set the
API_URL
tohttps://api.mojito.xyz/query
.
- For the development environment, set the
-
Obtain a JWT token or Auth0 token from your authentication provider. This token will be used as the Bearer token in the provider configuration.
-
In your JavaScript file, import the
AuctionProvider
component from@mojito-inc/mojito-auction
. -
Wrap the provider using the
AuctionProvider
component and provide the necessary props:theme
: Optionally, you can pass a theme configuration object on customizing the appearance of the auction module.clientOptions
: Provide an object with the following properties:uri
: Set this property to the determinedAPI_URL
based on your environment.token
: Pass the obtained JWT token or Auth0 token as the value for this property. Use the formatBearer <Token>
.
-
Place your application's main component or the relevant component where you want to use the auction module inside the
AuctionProvider
component.
import { AuctionProvider } from '@mojito-inc/mojito-auction';
<AuctionProvider
theme={theme}
clientOptions={{
uri: <API_URL>,
token: 'Bearer <Token>',
}}
>
<YourApp />
</AuctionProvider>
Step 4: Import the AuctionContainer
and Pass the Required Parameters
AuctionContainer
and Pass the Required ParametersTo use the AuctionContainer
from the @mojito-inc/mojito-auction
module and pass the required parameters, follow these steps:
-
Import the
AuctionContainer
component from@mojito-inc/mojito-auction
in your JavaScript file:import { AuctionContainer } from '@mojito-inc/mojito-auction';
-
Place the
AuctionContainer
component in your code and provide the necessary parameters:
Parameters
Prams | Type | Required | Description |
---|---|---|---|
itemID | string | ✅ | |
orgID | string | ✅ | |
imageURL | string | ✅ | |
header | object | ✅ | Header |
tokenDetails | object | ✅ | TokenDetails |
loginOrWalletTitle | string | ||
loginOrWalletButton | string | ||
description | string | ✅ | |
etherScanImageURL | string | ✅ | |
cryptoUnit | enum | ✅ | CryptoUnit |
connectedChainId | Int | ✅ | |
walletAddress | string | ✅ | |
placeBid | object | ✅ | PlaceBid |
auctionChainId | Int | ✅ | |
provider | ethers.providers.Web3Provider | ✅ | |
kycElement | JSX.Element | ||
loaderImageURL | string | ✅ | |
showBuyNow | boolean | After the off-chain auction has ended, you can display the 'Buy Now' button. | |
onSubmit | function | onclick handle for buy now button | |
renderBreadCrumb | event() => JSX.Element | ✅ | |
onClickLoginOrWallet | event() | ✅ | |
onRefetchBalance | event() | ✅ |
Header
Prams | Type | Required |
---|---|---|
title | string | ✅ |
subTitle | string | ✅ |
TokenDetails
Prams | Type | Required |
---|---|---|
networkName | string | ✅ |
tokenType | string | ✅ |
contractAddress | string | ✅ |
tokenId | string | ✅ |
creationDate | string | |
dimension | string | |
onClickContractAddress | event() | |
onViewMetaData | event() | |
onClickTokenID | event() |
PlaceBid
Prams | Type | Required |
---|---|---|
balance | Int | ✅ |
incrementPercent | Int | ✅ |
bidCurrency | enum | ✅ |
termsURL | string | ✅ |
privacyURL | string | ✅ |
CryptoUnit
Variable | Value |
---|---|
ETH | ETH |
MATIC | MATIC |
WETH | WETH |
WMATIC | WMATIC |
- Call the
AuctionContainer
Component by providing the required parameters:<AuctionContainer itemID={ <itemID> } orgID={ <orgID> } imageURL={ <imageURL> } header={ <header> } tokenDetails={ <tokenDetails> } loginOrWalletTitle={ <loginOrWalletTitle> } loginOrWalletButton={ <loginOrWalletButton> } description={ <description> } etherScanImageURL={ <etherScanImageURL> } cryptoUnit={ <cryptoUnit> } connectedChainId={ <connectedChainId> } walletAddress={ <walletAddress> } placeBid={ <placeBid> } auctionChainId={ <auctionChainId> } provider={ <provider> } kycElement={ <kycElement> } loaderImageURL={ <loaderImageURL> } showBuyNow={ <showBuyNow> } onSubmit={ <onSubmit> } renderBreadCrumb={ <renderBreadCrumb> } onClickLoginOrWallet={ <onClickLoginOrWallet> } onRefetchBalance={ <onRefetchBalance> } />
Theme Config
import { createTheme } from '@mui/material/styles';
export const theme = createTheme({
typography: {
fontFamily: 'Abel',
},
components: {
MuiCssBaseline: {
styleOverrides: `
@font-face {
font-family: "Abel";
font-style: normal;
font-display: swap;
font-weight: 400;
text-transform: none;
font-size: 14px;
}
`,
},
MuiButton: {
styleOverrides: {
root: {
fontFamily: 'Abel',
textTransform: 'none',
borderRadius: '0px',
fontWeight: 400,
fontSize: '16px',
backgroundColor: '#FFF',
border: '1px solid #D7D8DB',
color: '#242629',
'&:hover': {
backgroundColor: '#FFF',
color: '#242629',
},
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.08)',
},
},
},
MuiCheckbox: {
styleOverrides: {
root: {
'&$checked': {
backgroundColor: '000',
},
},
},
},
},
palette: {
primary: {
main: '#000',
},
secondary: {
main: '#F9F9F9',
},
background: {
default: '#FFFFFF',
},
text: {
primary: '#000',
},
grey: {
50: '#3C3F44',
100: '#6C717A',
200: '#BCBEC3',
300: '#FAFBFB',
400: '#868B93',
},
error: {
main: '#BF1E18',
dark: '#CE2818',
light: '#FFDAD5',
contrastText: '#BD2200',
},
divider: '#E8E9EC',
},
unstable_sxConfig: {
borderColor: {
themeKey: '#D7D8DB',
},
},
});
Note:
For complete documentation of the SDK offerings, see the NPM document.
Updated 12 months ago