100 Days of Web3 (Days 41-50)

It’s hard to believe that I’m already halfway through the 100 day challenge. I guess time flies when you’re having fun. I finally completed my first original project too! This 100 day challenge has really helped me learn more consistently and that’s clearly visible in my GitHub contribution chart:

Day 41

Having written the smart contracts for the multi-faction DAO project, I began to work on the front-end portion of the app. Although I’m more interested writing smart contracts, creating a front-end seemed like a great way to test and demonstrate the functionality of the contract. First, I planned out the structure of the front-end application. I decided that I would have an instructions page as the home page, a balances page for the tokens and a proposal page. I used the create-react-app command to get things started. I also implemented the basic login functionality with Metamask by reusing the code from this tutorial repository.

Day 42

I then added the instructions page and added a skeleton page for the token balances. I created a sidebar component for navigation and learned about React Router to make the navigation implementation easier.

Day 43

I completed the implementation of the token balances page by using ethers.js to call the balanceOf method of the ERC-1155 contract for the voting tokens. I also added a faucet method to the token contract to let any user mint a small number of tokens. On the token balances page, I then added buttons for the user to mint tokens.

I also decided to scrap the React Router implementation as it made passing state between components more difficult. Since I didn’t want to add the complexity of a central state management solution like Redux, I decided to roll my own simple navigation implementation.

Day 44

Next up was the implementation of the proposal page. To start with, I made a form for creating a new proposal. This form would let users propose a new difficulty for the game. However, the form would also show the current difficulty. In order to display the current difficulty of the game, I had to retrieve it from the game contract. I also handled the submission of the form such that a call was made to the DAO contract to create the proposal. I used the react-bootstrap library to display a modal until the transaction to create the proposal was mined.

Day 45

On day 45, I modified the proposal page using React hooks to retrieve an existing proposal from the DAO contract. I also added buttons to vote for or against active proposals. The buttons were wired up to call the castVote method on the governance contract. In addition, I added a refresh button which allowed users to get the latest status of the proposal without refreshing the page. It would have been better to listen for status-change events, but for simplicity I just went with the refresh button approach.

Day 46

Next, I implemented the remaining parts of the proposal lifecycle on the front-end. After a proposal has enough votes and the voting period has ended, it has to be queued for execution. After enough time has passed, the proposal then has to be executed. I also used the Recharts library to display the voting results in a nice chart.

Day 47

On day 47, I finally completed the multi-faction DAO project. I cleaned up the code by splitting up the proposal page into multiple components and factored common code into modules. I also fixed a few minor bugs and added some UI features like loading spinners. I deployed the app using an Azure PowerShell script to a static website using Azure blob storage. The deployed app can be found here and the source code is here.

Day 48

I decided to switch gears and refocus on DeFi. Understanding the source code of an established DeFi protocol seemed like a great way to advance my smart contract skills. Currently, the largest DeFi protocol by total value locked is the Maker protocol, so I decided to start with that.

However, I found out that the Maker team, doesn’t use Hardhat or Truffle; they use dapp.tools. This is a really interesting command-line based tool for developing smart contracts. One of the coolest parts is that tests are written in Solidity instead of JavaScript. I found an excellent YouTube tutorial on dapp.tools and followed along with it.

Day 49

I started learning about the Maker protocol by reading the whitepaper. Maker is a complex protocol which consists of many different components. The Dai token is one small piece in a large ecosystem which consists of collateral auctions, debt auctions, surplus auctions, governance, the Maker token and much more.

After reading the whitepaper, I decided to simultaneously go through the technical documentation and the source code. I started out by focusing on the Dai token and saw that it was a relatively straight-forward ERC-20 token with a few minor twists such as unlimited approval amounts.

Day 50

I continued my deep dive into the Maker protocol by examining the vat, join and spot contracts. The vat contract is the heart of the Maker protocol and stores the balances of collateral tokens and Dai. It also holds all collateral vaults. The join contract is used to connect an ERC-20 token to the vat contract. Users don’t add their tokens directly to the vat, they add them through the join contract for that particular token. The spot contract is a bridge between the price oracles and the core contracts. It can update the price of the collateral in the vat contract.

To better understand these core contracts, I wrote some basic tests to deposit tokens through a join contract into the vat, and then mint Dai through that same join contract.

Summary

At the halfway point of this 100 day challenge, I feel that there’s still so much more to learn. I’ll likely continue my deep dive into the Maker protocol, but I’m also really interested in learning about other DeFi protocols like Aave, Compound, Curve, Balancer, Uniswap V3 and so much more! At some point I’d like to try developing smart contracts for a non-EVM chain like Solana, but I need to spend a bit more time on Ethereum first.