Display a User's NFTs Using the OpenSea API
Let’s display a user’s NFT ticket in our dApp.
Using Axios, we can make a call to OpenSea’s API, passing in the user’s address and the smart contract address as params.
Instructor: [0:00] Let's add a way for connected users to see the NFT tickets in their wallet. We'll come down below to our menu items. Find wallet. Add a new prop, isDisabled equals not address. That way this menu item will be disabled when we don't have a connected user.
[0:18] We'll also come down below to our routes and add a new prop to our wallet component. Say, address equals address. Then we'll go to our wallet component, add our new prop address, and import useEffect from React.
[0:38] We'll also import Axios because we're going to be calling the OpenSea API. Import Axios from Axios. Then we'll come down below and add a new effect hook, useEffect. We'll add address to the dependency array so that this always runs when that value changes.
[1:02] Inside we'll say, if not address, return. Otherwise, we're going to call Axios.get, and paste the URL to the Rinkeby API. We need to add a couple query parameters. First, we'll say, owner equals $address.
[1:22] We get a list of assets owned by the connected user. Then we'll add asset contract address process.mf.react app, contract ID. Next, we'll add a then block, take the response, and log it out.
[1:45] We'll also add a catch block, take the error, and log that out as well. Then we'll go to the browser and go to your tickets. You can see our placeholder text here.
[1:57] If we open the console, you'll see we're logging an object, which contains data from the OpenSea API. Back in our component, we're going to import useState because we want to add two new state variables here.
[2:10] First, const loading ticket, set loading ticket equals useState false. We'll also add, const ticket, set ticket equals useState null. Let's come back into our hook.
[2:32] Then let's come into the then block and add a little logic here to parse the response. We'll say, if res.status equals equals equals 200, and res data assets exists, and res data.assets has length.
[2:52] Let's set our ticket to res.data.assets, and we'll take the first index. At the top of the block, we'll set loading ticket to true. Below, we'll set loading ticket to false.
[3:10] In the catch block, we're going to do the same thing and say, set loading ticket is false. Let's come up above and import a few things from Chakra UI. I'm going to paste these, and we'll come down below to our markup.
[3:28] We're going to add a loading state. We'll say, loading ticket. Then we'll add a circular progress bar. Below, we'll wrap our text here in a conditional block and say, when we're not loading a ticket, and we don't have a ticket.
[3:44] Let's display our placeholder text. Then in a third block we'll say, when we're not loading a ticket, but we have one, let's run a function called create ticket display. Then we'll come up above here.
[4:00] We'll say const create ticket display equals a function. In the function, we'll check to see that we have a ticket. We'll say, if we don't have a ticket, let's just return null.
[4:15] Otherwise, return this markup, which is essentially a link that takes the permalink and ID from the OpenSea API data. Then inside the link, we interpolate the token ID here in this text block.
[4:31] We also display the image provided. Then if we go into the browser and refresh our page, we can see our NFT ticket. In summary, we used Axios to call the OpenSea API to fetch and display data about the connected user's ticket.