[Locking Ceremony] Display the view after lock

[doliG]

See figma

• [x] integration
• [x] if the user have lock, call the contract (need more info) to display its souvenir nft
• [x] if the user have not lock, display the lock points page with a timer at 0

[doliG]

@DaigaroCota @tiagofneto need help on the second point: how can I read the souvenir NFT from smart contracts ? Which method to call, and what to expect in return. Ty.

[tiagofneto]

I'm not exactly sure by what you mean by "read the souvenir NFT" but I will give you some insight on how it works:

• Upon executing the locking ceremony, the user is awarded a souvenir NFT (with a unique id per user)
• This is stored in the NFTGame ERC1155 contract (in the same way the points, crates and cards are stored)
• The souvenir NFT id for each user is saved in the UserData struct for each user, in the lockedNFTID field
• If you want to get the souvenir NFT id for a specific user, query the userdata variable for that specific user, which returns a UserData struct for that user, from where you can use the field lockedNFTID
• Once you have the id you can do whatever you would expect from a normal ERC1155 in the NFTGame contract (for example, getting the uri)

[0xdcota]

What Tiago described is precise. Once you get the LockNFTID you need to pass it to the functionuri() in the contract NFTGame.sol. You will get in return a base64 encoded json object. To uncode it you need a package like:

https://www.npmjs.com/package/base-64

Important to note that the image property of the json object is also base64 encoded.

You can see the output of uri() by running one of the test scripts. From the hardhat package root folder:

Start a node with yarn fork on a terminal On a seperate terminal run: npx hardhat --network localhost test ./test/fantom/nftgame/onchain_nfts.js

You will see the output spitted out in the terminal. You can then use a public website https://www.base64decode.org/ to decode manual and see the json data structure yourself.

[0xdcota]

As a side note, I believe browsers have built-in these two functionsatob()and btoa() that encode and decode base64. I did the following from Brave. However, don't know if this is universal to all browsers... or if these functions are accessible by React framework.