Prerequisites ⚙️

Install and configure ReservoirKit.

CollectButton

ReservoirKit provides a simple to configure button for facilitating sweeping and minting tokens in your react app. The CollectButton automatically detects if a given collection or token is minting and handles rendering the MintModal or SweepModal for you. Below is an example of a simple CollectButton setup.

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

<CollectButton
  contract={contract}
	onConnectWallet={onConnectWallet}
/>

Let's dive into the parameters:

Custom CollectButton

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

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

<CollectButton.Custom
	onConnectWallet={onConnectWallet}
  contract={contract}>
  {({
     loading,
     publicMintData,
     mintStages,
     collection,
     tokenData,
  }) => {
    { Your Custom React Elements }
  })}
</CollectButton.Custom>

The custom CollectButton takes in the same parameters as before. You'll then have access to the data that the CollectButton uses internally and can use all or some of that data in your custom implementation.

👍

Nice job!

Now that we've added a CollectButton to your dApp, let's customize the theme to match your brand.