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/[email protected] @mui/[email protected] @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)"], }