Leverage the SweepModal to sweep tokens using ReservoirKit
Prerequisites ⚙️
Install and configure ReservoirKit.
SweepModal
ReservoirKit provides a simple to configure modal for facilitating sweeping tokens in your react app. Below is an example of a simple SweepModal setup.
import { SweepModal } from '@reservoir0x/reservoir-kit-ui'
<SweepModal
trigger={
<button>
Sweep
</button>
}
collectionId={collectionId}
onSweepComplete={(data) => {
console.log('Sweep Complete', data)
}}
onSweepError={(error, data) => {
console.log('Sweep Error', error, data)
}}
onClose={() => {
console.log('SweepModal 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
. This can be set to undefined until the data is ready.
There are also some additional optional props:
Prop | Description |
---|---|
referrer | Used to conditionally apply a referral fee receiver on top of an order when purchasing. This will override the global configuration. |
referrerFeeBPS | Used to conditionally apply a referral fee on top of an order when purchasing. The fee is in bps. The fee currency will follow the default rules for the execute buy endpoint feesOnTop parameter. This takes precedence over the referrerFreeFixed . |
referrerFeeFixed | Used to conditionally apply a referral fee on top of an order when purchasing. The fee is a flat fee in the atomic unit of whatever the listing currency will be in (for ether this will be wei). The fee currency will follow the default rules for the execute buy endpoint feesOnTop parameter. |
normalizeRoyalties | Use this to ensure that royalties are added to the order. If royalties are missing from the order then the correct royalties are added on top. If unspecified then the global setting will be used if provided. |
openState | This is a state tuple from react's useState, you can use this to programmatically open or close the modal. The modal will use this state when determining if the modal is open or closed. |
Finally you can set some optional callbacks:
onSweepComplete: Triggered when the purchase was completed successfully, returns some useful data about the purchase.
onSweepError: Triggered when the purchase resulted in an error, returns the error and the purchase data.
onClose: Triggered when the modal was closed. Returns some useful data about the purchase as well as the step data and the current step.
Conditional Rendering
ReservoirKit's SweepModal 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 useWalletClient wagmi hook.
Custom SweepModal
The SweepModal also comes with a custom renderer which can be used to just get the data layer that the SweepModal 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 { SweepModal, SweepStep } from '@reservoir0x/reservoir-kit-ui'
<SweepModal.Custom
open={open}
collectionId={collectionId}>
{({
loading,
address,
selectedTokens,
itemAmount,
setItemAmount,
ethAmount,
setEthAmount,
isItemsToggled,
setIsItemsToggled,
maxInput,
currency,
isChainCurrency,
total,
totalUsd,
currentChain,
availableTokens,
balance,
hasEnoughCurrency,
blockExplorerBaseUrl,
transactionError,
stepData,
sweepStep,
sweepTokens,
}) => {
{ Your Custom React Elements }
})}
</SweepModal.Custom>
The custom SweepModal 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 SweepModal 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 SweepStep
here which is used to manage the internal state of the SweepModal'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 sweep modal to your dApp, let's customize the theme to match your brand.