ReservoirKit UI (React)

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 the Reservoir SDK.

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

ReservoirKit UI relies on [email protected], [email protected] and ethersjs.

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={{
    chains: [{
      id: 1,
      baseApiUrl: "https://api.reservoir.tools",
      default: true,
      apiKey: "YOUR_KEY"
    }],
    source: "YOUR_SOURCE"
    ...
  }}
  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 array with at least one reservoir chain. A reservoir chain consists of an id (e.g. 1 for mainnet), a baseApiUrl and a boolean indicating if it's the default. ThebaseApiUrl which can be any of our hosted reservoir indexer endpoints or you can host one yourself. Optionally a chain can have an apiKey, while optional it will raise the rate limit for your application. We recommend getting a free instant key before deploying to production. If you'd like to read more about the chain configuration in depth, click here.

Now 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:

You can also pass in swrOptions which allow you to further configure swr at a global level.

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