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

  • By Reservoir Protocol
  • Last update: Nov 26, 2022
  • Comments: 4

ReservoirKit

ReservoirKit is a developer toolkit for buying, selling and managing NFTs.

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

Head over to our docs to learn more.

Github

https://github.com/reservoirprotocol/reservoir-kit

Comments(4)

  • 1

    doesn't build

    reservoir-kit$ yarn build

    @parcel/transformer-typescript-types: Cannot find module '../modal/list/ListModalRenderer' or its corresponding type declarations.

    /home/steve/Documents/GitHub/mavrik/reservoir-kit/packages/ui/src/hooks/useListingPreapprovalCheck.ts:4:26 3 | import { Marketplace } from './useMarketplaces'

    4 | import { Listings } from '../modal/list/ListModalRenderer' | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot find module '../modal/list/ListModalRenderer' or its corresponding type declarations. 5 | import { useSigner } from 'wagmi' 6 | import { Execute } from '@reservoir0x/reservoir-kit-client'

    @parcel/transformer-typescript-types: Cannot find module './modal/buy/BuyModal' or its corresponding type declarations.

    /home/steve/Documents/GitHub/mavrik/reservoir-kit/packages/ui/src/index.ts:20:26 19 | //Components

    20 | export { BuyModal } from './modal/buy/BuyModal' | ^^^^^^^^^^^^^^^^^^^^^^^ Cannot find module './modal/buy/BuyModal' or its corresponding type declarations. 21 | export { BuyStep } from './modal/buy/BuyModalRenderer' 22 |

    @parcel/transformer-typescript-types: Cannot find module './modal/buy/BuyModalRenderer' or its corresponding type declarations.

    /home/steve/Documents/GitHub/mavrik/reservoir-kit/packages/ui/src/index.ts:21:25 20 | export { BuyModal } from './modal/buy/BuyModal'

    21 | export { BuyStep } from './modal/buy/BuyModalRenderer' | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot find module './modal/buy/BuyModalRenderer' or its corresponding type declarations. 22 | 23 | export { ListModal } from './modal/list/ListModal'

    @parcel/transformer-typescript-types: Cannot find module './modal/list/ListModal' or its corresponding type declarations.

    /home/steve/Documents/GitHub/mavrik/reservoir-kit/packages/ui/src/index.ts:23:27 🚨 Build failed.

    @parcel/core: Failed to resolve './modal/buy/BuyModal' from './packages/ui/src/index.ts'

    /home/steve/Documents/GitHub/mavrik/reservoir-kit/packages/ui/src/index.ts:20:26 19 | //Components

    20 | export { BuyModal } from './modal/buy/BuyModal' | ^^^^^^^^^^^^^^^^^^^^^^^ 21 | export { BuyStep } from './modal/buy/BuyModalRenderer' 22 |

    @parcel/resolver-default: Cannot load file './modal/buy/BuyModal' in './packages/ui/src'. 💡 Did you mean './Modal/buy/BuyModal'? 💡 Did you mean './Modal/Modal'?

    [email protected]:~/Documents/GitHub/mavrik/reservoir-kit$ yarn run build:fix-type-defs Fix bad imports in d.ts files… Fixed: [ {} ] [email protected]:~/Documents/GitHub/mavrik/reservoir-kit$ yarn build mv: cannot stat 'tsconfig.production.json': No such file or directory [email protected]:~/Documents/GitHub/mavrik/reservoir-kit$

  • 2

    Confusing UI

    Hey,

    Some product feedback, the Same Profit and Custom tabs are quite confusing. I'm not actually what they even do. I'm guessing one is how much I earn before fees and one is after fees, but I'm not really sure (till I look at the code). May want to remove these tabs or rename them to something more clear.

    image
  • 3

    Support for multiple fee recipients

    The API supports splitting fees when listing: https://github.com/reservoirprotocol/indexer/issues/1540

    And will soon support it for bids: https://github.com/reservoirprotocol/indexer/issues/1596

    This package expects a string for these fields however. Not sure if the types will update once the API is updated. Happy to contribute a PR here too (I can imagine some other parts of this package will break once feeRecipient supports both string and string[]).

    image
  • 4

    Expected price updates

    • Fix a bug where expected price wasn't being handled correctly in the case of quote being higher than the price
    • Improve price mismatch error messaging