Hey there,

The last two (three) week have been a ride! I know, I know there should have been a week 8 report somewhere in here as well, and that's coming up in a few hours as well (I promise). But for now, let's talk about the last two weeks.

Week 6

In the report of week 5, I mentioned something about watermarking images on the blockchain. Well, even before you start doing something like that, how would you begin with even linking your identity to that image. That's where your wallet comes in.

Wallet

What's so hard in linking a wallet, you ask? Just add a little library calls and its done? To be honest, it is indeed that simple... just not in the first attempt :D

I started with Web3UIKit.

They have a beautiful components designed for integrating in dApps and started suing them. I thought I could really use all over my app and would never have to write a single component again, endlessly modifying the padding-right property for the umpth time. But, I was wrong. To interact with the wallet, this button required using Moralis Auth (another library call) to link the wallet.

I was not a fan of this, because that was becoming super complicated right from the start and I had no intention to handle all of it right at the first step. So, I decided to leave Web3UIKit's ease of use and take the good old HTML and CSS way.

Just kidding. There are some more libraries that I looked into from thirdweb, wagmi and RainbowKit:

I liked RainbowKit the best because it was so easy to integrate and had such a clean UI.

I did not intend to be engaged with the frontend part any more than this because I felt I should focus on the Smart Contract side more. But you can't have the cake and eat it too, can you?

IPFS

IPFS is a distributed file storage protocol. Its distributed nature and content-based indexing makes it highly suitable for decentralized apps. I am using this for storing images as well.

When searching about wallets, I am glad that I found thirdweb, because they have a neat component for uploading files to IPFS. This one was easy to integrate and did what it says perfectly.

Week 7

Some more IPFS

IPFS was working like a charm. I was uploading files to IPFS through the thirdweb component and I was able to retrieve the CID of the uploaded file. What I also needed though was to check if the file was already uploaded on IPFS before. I first looked in the library I was using, but it does not support it. Searching through, I found out that one way to do it was by running a local IPFS node and using the IPFS API to check if the file is already present. Spinning up a backend server just for this? Nope, not going to happen.

For once, I thought that I could perhaps do it in the next server itself but that was actually a decision for disappointment.

Gladly, I found ipfs-only-hash that does exactly what it says. Sweet!

Rehydration

When you think everything is fine, you're setting up yourself for a disaster.

- Me

When reloading the app midway, it was showing a Hydration error everytime. This is not a good experience because more often than not, I had to reload the page to check something I changed. It was happening due to some rendering from the Connect Wallet button.

There is an excellent blog By Josh Comeau on this topic that I'm adding to my reading list to read after I'm done with this project.

This one kept me busy for a while, but I was able to fix it with some struggle.

Instead of importing through the usual way like:

import { configureChains, createClient, useAccount } from "wagmi";

I had to import dynamically using:

const WagmiConfig = dynamic(() => import("wagmi").then(mod => mod.WagmiConfig), { ssr: false });

I have no clue why but as long as it works, I'm not complaining.

Concluding Thoughts

This post was long overdue and I’m glad I wrote it now. There’s this week 8 (current week fyi) that’s still has a blog pending, so be on the lookout for it today!

**Back to the project *

Until next time,

Pushkar