When I left off my last Game Dev Update I had a short check list of next steps. Lets revisit the list, check progress, and keep going:

• Setting up the official collection ✅
• Mint NFTs off the official collection ✅
• Update my API calls to point to the new collection
• Start working on log-in and inventory functionality.

Since the game was already displaying NFT data from a test collection, I’ll just need to update that collection name and test that it’s working properly. To work on the inventory sections, I’m going to need to get the user’s wallet address. To do that, I’m going to set up WAX in the game.

I’ll need the WAX dependency, and I’ll use “npm install @waxio/waxjs” in the terminal to add the package. Next I’ll have to set it up. At the top level directory I’ve created a file called wax.js

This file is importing the dependency, then using it to connect to the WAX RPC Endpoint hosted by Greymass. Next I’ll build out a simple LogIn component. I’ll start by importing the wax.js file. I’ve passed in userAccount and setUserAccount – state that is managed at the top level.

In useEffect(), I’ve defined the handleLogin async function. If a userAccount is set already, the component will not be rendered. Otherwise the Login button will be shown. I’ve set this up to automatically try to log the user in using handleLogin, but the button logs in directly if something happens and it doesn’t work on its own.

userAccount is now being set successfully, and now I can use it to query APIs. While I’m building and testing, I’m going to make a WalletAddress component and display it at the top of my inventory screen so I know it’s there.

Getting The User’s NFT Information

At the top level, I’m going to build out another useEffect() and add a function to grab all the NFTs that the user owns. Click here to view the full EOSIO Contract API

As you can see I’m using literals to drop in variables to the API url, then I’ll use axios to make the API call. I’ll then use the response to set the player’s heldInventory state. Otherwise an error is going to be thrown.

Now that I have the NFT information, I can start doing things with the information. Here’s how my Inventory Screen looks right now if the user is not logged in. Please note that I’m more concerned with functionality than styles at the moment.

I don’t have many items created yet, but I do have an Iron Sword that has a “slot” attribute with the value of “rightHand” and when I log in, it should be shown under “Carried Items” and here’s how that is going to happen:

Let’s try it out and see it in action. After I log in with my wallet address, here’s what I see:

So lets check the list again:

• Setting up the official collection ✅
• Mint NFTs off the official collection ✅
• Update my API calls to point to the new collection. ✅
• Start working on log-in and inventory functionality. ✅

And I think I’m all caught up. Where do I go from here? I’m going to have to allow enemies to drop loot somehow, and I’ll need to add more items and enemies. Those two points seem like the most logical next steps.