Tech Stack

I used NextJs to make the DAPP and Netlify for deployments. Feel free to go through the code in Github repo or try out the DAPP.

How to use the DAPP

Prerequisites

• A crypto wallet like Metamask.
• Have a small amount of MATIC in order to mint your avatar.

Steps

• Open the DAPP in your browser of choice.
• Click on the Connect Wallet button.
• Select your wallet of choice.
• Once the wallet is connected, upload an image and fill out the avatar form.
• Click on the Create NFT Avatar button.
• Confirm the transaction.
• That's all, you now own a custom NFT avatar.

Why Netlify

There are many reasons why you should pick Netlify over other hosting solutions, here are my top three reasons to pick Netlify for this project. I have used Vercel in my previous projects, so a lot of my decision-making will be compared to Vercel.

1. Easy to deploy NextJS

I built this project without Netlify in mind and when it came time to host the project, I was hesitant to deploy to Netlify over Vercel because I thought there would be a considerable amount of work involved. However, that hesitation was unfounded, all I had to do was add Netlify's npm package @netlify/plugin-nextjs and that's it. I was able to start deploying my NextJS app to Netlify.

yarn add @netlify/plugin-nextjs

OR

npm install @netlify/plugin-nextjs

2. Speedy deploys

Netlify deploys are very speedy, initial deployment took a bit longer than I expected. However, the following deployments were very speedy due to Netlify's sophisticated caching mechanism.

While waiting you can play a matching game, I love this small yet personal touch.

3. Environment variables settings

Netlify sensitive environment variable policy is a huge win in my books. I failed to find something similar on the Vercel platform. Some of the environment variables are very sensitive in nature and I always wanted to put them behind role-based access which Netlify allows. Also, what if a team member decides to console log one of these sensitive variables by pushing some code, they can bypass that role-based access.

Netlify's sensitive environment variable policy counters these concerns beautifully by allowing project owners to decide whether deploys will need approvals or they just won't use sensitive data.

There is more to love

Netlify's project dashboard is like candy land for me. I see all these others options such as Plugins, Identity, Forms, Graph and many more. I want to build more projects using these other features that I didn't get a chance to work with in this project.

Conclusion

Working with Netlify was very frictionless and I found the Docs very useful. They have a great support team.

Disclaimer: The dinosaurs' information is not accurate at all.

Tech Stack

I used NextJs to make the DAPP and ThirdWeb handle smart contract logic. Feel free to go through the code in Github repo or try out the Demo.

What is ThirdWeb?

ThirdWeb is candy land for a javascript developer who wants to dive into web3 without having to learn Solidity. ThirdWeb provides many typescript-friendly SDKs. They have various modules for unique blockchain purposes. Developers can create a simple NFT drop or create their own DAO or a game.

The SDKs are very intuitive and continuously evolving to accommodate more and more functionality. Definitely check their documentation out these guides and join their discord. There are always some interesting conversations taking place that I learn a lot from.

What are Meta Transactions?

Just like metadata is data about data, a meta transaction is a transaction type that the user can sign and execution of that transaction can happen from another wallet.

Here are some resources that can hopefully help understand this concept in-depth:

OpenZeppeling ERC2771Context

Medium

ThirdWeb Guide

Setup ThirdWeb

In order to start the project, I created a script that will create my ThirdWeb project. I chose to work with the Bundle Collection module.

Disclaimer: all the steps in the script can also be performed on ThirdWeb's beautiful GUI.

The script starts by creating an instance of ThirdWeb SDK. In the constructor, I pass the private key of my crypto wallet and a provider. The provider is where we get to set which chain we want to work with. I chose to work with Polygon Mumbai testnet and that's what rpcUrl is set to.

const sdk = new ThirdwebSDK(
  new ethers.Wallet(privateKey, ethers.getDefaultProvider(rpcUrl)),
);

Next, the script creates an app on ThirdWeb if there isn't one already created. The app is basically a project in which you can set up various modules for your purposes.

const app = await sdk.createApp({
  name: 'Jurassic Park',
  description: 'When dinosaurs rules the earth',
});

Next, the script creates a bundle drop module if there isn't one already created. This module acts as your collection on NFT marketplaces like OpenSea.

const bundleDropModule = await app.deployBundleDropModule({
  name: "Jurassic Park",
  description: "When dinosaurs rules the earth",
  image: readFileSync('scripts/assets/logo.png'),
  primarySaleRecipientAddress: ethers.constants.AddressZero,
});

Next, the script creates all the NFTs in the collection based on the metadata array.

const ids = await bundleDrop.createBatch(metadatas);

Next, the script will update the claim conditions for our NFTs. Simply put, claim conditions are a set of rules that define how many NFTs are in the supply, how many NFTs can be claimed in one transaction, etc.

In my case, I wanted my NFTs to have an unlimited supply, one NFT to be claimed per transaction and the sale to start right away. Hence the script sets the claim condition accordingly.

const claimFactory = bundleDrop.getClaimConditionFactory();
claimFactory.newClaimPhase({ startTime: 0, maxQuantityPerTransaction: 1 });

for (const id in ids) {
  await bundleDrop.setClaimCondition(id, claimFactory);
}

Finally, the script will claim one of each NFT to create a genesis token. If this step isn't performed, the NFT won't show on the market places.

for (const id in ids) {
  await bundleDrop.claim(id, 1)
}

That's all, after running the script our smart contracts are all set up and ready to consume. Crazy right? I am still amazed by the simplicity of their SDK.

Connect DAPP

In my NextJs app, I used web3modal to handle the connection to the user's crypto wallet. This library is one of many open source libraries that help with the wallet connection flow of the DAPP. I passed it network information in order to connect to Polygon Mumbai testnet.

this.web3Modal = new Web3ModalLib({
  network,
  cacheProvider: true,
  providerOptions: {
    walletconnect: {
      package: WalletConnectProvider,
      options: {
        infuraId,
        rpc: { [chainId]: rpcUrl },
      },
    },
  },
});

Once the modal is instantiated, we can trigger connection flow by calling the connect method. On success, it will return us the provider that we can then use to instantiate ethers.

const provider = await this.web3Modal.connect();
this.ethers = new ethers.providers.Web3Provider(provider as any, 'any');

Ethers library will help us get a Signer from the provider and pass it to ThirdWebSdk.

const signer = await Web3ModalService.ethers.getSigner();
const thirdWebSdk = new ThirdwebSDK(signer);

Now we can allow users to claim the NFT by calling the Bundle Drop module's claim method.

const module = thirdWebSdk.getBundleDropModule(moduleAddress);
await module.claim(nftId, 1);

However, the transaction isn't gasless yet. When the user triggers the claimed method, they will be charged a gas fee. Let's set up our gasless transactions next.

OZ Defender set up

I followed this very useful guide to set up an OpenZeppelin Defender.

Once the OZ Defender is set up, we can copy the webhook URL and pass it to ThirdWebSdk by using the transactionRelayerUrl option.

const signer = await Web3ModalService.ethers.getSigner();
const thirdWebSdk = new ThirdwebSDK(signer, { transactionRelayerUrl });

That's it, now the claim transactions are gasless.

Conclusion

Working with ThirdWeb was very frictionless and I found the SDK API documentation very useful. They have a great support team.