How to Create a React Native App Using Typescript
Natam Oliveira | Nov 30, 2023
You’ve probably seen posts talking about non-fungible tokens (NFTs) somewhere because it’s a trending technology that moves millions of dollars.
But what is NFT and what can it solve?
There are several reasons why you should keep an eye on it and this blog post will explain those reasons.
You’ll find tons of NFT Use Cases and applications examples on the internet. Here we’re also going to show you an NFT use case about how to implement a Pokémon marketplace using non-fungible tokens.
“What does NFT stand for and why is it being used for these sales?”
Before explaining what Non-fungible tokens are and how they work, we first need to understand what crypto tokens (or just tokens) are.
Crypto tokens are digital assets that are managed by smart contracts. These digital assets can represent several different things such as money (cryptocurrencies, eg. Bitcoin, Ether), a gold mine investment, or even represent unique things like digital artwork.
In most cases, like in cryptocurrencies, the tokens are identical and have the same value. For instance, any bitcoin token has the same value as any other bitcoin token. The token equivalence defines the token as a fungible token.
Non-fungible tokens, on the other hand, are tokens that have unique attributes and may have different values from each other.
NFTs’ main usage is to manage digital assets ownership, and because it works in blockchains, NFT is safe to do it over the internet.
Despite being a new technology, NFT technology is already widely spread and has a wide range of applications, the most common being the representation of digital assets like artworks, memes, and collectibles.
If you want to create and sell an NFT, the easiest way is to use one of the existing marketplaces.
NFTs can be used to buy and sell game items such as skins. Or the game can be completely based on the technology, as is the case with CryptoKitties, which is a game where you can collect cats that have unique characteristics and cannot be replicated.
One of the attractions of decentralized technology is that the items you own will exist as long as the blockchain in which the token is hosted exists.
That is, even if the CryptoKitties site goes out of business, anyone who owns a token will still own it.
For this use case of NFT, we implemented a collectibles game slightly based on CryptoKitties, in which the user will be able to:
The project has been published on a GitHub repository and can be accessed on this link.
To have these functionalities, the following was implemented:
In the root of the project, we have the “contracts” folder that has the smart contract source code, a “scripts” folder that has a script to deploy the smart contract to a network, a “test” folder that has the smart contract test files, and a web folder where we have the front and backend of the project.
To run the project we first need node.js installed and we can install the rest of the dependencies by running the command:
$ make install-dependencies
The smart contract was implemented following the ERC-721 protocol, for this, the following tools were used:
The smart contract source code is located in `contracts/Poketoken.sol` and can also be viewed on this link and has explanatory comments about the implemented functions. In this file, there is the entire business rule for buying/selling and creating tokens.
The development time was reduced because OpenZeppelin already has contracts that implement the ERC-721 protocol, so we only considered the business logic of the application.
We can run the command that compiles the smart contract using hardhat and copy the generated artifact to be served on the backend with the makefile command:
$ make compile-and-copy
$ npx hardhat test
A script was also created to deploy the smart contract to Ethereum networks, it is the script called deploy.js located in the scripts folder.
We can deploy it with the help of hardhat, for example to a local node, with the command:
$ npx hardhat run scripts/deploy.js --network localhost
The tokens that represent pokémons needed metadata that generated the questions: How will we generate the metadata and where will we store it?
To generate the metadata for the pokémons we created a backend in node.js, located in the web folder. This server has an endpoint to generate this metadata.
The endpoint generates a random number and makes a request to the PokeAPI and uses the response of the request to generate the metadata of the token (name, image, description).
After creating an object with the metadata, the endpoint saves this object in the decentralized file system called IPFS.
This way, the metadata will exist as long as any computer connected to this network has this file available, unlike other hosting services where if someone responsible cancels the service it would result in the metadata becoming unavailable.
After generating the metadata, the endpoint uploads the metadata to the IPFS using the Pinata service, and then finally we have a URI with the metadata of the token.
Finally, after having the URI of the token metadata, we have to connect to the smart contract to update the token with this metadata. And this is done with the Ethers tool that allows us to interact with the Ethereum blockchain.
Inside the web folder, we created a Client folder with the front end of the project which was developed in React and with Material-UI.
The app uses MetaMask (which is a browser extension that allows the user to connect to the Ethereum blockchain directly from the browser) to allow the user to link wallets and make smart contract transactions using them.
The APP interface includes a list of the Pokémons that the connected wallet has in it. Each of these Pokémons can be put on or taken off sale.
The interface also includes a list of all the Pokémons that are for sale. The interface also has a button to buy Pokémons and another to update the lists.
When creating a token, we create a smart contract transaction using ethers and then make a request to the endpoint we created to generate the metadata for the token created.
Some gifs that can help in this process:
To get as close as possible to real deployment, poketoken was deployed to the Rinkeby testnet.
Testnets are nearly identical copies of blockchains used so that developers can test software using worthless cryptocurrencies and better understand how their application will behave on the mainnet.
Testnet Rinkeby was chosen for this project because it is supported by the OpenSea marketplace and we wanted to validate how the tokens would look on other platforms.
OpenSea also offers an API where the token can be validated.
With this POC it was possible to test several different tools and see how each one of them decreases the complexity of the development.
And with the deployment to Rinkeby we could validate the project without spending a cent and we could also estimate how much this deployment and the creation of the tokens on the mainnet would cost.
The readme has more detailed instructions on how to run the project locally and also to deploy to a testnet.
The project has a lot of room for changes, for example, instead of just uploading the JSONs with metadata to the IPFS, we could also upload the pokémon images, which would be interesting to guarantee that the images will be accessible even if the PokeAPI stops serving the images, and we could also upload the frontend build.
This would make our application more decentralized. However Pinata’s free plan might not be enough and increase the cost of the project.
A computer scientist who loves to study new technologies. Also enjoys rap, watching movies and TV shows, sports (especially soccer), and playing videogames.
Karran Besen | Nov 16, 2023