☁️ Mojito Modules - Auction
👨💻 React components for the Mojito Platform, Reference App and third-party projects, including Mojito's Auction
To use this library install the following dependency
You can install this project with one of these commands:
npm install --save @mojito-inc/mojito-auction
yarn add @mojito-inc/mojito-auction
<br />
### Note:
You need to install the following packages:
yarn add @mui/material@5.11.11 @mui/icons-material@5.11.11 @apollo/client graphql
Once the package is installed, you can import the library using import;
### Auction Provider
import { AuctionProvider } from '@mojito-inc/mojito-auction';
<AuctionProvider
theme={theme} // For theme config check below
clientOptions={{
uri={ API_URL }
token={ 'Bearer <Token>' }
}}
>
<Component {...pageProps} />
</AuctionProvider>
#### For API URL:
<ol>
<li><b>https://api-sandbox.mojito.xyz/query</b> - Sandbox environment</li>
<li><b>https://api.mojito.xyz/query</b> - Production environment</li>
</ol>
|Param |type | Required | Description
|:--- | --- | :---:| :---:|
|uri | string| ✅| Pass the API url|
|token | string ✅| Pass the bearer token|
### Auction Component
import { AuctionContainer } from '@mojito-inc/mojito-auction';
<AuctionContainer itemID= orgID= imageURL= header=
tokenDetails= description= etherScanImageURL= cryptoUnit= userConfig={{ isAuthenticated, isEmailVerified: user?.email_verified ?? false, kycStatus: 'Clear', onHandleKYC: () => undefined, }} walletConfig={{ provider: getProvider(), connectedChainId: connect?.chainID, walletAddress: connect?.account, balance, }} placeBid= auctionChainId= loaderImageURL= renderBreadCrumb= onClickLoginOrWallet= onRefetchBalance= />
|Param |type | Required | Description
|:--- | --- | :---:| :---:|
|itemID| string|✅| |
|orgID| string |✅|
|imageURL| string|✅ |
|header| Object|✅ |[Header](#Header) |
|tokenDetails| Object |✅|[TokenDetails](#TokenDetails) |
|userConfig| Object | ✅| [UserConfig](#UserConfig)|
|walletConfig| Object | ✅| [WalletConfig](#WalletConfig)|
|description| string | ✅| |
|etherScanImageURL| string | ✅| |
|cryptoUnit| enum | ✅| [CryptoUnit](#CryptoUnit)|
|placeBid| Object | ✅| [PlaceBid](#PlaceBid)|
|auctionChainId| Int | ✅| Int can represent values between -(2^31) and 2^31 - 1 |
|loaderImageURL| string | ✅ | |
|renderBreadCrumb| event() => JSX.Element | ✅ | |
|onClickLoginOrWallet| (event: 'connectWallet' | 'login') => void | ✅ | |
|onRefetchBalance| function | ✅ | |
#### interface
##### Header
|Param |type | Required | Description
|:--- | --- | :---:| :---:|
|title| string|✅| |
|subTitle | string |✅| |
##### TokenDetails
|Param |type | Required | Description
|:--- | --- | :---:| :---:|
|networkName| string|✅| |
|tokenType | string |✅| |
|contractAddress| string|✅| |
|tokenId | string |✅| |
|creationDate| string|| |
|dimension | string || |
|onClickContractAddress | event() || |
|onViewMetaData| event()|| |
|onClickTokenID | event() || |
##### CryptoUnit
##### enum
|Enum Variable |value |
|:--- | --- |
|ETH| ETH|
|MATIC | MATIC |
|WETH| WETH|
|WMATIC | WMATIC |
##### PlaceBid
|Param |type | Required | Description
|:--- | --- | :---:| :---:|
|incrementPercent| Int|✅| value in (%) |
|bidCurrency | enum |✅| [CryptoUnit](#CryptoUnit) |
|termsURL| string|✅| |
|privacyURL| string|✅| |
##### WalletConfig
|Param |type | Required | Description
|:--- | --- | :---:| :---:|
|isAuthenticated| boolean|✅| value in (%) |
|isEmailVerified | boolean |✅| [CryptoUnit](#CryptoUnit) |
|kycStatus| string|✅| |
|onHandleKYC| function|✅| |
##### UserConfig
|Param |type | Required | Description
|:--- | --- | :---:| :---:|
|provider| ether provider|✅| |
|connectedChainId | number |✅| |
|walletAddress| string|✅| |
|balance| number|✅| |
### Development
#### Run the project:
In example directory run cmd
yarn dev
#### 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',
},
},
});
#### config
update tsconfig.json
check mojito-core-service present in path
compilerOptions: { ..., "paths": { "@/": [ "./src/" ], "@mojitoinc/mojito-auction": [ "../src/index.ts" ], "@mojitoinc/core-service": [ "../../mojito-core-service/src/index.ts" ] }, "files": ["../src//*.[jt]s?(x)", "../../mojito-core-service/src//*.[jt]s?(x)"], }