@mantial/minter-store

Source code at https://github.com/mantial/mantial-minter-store

Installation

npm install @mantial/minter-store

Build

npm run build

Testing library locally

First, clone the project.

Next, generate the dist folder with:

npm run build

Install the package on the target project

npm install @mantial/minter-store

Import from your dist folder and test it :)

Usage

The MinterProvider must enclose the components used and receive chainId and ApiURL from the config. For example:

import React from 'react';
import {MinterProvider} from '@mantial/minter-store';

function App(){
    return(
        <MinterProvider chainId={"0x3"} apiURL={"https://apidev.immutable.mantial.io"} apiIMX={"https://link.ropsten.x.immutable.com"}>
            <Router />  //the rest of your app...
        </MinterProvider>
    )
}

export default App;

Then, you are able to use the minter context somewhere. You have three diferent methods you can use:

• handleChangeChain: to handle when you want the user to change the chain to the chainId you passed in the connfig.

• loginIMX: to login trough ImmutableX to mint NFTs

• collectionOperations: a set of functions:

  • maxBuy: returns the maximum allowed amount that the user can mint per tx.
  • getCollectionDataFromContract: returns useful data from the smart contract (price, totalSaleSupply, saleActive, collectionSupply, saleSold).
  • isSaleSupplyNotAvailable: returns true if the sale of a collection where the user is trying to mint is out of supply.
  • isSupplyNotAvailable: returns true if the collection has no more supply
  • handleBuy: handle the connection to the wallet to allow the user to mint

Example:

import React from 'react';
import {useMinter} from '@mantial/mantial-store';

function Mint(){
    const { collectionOperations } = useMinter();

    return(
        <div>
            <Button onClick={() => {collectionOperations.handleBuy(collection, currentSale, amount)}}>Mint your NFT</Button>
        </div>
    )
}

export default Mint;

Also the library allow you to use some custom hooks like:

• useLogin: allows to connect to the network, check the chain id, check if the provider exists.
• useCollection: returns all the collection data from the backend.
• useSales: returns all the sales data from the backend.

Note: There is a usePrivateMinter, the idea for this is to use it only inside this project and not export its functionality to be used externally.