Fetch offers and set nextBid in the input field

[luisalrp]

Hello,

Thanks for writing this example. Its really useful. I am trying to get the offers received and place them in the placeholder of the Input component but I don't get it working.

I've tried the many approaches and it's driving me nuts. Here is my last one:

useEffect(() => {
    setLoadingMinimumNextBid(true);
    const fetchMinimumNextBid = async () => {
      if (auctionListing && auctionListing[0]) {
        const nextBid = await calcNextBid(marketplace, auctionListing[0]);
        setMinimumNextBid(nextBid);
      }
      setLoadingMinimumNextBid(false);
    };
    fetchMinimumNextBid();
  }, [auctionListing]);

  async function calcNextBid(
    marketplace: MarketplaceV3 | undefined,
    auctionListing: EnglishAuction | undefined,
  ): Promise<string | undefined> {
    if (!marketplace || !auctionListing) {
      console.debug("Either marketplace or auctionListing is undefined");
      return undefined;
    }
    const offers = await marketplace.offers.getAllValid({
      tokenContract: collectionAddress,
      tokenId: String(nft.id),
    });
    console.debug("Offers fetched: ${offers.length}");
    const bidBufferBps = auctionListing.bidBufferBps;
    const minimumBidCurrencyValue = auctionListing.minimumBidCurrencyValue.decimals;
    let highestBid = 0;
    if (offers.length > 0) {
      highestBid = offers.reduce((max, offer) => Math.max(Number(offer.totalPrice), max), 0);
      console.debug(`Highest bid from offers: ${highestBid}`);
    }
    const nextBid = highestBid > 0 
      ? ((highestBid * (1 + (bidBufferBps / 10000))).toString()) 
      : minimumBidCurrencyValue.toString();
    console.debug("Calculated next bid: ${nextBid}");
    return nextBid;
  }

No matter the approach I try, I get:

What I'm doing wrong?

Finish building this functionality and the timer for the end of the auctions would help devs so much.

Thanks!