Updating the Frontend

Now we’ve updated the contract to include an NFT as a reward and changed the contract such that it accepts bids in fungible tokens, we need to update the frontend accordingly. From the repository root, navigate to frontends/03-frontend. Use Node.js 22.22.2 or newer, copy .env.example to .env.local, and set NEXT_PUBLIC_AUCTION_CONTRACT to your initialized FT/NFT auction. Set NEXT_PUBLIC_NETWORK_ID to the correct network and optionally override NEXT_PUBLIC_RPC_URL.

cp .env.example .env.local
npm ci
npm run dev

Before bidding, transfer the NFT to the auction account and register the auction, bidders, and auctioneer on the FT contract, as covered in the previous section.

Getting the data from the contract

Now we have a function to output the whole contract state we will call this function in our frontend

index.js

useEffect(() => {
  const getInfo = async () => {
    const data = await wallet.viewMethod({
      contractId: AUCTION_CONTRACT,
      method: "get_auction_info",
    });
    setAuctionInfo(data)
  }
  getInfo().catch((err) => setError(err.message));

See code on GitHub

This call will deliver us the contract Ids of the FT and NFT contracts along with the token Id of the NFT. We will then use this information to call the ft_metadata and nft_token methods on the FT and NFT contracts respectively to get information about the FT and NFT.

Displaying the NFT

We want to show what NFT is being auctioned. To do this we will call nft_token on the NFT contract to get the NFT metadata. To call this method we need to specify the NFT contractId and the token_id, which can be found in the auction information. nft_token also returns the owner of the NFT, so we’ll check this against the contract account to verify that the auction is valid.

index.js

useEffect(() => {
  const getNftInfo = async () => {
    const data = await wallet.viewMethod({
      contractId: auctionInfo.nft_contract,
      method: "nft_token",
      args: { token_id: auctionInfo.token_id }
    });
    setNftInfo(data)
    setValidAuction(data?.owner_id === AUCTION_CONTRACT ? "Valid Auction" : "NFT is not held by the auction")
  }
  if (auctionInfo) {
    getNftInfo().catch((err) => setError(err.message));
  }

}, [auctionInfo]);

See code on GitHub

Note that this effect will only run once the auctionInfo updates because we first need the NFT contract ID and token ID from auctionInfo to make a valid call to nft_token. In a new component named AuctionItem we display the NFT image, name, and description.

AuctionItem.jsx

import styles from './AuctionItem.module.css';

const AuctionItem = ({ nftMetadata, validAuction }) => {
  const media = nftMetadata?.media;
  const cardImage = !media ? null : media.startsWith('ipfs://')
    ? `https://ipfs.io/ipfs/${media.slice(7)}`
    : /^https?:\/\//.test(media) ? media : `https://arweave.net/${media}`;

  return (
    <div className={styles.container}>
       <div className={styles.description}>
          <p>{validAuction}</p>
          <h2>{nftMetadata?.title}</h2>
          <p>{nftMetadata?.description}</p>
        </div>
      <div className={styles.imageSection}>
        {cardImage && (
        <img
          src={cardImage}
          alt="NFT"
        />
        )}
      </div>
    </div>
  );
}

export default AuctionItem;

See code on GitHub

The component uses HTTP image URLs directly, resolves ipfs:// URLs through an IPFS gateway, and treats other media values as Arweave IDs.

Fetching FT information

Using the FT contract ID from the auction information, we can call the ft_metadata method on the FT contract to get information about the fungible token that is being used for the auction.

index.js

useEffect(() => {
  const getFtInfo = async () => {
    const ftInfo = await wallet.viewMethod({
      contractId: auctionInfo.ft_contract,
      method: "ft_metadata",
    });
    setFtContract(auctionInfo.ft_contract)
    setFtName(ftInfo.symbol)
    setFtImg(ftInfo.icon)
    setFtDecimals(ftInfo.decimals)
    let bidAmount = formatUnits(auctionInfo.highest_bid.bid, ftInfo.decimals)
    setLastBidDisplay(bidAmount)

    fetchPastBids(auctionInfo.ft_contract);
  }
  if (auctionInfo) {
    getFtInfo().catch((err) => setError(err.message));
  }
}, [auctionInfo]);

See code on GitHub

We set the FT symbol, icon, and decimals in state. We use formatUnits to display the highest bid and parseUnits to convert an entered bid into the token’s smallest units. Both helpers use integer arithmetic and return strings so token amounts retain their full precision. The number of decimals comes from ft_metadata; for DAI it is 18.

Bidding with FTs

Instead of calling the function bid on the contract we now call the ft_transfer_call function on the FT contract. This function transfers the FTs to the auction contract and calls the ft_on_transfer on the auction contract. We attach exactly 1 yoctoNEAR and 300 Tgas to the call. The result of ft_transfer_call reports how many tokens were used. If it returns zero, the frontend displays an error explaining that the bid was rejected and the tokens refunded. After a successful bid or claim, the page reloads to show the updated state.

index.js

const bid = async (amount) => {
  const real_amount = parseUnits(amount, ftDecimals)
  let response = await wallet.callMethod({
    contractId: auctionInfo.ft_contract,
    method: "ft_transfer_call",
    deposit: '1',
    args: { "receiver_id": AUCTION_CONTRACT, "amount": String(real_amount), "msg": "" },
    gas:"300000000000000"
  })
  if (BigInt(response ?? '0') === 0n) {
    throw new Error('The auction rejected this bid and refunded the tokens');
  }
  window.location.reload();
  return response
}

See code on GitHub

Updating the indexing API call

To display historical bids, add the server-only API_KEY to .env.local as described in the indexing section. Without this key, the rest of the auction frontend still works. We need to update the API call that fetches historical bids to now index each time ft_on_transfer is called on the auction contract from the FT contract.

getBidHistory.js

export default async function handler(req, res) {
    try {
      if (!process.env.API_KEY) {
        return res.status(500).json({ error: "API key not provided" });
      }
      // Get all bid transactions
      const { contractId, ftId } = req.query;
      const bidsRes = await fetch(`https://${process.env.NEXT_PUBLIC_NETWORK_ID === 'mainnet' ? 'api' : 'api-testnet'}.nearblocks.io/v1/account/${contractId}/txns?from=${ftId}&method=ft_on_transfer&page=1&per_page=25&order=desc`, {
        headers: {
          'Accept': '*/*',
          'Authorization': `Bearer ${process.env.API_KEY}`
        }
      });

See code on GitHub

And now instead of getting the bid amount from the deposit, it is now retrieved from the calls argument, from amount. We keep the amount as a string to preserve its precision. The case is the same for the account Id of the bidder, from sender_id.

getBidHistory.js

if (txn.receipt_outcome.status) {
  let args = txn.actions[0].args;
  let parsedArgs = JSON.parse(args);
  let amount = String(parsedArgs.amount);
  let account = parsedArgs.sender_id;

See code on GitHub

Conclusion

Ok nice, that didn’t take too long. To look back, we updated the frontend to now display the NFT being auctioned, to display bid amounts - both the current and historical bids - in terms of the FT being used, and changed the bidding process to now use FTs. In the final section of this mega tutorial we’ll create an auction factory contract that is used to deploy and initialize new auction contracts.

Getting Started

Resources

Updating the Frontend

Getting the data from the contract

Displaying the NFT

Fetching FT information

Bidding with FTs

Updating the indexing API call

Conclusion

​Getting the data from the contract

​Displaying the NFT

​Fetching FT information

​Bidding with FTs

​Updating the indexing API call

​Conclusion

Getting the data from the contract

Displaying the NFT

Fetching FT information

Bidding with FTs

Updating the indexing API call

Conclusion