useOffers

Hook for loading offers.

import { useOffers } from '@niftyapes/sdk'

Usage

This hook uses React Query for data fetching and returns the complete useQueryobject in the response.

JavaScript

import React from "react";
import { useOffers, Offer } from "@niftyapes/sdk";
import { formatEther } from "ethers/lib/utils";

const UseOffers: React.FC = () => {
  const { data, isFetched } = useOffers({
    collection: "0xa5ae59eee379fc02206d715b9431ffa53507c152",
    includeExpired: false,
  });

  if (!isFetched) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <div style={{ fontWeight: "bold", marginBottom: "30px" }}>
        {data?.length} Offers
      </div>
      <div>
        {data?.map((offer: Offer, idx) => {
          return (
            <div key={`offer-${idx}`}>
              {offer.status}
              <span style={{ margin: "10px" }}>Token #{offer.offer.nftId}</span>
              <span style={{ margin: "10px" }}>{`${formatEther(
                offer.offer.price
              )} ETH`}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default UseOffers;

Configuration

TypeScript

type IUseOffersConfig = {
  collection?: string;
  creator?: string;
  includeExpired?: boolean;
  nftId?: string;
};

collection (optional)

Collection address.

JavaScript

{
  collection:'0x1cb1a5e65610aeff2551a50f76a87a7d3fb649c6'
}

creator (optional)

Offer creator address.

{
   creator:'0x4298e663517593284Ad4FE199b21815BD48a9969'
}

includeExpired (optional)

When the value is set to true, all offers will be returned, even the expired ones.

JavaScript

{
  includeExpired:true
}

nftId (optional)

Offers for a specific token.

JavaScript

{
  collection:'0x1cb1a5e65610aeff2551a50f76a87a7d3fb649c6',
  tokenId:'6027'
}