ReservoirKit is a react package that makes it easy to add buying NFTs into your dApp. It's intuitive, responsive and customizable.

Last update: Jul 28, 2022

@reservoir0x/reservoir-kit

ReservoirKit is the official Reservoir Protocol UI Kit. You can choose to use the prebuilt UI or create your own UI while utilizing the logic layer.

Installing ReservoirKit

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

Configuring Reservoir Kit UI

{ Your App } ">
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",
})


  

    { Your App }

  

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 creating 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. The only required option is the apiBase, which we point to the production Reservoir hosted API endpoint. 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.

Theming

ReservoirKit provides 2 preconfigured themes, darkMode and lightMode. They can be used as is or configured with some additional overrides:

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

Click here for a full list of overrides.

If that isn't enough customization you can also create a completely custom ReservoirKitTheme.

const theme: ReservoirKitTheme = {
  radii: { ... },
  fonts: { ... },
  colors: { ... }
}

BuyModal

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

console.log('Purchase Complete')} />">
import { BuyModal } from '@reservoir0x/reservoir-kit-ui'


      Buy Token
    
  }
  collectionId="0xf5de760f2e916647fd766b4ad9e85ff943ce3a2b"
  tokenId="1236715"
  onComplete={() => console.log('Purchase Complete')}
/>

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 a tokenId. These can be set to undefined until the data is ready. Finally you can set an optional callback when the purchase is complete, where you can refresh the data, give your use a success message, etc.

Custom BuyModal

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


  {({
    token,
    collection,
    totalPrice,
    referrerFee,
    buyStep,
    transactionError,
    hasEnoughEth,
    txHash,
    feeUsd,
    totalUsd,
    ethUsdPrice,
    isBanned,
    balance,
    address,
    etherscanBaseUrl,
    buyToken,
    setBuyStep,
  }) => {
    { Your Custom React Elements }
  })}

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

GitHub

https://github.com/reservoirprotocol/reservoir-kit
You might also like...

A fun Buildspace project to mint NFTs on Solana using Metaplex.

A fun Buildspace project to mint NFTs on Solana using Metaplex.

minty-metaplex A project I built by following along with the Buildspace Solana/Metaplex project instructions. Thanks Buildspace! Prerequisites Unless

May 20, 2022

Eth-time - ETH Time - A new NFT collection created to explore new ways of generating NFTs on-chain

ETH Time ETH Time is a new NFT collection created to explore new ways of generat

Jan 25, 2022

An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack configurations if you want to.

Universal Redux What and Why Universal Redux is an npm package that when used as a dependency in your project provides a universal (isomorphic) render

May 22, 2022

A boilerplate template for making your awesome dApp on IoTeX and ETH, BSC, and other possible chains

A boilerplate template for making your awesome dApp on IoTeX and ETH, BSC, and other possible chains

Bounties 🌟 Please notice: If you have your own custom project and you want to r

Jul 3, 2022

A boilerplate template for making your awesome dApp on IoTeX and ETH, BSC

A boilerplate template for making your awesome dApp on IoTeX and ETH, BSC

IoTeX dApp Sample V2 This is a boilerplate template for making your awesome dApp on IoTeX and ETH, BSC, and other possible chains (request here) Techn

Nov 9, 2021

A clean, beautiful, responsive and 100% customizable portfolio template for Data Scientists!

A clean, beautiful, responsive and 100% customizable portfolio template for Data Scientists!

A portfolio template for datascientists using reactjs

Jul 18, 2022

CLI tool that makes react boilerplate component. Supports es6 or typescript, css or @emotion/styled, emmet-like syntax.

CLI tool that makes react boilerplate component. Supports es6 or typescript, css or @emotion/styled, emmet-like syntax.

CLI tool that makes react boilerplate component. Supports es6 or typescript, css or @emotion/styled, emmet-like syntax.

May 24, 2022

Universal avatar makes it possible to fetch/generate an avatar based on the information you have about that user.

Universal avatar makes it possible to fetch/generate an avatar based on the information you have about that user.

Avatar Universal avatar makes it possible to fetch/generate an avatar based on the information you have about that user. We use a fallback system th

Jul 26, 2022

Storybook-addon-next - A no config Storybook addon that makes Next.js features just work in Storybook

Storybook Addon Next 😱 No config support for Next.js: Tired of writing and debu

Jul 31, 2022
Dinos-nft-minting-dapp - A nice and easy way for linking an existing NFT smart contract to this minting dapp
Dinos-nft-minting-dapp - A nice and easy way for linking an existing NFT smart contract to this minting dapp

Welcome to HashLips ?? All the code in these repos was created and explained by

Jan 6, 2022
Web3-nft-dapp-tutorial - A simple web3 app for minting NFTs

Web3 - Full Tutorial The demo contains a basic web3 app and smart contract for m

Jul 31, 2022
Basic Dapp showing how a React Dapp can connect to Cronos using MetaMask and Crypto.com Defi Wallet

cronos-dapp-basic Basic Dapp showing how a React Dapp can connect to Cronos using MetaMask and Crypto.com Defi Wallet You need to have node version 14

Dec 27, 2021
Create-dapp-solana-nextjs - Scaffolding for a Solana dapp using TS, Next.JS, Tailwinds CSS, and Daisy UI

Create Solana Dapp with Next.JS Want to start develop with Solana fetching NFTs

Aug 4, 2022
Re-developed the Sky Ice Cream website using ReactJS. Redesigned the UI to a much more appealing and intuitive styling.

This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: npm start Runs the app in the developmen

Dec 27, 2021
Dapp-core-components - A library that holds the core logic of a dapp on the Elrond Network with an example to get started easily

A library that holds the core logic of a dapp on the Elrond Network with an example to get started easily

Feb 6, 2022
Aug 3, 2022
Fluent Blocks makes it easy to use Fluent & UI Kit designs in app development.

Fluent Blocks makes it easy to use Fluent & UI Kit designs in app development. This repository provides a set of packages developers can use to build

Jul 26, 2022
React package that is an Ergo dApp Connector. Current supported wallets are Nautilus Wallet and SafeW.
React package that is an Ergo dApp Connector. Current supported wallets are Nautilus Wallet and SafeW.

Ergo dApp Connector React Package Table of Contents About The Project Built With Getting Started Prerequisites Installation Usage Contributing License

Jun 7, 2022
A growing collection of responsive Chakra UI Templates ready to drop into your React project.

A growing collection of responsive Chakra UI Templates ready to drop into your React project.

Jul 31, 2022