3nstagram. Web3, Rails and React — Web3 intagram / Let's cook it! (Part 1)
Web3 is nowadays changing the dynamics of everything we now, from currency exchange to how assets are known, and it is a matter not to be ignored.
It is not a complex topic as everybody thinks is, it is not simple either, it is just a matter of understanding. Web3 brings ownership to the true owners or creators of the data while Web2 relied on big players to add value to it.
Based on this idea, I set myself to create 3nstagram as a pilot project for getting deeper knowledge on Web3 as well as its possibilities as an app.
3nstagram will be a webapp, similar to instagram, where every photo uploaded will be an NFT with its suitable metadata attached. There will be a feed and a user system as well as a NFT spotlight for NFTs obtained outside of our contract.
After all this has been said, let’s get to work!
The contract
First of all, when creating a WebApp of this size, is to split it into smaller sections that will, in the end, compose the app (Divide & Conquer).
From where I stand, I the most critical part would be the smart contracts so let's get on with them.
We would start with a simple contract that allows us to mint the tokens, thus having basic functionality.
As we are dealing with NFTs we will be implementing the ERC-1155 standard that offers so much more flexibility and reliability than its predecessor ERC-721. For example, it offers a lot more flexibility on metadata than ERC-721, allowing us to update the name of the NFT for example.
For interacting with such contracts, we are going to use Hardhat, an ethereum development environment that allows us to compile, run and test our smart contracts locally without much hassle.
Working with Hardhat is easy. First, install the library on your project folder by calling
Then setup the project by simply calling:
Choose the typescript or javascript option (whatever works best for you), and that's it!
Now let's go into the contracts folder and update the default one with ours.
As we will be implementing ERC-155, we will be using OpenZepellin library to support us. Run:
Once we have everything we need, it is time to get our hands on it!
As you can see on the image above, this is the basic contract we will be using for minting our posts. It implements basic interfaces like ERC-1155 , for minting the suitable NFTs, and Ownable for implementing ownership over the contract. This last module be useful in the future when we want to add special actions to the contract that only the owner can do.
Apart from this interfaces, we have set a minimum fee that will be paid to the owner of the contract as creation fees and an event, PostMinted , that will be emitted every time a new post is minted.
Finally, we have our constructor function, that just takes a URI that will point to the JSON generated for the tokens. And the mintPost function, that will be in charge of actually minting the NFTs.
Additionally, we have also implemented the Counters utility that basically will support us on keeping the tokenId up to date and increase it before every new mint.
Finally, in order to be able to link our NFTs with the owners, we will use EnumerableSets that will basically hold a mapping between a wallet and the NFT generated by it.
In order to test our contract we will start by adding simple test cases. For example, checking that the passed URI matches what is returned from the contract:
And with that, we are just missing a way to test our contract on a testnet.
In order to do so, we can use the tools that come with hardhat so that our contract is deployed into a local testnet and we can interact with it.
Deploying the contract is as easy as:
- Compile the contracts by running:
npx hardhat script ./script/deploy.ts - On another terminal window, run the deploy script that comes with Hardhat on the setup:
npx hardhat script ./script/deploy.ts
Aaaaaand, that's it! We have a working smart contract in our local testnet.
Interacting with it, is as easy as creating Hardhat Tasks , or , using a UI for it.
In our case, we will be developing our UI for such interaction but you can use Remix, the Ethereum IDE (https://remix.ethereum.org/). Drop, compile and deploy the contracts on the IDE for later interacting with them.
Once done, this would be the result. Bare in mind that each of this "blocks" are actually all the different functions defined on the contract. Once, that is clear, feel free to play with it.
See you on the next one!
Pavs.
