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.
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
Loading...
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
Loading...
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
Loading...
Note that an image caching service is used to display the NFT image for better performance.
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
Loading...
We set the FT image, symbol, icon, and decimals in state. We use the decimals to format the amount of tokens being bid. In the case of DAI it divides the amount by 10^18. The reverse process is used when making a bid, the bid amount is multiplied by 10^18 before being sent to the contract.
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.
- index.js
Loading...
Updating the indexing API call
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
Loading...
And now instead of getting the bid amount from the deposit, it is now retrieved from the calls argument, from amount. The case is the same for the account Id of the bidder, from sender_id.
- getBidHistory.js
Loading...
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.
