🚧

The CollectModal was deprecated in v1.24

Please use the MintModal and SweepModal if using v.1.24 or higher.

CollectModal provides a simple method to mint or sweep the collection based on its current state.

Prerequisites ⚙️

Install and configure ReservoirKit.

CollectModal Setup

ReservoirKit provides a simple to configure modal for adding both minting and sweeping to your react app. Below is an example of a simple CollectModal setup.

import { CollectModal } from '@reservoir0x/reservoir-kit-ui'

<CollectModal
  trigger={
      <button>
      	Collect
      </button>
    }
  collectionId="0xf5de760f2e916647fd766b4ad9e85ff943ce3a2b"
  mode="preferMint"
  onCollectComplete={(data) => {
    console.log('Collect Complete', data)
  }}
  onCollectError={(error, data) => {
    console.log('Collect Error', error, data)
  }}
  onClose={(data, currentStep) => {
    console.log('CollectModal Closed')
  }}
/>

Let's dive into the parameters:

Custom CollectModal

The CollectModal also comes with a custom renderer which can be used to just get the data layer that the CollectModal uses internally to handle the underlying business logic. With the renderer you can rebuild the UI completely to your liking. Below is an example of how it works in practice.

import { CollectModal, CollectStep } from '@reservoir0x/reservoir-kit-ui'


<CollectModal.Custom
  open={open}
  collectionId={collectionId}>
  {({
		contentMode,
    collection,
    token,
    loading,
    address,
    selectedTokens,
    setSelectedTokens,
    itemAmount,
    setItemAmount,
    maxItemAmount,
    setMaxItemAmount,
    paymentCurrency,
    setPaymentCurrency,
    chainCurrency,
    paymentTokens,
    total,
    totalIncludingFees,
    feeOnTop,
    feeUsd,
    usdPrice,
    usdPriceRaw,
    isConnected,
    currentChain,
    mintPrice,
    orders,
    balance,
    contract,
    hasEnoughCurrency,
    addFundsLink,
    blockExplorerBaseUrl,
    transactionError,
    stepData,
    setStepData,
    collectStep,
    setCollectStep,
    collectTokens,
  }) => {
    { Your Custom React Elements }
  })}
</CollectModal.Custom>

The custom CollectModal takes a few parameters like before with one additional one being the open parameter. This is because there is no trigger, you have control over what sort of modal you want this to eventually live in and how to trigger that modal. You'll have the ability to add a custom button with a custom handler, etc. The custom CollectModal then passes some key data into the children which we parse above and use in our custom UI. It's also important to note the CollectStep here which is used to manage the internal state of the CollectModal's logic. You can decide to use all or some of the data passed into your custom implementation.