Add Bidding

Prerequisites ⚙️

Install and configure ReservoirKit.

BidModal

ReservoirKit provides a simple to configure modal for facilitating token bidding in your react app. Below is an example of a simple BidModal setup.

import { BidModal } from '@reservoir0x/reservoir-kit-ui'
import { useState } from 'react'

const openState = useState(true)

<BidModal
  trigger={
    <button>
      Place Bid
    </button>
  }
  collectionId="0xf5de760f2e916647fd766b4ad9e85ff943ce3a2b"
  tokenId="1469875"
  openState={openState}
  attribute={{
   key: "Fur",
   value: "Gold"
  }}
  onBidComplete={(data) => {
    console.log('Bid Complete', data)
  }}
  onBidError={(error, data) => {
    console.log('Bid Transaction Error', error, data)
  }}
  onClose={(data, stepData, currentStep) => {
    console.log('BidModal Closed')
  }}
/>

Let's dive into the parameters. You'll need to provide an element to trigger the modal, this can be any valid html element. Next you'll want to provide a collectionId and/or a tokenId. These can be set to undefined until the data is ready. The BidModal requires at least a collectionId, for collection wide bids. You can also set some optional parameters:

Finally you can set some optional callbacks:

onBidComplete: Triggered when the bid was placed successfully, returns some useful data about the bid.

onBidError: Triggered when the bid resulted in an error, returns the error and the bid data.

onClose: Triggered when the modal was closed. Returns some useful data about the bid as well as the step data and the current step.

Conditional Rendering

ReservoirKit's BidModal doesn't take care of conditionally showing the button/modal, we leave that logic up to the developer. The user also needs to have a connected wallet. You can check this by looking for a signer from the useSigner wagmi hook.

Custom BidModal

The BidModal also comes with a custom renderer which can be used to just get the data layer that the BidModal 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 { BidModal, BidStep } from '@reservoir0x/reservoir-kit-ui'

<BidModal.Custom
  open={open}
  tokenId={tokenId}
  collectionId={collectionId}>
  {({
      token,
      collection,
      attributes,
      bidStep,
      expirationOption,
      expirationOptions,
      wrappedBalance,
      wrappedContractName,
      wrappedContractAddress,
      bidAmount,
      bidAmountUsd,
      hasEnoughNativeCurrency,
      hasEnoughWrappedCurrency,
      amountToWrap,
      balance,
      convertLink,
      canAutomaticallyConvert,
      transactionError,
      stepData,
      bidData,
      isBanned,
      setBidAmount,
      setExpirationOption,
      setBidStep,
      setTrait,
      trait,
      placeBid,
  }) => {
    { Your Custom React Elements }
  })}
</BidModal.Custom>

The custom BidModal 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 BidModal 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 BidStep here which is used to manage the internal state of the BidModal's logic. You can decide to use all or some of the data passed into your custom implementation.

👍

Nice job!

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