Fetch Mint Info From a Smart Contract

Ryan Harris: [0:00] This UI is missing some information about how many tickets are available and how many have sold. Let's fetch that data from our smart contract and render it here below the Buy Ticket button.

[0:10] First thing we're going to do is come into VS Code and pass a new prop to our buy component, connectedContract = and we'll pass it our contract instance, connectedContract. Then we'll open our buy component and add our new prop, connectedContract.

[0:30] This component will need to store some local state. Let's come to the top of the file and say import { useState } from 'react'. Then we'll come back down into the component and add our first state variable, const totalTicketCount, set totalTicketCount = useState(). We'll set it to null for now.

[0:57] Below, we'll add another state variable, const availableTicketCount, set availableTicketCount = useState(). We'll set this to null as well.

[1:11] Let's add two functions to fetch these values from our smart contract. First, we'll say const getTotalTicketCount = async. Inside the function, we'll add a try block with a catch. For now, we'll just log out the error console.log(error).

[1:34] Here, we'll add a new variable. We'll say const count = await connectedContract.totalTicketCount. Then we'll convert that value to a number and set it to our local state, set totalTicketCount to count.toNumber. We'll add a similar function above, const getAvailableTicketCount = async.

[2:05] Inside, we'll also add a try block, try catch (error) { console.log(error) }. Here, we'll instantiate another variable called count const count = this time we'll say await connectedContract.availableTicketCount. Then we'll do the same thing. We'll set our local state, set availableTicketCount. We'll pass it count.toNumber.

[2:40] We'll add an effect hook to our component, useEffect. Inside, we'll make sure we have our contract. If ! ConnectedContract return. Otherwise, we want to call both of our functions, getAvailableTicketCount and getTotalTicketCount. Since those functions are already set in our local state, we can just come down below to our markup.

[3:09] Below our button group, we'll conditionally render some text and only show it when we have an available ticket count and a total ticket count. We'll say availableTicketCount && totalTicketCount. If we have both of those, then we'll display some text.

[3:30] Inside the text, we'll display our state values. We'll say availableTicketCount of totalTicketCount have been minted. We'll save. If we come to the browser, we can now see it says 10 of 10 minted because none of our tickets have been sold.

[3:48] If I click the Buy Ticket button and confirm the transaction in metamask, you can see the success notification and that our UI has updated to say 9 of 10 minted.

[3:59] To review, we fetched two values from our smart contract, saved them in our component state, and then conditionally render them inside of our UI.