ReservoirKit UI

ReservoirKit UI

ReservoirKit UI is a react library that makes it easy to add marketplace functionality and UI into your project. If you are not using react and need a custom solution you can use ReservoirKit Client.

Installing ReservoirKit UI

yarn add @reservoir0x/reservoir-kit-ui

Also make sure to install the peer dependencies required by ReservoirKit if your application doesn't already include them:

yarn add wagmi ethers react react-dom

If your application uses radix-ui you'll need to ensure that the radix ui components version match what reservoir-kit-ui is using. Deviating from that version may cause issues.

Configuring ReservoirKit UI

import {
  ReservoirKitProvider,
  darkTheme,
} from '@reservoir0x/reservoir-kit-ui'
import { WagmiConfig } from 'wagmi'

const wagmiClient = ...

const theme = darkTheme({
  headlineFont: "Sans Serif",
  font: "Serif",
  primaryColor: "#323aa8",
  primaryHoverColor: "#252ea5",
})

<ReservoirKitProvider
  options={{
    apiBase: 'https://api.reservoir.tools',
    apiKey: 'YOUR-KEY'
    ...
  }}
  theme={theme}
>
  <WagmiConfig client={wagmiClient}>

   { Your App }

  </WagmiConfig>
</ReservoirKitProvider>

The sample code above is all you need to get started with ReservoirKit. Let's break it down step by step. Start by importing the ReservoirKitProvider which is needed for configuring ReservoirKit. Also import a theme of your choice, we provide a lightTheme and a darkTheme. Next we import the WagmiConfig, Wagmi is a peer dependency of ReservoirKit.

Now that we have all the imports ready we can continue by supplying some options. You'll need to supply an apiBase which can be any of our hosted reservoir indexer endpoints or you can host one yourself. Then you'll need to pass in an apiKey, while optional it will raise the rate limit for your application. We recommend getting a free instant key before deploying to production. Next we create a theme. As mentioned previously we have a few preloaded themes with the ability to override some variables, like colors and fonts. Learn more about theming options here.

Next we wrap our app with the ReservoirKitProvider and pass it some options. Below is a list of ReservoirKit UI options:

OptionDescription
apiBaseThe apiBase can be one of our hosted api endpoints or any instance of the Reservoir indexer. This is a required option. This is the only required option.
disablePoweredByReservoirUsed to disable the powered by Reservoir footers
ReservoirKit Client optionsMore options can be configured for the underlying client instance.

We also pass in the theme we previously set up. Now we need to make sure we wrap our application in the WagmiConfig. Follow the instructions in their docs to set up the WagmiClient and then pass it into the WagmiConfig. Finally nest your application code within the ReservoirKitProvider and the WagmiConfig.

Everything is now correctly configured and ready to go. One last thing you may want to set up for your domain is custom source metadata which ReservoirKit as well as the Indexer use to dynamically keep a catalog of all marketplace source metadata.

👍

Great job!

Now that we've installed and configured ReservoirKit lets add a buy modal


Did this page help you?