Moralis Tasks – Construct an In-Sport Unity NFT Store » Moralis » The Final Web3 Growth Platform

On this week’s Moralis Mission you’ll learn to purchase NFTs from an NPC Store and the way to create a full on-chain stock system with Unity and Moralis.

We are going to create after which retrieve some objects from an on-chain database and that can give us the flexibility to change them and even add new ones in actual time.

Then we are going to select and mint one of many objects as an NFT and switch it to our pockets. After 1 or 2 minutes of syncing, we can have the NFT in our stock. By clicking on it, the online browser will open and we’ll be capable of see it on OpenSea.

PREREQUISITES

GET STARTED

Clone the youtube-tutorials GitHub Repository:

git clone https://github.com/MoralisWeb3/youtube-tutorials.git

As soon as downloaded, navigate to the unity folder and you’ll discover all of the unity tutorials. Open unity-web3-nft-shop with Unity Hub and also you’re able to go!

VIDEO STRUCTURE

Alright so simply to summarize let’s see the construction that the video will comply with:

1. First, I’m gonna present you ways the challenge is structured so you’ve got a broader imaginative and prescient earlier than going into particular options

2. Second, we’re gonna setup a Moralis Server and get the credentials we have to log into Web3

3. Third, we’re gonna add some objects to the Moralis Database and we are going to learn to populate them into the store stock.  (ShopInventory.cs)

4. Then, we are going to deploy a sensible contract which is able to comprise the mint perform (Remix)

5. After that, we are going to name that perform from Unity and really mint the NFT. (PurchaseItemController.cs)

6. And Lastly we are going to learn to retrieve the NFT and the way to see it on OpenSea.

1. Mission construction overview

First we will check out how the challenge is structured:

If we take a look at the Property tab:

• Below _Project you’ll discover all of the belongings created for this challenge.
• Below Moralis Web3 Unity SDK → Sources you’ll discover the MoralisServerSettings. We might want to fill this later.
• Below ThirdParty you’ll discover all of the free belongings from the Unity Asset Retailer.

There’s just one scene on this challenge, positioned below _Project → Scenes → Sport.unity so open it.

If we take a look at the Hierarchy tab:

• MoralisStandaloneAuth: Takes care of the authentication to Moralis and Web3.
• GameManager: Listens to many of the occasions within the sport and manages sport states.
• CameraManager: Manages the PlayerCamera and the NpcCamera.
• Participant: All character associated parts and scripts are inside this prefab.
• World:  All of the room surroundings belongings are contained right here, however there’s one which has performance other than ornamentation:
  • Room → ShopCounter: Triggers an occasion when the participant collides with it.
• UI Components: We’ve got 3 vital objects right here:
  • ShopInventory: It can populate the objects from the Moralis Database.
  • PlayerInventory: It can populate the NFTs owned by the participant.
  • PurchaseItemManager: It takes care of the minting/shopping for means of the objects.

2. Setup Moralis Server

Earlier than going proper into Unity, let’s create a Moralis Server.

Go to https://admin.moralis.io/login and log in (enroll if you’re not already registered). Click on on Create a brand new Server:

Click on on Testnet Server:

Choose no matter identify you need and likewise your closest area. Then choose Polygon (Mumbai), as we’re going to be deploying the good contract to this chain. Lastly, click on on Add Occasion:

The server can be created so if you happen to click on on View Particulars you’ll discover the Server URL and the Software ID so simply begin by copying the Server URL (you’ll need to do the identical for Software ID):

Go to Unity and now it’s a must to choices:

1. Within the Property tab go to Moralis Web3 Unity SDK → Sources and fill the MoralisServerSettings with each Server URL and Software ID:

2. Within the Unity Menu Bar go to Window → Moralis → Web3 Unity SDK → Open Web3 Setup and paste Server URL and Software ID utilizing the wizard:

Hit on Finished and you should have the Moralis Server arrange. Good!

3. Put together store objects

So after establishing the Moralis Server, once we hit play MoralisStandaloneAuth will care for the authentication course of. In the event you scan the QR code together with your MetaMask pockets and also you authenticate efficiently, MoralisStandaloneAuth.cs will set off an occasion referred to as Authenticated.

As a result of MoralisStandaloneAuth.cs inherits from MoralisAuthenticator.cs, to take heed to this occasion from some other we might want to kind it like this:
MoralisAuthenticator.Authenticated +=

One of many scripts that listens to that occasion and after that, takes care of the method that pursuits us on this part is ShopInventory.cs and is positioned below ShopInventory prefab:

So if we open the script we’ll see that on OnEnable() we take heed to the occasion and we name SubscribeToDatabaseEvents():

personal void OnEnable()
{
   MoralisAuthenticator.Authenticated += SubscribeToDatabaseEvents;
   ShopCounterCollider.PlayerEnteredShop += OpenShop;
   ShopItem.Chosen += OnItemSelectedHandler;
   PurchaseItemManager.PurchaseCompleted += DeletePurchasedItem;
   PurchaseItemManager.ItemPanelClosed += OpenShop;
}

Earlier than going by way of this perform, it’s vital to see what personal variables ShopInventory.cs has:

personal MoralisQuery<ItemData> _getAllItemsQuery;
personal MoralisLiveQueryCallbacks<ItemData> _callbacks;

We are going to use _getAllItemsQuery and _callbacks within the SubscribeToDatabaseEvents() to, like the tactic describes, subscribing to the occasions of the ItemData desk within the Moralis Database:

personal async void SubscribeToDatabaseEvents()
{
   // 1. We create a brand new MoralisQuery concentrating on ItemData
   _getAllItemsQuery = await Moralis.GetClient().Question<ItemData>();
  
   // 2. We set a brand new MoralisLiveQueryCallbacks and we subscribe to occasions
   _callbacks = new MoralisLiveQueryCallbacks<ItemData>();
   _callbacks.OnConnectedEvent += (() => { Debug.Log("Connection Established."); });
   _callbacks.OnSubscribedEvent += ((requestId) => { Debug.Log($"Subscription {requestId} created."); });
   _callbacks.OnUnsubscribedEvent += ((requestId) => { Debug.Log($"Unsubscribed from {requestId}."); });
   _callbacks.OnCreateEvent += ((merchandise, requestId) =>
   {
       Debug.Log("New merchandise created on DB");
       PopulateShopItem(merchandise);
   });
   _callbacks.OnUpdateEvent += ((merchandise, requestId) =>
   {
       Debug.Log("Merchandise up to date");
       UpdateItem(merchandise.objectId, merchandise);
   });
   _callbacks.OnDeleteEvent += ((merchandise, requestId) =>
   {
       Debug.Log("Merchandise deleted from DB");
       DeleteItem(merchandise.objectId);
   });
  
   // 3. We add a subscription to ItemData desk utilizing MoralisLiveQueryController and passing _getAllItemsQuery and _callbacks
   MoralisLiveQueryController.AddSubscription<ItemData>("ItemData", _getAllItemsQuery, _callbacks);
}

So, detailing the method:

1. We create a brand new MoralisQuery concentrating on ItemData
2. We set a brand new MoralisLiveQueryCallbacks and we subscribe to occasions
3. We add a subscription to ItemData desk utilizing MoralisLiveQueryController and passing _getAllItemsQuery and _callbacks

Now what we have to do is creating the ItemData desk to the Moralis Database so to do this return to https://admin.moralis.io and in your server, broaden it by clicking on the arrow after which click on on Dashboard:

This can convey you to the dashboard (database):

On the left sidebar, subsequent to Browser, click on on the plus button to create a brand new class (desk). Name this class ItemData and click on on Create Class:

Earlier than including some components (rows) to the newly created class, we have to add some columns to match the fields that we set in our ItemData class in Unity.

So if we go to Unity and open InventoryItem.cs we are going to discover the ItemData class:

public class ItemData : MoralisObject
{
   public string identify { get; set; }
   public string description { get; set; }
   public string imageUrl { get; set; }

   public ItemData() : base("ItemData") {}
}

It inherits from MoralisObject and now we have set 3 string properties for it:

So now it’s time so as to add three columns to the ItemData class within the dashboard utilizing these identical names. As soon as within the dashboard, click on on Add a brand new column, name it identify and click on on Add column & proceed. Do the identical for the description and the imageUrl columns:

When including the final column (imageUrl) simply click on on Add column and you must see the three columns added to the category:

Now return to Unity and on the Property tab, go to _Project and open IPFS.txt. Right here you’ll discover some merchandise knowledge already ready for you (you received’t want full metadata url for this challenge but it surely’s there anyhow):

So now go to the dashboard, add a brand new row and replica and paste the knowledge you need. Repeat the method so you find yourself having at the very least 3 rows:

So to check this, return to Unity and hit play. Scan the QR code together with your MetaMask pockets. An indication message will pop up in your pockets so verify it:

As soon as logged in efficiently, stroll to the store counter and you must see the three objects we simply added to the Moralis Database. Good!

Programmatically, what occurred right here is that ShopInventory.cs listened to the occasion triggered by ShopCounterCollider.cs named PlayerEnteredShop and it referred to as OpenShop():

personal void OnEnable()
{
   MoralisAuthenticator.Authenticated += SubscribeToDatabaseEvents;
   ShopCounterCollider.PlayerEnteredShop += OpenShop;
   ShopItem.Chosen += OnItemSelectedHandler;
   PurchaseItemManager.PurchaseCompleted += DeletePurchasedItem;
   PurchaseItemManager.ItemPanelClosed += OpenShop;
}

And OpenShop() itself calls the perform GetItemsFromDB(), which is the perform in command of retrieving the objects that we simply added to the Database.

Foreach ItemData retrieved from the database utilizing _getAllItemsQuery.FindAsync() we are going to name PopulateShopItem() passing ItemData as a parameter:

personal async void GetItemsFromDB()
{
   IEnumerable<ItemData> databaseItems = await _getAllItemsQuery.FindAsync();

   var databaseItemsList = databaseItems.ToList();
   if (!databaseItemsList.Any()) return;

   foreach (var databaseItem in databaseItemsList)
   {
       PopulateShopItem(databaseItem);
   }
}

PopulateShopItem() will then instantiate an InventoryItem and can name the Init() perform on this class, additionally passing the ItemData:

personal void PopulateShopItem(ItemData knowledge)
{
   InventoryItem newItem = Instantiate(merchandise, itemsGrid.rework);
  
   newItem.Init(knowledge);
}

If we go to the Editor Hierarchy and we click on on ShopInventory we are going to see the prefab that we’re instantiating, referred to as ShopItem:

So if we open ShopItem.cs we see that it inherits from InventoryItem.cs. If we navigate to that class we are going to then be capable of see the Init() perform which will get the ItemData coming from the database and units it as a non-public variable:

public void Init(ItemData newData)
{
   _itemData = newData;
  
   StartCoroutine(GetTexture(_itemData.imageUrl));
}

After that it makes use of its imageUrl to retrieve the feel that can turn into the merchandise icon:

personal IEnumerator GetTexture(string imageUrl)
{
   utilizing UnityWebRequest uwr = UnityWebRequestTexture.GetTexture(imageUrl);
   _currentWebRequest = uwr;
  
   yield return uwr.SendWebRequest();

   if (uwr.outcome != UnityWebRequest.End result.Success)
   {
       Debug.Log(uwr.error);
       uwr.Dispose();
   }
   else
   {
       var tex = DownloadHandlerTexture.GetContent(uwr);
       myIcon.sprite = Sprite.Create(tex, new Rect(0.0f, 0.0f, tex.width, tex.top), new Vector2(0.5f, 0.5f), 100.0f);
          
       //Now we're capable of click on the button and we are going to move the loaded sprite :)
       myIcon.gameObject.SetActive(true);
       myButton.interactable = true;
      
       uwr.Dispose();
   }
}

So that is how we create, retrieve and populate our objects within the store stock. Additionally keep in mind that as a result of now we have subscribed to the occasions on the ItemData desk within the database, if we add, delete, or modify any merchandise there, the store stock will get robotically up to date. Good!

4. Deploy Good Contract

Now it’s time to learn to mint this stuff as NFT and switch them to the participant. However first, we are going to deploy the good contract that can allow us to try this. 

We’re going to make use of the online browser MetaMask pockets to deploy the contract (not your cell MetaMask) so guarantee that earlier than we proceed, you’ve got imported the Mumbai Testnet and you’ve got some funds on it like we said within the pre-requisites:

Having MetaMask put in each in your browser and your cell system, with the Mumbai Testnet imported and a few funds in each:
https://moralis.io/mumbai-testnet-faucet-how-to-get-free-testnet-matic-tokens/

When you’re prepared, go to Property → _Project → ShopContract.txt and replica the code inside:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.7;

//Importing ERC 1155 Token contract from OpenZeppelin
import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/grasp/contracts/token/ERC1155/ERC1155.sol";
import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/grasp/contracts/entry/Ownable.sol";
import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/grasp/contracts/utils/Strings.sol";


contract NftShop is ERC1155 , Ownable  {
  
   string public identify = "Unity NFT Store";

   mapping(uint256 => string) _tokenUrls;
  
   constructor() ERC1155("")  {}

   perform buyItem(uint256 _tokenId, string reminiscence _tokenUrl, bytes reminiscence knowledge) public /*onlyOwner*/{
      
       //IMPORTANT Implement personal safety (set possession to customers). Not manufacturing prepared contract
      
       _tokenUrls[_tokenId] = _tokenUrl;
       _mint(msg.sender, _tokenId, 1, knowledge);
   }
  
   perform uri(uint256 id) public view digital override returns (string reminiscence) {
       return _tokenUrls[id];
   }
}

IMPORTANT – NOT PRODUCTION READY CONTRACT

As you possibly can see, the buyItem perform is public so it’s possible you’ll want so as to add some form of safety/entry management to it and be sure to prohibit what addresses are capable of name the perform. You possibly can test https://docs.openzeppelin.com/contracts/2.x/access-control to know extra about it.

As the target of this part is to learn to name a sensible contract perform from Unity utilizing Moralis, we are going to go forward and depart the perform public.

So go to https://remix.ethereum.org/, create a brand new file referred to as NftShop.sol and paste the copied contract:

On the left sidebar, go to the Solidity Compiler and click on on Compile NftShop.sol:

Under the solidity compiler on the left sidebar, go to the Deployer. Below ENVIRONMENT choose Injected Web3. MetaMask will pop up and you’ll need to check in.

Then, ensure NftShop.sol is chosen below CONTRACT. Click on on Deploy and you’ll need to verify the transaction on MetaMask (be sure to are below the mumbai community):

That’s it! You might have deployed your contract to the Mumbai Testnet and below Deployed Contracts you’ll discover the contract deal with:

Copy the contract deal with, go to GameManager.cs in Unity and paste it on ContractAddress:

Alright! Now we want the ABI so return to Remix → Solidity Compiler and replica the contract ABI beneath Compilation Particulars:

Earlier than pasting the worth in GameManager.cs, we have to format it. So go to https://jsonformatter.org/ and paste the ABI on the left facet. Then click on on Minify/Compact:

After this, click on on the suitable facet, press to Ctrl + F and kind “
We have to change “ for ”

Click on on All to exchange it in all of the textual content:

 Copy the formatted ABI, return to GameManager.cs and paste it on ContractAbi:

ContractChain is already appropriate as a result of we simply deployed the contract to mumbai.

Alright, contract deployed and configured!

5. Mint objects as NFTs

The script that takes care of changing this stuff to NFTs is PurchaseItemManager.cs and we discover it right here:

Open the script and also you’ll see that it listens to the Chosen occasion triggered by ShopItem.cs:

personal void OnEnable()
{
   ShopItem.Chosen += ActivateItemPanel;
}

This occasion triggers once we choose any merchandise on the store stock. ActivateItemPanel() will get the InventoryItem and its knowledge and shows a UI panel with the identify, the outline and the sprite of the merchandise:

personal void ActivateItemPanel(InventoryItem selectedItem)
{
   _currentItemData = selectedItem.GetData();
  
   _currentItemData.objectId = selectedItem.GetId();
  
   itemName.textual content = selectedItem.GetData().identify.ToUpper();
   itemDescription.textual content = selectedItem.GetData().description;
   itemIcon.sprite = selectedItem.GetSprite();
  
   itemPanel.SetActive(true);
}

And right here comes the fascinating half; once we click on on Purchase we are going to name PurchaseItem() which is without doubt one of the primary features of this part. Let’s undergo it step-by-step:

public async void PurchaseItem()
{
   PurchaseStarted?.Invoke();
  
   itemPanel.SetActive(false);
  
   transactionInfoText.gameObject.SetActive(true);
   transactionInfoText.textual content = "Creating and saving metadata to IPFS...";
  
   var metadataUrl = await CreateIpfsMetadata();

   if (metadataUrl is null)
   {
       transactionInfoText.textual content = "Metadata could not be saved to IPFS";
       StartCoroutine(DisableInfoText());
      
       PurchaseFailed?.Invoke();
       return;
   }

First it triggers an occasion referred to as PurchaseStarted to let know all the opposite scripts that buy is beginning (GameManager.cs will use that to vary the sport state). After closing the itemPanel and updating the transactionInfoText we proceed to name CreateIpfsMetadata().

That perform, utilizing the identify, description and imageUrl obtained from the InventoryItem handed on the Chosen occasion, will save the knowledge to IPFS in a JSON format and can return a URL pointing to that JSON knowledge.

If that operation fails for some motive and the URL returned is null, we are going to set off the PurchaseFailed occasion.

Quite the opposite, if we get a sound URL we are going to name PurchaseItemFromContract() passing a transformed tokenId and the metadataUrl:

transactionInfoText.textual content = "Metadata saved efficiently";

// I am assuming that that is creating a special tokenId from the already minted tokens within the contract.
// I can try this as a result of I do know I am changing a singular objectId coming from the MoralisDB.
lengthy tokenId = MoralisTools.ConvertStringToLong(_currentItemData.objectId);

transactionInfoText.textual content = "Please verify transaction in your pockets";

var outcome = await PurchaseItemFromContract(tokenId, metadataUrl);

Let’s go to PurchaseItemFromContract() earlier than persevering with with the present perform, as that is the tactic that calls the buyItem perform from the good contract:

personal async Process<string> PurchaseItemFromContract(BigInteger tokenId, string metadataUrl)
{
   byte[] knowledge = Array.Empty<byte>();
  
   object[] parameters = {
       tokenId.ToString("x"),
       metadataUrl,
       knowledge
   };

   // Set gasoline estimate
   HexBigInteger worth = new HexBigInteger("0x0");
   HexBigInteger gasoline = new HexBigInteger(0);
   HexBigInteger gasPrice = new HexBigInteger("0x0");

   string resp = await Moralis.ExecuteContractFunction(GameManager.ContractAddress, GameManager.ContractAbi, "buyItem", parameters, worth, gasoline, gasPrice);
  
   return resp;
}

First we create an object referred to as parameters with the tokenId, the metadataUrl and an empty byte’s array referred to as knowledge.

Then we set a gasoline estimate and for this easy case we try this by setting the worth, gasoline and gasPrice to a zero-value HexBigInteger.

Then, the magic occurs once we name Moralis.ExecuteContractFunction() passing:

• The ContractAddress and the ContractAbi saved on GameManager.cs
• The identify of the contract perform → buyItem
• The thing parameters. These are the parameters that the contract buyItem perform requires.
• The gas-related variables worth, gasoline and gasPrice.

Relying on the transaction outcome, going again to PurchaseItem(), we are going to set off the PurchaseFailed or PurchaseCompleted occasions:

if (result's null)
{
   transactionInfoText.textual content = "Transaction failed";
   StartCoroutine(DisableInfoText());
  
   PurchaseFailed?.Invoke();
   return;
}

transactionInfoText.textual content = "Transaction accomplished!";
StartCoroutine(DisableInfoText());

PurchaseCompleted?.Invoke(_currentItemData.objectId);

That is the message that you must see within the sport whereas this perform is operating:

In the event you verify the message in your MetaMask pockets, the transaction will succeed and we can have minted the merchandise as an NFT!

Earlier than studying the way to retrieve it, it’s vital to know that ShopInventory.cs is listening to the PurchaseCompleted and can delete this merchandise from the database which is able to then not be within the sport store stock anymore:

personal async void DeletePurchasedItem(string purchasedId)
{
   MoralisQuery<ItemData> purchasedItemQuery = _getAllItemsQuery.WhereEqualTo("objectId", purchasedId);
   IEnumerable<ItemData> purchasedItems = await purchasedItemQuery.FindAsync();

   var purchasedItemsList = purchasedItems.ToList();
  
   if (!purchasedItemsList.Any()) return;

   await purchasedItemsList.First().DeleteAsync();
}

That is the perform that ShopInventory.cs calls when listening to the PurchaseCompleted occasion.

As a result of we’re the purchaseId we will create a MoralisQuery deciding on the database objects that comprise that purchasedId. As this id is exclusive we are going to solely discover one aspect which we are going to delete utilizing DeleteAsync().

The merchandise received’t  seem subsequent time we open the store stock. Superior!

6. Get minted NFTs

After shopping for the merchandise and ready for about 1-2 minutes for the NFT to sync, let’s open the participant stock by urgent the “I” key on the keyboard. It is best to see the merchandise that you just simply purchased there:

That’s as a result of PlayerInventory.cs takes care of it:

If we open it, we see that LoadPurchasedItems() is the perform that does the magic. Let’s undergo it step-by-step:

To begin, we the present logged consumer and its pockets deal with:

personal async void LoadPurchasedItems()
{
   //We get our pockets deal with.
   MoralisUser consumer = await Moralis.GetUserAsync();
   var playerAddress = consumer.authData["moralisEth"]["id"].ToString();

Then we attempt to get all of the NFTs that the pockets deal with owns from a particular contract deal with by calling GetNFTsForContract(), a magic Moralis perform:

attempt
{
   NftOwnerCollection noc =
       await Moralis.GetClient().Web3Api.Account.GetNFTsForContract(playerAddress.ToLower(),
           GameManager.ContractAddress,
           GameManager.ContractChain);
  
   Listing<NftOwner> nftOwners = noc.End result;

If we get some, we can have entry to the TokenId and to the Metadata and with that we are going to populate a brand new participant merchandise:

if (!nftOwners.Any())
       {
           Debug.Log("You do not personal any NFT");
           return;
       }
      
       foreach (var nftOwner in nftOwners)
       {
           var nftMetaData = nftOwner.Metadata;
           NftMetadata formattedMetaData = JsonUtility.FromJson<NftMetadata>(nftMetaData);

           PopulatePlayerItem(nftOwner.TokenId, formattedMetaData);
       }
   }
   catch (Exception exp)
   {
       Debug.LogError(exp.Message);
   }
}

PopulatePlayerItem() works very related than PopulateShopItem() however right here we’re passing an NftMetadata object as parameter as a substitute of an ItemData one:

personal void PopulatePlayerItem(string tokenId, NftMetadata knowledge)
{
   InventoryItem newItem = Instantiate(merchandise, itemsGrid.rework);
  
   newItem.Init(tokenId, knowledge);
}

The great factor is that instantiating a PlayerItem is similar to instantiating a ShopItem as a result of each inherit from InventoryItem.cs. So when calling Init(), a PlayerItem can be created in a really related means than a ShopItem could be.

In order that’s nearly it however now that now we have retrieved the NFT, we will learn to test it on OpenSea.

Tremendous easy, go to PlayerItem.cs and there now we have OnItemClicked(). This perform can be referred to as once we click on on the merchandise within the participant stock and it’ll name MoralisTools.CheckNftOnOpenSea() passing the ContractAddres, the ContractChain and the id of the merchandise:

public void OnItemClicked()
{
   MoralisTools.CheckNftOnOpenSea(GameManager.ContractAddress, GameManager.ContractChain.ToString(), GetId());
}

CheckNftOnOpenSea will use that parameters to fill the OpenSea Testnets URL:

public static void CheckNftOnOpenSea(string contractAddress, string contractChain, string tokenId)
{
   string url = $"https://testnets.opensea.io/belongings/{contractChain}/{contractAddress}/{tokenId}";
   Software.OpenURL(url);
}

With the URL set, Software.OpenURL(url) will care for opening our default net browser and exhibiting the NFT on OpenSea:

Congratulations, you accomplished the Buy NFTs from a NPC Store Moralis Mission and now you understand how to create a full on-chain stock system with Unity.

See you on the following one, Moralis Mage!