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: Dec 26, 2022
  • Comments: 8

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(8)

  • 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'?

    steve@5950x:~/Documents/GitHub/mavrik/reservoir-kit$ yarn run build:fix-type-defs Fix bad imports in d.ts files… Fixed: [ {} ] steve@5950x:~/Documents/GitHub/mavrik/reservoir-kit$ yarn build mv: cannot stat 'tsconfig.production.json': No such file or directory steve@5950x:~/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

    Order Asks Query Type should support multiple Ids

    The API validation schema supports both single id and an array of ids as per:

    https://github.com/reservoirprotocol/indexer/blob/bbfef603a849b16326ea75e955b767872cf7920f/src/api/endpoints/orders/get-orders-asks/v4.ts#L38

    also querying logic supports ids arrays as per:

    https://github.com/reservoirprotocol/indexer/blob/bbfef603a849b16326ea75e955b767872cf7920f/src/api/endpoints/orders/get-orders-asks/v4.ts#L247

    Client side types currently do not support an array of Ids as per:

    https://github.com/reservoirprotocol/reservoir-kit/blob/f65aa84145191a5942a97cefd11c055b9ce2045a/packages/sdk/src/types/api.ts#L5374

  • 5

    Updated deprecated apis used in hooks/modals

    Updated the following hooks:

    • useBids
    • useListings
    • useOwnerListings
    • useCollectionActivity
    • useUserTopBids
    • useUsersActivity

    Impacted the following modals:

    • CancelBidModal
    • AcceptBidModal
  • 6

    API returns outdated sell order

    I'm getting an error when trying to buy this asset

    https://www.reservoir.market/0x8b82367b242eaa8f5c5fe35bd7d29d16a981f2a0/7

    The error also happens when buying directly on the reservoir site

    After investigation noticed that the API route returns the wrong Ask data from foundation

    https://api.reservoir.tools/orders/asks/v3?token=0x8b82367b242eaa8f5c5fe35bd7d29d16a981f2a0%3A7&includePrivate=false&includeMetadata=false&includeRawData=false&normalizeRoyalties=false&sortBy=createdAt&limit=50

    The api returns a 0.5 eth price while in the foundation website, the current price is 2.04

    https://foundation.app/@ashten/ngnm/7

  • 7

    Convert bps fee to wei price when buying

    • Convert bps fee to atomic unit in BuyModalRenderer before calling buyToken
    • BREAKING: Remove global referrerFee and referrerRecipient due to difficulty calculating fee without price and currency in buyToken method.
  • 8

    error calling listing api with client package

    Error: cannot estimate gas; transaction may fail or may require manual gas limit [ See: https://links.ethers.org/v5-errors-UNPREDICTABLE_GAS_LIMIT ] (error={"reason":"cannot estimate gas; transaction may fail or may require manual gas limit","code":"UNPREDICTABLE_GAS_LIMIT","error":{"code":-32000,"message":"gas required exceeds allowance (1541)"},

    const { createClient} = require("@reservoir0x/reservoir-kit-client"); const HDWalletProvider = require("@truffle/hdwallet-provider") const { ethers } = require("ethers"); const web3provider = new HDWalletProvider(privateKey, url); var provider = new ethers.providers.Web3Provider(web3provider) var wallet = new ethers.Wallet(privateKey); singer = wallet.connect(provider)

    const client = createClient({
        apiBase: "https://api.reservoir.tools",
        apiKey: apiKey,
        source: source
      });
    
    const result = await client.actions.listToken({
        listings: listing,
        signer: signer,
        // options: options,
      })