Forem: thirdweb

Deploy a Smart Contract on Ethereum (ETH)

Avneesh Agarwal — Mon, 27 Mar 2023 21:15:40 +0000

This guide will show you how to deploy any smart contract to the Ethereum network.

By the end, you'll learn how to create a simple NFT Drop smart contract, deploy it to the Sepolia testnet, and mint an NFT on the smart contract.

Let's get started!

What is Ethereum?

Ethereum is the most popular blockchain for web3 applications. It is a Layer 1 blockchain, meaning it is highly secure, but it is also very expensive to use when compared to other alternatives.

The Ethereum network has projects such as the Bored Ape Yacht Club and Crypto Punks which have helped Ethereum projects gain a large community of users.

Projects that don't require a lot of interaction with the blockchain are typically more suitable for Ethereum as a result of the network's high gas fees.

If you take a look at our Gas Estimator, you can quickly see that Ethereum smart contracts are both expensive for you to deploy and expensive for your users to interact with.

Create a smart contract on Ethereum

To begin, head to the Contracts page in your thirdweb Dashboard and hit "Deploy new contract":

You will be taken to our Explore page — where you can browse smart contracts built by the top protocols in web3 and deploy them in just a few clicks!

Note: You can also use the thirdweb CLI to set up a smart contract environment by running the below command from your terminal:

This will take you through an easy-to-follow flow of steps for you to create your contract. Learn more about this in our CLI guide.

Otherwise, let's get back to Explore:

Here, select your smart contract of choice. For this guide, we're going to use the NFT Drop (ERC721) contract to create our NFT collection:

Set up your smart contract with an image, name, description, etc., and configure which wallet address will receive the funds from primary and secondary sales:

Our smart contracts are deployable to any EVM chain, so let's deploy this to the Sepolia testnet!

Add the Sepolia network to your dashboard & wallet

To deploy a smart contract to Ethereum (more specifically, to the Sepolia testnet) we first need to add it as a network to the Dashboard.

To do this, click the Configure Networks button here:

Search for "Sepolia" and select it:

It will now auto-fill all the details required. You can upload an icon for the Testnet if you like and use a custom RPC you can use as well.

Click on "Add Network" and voilá! You will now see that Sepolia has been added to the Testnets section of the Your Networks module:

Get Sepolia ETH in your wallet

Head over to the Sepolia Faucet here, paste your wallet address and click on "Send me ETH":

Once you have completed this process, you will have testnet funds in your wallet on Sepolia Testnet, meaning you're now ready to deploy your smart contract!

Deploying the contract

Now that you have your testnet ETH, let's go back to the thirdweb Dashboard where we were building our NFT Drop contract.

We have already filled out the metadata so click on "Deploy Now" after selecting the chain. It will prompt you to two transactions, you have to approve them.

And you're done! You have just deployed to the Sepolia Testnet.

Calling Smart Contract Functions

Let's see how we can use the smart contract by calling some functions on it, such as minting an NFT into our collection!

From the Explorer tab, you can view all of the available functions on your smart contract and execute them directly from your connected wallet:

Setting Up Our NFT Collection

In our example, we created an NFT drop smart contract, so we'll quickly set it up and mint our first NFT by performing the following steps:

Lazy mint a batch of NFTs.
Configuring our claim conditions.
Mint an NFT from the drop!

We won't go into too much detail about this process in this guide, check out our other NFT Drop Guides for more information!

Once we've set up our NFTs, we can click the Claim button in the NFTs tab to mint our first NFT, and voilà! We just minted an NFT on the Sepolia testnet!

What's Next?

Now that you've deployed your smart contract, you can use our SDK to build a web3 application! Where users can connect their wallets and interact with the functions of your smart contracts. Learn more from our guide below:

Wrapping up

In this guide, you've learned how to create a simple NFT Drop smart contract, deploy it to the Sepolia testnet, and mint an NFT on the smart contract. We hope it was helpful!

If you have any questions jump into the thirdweb Discord and join 32,000+ other builders! And if you're looking to build on Ethereum and want to learn more about how to do that with thirdweb's tools, reach out to the team directly. Please let us know if you have any feature requests or guide requests here.

Deploy a Smart Contract on Polygon (MATIC)

Avneesh Agarwal — Mon, 27 Mar 2023 21:15:13 +0000

This guide will show you how to deploy any smart contract to the Polygon network.

By the end, you'll learn how to create a simple NFT Drop smart contract, deploy it to the Polygon Mumbai testnet, and mint an NFT on the smart contract.

Let's get started!

What is Polygon?

Polygon has exponentially lower (approximately ~10,000x lower) gas fees than Ethereum does, and utilises Proof-of-Stake (POS) consensus, which has a less negative impact on the environment than Proof-of-Work (POW).

Using Polygon is a great choice for all kinds of blockchain projects,especially those that require a lot of interaction with the blockchain; because of its low gas fees.

Brands such as Instagram and Adidas have recently started using Polygon for their projects, adding credibility and a growing audience for the Polygon network.

Create a smart contract on Polygon

To begin, head to the Contracts page in your thirdweb Dashboard and hit "Deploy new contract":

You will be taken to our Explore page — where you can browse smart contracts built by the top protocols in web3 and deploy them in just a few clicks!

Note: You can also use the thirdweb CLI to set up a smart contract environment by running the below command from your terminal:

This will take you through an easy-to-follow flow of steps for you to create your contract. Learn more about this in our CLI guide.

Otherwise, let's get back to Explore:

Here, select your smart contract of choice. For this guide, we're going to use the NFT Drop (ERC721) contract to create our NFT collection:

Set up your smart contract with an image, name, description, etc., and configure which wallet address will receive the funds from primary and secondary sales:

In the network/chain section select Polygon Mainnet or Polygon Mumbai (testnet) as you wish. For the sake of this guide, I am going to use Polygon Mumbai

Once you have selected the network, click on deploy now. It will prompt you to switch your network to Mumbai

Click on the switch Wallet button and if you don't already have the network in your wallet it will prompt you to add the network and then switch to the network:

Now let's deploy the smart contract on the Polygon Mumbai testnet! But before that, we need testnet funds.

Get Mumbai matic in your wallet

Once you have added the Mumbai network to your wallet. You can either navigate there directly or open the Wallet button and hit "Request Testnet Funds" in the thirdweb dashboard:

This will take you to the Polygon Mumbai faucet. Here, paste your wallet address and hit submit

You will be prompted to review the details and confirm:

Once you confirm the details, funds will arrive in your wallet:

Once you have completed this process, you will have testnet funds in your wallet on Mumbai testnet, meaning you're now ready to deploy your smart contract!

Deploying the contract

Now that you have your testnet ETH, let's go back to the thirdweb Dashboard where we were building our NFT Drop contract.

We have already filled out the metadata so click on "Deploy Now" after selecting the chain. It will prompt a transaction, you have to approve that.

And you're done! You have just deployed to the Polygon Mumbai testnet.

Calling Smart Contract Functions

Let's see how we can use the smart contract by calling some functions on it, such as minting an NFT into our collection!

From the Explorer tab, you can view all of the available functions on your smart contract and execute them directly from your connected wallet:

Setting Up Our NFT Collection

In our example, we created an NFT drop smart contract, so we'll quickly set it up and mint our first NFT by performing the following steps:

Lazy mint a batch of NFTs.
Configuring our claim conditions.
Mint an NFT from the drop!

Once we've set up our NFTs, we can click the Claim button in the NFTs tab to mint our first NFT, and voilà! We just minted an NFT on the Polygon testnet!

What's Next?

Wrapping up

In this guide, you've learned how to create a simple NFT Drop smart contract, deploy it to the Polygon Mumbai testnet, and mint an NFT on the smart contract. We hope it was helpful!

If you have any questions jump into the thirdweb Discord and join 32,000+ other builders! And if you're looking to build on Polygon and want to learn more about how to do that with thirdweb's tools, reach out to the team directly. Please let us know if you have any feature requests or guide requests here.

Sign In with Solana - Authenticate Users with their Phantom Wallet

Avneesh Agarwal — Thu, 13 Oct 2022 01:36:16 +0000

Introduction

In this guide, we are going to use thirdweb auth to add sign in with Solana to our Dapps!

Before we get started, below are some helpful resources where you can learn more about the tools we will use in this guide.

Let's get started!

Why use web3 sign-in?

Sign-in with Solana allows you to securely log in using a wallet and verify the wallet on the backend! We are going to use Thirdweb Auth which uses the very popular JWT standard! JSON Web Token (JWT) is an open standard that defines a compact and self-contained way for securely transmitting information between parties as a JSON object.

Setup

Creating Next.js App

I am going to use the Next typescript solana starter template for this guide.

If you are following along with the guide, you can create a project with the
Next TypeScript template using the thirdweb CLI:

npx thirdweb create --template next-typescript-solana-starter

If you already have a Next.js app you can simply follow these steps to get started:

Install the thirdweb sdks: @thirdweb-dev/react and @thirdweb-dev/sdk
Install packages for solana wallet adapter: @solana/wallet-adapter-react, @solana/wallet-adapter-react-ui and @solana/wallet-adapter-wallets.
Wrap the app in the ThirdwebProvider and WalletModalProvider.

Setting up thirdweb auth

Firstly, we need to install the thirdweb auth package:

npm i @thirdweb-dev/auth # npm

yarn add @thirdweb-dev/auth # yarn

Now, create a file called auth.config.ts and the following:

import { ThirdwebAuth } from "@thirdweb-dev/auth/next";

export const { ThirdwebAuthHandler, getUser } = ThirdwebAuth({
  privateKey: process.env.PRIVATE_KEY as string,
  domain: "example.org",
});

Update the domain with your domain.
We need the private key of our wallet. So, go to your phantom wallet (if you haven't already created one, check out this guide) and click on the top right badge and select your wallet. Then click on the export private key button:

Copy this private key, and paste it into a new file .env in the following format:

PRIVATE_KEY=<your-private-key>

Using private keys as an env variable is vulnerable to attacks and is not the best practice. We are doing it in this guide for the sake of brevity, but we strongly recommend using a secret manager to store your private key.

To configure the auth api, create a new folder inside pages/api called auth and [...thirdweb].ts file inside it! Here we need to export the thirdwebHandler that we created!

import { ThirdwebAuth } from "@thirdweb-dev/auth/next/solana";

export const { ThirdwebAuthHandler, getUser } = ThirdwebAuth({
  privateKey: process.env.PRIVATE_KEY as string,
  domain: "example.org",
});

Finally, inside the _app.tsx file, add the authConfig prop to ThirdwebProvider:

  <ThirdwebProvider
      network={network}
      authConfig={{
        authUrl: "/api/auth",
        domain: "example.org",
        loginRedirect: "/",
      }}
    >
      <WalletModalProvider>
        <Component {...pageProps} />
      </WalletModalProvider>
    </ThirdwebProvider>

Building the frontend

Inside pages/index.tsx update the return statement with the following:

return (
  <div>
    {publicKey ? (
      <button onClick={() => login()}>Sign in with Solana</button>
    ) : (
      <WalletMultiButton />
    )}
  </div>
);

We are going to use the useWallet and useLogin hooks to get the login function and user address:

const { publicKey } = useWallet();
const login = useLogin();

We need to import these hooks like this:

import { useWallet } from "@solana/wallet-adapter-react";
import { useLogin, useUser } from "@thirdweb-dev/react/solana";

This will add sign-in with Solana to our site! Now we need to check if a user exists, so for that get the user from the useUser hook like this:

const { user } = useUser();

And we will check if the user exists and if it exists we will return this:

if (user) {
  return (
    <div className={styles.container}>
      <p>You are signed in as {user.address}</p>
      <button onClick={validateUser}>Validate user</button>
    </div>
  );
}

Creating api for validation

Let's now create an api to get the user details (address) on the backend! So, create a new file called validate.ts inside pages/api and add the following:

import type { NextApiRequest, NextApiResponse } from "next";
import { getUser } from "../../auth.config";

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === "POST") {
    const thirdwebUser = await getUser(req);

    if (thirdwebUser?.address) {
      return res.status(200).json({
        message: `You are signed in as ${thirdwebUser.address}`,
      });
    }
    return res.status(401).json({ message: "Account not validated" });
  }
  return res.status(405).json({ message: "Method not allowed" });
};

export default handler;

Here, we are using the getUser method from thirdweb to get the user's address and if it exists we send a message that "you are signed in as address".

Calling the API on frontend

Create a new function called validateUser in pages/index.tsx like this:

const validateUser = async () => {
  try {
    const response = await fetch("/api/validate", {
      method: "POST",
    });

    const data = await response.json();
    alert(data.message);
  } catch (error) {
    console.log(error);
  }
};

And attach this function to onClick of the validate button:

<button onClick={validateUser}>Validate user</button>

Conclusion

In this guide, we learned how to use thirdweb auth to add sign in with solana. Share your amazing Dapps that you built using sign in with solana on the thirdweb discord! If you want to take a look at the code, check out the GitHub Repository.

Build A Mutant Ape Yacht Club (MAYC) NFT Collection Clone

Avneesh Agarwal — Thu, 22 Sep 2022 22:58:12 +0000

In this guide, we'll show you how to create a clone of the MAYC collection drop where users from an original collection will be airdropped serums that can be used to mint a MAYC NFT. When the user claims the NFT, the serum will be burned.

Before we get started, below are some helpful resources where you can learn more about the tools we will use in this guide.

Let's get started!

Setup

To build the smart contract we will be using Hardhat.

Hardhat is an Ethereum development environment and framework designed for full stack development in Solidity. Simply put, you can write your smart contract, deploy it, run tests, and debug your code.

Setting up a new hardhat project

Create a folder where the hardhat project and the Next.js app will go. To create a folder, open up your terminal and execute these commands

mkdir mayc-clone
cd mayc-clone

Now, we will use the thirdweb CLI to generate a new hardhat project! So, run this command:

npx thirdweb create --contract

When it asks what type of project, you must select an empty one!

Now you have a hardhat project ready to go!

Setting up the frontend

I am going to use the Next.js Typescript starter template for this guide.

If you are following along with the guide, you can create a project with the template using the thirdweb CLI:

npx thirdweb create --next --ts

If you already have a Next.js app you can simply follow these steps to get started:

Install @thirdweb-dev/react and @thirdweb-dev/sdk and ethers.
Add MetaMask authentication to the site. You can follow this guide to add metamask auth.

Creating the Smart Contracts

Writing the smart contracts

BAYClone.sol

We will now write our smart contracts! Create a new file BAYClone.sol in the contracts folder. We are going to use the thirdweb contracts extend feature to create a new NFT drop. So, paste the following into it

// SPDX-License-Identifier: Apache-2.0
pragma solidity ^0.8.0;

import "@thirdweb-dev/contracts/base/ERC721Drop.sol";

contract BAYClone is ERC721Drop {
    constructor(
        string memory _name,
        string memory _symbol,
        address _royaltyRecipient,
        uint128 _royaltyBps,
        address _primarySaleRecipient
    )
        ERC721Drop(
            _name,
            _symbol,
            _royaltyRecipient,
            _royaltyBps,
            _primarySaleRecipient
        )
    {}
}

Here, we are importing the ERC721Drop contract from the thirdweb contracts package. This contract is a base contract that allows us to create a new NFT drop. We are also passing in the name, symbol, royalty recipient, royalty bps, and primary sale recipient to the constructor.

SerumClone.sol

Next, we will create a new contract that will be the collection of the serum. This will be an ERC1155 contract. Create a new file SerumClone.sol in the contracts folder. We will also use the thirdweb contracts extend feature to create a new ERC1155 collection. So, paste the following into it

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "@thirdweb-dev/contracts/base/ERC1155Base.sol";

contract SerumClone is ERC1155Base {
    constructor(
        string memory _name,
        string memory _symbol,
        address _royaltyRecipient,
        uint128 _royaltyBps
    ) ERC1155Base(_name, _symbol, _royaltyRecipient, _royaltyBps) {}
}

Here, just like the BAYC Clone, we are extending a base contract from the thirdweb contracts package. This time, we are extending the ERC1155Base contract. We are also passing in the name, symbol, royalty recipient, and royalty bps to the constructor.

MAYClone.sol

Finally, we will write our MAYC Clone, the most important contract. Here we are going to extend the ERC721Drop contract and add some extra functionality. Create a new file MAYClone.sol in the contracts folder. Paste the following into it

// SPDX-License-Identifier: Apache-2.0
pragma solidity ^0.8.0;

import "@thirdweb-dev/contracts/base/ERC721LazyMint.sol";
import "@thirdweb-dev/contracts/base/ERC1155Base.sol";
import "@thirdweb-dev/contracts/base/ERC721Drop.sol";

contract MAYClone is ERC721LazyMint {
    // Store constant values for the 2 NFT Collections:
    // 1. Is the BAYC NFT Collection
    ERC721LazyMint public immutable bayc;
    // 2. Is the Serum NFT Collection
    ERC1155Base public immutable serum;

    constructor(
        string memory _name,
        string memory _symbol,
        address _royaltyRecipient,
        uint128 _royaltyBps,
        address _baycAddress,
        address _serumAddress
    ) ERC721LazyMint(_name, _symbol, _royaltyRecipient, _royaltyBps) {
        bayc = ERC721LazyMint(_baycAddress);
        serum = ERC1155Base(_serumAddress);
    }
}

Here, we are extending the ERC721LazyMint contract. We are also taking in the BAYC and Serum contract addresses as constructor arguments. Now, let's add the extra functions to the contract!

 function verifyClaim(address _claimer, uint256 _quantity)
        public
        view
        virtual
        override
    {
        // 1. Override the claim function to ensure a few things:
        // - They own an NFT from the BAYClone contract
        require(bayc.balanceOf(_claimer) >= _quantity, "You don't own enough BAYC NFTs");
        // - They own an NFT from the SerumClone contract
        require(serum.balanceOf(_claimer, 0) >= _quantity, "You don't own enough Serum NFTs");
    }

    function transferTokensOnClaim(address _receiver, uint256 _quantity) internal override returns(uint256) {
        serum.burn(
            _receiver,
            0,
            _quantity
        );

        // Use the rest of the inherited claim function logic
      return super.transferTokensOnClaim(_receiver, _quantity);
    }

The verifyClaim function checks if the user owns enough BAYC and Serum NFTs. The transferTokensOnClaim function burns the Serum NFTs from the user and then calls the inherited transferTokensOnClaim function.

Now that we have written our smart contracts, we will go ahead and deploy our contract using deploy.

Deploying the contracts

npx thirdweb deploy

This command allows you to avoid the painful process of setting up your entire project like setting up RPC URLs, exporting private keys, and writing scripts. Now, you will get options to choose which contract to deploy. We need to deploy all three of them so we will deploy them one by one.

BAYClone

First, let's deploy the BAYC Clone contract. Choose the BAYC Clone contract after filling out the form with your values. Deploy the contract!

Now, choose the network you want to deploy your contract to! I am going to use Goerli but you can use whichever one you like. Once you have selected your network click on Deploy now!

After the transactions are mined you will be taken to the dashboard which consists of many options. Feel free to explorer them but for now we will move on with other contracts!

SerumClone

Now, deploy the SerumContract in the same way as you did for the BAYC Clone contract.

MAYClone

Finally, deploy the MAYC Clone contract. The deployment process will be the same as the BAYC clone and Serum Clone but you need to pass in these two addresses as well!

Minting NFTs from BAYC Clone

We need to set up a claim phase so that people can claim our NFTs. We will claim one ourselves for testing as well. Go to the Claim Conditions and create a new claim phase with the parameters that you need!

Now, go to the NFTs tab. Let's batch upload some NFTs for the users to mint. For this guide, I am going to use the Shapes batch upload example.

Click on batch upload and upload the images and the CSV/JSON file.

Once they are uploaded you will be able to see the NFTs! To learn more about batch upload check out this guide.

Now, we need to claim some NFTs to test out the process. Go to the explorer tab and click on the claim option. Now, fill out the data I am using the following values:

_receiver: 0x477856f90EdE4D4669f222889947bE5EE43424Db
_quantity: 2
_currency: 0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
_pricePerToken: 0
_allowlistProof: { "proof": ["0x0000000000000000000000000000000000000000000000000000000000000000"], "maxQuantityInAllowlist": 0 }
_data: []
Native Token Value: 0

Click execute and confirm the transaction. Now, you can see that the NFTs have been claimed!

Airdropping NFTs from MAYC Clone

We need to add an erc 1155 token that will be airdropped to the owners of the BAYC collection, so go to the NFTs tab and click on mint. Fill out the details and click Mint!

To airdrop the serums we will create a script that will get all the owners of the BAYC NFTs and create a CSV file from it. Then we will use this CSV file to airdrop the serums. So, in our application folder, create a new file called scripts/getAll.mjs and add the following:

import { ThirdwebSDK } from "@thirdweb-dev/sdk";
import fs from "fs";
import path from "path";

(async () => {
  const sdk = new ThirdwebSDK("goerli");
  const contract = await sdk.getContract(
    "0x3714e40A15Deffb8E43A58b018bD81C2c6AC2445"
  );

  if (!contract) {
    return;
  }

  const nfts = await contract?.nft?.query?.all();

  if (!nfts) {
    return;
  }

  const csv = nfts?.reduce((acc, nft) => {
    const address = nft.owner;
    const quantity = acc[address] ? acc[address] + 1 : 1;
    return { ...acc, [address]: quantity };
  }, {});

  const filteredCsv = Object.keys(csv).reduce((acc, key) => {
    if (key !== "0x0000000000000000000000000000000000000000") {
      return {
        ...acc,
        [key]: csv[key],
      };
    }
    return acc;
  }, {});

  const csvString =
    "address,quantity \r" +
    Object.entries(filteredCsv)
      .map(([address, quantity]) => `${address},${quantity}`)
      .join("\r");

  fs.writeFileSync(path.join(path.dirname("."), "nfts.csv"), csvString);
  console.log("Generated nfts.csv");
})();

Update your contract address, and run the script. You will see a new nfts.csv file like this:

address,quantity
0xb371d1C5629C70ACd726B20a045D197c256E1054,1

Once you are done updating/checking your CSV file, go back to the dashboard and click on your NFT. Go to the airdrop tab and upload your addresses. Once done, click deploy and the serums will be airdropped to the addresses!

Adding NFTs to MAYC Clone

Just like we added NFTs to the BAYC Clone, we need to add the NFTs to MAYC clone as well.

Building the frontend

Now, let's build our frontend so that people can claim the MAYC NFTs! To keep our code clean we will store the mayc and serum addresses as a variable in const/contractAddresses.ts:

export const MAYC_ADDRESS = "0xE0e3fd6782a3b87aB1bab5d78CDAF75cB453BCbe";
export const SERUM_ADDRESS = "0xDAcd1CDB5A144fC6fa3c55F290be778Ca47C5187";

Now, in pages/index.tsx we will use the Web3Button component to allow users to claim the NFT:

return (
  <div>
    <Web3Button
      contractAddress={MAYC_ADDRESS}
      action={(contract) => mintMutantNft(contract)}
    >
      Mint Your Mutant NFT
    </Web3Button>
  </div>
);

The MAYC_ADDRESS will be imported from our contractAddresses file. And as you can see we also have a function called mintMutantNft so let's create that:

const mintMutantNft = async (maycContract: SmartContract<BaseContract>) => {
  // 1. Check the approval of the mayc contract to burn the user's serum tokens
  const hasApproval = await serumContract?.call(
    "isApprovedForAll",
    address,
    maycContract?.getAddress()
  );
  const balance = await serumContract?.call("balanceOf", address, 0);

  if (!hasApproval) {
    // Set approval
    await serumContract?.call(
      "setApprovalForAll",
      maycContract?.getAddress(),
      true
    );
  }

  if (balance < 1) {
    return alert("Not enough serum tokens");
  }

  await maycContract?.call("claim", address!, 1);
};

Here, we are getting the serumContract and asking for approval first as the contract needs to burn the serum. To get the address and maycContract we will use some hooks:

const address = useAddress();
const { contract: serumContract } = useContract(SERUM_ADDRESS);

Now, if we test out our app everything works! 🥳

Conclusion

In this guide, we learnt how to use the bases extensions to create a MAYC clone. If you built the Dapp pat yourself on the back and share it with us on the thirdweb discord! If you want to take a look at the code, check out the GitHub Repository.

Create a todo app with thirdweb deploy and Next.js

Avneesh Agarwal — Mon, 12 Sep 2022 05:29:14 +0000

This guide will show you how to build a full web3 application that allows users to create an on-chain to-do list, using Solidity for the smart contract and Next.js for the application.

Before we get started, below are some helpful resources where you can learn more about the tools we're going to be using in this guide.

Let's get started!

Creating the Smart Contract

To build the smart contract we will be using Hardhat.

Hardhat is an Ethereum development environment and framework designed for full stack development in Solidity. Simply put, you can write your smart contract, deploy it, run tests, and debug your code.

Setting up a new hardhat project

Create a folder where the hardhat project and the Next.js app will go. To create a folder, open up your terminal and execute these commands

mkdir todo-dapp
cd todo-dapp

Now, we will use the thirdweb CLI to generate a new hardhat project! So, run this command:

npx thirdweb create --contract

When it asks for what type of project, you need to select an empty project!

Now you have a hardhat project ready to go!

Writing the smart contract

Once the app is created, create a new file inside the contracts directory called Todo.sol and add the following code:

// SPDX-License-Identifier: MIT

// specify the solidity version here
pragma solidity ^0.8.0;

contract Todos {
    // We will declare an array of strings called todos
    string[] public todos;

    // We will take _todo as input and push it inside the array in this function
    function setTodo(string memory _todo) public {
        todos.push(_todo);
    }

    // In this function we are just returning the array
    function getTodo() public view returns (string[] memory) {
        return todos;
    }

    // Here we are returning the length of the todos array
    function getTodosLength() public view returns (uint) {
        uint todosLength = todos.length;
        return todosLength;
    }

    // We are using the pop method to remove a todo from the array as you can see we are just removing one index
    function deleteToDo(uint _index) public {
        require(_index < todos.length, "This todo index does not exist.");
        todos[_index] = todos[getTodosLength() - 1];
        todos.pop();
    }
}

This smart contract allows you to add todos to your contract, remove them, get their length and return the array which consists of all the tasks you have set up.

Now that we have written our basic Todos smart contract, we will go ahead and deploy our contract using deploy.

Deploying the contract

npx thirdweb deploy

This command allows you to avoid the painful process of setting up your entire project like setting up RPC URLs, exporting private keys, and writing scripts.

Upon success, a new tab will automatically open and you should be able to see a link to the dashboard in your CLI.

Now, choose the network you want to deploy your contract to! I am going to use Goerli but you can use whichever one you like. Once you have chosen your network click on Deploy now!

After the transactions are mined you will be taken to the dashboard which consists of many options.

In the overview section, you can explore your contract and interact with the functions without having to integrate them within your frontend code yet so it gives you a better idea of how your functions are working and also acts as a good testing environment.

In the code section, you see the different languages and ways you can interact with your contract. Which we will look into later on in the tutorial.

In the events section, you can see all the transactions you make.
You can also customize the *settings* after enabling the required interfaces in the settings section.

In the source section, you can see your smart contract and it also gives you a verification button to the relevant chain to which you have deployed your contract.

Creating the Frontend

I am going to use the Next.js Typescript starter template for this guide.

If you are following along with the guide, you can create a project with the template using the thirdweb CLI:

npx thirdweb create --next --ts

If you already have a Next.js app you can simply follow these steps to get started:

Install @thirdweb-dev/react and @thirdweb-dev/sdk and ethers
Add MetaMask authentication to the site. You can follow this guide to do this.

By default the network is Mainnet, we need to change it to Goerli

import type { AppProps } from "next/app";
import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";

// This is the chainId your dApp will work on.
const activeChainId = ChainId.Goerli;

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThirdwebProvider desiredChainId={activeChainId}>
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;

Create todo functionality

Let's now go to pages/index.tsx and firstly, get the wallet address of the user like this:

const address = useAddress();

Then, we are going to check if the address exists and if it does we are going to show a simple input and button to create a new todo:

<div>
  {address ? (
    <div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Enter todo"
      />

      <Web3Button
        contractAddress={contractAddress}
        action={(contract) => contract.call("setTodo", input)}
      >
        Set Todo
      </Web3Button>
    </div>
  ) : (
    <ConnectWallet  />
  )}
</div>

We are using a state to store the value of a state variable and I have also created a variable for contractAddress as it will be used in multiple places:

  const contractAddress = "0x80ddA9989F272BFB1c53c1A100ff118Fd27dDb59";
  const [input, setInput] = useState("");

To get the contract address go to your contract on thirdweb and copy the contract

If you now check out the app, you will be able to add todos!

Read todos functionality

Using the useContract and useContractData hooks we will get the todos like this:

const { contract } = useContract(contractAddress);
const { data, isLoading } = useContractData(contract, "getTodo");

Now, we will check if the todos are loading and if it is loading we will show a loading screen otherwise we will show the todos:

  <div>
            {isLoading ? (
              "Loading..."
            ) : (
              <ul>
                {data.map((item: string, index: number) => (
                  <li key={index}>
                    {item}
                  </li>
                ))}
              </ul>
            )}
          </div>

You will now be able to see all the todos 🎉

Adding delete functionality

Where we are mapping through all the todos we will add another Web3Button that will be responsible for deleting the todos:

 {data.map((item: string, index: number) => (
                  <li key={index}>
                    {item}
                    <Web3Button
                      contractAddress={contractAddress}
                      action={(contract) => contract.call("deleteToDo", index)}
                    >
                      Delete Todo
                    </Web3Button>
                  </li>
                ))}

Adding some styles

We will add some basic styles to our app so it looks good! So, create a globals.css file in the styles folder and add the following:

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

Now, import it in _app.tsx like this:

import "../styles/globals.css";

Let's style the home page now! Create a file Home.module.css and add the following:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 100vh;
  background-color: #c0ffee;
}

.todo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 10px;
}

.todo > span > button {
  border: none;
  height: 30px !important;
}

.todoForm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 10px;
}

.todoForm > span > button {
  border: none;
  height: 20px !important;
}

Finally, add the classNames:

import {
  ConnectWallet,
  useAddress,
  useContract,
  useContractData,
  Web3Button,
} from "@thirdweb-dev/react";
import type { NextPage } from "next";
import { useState } from "react";
import styles from "../styles/Home.module.css";

const Home: NextPage = () => {
  const address = useAddress();
  const contractAddress = "0x80ddA9989F272BFB1c53c1A100ff118Fd27dDb59";
  const [input, setInput] = useState("");
  const { contract } = useContract(contractAddress);
  const { data, isLoading } = useContractData(contract, "getTodo");

  return (
    <div className={styles.container}>
      {address ? (
        <>
          <div className={styles.todoForm}>
            <input
              value={input}
              onChange={(e) => setInput(e.target.value)}
              placeholder="Enter todo"
            />

            <Web3Button
              contractAddress={contractAddress}
              action={(contract) => contract.call("setTodo", input)}
              accentColor="#1ce"
            >
              Set Todo
            </Web3Button>
          </div>

          <div>
            {isLoading ? (
              "Loading..."
            ) : (
              <ul>
                {data.map((item: string, index: number) => (
                  <li key={index} className={styles.todo}>
                    {item}
                    <Web3Button
                      contractAddress={contractAddress}
                      action={(contract) => contract.call("deleteToDo", index)}
                      accentColor="#1ce"
                    >
                      Delete Todo
                    </Web3Button>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </>
      ) : (
        <ConnectWallet accentColor="#1ce" colorMode="light" />
      )}
    </div>
  );
};

export default Home;

Now, we have an awesome web3 to-do app ready! 🥳

Conclusion

In this guide, we've learned how to build a full-stack web3 todo app! If you did as well pat yourself on the back and share it with us on the thirdweb discord.

Allow GitHub contributors to mint an NFT

Avneesh Agarwal — Mon, 12 Sep 2022 05:26:18 +0000

In this guide, we'll show you how to create an app where users can sign in with their GitHub and web3 wallet. Once they are signed in, we will validate if they have contributed to one of our repos; and if they have, we will allow the users to mint an NFT using signature-based minting!

Before we get started, below are some helpful resources where you can learn more about the tools we're going to be using in this guide.

Let's get started!

Setup

I am going to use the Next.js Typescript starter template for this guide.

If you are following along with the guide, you can create a project with the template using the thirdweb CLI:

npx thirdweb create --next --ts

If you already have a Next.js app you can simply follow these steps to get started:

Install @thirdweb-dev/react and @thirdweb-dev/sdk and ethers
Add MetaMask authentication to the site. You can follow this guide to add metamask auth.
By default the network is Mainnet, we need to change it to Goerli.

import type { AppProps } from "next/app";
import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";

// This is the chainId your dApp will work on.
const activeChainId = ChainId.Goerli;

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThirdwebProvider desiredChainId={activeChainId}>
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;

Creating an Edition Contract and Lazy-Minting An NFT

Let's go ahead and deploy an Edition contract and add an NFT!

To do that, head to the thirdweb dashboard and create an Edition contract!

Fill out the details and deploy the contract by clicking on Deploy Now.

Once the contract is deployed, go to the NFTs tab and click on Mint. Enter the details of your NFT and set the initial supply to 0. Once you have filled out all the details, click on Mint NFT!

We only want users to own 1 NFT per wallet from this collection. To achieve this, we'll set our NFTs to be soulbound, meaning they cannot transfer it!

Head to the permissions tab and set the NFTs of this collection to be Non-Transferrable.

Setting up Auth

We need the user to sign in both with their wallet and with their GitHub account, to do this, we'll first set up web3 sign-in using thirdweb then use NextAuth to add GitHub authentication!

thirdweb Auth

Firstly, we need to install the thirdweb auth package:

npm i @thirdweb-dev/auth # npm

yarn add @thirdweb-dev/auth # yarn

Now, create a file called auth.config.ts and the following:

import { ThirdwebAuth } from "@thirdweb-dev/auth/next";

export const { ThirdwebAuthHandler, getUser } = ThirdwebAuth({
    // Using environment variables to secure your private key is a security vulnerability.
    // Learn how to store your private key securely:
    // https://portal.thirdweb.com/sdk/set-up-the-sdk/securing-your-private-key
    process.env.ADMIN_PRIVATE_KEY!,
  // Set this to your domain to prevent signature malleability attacks.
  const domain = "http://localhost:3000";
});

The domain is important since you don't want your users signing malicious signatures
Create a new .env.local file and add a new variable named PRIVATE_KEY. Learn how to export your private key from your wallet. Using private keys as an env variable is vulnerable to attacks and is not the best practice. We are doing it in this guide for the sake of brevity, but we strongly recommend using a secret manager to store your private key.

To configure the auth API, create a new folder inside pages/api called thirdwebauth and a [...thirdweb].ts file inside it!

Within this file, we need to export the ThirdwebHandler that we made in the config file previously.

import { ThirdwebAuthHandler } from "../../../auth.config";

export default ThirdwebAuthHandler();

This will catch all the API requests that go to /api/auth/..., using Next.js's catch-all API route syntax.

Behind the scenes, this handles the logic for three endpoints that we're going to utilize: /login, /logout, and /user.

Finally, inside the _app.tsx file, add the authConfig prop to ThirdwebProvider:

    <ThirdwebProvider
      desiredChainId={activeChainId}
      authConfig={{
        authUrl: "/api/thirdwebauth",
        domain: "example.org",
        loginRedirect: "/",
      }}
    >
      <Component {...pageProps} />
    </ThirdwebProvider>

Next Auth with GitHub

Create a new folder called auth inside the pages/api folder and then create a file inside auth called [...nextauth].ts. Once you have done this add the following to the file:

import NextAuth, { NextAuthOptions } from "next-auth";
import GithubProvider from "next-auth/providers/github";

export const authOptions: NextAuthOptions = {
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID as string,
      clientSecret: process.env.GITHUB_SECRET as string,
    }),
  ],

  callbacks: {
    async session({ session, token }) {
      session.id = token.sub;
      return session;
    },
  },
};

export default NextAuth(authOptions);

Now, go to _app.tsx and wrap the component in a session provider like this:

<SessionProvider session={pageProps.session} refetchInterval={0}>
        <Component {...pageProps} />
</SessionProvider>

The SessionProvider will be imported from next-auth like this:

import { SessionProvider } from "next-auth/react";

We need to add some env variables to make the auth work! In the .env.local file add these variables:

GITHUB_ID=
GITHUB_SECRET=
NEXTAUTH_URL=
NEXTAUTH_SECRET=

The NEXTAUTH_URL will be a link to the homepage of your website, since we are working on localhost it will be http://localhost:3000.

To generate a secret run the following command:

openssl rand -base64 32

Now, we need to create a GitHub OAuth app. You can do that from the Github Developer Settings and fill out the information like so:

Now, copy the client id and generate a new secret and copy that. Go to your .env.local file and update these variables. Once you have filled all the env vars restart your dev server!

Next, follow Github's Creating a personal access token guide and add this as an environment variable in your project. We'll use this to make requests to GitHub's API without getting rate-limited.

GITHUB_ACCESS_TOKEN=

Creating the login page

Create a new file login.tsx inside the pages folder and add the following:

import React from "react";
import { useSession, signIn } from "next-auth/react";
import styles from "../styles/Home.module.css";

const Login = () => {
  const { data: session } = useSession();

  if (!session) {
    return (
      <div className={styles.container}>
        <button className={styles.mainButton} onClick={() => signIn()}>
          Sign in with GitHub
        </button>
      </div>
    );
  }
};

export default Login;

This will show a Sign in with GitHub button if there is no session detected from NextAuth.

Now, we will check for the address and thirdweb user. If the user's wallet is not connected/the user isn't signed in we will show the corresponding buttons.

Firstly, we are going to need 3 hooks:

  const login = useLogin();
  const address = useAddress();
  const connect = useMetamask();

Below the session check add the following:

  if (!address) {
    return (
      <div className={styles.container}>
        <button className={styles.mainButton} onClick={() => connect()}>
          Connect Wallet
        </button>
      </div>
    );
  }

  return (
    <div className={styles.container}>
      <button className={styles.mainButton} onClick={() => login()}>
        Sign in with Ethereum
      </button>
    </div>
  );

This code block will first check if there is an address present. If there is no address present it will show the connect wallet button; otherwise, the sign in with Ethereum button.

We are using css modules to add some basic stylings to the app, so if you want to add the stylings as well. Create a new folder styles and globals.css inside it

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

Now, import it in _app.tsx like this:

import "../styles/globals.css";

Now, create another file called Home.module.css and the following:

.container {
  width: 100%;
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mainButton {
  background: linear-gradient(to right, #ff1b6b, #45caff);
  border: none;
  color: #fff;
  font-weight: 700;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}

Now, we have the auth flow completed! You can go to http://localhost:3000/login and check it out yourself.

Creating the API for claim

Create a new file claim-nft.ts inside the pages/api folder. We are going to need to create an api so add the following:

import type { NextApiRequest, NextApiResponse } from "next";

const claimNft = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method !== "POST") {
    return res.status(405).json({ error: "Method not allowed" });
  }

  return res.status(200).json({ message: "gm" });
};

export default claimNft;

This api first checks if the request is of the post method or not and if it is using the post method we will send a message "gm".

Now, let's get into the actual code! We will first get the users from the next auth and thirdweb auth like this:

  const session = await unstable_getServerSession(req, res, authOptions);
  const thirdwebUser = await getUser(req);

  if (!session || !thirdwebUser) {
    return res.status(401).json({ message: "Unauthorized" });
  }

We need to import them like this:

import { unstable_getServerSession } from "next-auth/next";
import { getUser } from "../../auth.config";

These are the two functions we use to view the authenticated user's information on the server-side:

unstable_getServerSession is our way of getting the connected Github account
getUser is our way of viewing the authenticated wallet. Now, we will create a new array that will have a list of repos to check for:

const reposToCheck = [
    "js",
    "react",
    "typescript-sdk",
    "thirdweb-cli",
    "contracts",
    "auth",
    "storage",
    "go-sdk",
    "python-sdk",
    "docs",
    "portal",
    "examples",
  ];

Here, we have added some of our thirdweb repositories, but you need to update this with your list of repositories to check.

Now, we will loop through this array and for each item we will check if the user has contributed to them:

let hasContributed = false;

  for (const repo of reposToCheck) {
    const contributors: GithubContributor[] = await fetch(
      `https://api.github.com/repos/thirdweb-dev/${repo}/contributors`,
      {
        headers: {
          Authorization: `token ${process.env.GITHUB_ACCESS_TOKEN}`,
        },
      }
    ).then((res) => res.json());

    const hasContributedToThisRepo = contributors?.some((contributor) => {
      return contributor.id.toString() === session.id;
    });

    if (hasContributedToThisRepo) {
      hasContributed = true;
    }
  }

Now that we know if the user has contributed or not, if the user has not contributed we will simply say that you don't qualify:

  if (!hasContributed) {
    return res.status(401).json({ message: "Sorry, you don't qualify" });
  }

Now, let's initialize our SDK using our private key:

 const sdk = ThirdwebSDK.fromPrivateKey(
     // Using environment variables to secure your private key is a security vulnerability.
    // Learn how to store your private key securely:
    // https://portal.thirdweb.com/sdk/set-up-the-sdk/securing-your-private-key
    process.env.PRIVATE_KEY as string,
    "goerli"
  );

We will first check if the user already owns one of our NFTs first:

  const edition = sdk.getEdition("0xD71c27e6325f018b15E16C3992654F1b089C5fCe");

  const balance = await edition.balanceOf(thirdwebUser.address, 0);

  if (balance.gt(0)) {
    return res.status(401).json({ message: "You already have an NFT" });
  }

Finally, we will generate the signature to mint the NFT!

  const signedPayload = await edition.signature.generateFromTokenId({
    quantity: 1,
    tokenId: 0,
    to: thirdwebUser.address,
  });

  return res.status(200).json({ signedPayload });

Our final API code will looks like this:

import type { NextApiRequest, NextApiResponse } from "next";
import { unstable_getServerSession } from "next-auth/next";
import { getUser } from "../../auth.config";
import GithubContributor from "../../types/GithubContributor";
import { ThirdwebSDK } from "@thirdweb-dev/sdk";
import { authOptions } from "./auth/[...nextauth]";

const claimNft = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method !== "POST") {
    return res.status(405).json({ error: "Method not allowed" });
  }

  const session = await unstable_getServerSession(req, res, authOptions);
  const thirdwebUser = await getUser(req);

  if (!session || !thirdwebUser) {
    return res.status(401).json({ message: "Unauthorized" });
  }

  const reposToCheck = [
    "js",
    "react",
    "typescript-sdk",
    "thirdweb-cli",
    "contracts",
    "auth",
    "storage",
    "go-sdk",
    "python-sdk",
    "docs",
    "portal",
    "examples",
  ];

  let hasContributed = false;

  for (const repo of reposToCheck) {
    const contributors: GithubContributor[] = await fetch(
      `https://api.github.com/repos/thirdweb-dev/${repo}/contributors`,
      {
        headers: {
          Authorization: `token ${process.env.GITHUB_ACCESS_TOKEN}`,
        },
      }
    ).then((res) => res.json());

    const hasContributedToThisRepo = contributors?.some((contributor) => {
      return contributor.id.toString() === session.id;
    });

    if (hasContributedToThisRepo) {
      hasContributed = true;
    }
  }

  if (!hasContributed) {
    return res.status(401).json({ message: "Sorry, you don't qualify" });
  }

  const sdk = ThirdwebSDK.fromPrivateKey(
    process.env.PRIVATE_KEY as string,
    "goerli"
  );

  const edition = sdk.getEdition("0xD71c27e6325f018b15E16C3992654F1b089C5fCe");

  const balance = await edition.balanceOf(thirdwebUser.address, 0);

  if (balance.gt(0)) {
    return res.status(401).json({ message: "You already have an NFT" });
  }

  const signedPayload = await edition.signature.generateFromTokenId({
    quantity: 1,
    tokenId: 0,
    to: thirdwebUser.address,
  });

  return res.status(200).json({ signedPayload });
};

export default claimNft;

Creating the frontend

Calling the API on the frontend

Go to pages/index.tsx and update the return block:

  return (
    <div className={styles.container}>
      <h1>GitHub Contributor NFTs</h1>
      <p>
        Claim an NFT if you have contributed to any of thirdweb&apos;s repos.
      </p>

      {!address ? (
        <button
          className={styles.mainButton}
          disabled={loading}
          onClick={() => connect()}
        >
          Connect to Metamask
        </button>
      ) : (
        <button
          className={styles.mainButton}
          disabled={loading}
          onClick={mintNft}
        >
          {loading ? "Loading..." : "Claim NFT"}
        </button>
      )}
    </div>
  );

We are going to check if the user's wallet is connected and if it is then we will show a button to claim the NFT!

As you can see we are going to need a mintNFTfunction so let's create that:

const mintNft = async () => {
    setLoading(true);

    if (networkMismatch) {
      return switchNetwork?.(ChainId.Goerli);
    }

    try {
      const req = await fetch("/api/claim-nft", {
        method: "POST",
      });

      const res = await req.json();

      if (!req.ok) {
        return alert(`Error: ${res.message}`);
      }

      await edition?.signature.mint(res.signedPayload);

      alert("Successfully minted NFT 🚀");
    } catch (err) {
      console.error(err);
      alert("Failed to mint NFT");
    } finally {
      setLoading(false);
    }
  };

We are also using some hooks to access the edition contract, get the user's address, connect the wallet to MetaMask, store loading, etc.:

const edition = useEdition("0xD71c27e6325f018b15E16C3992654F1b089C5fCe");
  const connect = useMetamask();
  const address = useAddress();
  const [, switchNetwork] = useNetwork();
  const networkMismatch = useNetworkMismatch();
  const [loading, setLoading] = useState<boolean>(false);

Now, if you have contributed to any of the repositories you will successfully be able to mint the NFT! 🎉

Redirecting users if they are not logged in

If the user is not logged in and they come to the home page we should redirect them to /login so, we are going to use SSR to redirect the user if they are not logged in:

export const getServerSideProps: GetServerSideProps = async (context) => {
  const thirdwebUser = await getUser(context.req);

  const session = await unstable_getServerSession(
    context.req,
    context.res,
    authOptions
  );

  if (!thirdwebUser || !session) {
    return {
      redirect: {
        destination: "/login",
        permanent: false,
      },
    };
  }

  return {
    props: {},
  };
};

Conclusion

In this guide, we learnt how to use thirdweb auth to allow only users who have contributed to our repos to mint an NFT!

If you did as well pat yourself on the back and share it with us on the thirdweb discord! If you want to take a look at the code, check out the GitHub Repository.

Create on-demand access pass minting (ERC 721)

Avneesh Agarwal — Wed, 17 Aug 2022 13:11:52 +0000

What is thirdweb?

thirdweb is a platform that lets you deploy smart contracts without having to know Solidity, you can do it by using TypeScript, Python or Go or even without writing any code.

Introduction

In this guide, we will create an NFT collection where users can connect their wallets to the website and mint an NFT by generating a signature. The metadata of the signature will be the same for everyone but this will help us send ERC 721 tokens which are unique to all the users.

This collection of passes will be similar to the Fnatic passes drop!

Before we get started, below are some helpful resources where you can learn more about the tools we will use in this guide.

Let's get started.

Setup

I am going to use the Next typescript starter template for this guide.

If you are following along with the guide, you can create a project with the
Next TypeScript template using the thirdweb CLI:

npx thirdweb create --next --ts

If you already have a Next.js app you can simply follow these steps to get started:

Install @thirdweb-dev/react and @thirdweb-dev/sdk and ethers
Add MetaMask authentication to the site. You can follow this guide to do this.

By default the network in _app.tsx is Mainnet, we need to change it to Mumbai

import type { AppProps } from "next/app";
import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";

// This is the chainId your dApp will work on.
const activeChainId = ChainId.Mumbai;

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThirdwebProvider desiredChainId={activeChainId}>
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;

Creating an NFT collection

We also need to create an NFT collection contract where all the passes will live.
So, go to the thirdweb dashboard and create an NFT collection!

Fill out the details and deploy the contract!

We don't need to do anything else for now, all the NFTs will be minted as the users start minting! So let's get started with the code.

Making the website

Creating an API for generating a signature

We are going to use the signature minting on our backend. You can also add different checks if you want like different price for different wallets, allowing users to mint only 1 pass, etc.

Create a new folder api in the pages folder and generate-mint-sig.ts inside it.

We will now build a basic API that will output "gm wagmi"

import type { NextApiRequest, NextApiResponse } from "next";

const generateMintSignature = async (
  req: NextApiRequest,
  res: NextApiResponse
) => {
  res.send("gm wagmi");
};

export default generateMintSignature;

This creates a basic API for us, if you now go to the api/generate-mint-sig
endpoint, you will get a response of gm wagmi.

Let's now initialize the thirdweb SDK!

const sdk = ThirdwebSDK.fromPrivateKey(
  process.env.PRIVATE_KEY as string,
  "mumbai"
);

As you can see, we are using an environment variable to initialize the sdk.
The variable is called PRIVATE_KEY, which is the wallet's private key.
Create a new file .env.local and add your private key.

PRIVATE_KEY=<private_key>

How to export your private key

Learn how to export your private key from your wallet.

To do this, create a file called .env.local at the root of your project, and add the following to it:

PRIVATE_KEY=your-private-key-here

Warning

Ensure you store and access your private key securely.

Never commit any file that may contain your private key to your source control.

We also need to import the ThirdwebSDK:

import { ThirdwebSDK } from "@thirdweb-dev/sdk";

Generating the signature

Finally, we are going to access the NFT Collection using the sdk and generate a signature from it:

const { address } = JSON.parse(req.body);

const collection = sdk.getNFTCollection(
  "0xeED8165505d78D2CA9f2b4fA6Aff179CeBd4dCA4"
);

const metadata = {
  name: "Thirdweb",
  description: "Build web3 apps, easily.",
  image: readFileSync(path.join(process.cwd(), "public", "thirdweb.svg")),
  properties: {
    web: "3",
  },
};

try {
  const signedPayload = await collection.signature.generate({
    to: address,
    metadata,
  });

  return res.status(200).json({
    signedPayload,
  });
} catch (error) {
  console.log(error);
  return res.status(500).json({
    error,
  });
}

This is an example of a free mint, you can pass in different properties like price to customize your NFT collection! And as you can see we have created a new metadata object with data of the pass so you need to change the details like name, image, description, and properties based on your needs! For the image we are using a local file which is in the public folder so make sure to put in the correct path.

Calling the API from the frontend

In index.tsx update the address ternary and add the Mint button:

<div>
  {address ? (
    <button onClick={mint}>Mint</button>
  ) : (
    <button onClick={connectWithMetamask}>Connect with Metamask</button>
  )}
</div>

Now we will create the mint function that makes an api call to the backend and mints the NFT:

const collection = useNFTCollection(
  "0xeED8165505d78D2CA9f2b4fA6Aff179CeBd4dCA4"
);

const mint = async () => {
  const signedPayloadReq = await fetch("/api/generate-mint-sig", {
    method: "POST",
    body: JSON.stringify({ address }),
  });

  const signedPayload = await signedPayloadReq.json();

  try {
    const nft = await collection?.signature.mint(signedPayload.signedPayload);
    return nft;
  } catch (err) {
    console.error(err);
    return null;
  }
};

If we now try minting the NFT, we will be able to mint the NFT successfully!

Create a Discord Bot that Assigns a Role to NFT Holders

Jarrod Watts — Mon, 25 Jul 2022 06:25:21 +0000

In this guide, we'll set up a Discord bot that checks if a wallet has an NFT from a collection, and grants them a special role on our Discord server if they do!

Similar to Collab.Land, we'll ask the user to sign in with their wallet as well as their Discord account on our web application, and ask a bot we create to grant them a role on our server using the Discord API running on a Next.js API route.

You can grab the source code for this project using this link: https://github.com/thirdweb-example/discord-role-granter

Let's do it!

Creating a thirdweb app

To get started, we can use the thirdweb CLI.

npx thirdweb create

We'll be using TypeScript and Next.js for this guide; so give your app a name and select Next.js for the framework, and TypeScript for the language.

For this guide, we'll assume you already have a Discord server created and a role set up in the server. If you don't have one, go ahead and create one now and come back to this guide, because next up, we'll create a bot and invite it to our server!

Creating A Discord Bot

To create a Discord bot, head to the Discord Developer Portal and click on New Application, give it a name and click create!

Once it's created, head to the Bot tab, and click Add Bot.

Give your bot a username, and I'm unchecking the Public Bot field so that only we can invite our bot.

Scroll down to Bot Permissions and give our bot the Manage Roles permission:

It's important to note that you should only give your bot the roles it requires. If your bot token is compromised, other users can perform any actions you have permitted it to do.

Once you're ready, click Save Changes!

Now we're ready to invite our bot to our server!

Click OAuth2 > URL Generator on the sidebar:

Select bot and Manage Roles scopes.

Copy the Generated URL and open it in your browser.

Make sure it is the bot you expect, select the server you want to add your bot to and click Continue. It will ask you to approve this bot's permissions, you should see a prompt to authorize the bot for Manage Roles permissions:

Click Authorise, once successful, you'll see an Authorised window

And your bot will be added to your server - say hi!

Authenticating Users

To authenticate users with Discord, we'll be using the library `NextAuth

Create a new folder inside of pages called api, and within that, create another folder called auth, and within this auth folder, create a file called [...nextauth].ts!

bash yarn add next-auth

This is where we'll configure our NextAuth setup and allow people to sign in to our application using Discord.

Back in your Discord Developer Portal, copy across your Client ID and Client Secret into environment variables in your project, by creating a .env.local file at the root of the directory.

text CLIENT_ID=xxxxx CLIENT_SECRET=xxxxx

We also need to add a Redirect URL into our Application while we're here:

Now let's make our [...nextauth] API route look like this:

`ts
import NextAuth from "next-auth";
import DiscordProvider from "next-auth/providers/discord";
export default NextAuth({
// Configure one or more authentication providers
providers: [
DiscordProvider({
clientId: process.env.CLIENT_ID as string,
clientSecret: process.env.CLIENT_SECRET as string,
}),
],

// When the user signs in, get their token
callbacks: {
async jwt({ token, account }) {
// Persist the OAuth access_token to the token right after signin
if (account) {
token.userId = account.providerAccountId;
}
return token;
},

async session({ session, token, user }) {
  // Send properties to the client, like an access_token from a provider.
  session.userId = token.userId;
  return session;
},

},
});
`

You might notice we have some modifications to the data that gets returned inside these callbacks. We're doing this to add the user's ID into the token that gets returned by NextAuth, because we want to access that value when we try and grant this user the role (we'll need their ID).

To access NextAuth's hooks such as signIn, we need to wrap our application in the SessionProvider:

`jsx
import type { AppProps } from "next/app";
import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";
import { SessionProvider } from "next-auth/react";
import "../styles/globals.css";

// This is the chainId your dApp will work on.
const activeChainId = ChainId.Mumbai;

function MyApp({ Component, pageProps }: AppProps) {
return (

);
}

export default MyApp;
`

Now we're ready for users to authenticate to our application using Discord!

Let's create a folder called components and create a SignIn.tsx component within that folder. This component will ask the user to both:

Sign In With Their Wallet
Authenticate With Discord

In this component, three states can occur:

The user is connected to both wallet and Discord => We show them the main page.
The user is not connected to wallet => We ask them to connect their wallet.
The user is not connected to Discord=> We ask them to authenticate with Discord.

Once the user is in state 1, (has both wallet connected and Discord connected), we can show them a button that will run some code on our server to check if they own an NFT. If they do own the NFT, our Discord bot will assign them a role in our Discord server!

Let's write the code for these three states:

Imports and hook definitions

`jsx
import { useAddress, useDisconnect, useMetamask } from "@thirdweb-dev/react";
import { useSession, signIn, signOut } from "next-auth/react";
import React from "react";
import styles from "../styles/Home.module.css";

export default function SignIn() {
const address = useAddress();
const connectWithMetamask = useMetamask();
const disconnectWallet = useDisconnect();
const { data: session } = useSession();

// rest of the code here
}
`

State 1 - Both Wallet + Discord Connected

jsx // 1. The user is signed into discord and connected to wallet. if (session && address) { return ( <div className={styles.bigSpacerTop}> <a onClick={() => signOut()} className={styles.secondaryButton}> Sign out of Discord </a> |<a onClick={() => disconnectWallet()} className={styles.secondaryButton}> Disconnect wallet </a> </div> ); }

State 2 - Connect Wallet

jsx // 2. Connect Wallet if (!address) { return ( <div className={styles.main}> <h2 className={styles.noGapBottom}>Connect Your Wallet</h2> <p>Connect your wallet to check eligibility.</p> <button onClick={connectWithMetamask} className={${styles.mainButton} ${styles.spacerTop}} > Connect Wallet </button> </div> ); }

State 3 - Connect Discord

jsx // 3. Connect with Discord (OAuth) if (!session) { return ( <div className={${styles.main}`}>

Sign In with Discord

  <button
    onClick={() => signIn("discord")}
    className={`${styles.mainButton} ${styles.spacerTop}`}
  >
    Connect Discord
  </button>
</div>

);
}

// default return nothing
return null;
`

Back on our home page, let's change the logic to show the user the SignIn component when we can't find both an address and session:

`jsx
// index.tsx
import { useAddress, useSDK } from "@thirdweb-dev/react";
import { useSession } from "next-auth/react";
import SignIn from "../components/SignIn";
import type { NextPage } from "next";
import styles from "../styles/Home.module.css";

const Home: NextPage = () => {
const address = useAddress();
const { data: session } = useSession();
const sdk = useSDK();

return (

    {address && session && (
      <div className={styles.collectionContainer}>
        <button className={styles.mainButton}>Give me the role!</button>
      </div>
    )}
  </div>
</div>

);
};

export default Home;
`

We now have a page that prompts the user to connect their wallet, and then Sign In With Discord:

When you click the Connect Discord button, NextAuth handles the OAuth flow for us:

Once the user has connected both their wallet and Discord, we show them a button that says Give me the role!, we'll add some functionality to this button next!

Granting Discord Roles

To grant a role to the connected user, we are going to use the Discord API on behalf of the bot that we created. Specifically, we'll be hitting the Add Guild Member Role API endpoint:

To make requests from our bot, we'll need a token to act on its behalf. To generate a token, head to the Bot tab from your Discord Developer portal, and click Reset Token on your bot:

We then need to store this inside our environment variables as well securely:

text BOT_TOKEN=xxxx

Next, let's make another API route in our api folder called grant-role.ts.

Within this API route, we're going to grant a user the discord role if they own an NFT from our collection. This involves a few steps:

Authenticate the login payload of the user (ensure the user owns the wallet)
Check that wallet's NFT balance
Make a request to the Discord API to grant a role

Firstly, let's set up the barebones of our API route:

`ts
import { ThirdwebSDK } from "@thirdweb-dev/sdk";
import type { NextApiRequest, NextApiResponse } from "next";
import { getSession } from "next-auth/react";

export default async function grantRole(
req: NextApiRequest,
res: NextApiResponse,
) {
// Get the login payload out of the request
const { loginPayload } = JSON.parse(req.body);

// Get the NextAuth session so we can use the user ID as part of the discord API request
const session = await getSession({ req });

if (!session) {
res.status(401).json({ error: "Not logged in" });
return;
}
}
`

Authenticate the login payload

On the client, we're going to ask the user to sign in using the Authentication SDK. This requires the user to sign a message which generates a login payload; we'll be sending this in the body of the request.

`jsx
// Authenticate login payload
const sdk = new ThirdwebSDK("mumbai");
const domain = "thirdweb.com"; // This should be the domain name of your own website
// Verify the login payload is real and valid
const verifiedWalletAddress = sdk.auth.verify(domain, loginPayload);

// If the login payload is not valid, return an error
if (!verifiedWalletAddress) {
res.status(401).json({ error: "Invalid login payload" });
return;
}
`

This step ensures that the user owns the wallet that we are going to check. It prevents users from sending a wallet address that is not theirs to this API endpoint, and falsely granting them the role.

Check the wallet's NFT balance

We use the SDK to view the balance of the wallet address for token ID 0 of our ERC-1155 NFT collection.

`ts
// Check if this user owns an NFT
const editionDrop = sdk.getEditionDrop(
"0x1fCbA150F05Bbe1C9D21d3ab08E35D682a4c41bF",
);

// Get addresses' balance of token ID 0
const balance = await editionDrop.balanceOf(verifiedWalletAddress, 0);
`

Granting Users the role

Here, we make the request to the discord API to grant the user a role by using our bot token as the authorization header.

In order to do this, you'll need to create a role in your server, and copy both your server and role ID into the variables. You can learn how to do that from this guide.

`ts
if (balance.toNumber() > 0) {
// If the user is verified and has an NFT, return the content

// Make a request to the Discord API to get the servers this user is a part of
const discordServerId = "999533680663998485";
const { userId } = session;
const roleId = "999851736028172298";
const response = await fetch(
// Discord Developer Docs for this API Request: https://discord.com/developers/docs/resources/guild#add-guild-member-role
https://discordapp.com/api/guilds/${discordServerId}/members/${userId}/roles/${roleId},
{
headers: {
// Use the bot token to grant the role
Authorization: Bot ${process.env.BOT_TOKEN},
},
method: "PUT",
},
);

// If the role was granted, return the content
if (response.ok) {
res.status(200).json({ message: "Role granted" });
}

// Something went wrong granting the role, but they do have an NFT
else {
res
.status(500)
.json({ error: "Error granting role, are you in the server?" });
}
}
// If the user is verified but doesn't have an NFT, return an error
else {
res.status(401).json({ error: "User does not have an NFT" });
}
`

That's it for our API route, now we need to call this from our client!

Back on the index.tsx page, let's create a function called requestGrantRole inside the component and make a fetch request to this API endpoint.

`tsx
const sdk = useSDK();

async function requestGrantRole() {
// First, login and sign a message
const domain = "thirdweb.com"; // This should be the domain name of your own website
const loginPayload = await sdk?.auth.login(domain);

// Then make a request to our API endpoint.
try {
const response = await fetch("/api/grant-role", {
method: "POST",
body: JSON.stringify({
loginPayload,
}),
});
const data = await response.json();
console.log(data);
} catch (e) {
console.error(e);
}
}
`

And attach this function to our button:

tsx <button className={styles.mainButton} onClick={requestGrantRole}> Give me the role! </button>

That's it! We're ready to test it out!

Demo

Connect our wallet, authenticate with Discord, and sign in with Ethereum:

The grant-role API endpoint runs, granting the connected Discord user the role if they have an NFT from the collection:

We now have the role in our server!

Going to production

In a production environment, you need to have an environment variable called NEXTAUTH_SECRET for the Discord Oauth to work.

You can learn more about it here:
https://next-auth.js.org/configuration/options

You can quickly create a good value on the command line via this openssl command.

bash openssl rand -base64 32

And add it as an environment variable in your .env.local file:

NEXTAUTH_SECRET=<your-value-here>

Conclusion

We've made our very own Discord role granting application using thirdweb, the Discord API, and NextAuth!

You can check out the full code for this project on our GitHub:

https://github.com/thirdweb-example/discord-role-granter

For any questions, suggestions, join our discord at https://discord.gg/cd thirdweb.

Create Simultaneous Allowlists with Signature Drop and Next.js

Avneesh Agarwal — Wed, 20 Jul 2022 16:47:43 +0000

Learn how to create simultaneous allowlists where different users can buy NFTs from the drop at a different price based on which allowlist they are in

What is thirdweb?

thirdweb is a platform that lets you deploy smart contracts without having to know Solidity, you can do it by using TypeScript, Python or Go or even without writing any code.

Introduction

In this guide, we are going to create a Signature drop where users
will be able to connect their wallets to the website and claim an NFT from the drop. Once the user clicks Mint, we will make an
API request that checks if the user is in one of our allowlists.

Based on the check, we will generate a signature with a different price for each allowlist! Let's get started.

Setup

I am going to use the Next typescript starter template for this guide.

If you are following along with the guide, you can create a project with the
Next TypeScript template using the thirdweb CLI:

npx thirdweb create --next --ts

If you already have a Next.js app you can simply follow these steps to get started:

Install @thirdweb-dev/react and @thirdweb-dev/sdk and ethers
Add MetaMask authentication to the site. You can follow this guide to do this.

By default the network in _app.tsx is Mainnet, we need to change it to Mumbai

import type { AppProps } from "next/app";
import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";

// This is the chainId your dApp will work on.
const activeChainId = ChainId.Mumbai;

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThirdwebProvider desiredChainId={activeChainId}>
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;

Creating a Signature Drop and batch Uploading NFTs

We also need to create a Signature Drop and upload a bunch of NFTs that users can claim.
So, go to the thirdweb dashboard and create a signature drop!

Fill out the details and deploy the contract!

Now, let's batch upload some NFTs for the users to mint!
I am going to use the Pokemon batch upload example.

Click on batch upload and upload the images and the CSV/JSON file.

Once they are uploaded you will be able to see the NFTs! To learn more about batch upload check out this guide.

Making the website

Creating an API for generating a signature

We are going to use the signature minting on our backend to check the price at which this user will mint the NFT!

Create a new folder api in the pages folder and generate-mint-sig.ts inside it.

We will now build a basic API that will output "gm wagmi"

import type { NextApiRequest, NextApiResponse } from "next";

const generateMintSignature = async (
  req: NextApiRequest,
  res: NextApiResponse,
) => {
  res.send("gm wagmi");
};

export default generateMintSignature;

This creates a basic API for us, if you now go to the api/generate-mint-sig
endpoint, you will get a response of Gm wagmi.

Let's now initialize the thirdweb SDK!

const sdk = ThirdwebSDK.fromPrivateKey(
  process.env.PRIVATE_KEY as string,
  "mumbai",
);

As you can see, we are using an environment variable to initialize the sdk.
The variable is called PRIVATE_KEY which is the private key of the wallet.
Create a new file .env.local and add your private key.

PRIVATE_KEY=<private_key>

How to export your private key

Learn how to export your private key from your wallet.

To do this, create a file called .env.local at the root of your project, and add the following to it:

PRIVATE_KEY=your-private-key-here

Ensure you store and access your private key securely.

Never commit any file that may contain your private key to your source control.

We also need to import the ThirdwebSDK:

import { ThirdwebSDK } from "@thirdweb-dev/sdk";

Determining the price of the NFT

I am creating 2 hardcoded arrays in this example, but you can get them from a JSON file, from a database, or anything you like!

So add these 2 arrays and a function to determine the price:

const teamMembers = ["0x39Ab29fAfb5ad19e96CFB1E1c492083492DB89d4"];

const allowList = ["0x6bF08768995E7430184a48e96940B83C15c1653f"];

const determinePrice = (address: string) => {
  if (teamMembers.includes(address)) {
    return 0;
  }
  if (allowList.includes(address)) {
    return 1;
  }
  return 2;
};

So if the person is in the allowlist they will mint the NFT for 1 MATIC, if they are a team member they will mint the NFT for 0 MATIC,
and if they are not in an allowlist, they will mint the NFT for 2 MATIC.

Generating the signature

Finally, we are going to access the Signature Drop using the sdk and generate a signature from it:

const { address } = req.body;

const drop = sdk.getSignatureDrop("0xcB31341eE7FaC6917e8e9D71441747e5FAdA466F");
try {
  const signedPayload = await drop.signature.generate({
    to: address,
    price: determinePrice(address),
  });

  return res.status(200).json({
    signedPayload: signedPayload,
  });
} catch (error) {
  console.log(error);
  return res.status(500).json({
    error,
  });
}

Calling the API from the frontend

In index.tsx update the address ternary and add the Mint button:

<div>
  {address ? (
    <button onClick={mint}>Mint</button>
  ) : (
    <button onClick={connectWithMetamask}>Connect with Metamask</button>
  )}
</div>

Now we will create the mint function that makes an api call to the backend and mints the NFT:

const drop = useSignatureDrop("0xcB31341eE7FaC6917e8e9D71441747e5FAdA466F");

const mint = async () => {
  const signedPayloadReq = await fetch("/api/generate-mint-sig", {
    method: "POST",
    body: JSON.stringify({ address }),
  });

  const signedPayload = await signedPayloadReq.json();

  try {
    const nft = await drop?.signature.mint(signedPayload.signedPayload);
    return nft;
  } catch (err) {
    console.error(err);
    return null;
  }
};

If we now try minting the NFT, we will be able to mint the NFT successfully at different prices! 🎉

Conclusion

This was a lot, now pat yourself on the back and share your amazing apps with us!
If you want to have a look at the code, check out the GitHub Repository.

Create an ERC-721A NFT Collection using thirdweb

Jarrod Watts — Wed, 20 Jul 2022 04:15:00 +0000

Introduction

In this guide, we'll use the Signature Drop
contract to create a collection of NFTs that follow the ERC-721A standard!

Compared to the regular ERC-721 standard, the ERC-721A implementation
optimizes the gas fees of the contract to enable cheaper gas fees for users when they are minting multiple tokens in one transaction.

The signature drop contract also enables Signature-based Minting
which allows us, (the admin wallet), to approve users' mint requests on-demand if they meet specific criteria, such as being a holder of another token!

Demo

Here's what we'll be doing in this guide:

Deploying the ERC-721A Signature Drop contract.
Lazy Minting our NFTs by batch uploading metadata files.
Creating a web application where users can claim NFTs.
Adding a special "Discount Claim" button where users who hold an NFT from another collection can claim an NFT for a discount!

Check out the demo here: https://signature-drop.thirdweb-example.com/

You can view the full source code below:

%[https://github.com/thirdweb-example/signature-drop]

Creating the Signature Drop Contract

To deploy one of thirdweb's Pre-built contracts, head to the dashboard and connect your wallet.

If you don't already have a wallet, learn how to get set up with MetaMask in our "Guide: Create a MetaMask Wallet"

From here, click the Deploy New Contract button -> Pre-Built Contracts -> Release a drop -> Signature Drop.

Here is where you can upload the metadata for the contract itself. This is the metadata that will show up on pages such as the OpenSea Collection page.

Give your contract a name, symbol, description, image, and configure royalty fees as you like! Here's how mine looks:

I'll be deploying to the Arbitrum Testnet as it
offers super-fast transaction approval times (which are great for testing purposes)!

When you're ready, click Deploy Now, and approve the Deploy Proxy transaction in your wallet.

You just deployed your very own ERC-721A NFT Collection!

Batch Lazy-Minting NFTs

In the Signature Drop contract, we lazy-mint all of our NFTs by uploading the metadata using the Batch Upload feature.

Click the Batch Upload button to get started.

Here, you'll be taken to a page where you can drag and drop your metadata and assets to upload them. You can use the example CSV and JSON files from the links on this page, or below:

Here is a preview of mine:

Once you've prepared the files, drag them all into the upload box on the dashboard:

This will allow you to preview your NFTs before lazy minting them.
Ensure the properties and metadata appear how you expect, as you won't be able to modify them after they have been uploaded.

Once you're happy, click Next:

You can then choose if you want to add a delayed reveal for your NFTs. For this guide, we'll leave it as Reveal upon mint and click Upload NFTs!

Configuring A Claim Phase

Claim phases are conditions that outline how, when, and who can claim NFTs from your collection; such as an allowlist, release date, or delayed reveal.

To add a claim phase, click the Claim Phases tab and then the Add Claim Phase button:

Here's where we can configure who can claim from this drop. I'm going to set the :

How much do you want to charge to claim the NFTs? to be 0.01
How many NFTs can be claimed per transaction? to be 1
How many seconds do wallets have to wait in-between claiming? to be Unlimited

Once you're happy, click Save Claim Phases!

Setting Up the project

We'll be using the thirdweb CLI to initialize our application using Next.js and TypeScript.

To create a new project using the CLI, run the following command:

npx thirdweb create

Give your application a name and the project will be initialized for us! Let's open the project up in a text editor now, I'll be using VS Code.

I'll be using the styles available in the source code,
feel free to copy these files into your project if you want to use the same styles.

If we take a look at our pages/app.tsx file, we have a configured activeChainId as Mainnet which is Ethereum Mainnet.

Since we deployed our contract on the Arbitrum Test network let's change it to:

// This is the chainId your dApp will work on.
const activeChainId = ChainId.ArbitrumTestnet;

Connecting to our contract

Now we're ready to interact with our signature drop smart contract from within our code, to do that, we'll use the useSignatureDrop hook from the React SDK.

On the index.tsx page:

const signatureDrop = useSignatureDrop(
  "0xBdEa6C9B18843cEA8262ead23767737512e452bC",
);

You can get your contract address from the dashboard:

Claiming NFTs

Since the wallet connection logic is already configured inside our application thanks to the thirdweb CLI, here's how our page looks now:

const Home: NextPage = () => {
  const address = useAddress();
  const connectWithMetamask = useMetamask();
  const disconnectWallet = useDisconnect();

  const signatureDrop = useSignatureDrop(
    "0xBdEa6C9B18843cEA8262ead23767737512e452bC",
  );

  return (
    <div>
      {address ? (
        <>
          <button onClick={disconnectWallet}>Disconnect Wallet</button>
          <p>Your address: {address}</p>
        </>
      ) : (
        <button onClick={connectWithMetamask}>Connect with Metamask</button>
      )}
    </div>
  );
};

export default Home;

The React SDK automatically uses the signer of the connected wallet when a user wants to perform an action on our smart contract such as claim an NFT.

Let's write the logic for that now. Firstly, the claim function:

async function claim() {
  const tx = await signatureDrop?.claim(1);
  console.log(tx);
}

And attach this function to a button:

<button onClick={claim}>Claim</button>

If we preview our application by running yarn dev from the terminal and visit http://localhost:3000/ we can see our claim button:

If you click the Claim button and approve the transaction, you can successfully mint the first NFT from the drop.

Now in the dashboard, we have a Claimed Supply of 1

That is the very basics of our minting page setup!

Claiming With Signature

The signature drop contract also allows users to claim using a signature generated by an admin wallet. This is a three-step process:

User requests a mint signature.
Admin wallet (on the server) approves (or denies) the claim request of the user based on any criteria the admin chooses and sends back a mint signature when they approve.
User uses the mint signature to claim NFTs from the signature drop.

This enables all kinds of possibilities for us, such as:

Restrictions of who can claim based on off-chain data
Discounts for users who meet some criteria (such as owning another NFT, or being part of a Discord server)

We're going to check if the wallet owns one of our thirdweb Early Access Card NFTs and offer them a free mint if they do!

Creating the API Route

Let's go back to our code, and under the pages folder, create an api folder. Within it, create a file called generate-mint-signature.ts.

Let's firstly create the basic structure of our API route:

import { ThirdwebSDK } from "@thirdweb-dev/sdk";
import type { NextApiRequest, NextApiResponse } from "next";

export default async function generateMintSignature(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  // De-construct body from request
  const { address } = JSON.parse(req.body);

  // Next code snippet here
}

When we call this API endpoint, we'll be passing an address argument into the request body. In this API route, we de-structure that value so that we can use it when we generate the mint signature.

Since we're going to provide the NFTs for free to wallets that own one of thirdweb's Early Access NFTs, let's check that now.

To do that, we instantiate the thirdweb SDK with a read-only connection on the Polygon network and get the thirdweb-community NFT Collection using its contract address.

// Get the Early Access NFT Edition Drop contract
const polygonSDK = new ThirdwebSDK("polygon");
const earlyAccessNfts = polygonSDK.getEditionDrop(
  "0xa9e893cc12026a2f6bd826fdb295eac9c18a7e88", // this is the thirdweb-community NFT Collection address.
);

Then we can use the balanceOf function to check if the wallet that made this API request has any NFTs from that collection. Since it's an ERC-1155 collection, we check to see if they have a balanceOf any of the tokens in that collection in a loop:

// Check to see if the wallet address has an early access NFT
const numTokensInCollection = await earlyAccessNfts.getTotalCount();
let userHasToken = false;
// Check each token in the Edition Drop
for (let i = 0; i < numTokensInCollection.toNumber(); i++) {
  // See if they have the token
  const balance = await earlyAccessNfts.balanceOf(address, i);
  if (balance.toNumber() > 0) {
    userHasToken = true;
    break;
  }
}

Great! Now we have a userHasToken variable that is true if the user had a balance greater than zero for any token in that ERC-1155 NFT Collection.

Now we can use that variable to determine whether or not we generate a mint signature for this user:

  // Now use the SDK on Goerli to get the signature drop
  const arbitrumSDK = ThirdwebSDK.fromPrivateKey(
    process.env.PRIVATE_KEY as string,
    "arbitrum-testnet"
  );
  const signatureDrop = arbitrumSDK.getSignatureDrop(
    "your-contract-address-here" // Your contract address here
  );

  // If the user has an early access NFT, generate a mint signature
  if (userHasToken) {
    const mintSignature = await signatureDrop.signature.generate({
      to: address, // Can only be minted by the address we checked earlier
      price: "0", // Free!
      mintStartTime: new Date(0), // now
    });

    res.status(200).json(mintSignature);
  } else {
    res.status(400).json({
      message: "User does not have an early access NFT",
    });
  }

In the above snippet, we are using our private key to instantiate the SDK on behalf of our admin wallet.

Learn how to export your private key from your wallet.

To do this, create a file called .env at the root of your project, and add the following to it:

PRIVATE_KEY=your-private-key-here

Ensure you store and access your private key securely.

Using the API Route on the Front-end

On our home page, we need a way to call our API route, let's write that function now.

Here, we check to see if the mint signature came back from the API request. If it didn't, we display an error message. If it did, we call the
signature.mint with the mint signature to claim the NFT.

  async function claimWithSignature() {
    const signedPayloadReq = await fetch(`/api/generate-mint-signature`, {
      method: "POST",
      body: JSON.stringify({
        address: address,
      }),
    });

    if (signedPayloadReq.status === 400) {
      alert(
        "Looks like you don't own an early access NFT :( You don't qualify for the free mint."
      );
      return;
    }

    try {
      const signedPayload =
        (await signedPayloadReq.json()) as SignedPayload721WithQuantitySignature;

      console.log(signedPayload);

      const nft = await signatureDrop?.signature.mint(signedPayload);

      alert(`Succesfully minted NFT!`);
    } catch (error: any) {
      alert(error?.message);
    }
  }

Now all we need to do is add a new button that calls this function:

<button onClick={() => claimWithSignature()}>Claim Free with signature</button>

Let's test it out:

On a wallet that doesn't own one of these Early Access NFTs, the mint signature is not granted to them, meaning they are unable to mint for free using the signature minting method:

On a wallet that does own the Early Access NFTs, they are allowed to mint an NFT for free rather than paying with the regular claim method!

Once the transaction is confirmed, we should see:

Conclusion

That's it! You have successfully created your very own ERC-721A NFT collection with signature minting, and built an app to claim your NFTs on top of it!

To learn more about what you can do with the signature drop contract, check out the Portal documentation!

Create a dynamic allowlist with Airtable and Next.js

Avneesh Agarwal — Thu, 28 Apr 2022 15:38:00 +0000

What is thirdweb?

thirdweb is a platform that lets you deploy smart contracts without having to know Solidity, you can do it by using TypeScript, Python or Go or even without writing any code.

Introduction

In this guide, we are going to create an edition where people will be able to sign up their wallets to an allowlist and those wallets can later mint the NFT!

Sounds cool, right!? Let's get started.

Setup

I am going to use the Next typescript starter template of thirdweb for this guide. If you already have a Next.js app you can simply follow these steps to get started:

Install @thirdweb-dev/react and @thirdweb-dev/sdk
Add metamask authentication to the site. You can follow this guide
You all are set to go now!

If you are also going to use the Next TypeScript template then follow these steps

Click on the use template button in the repo
Clone the repo
Install the dependencies:

npm install # npm

yarn install # yarn

By default the network in _app.tsx is Mainnet, we need to change it to Mumbai

import type { AppProps } from 'next/app';
import { ChainId, ThirdwebProvider } from '@thirdweb-dev/react';

// This is the chainId your dApp will work on.
const activeChainId = ChainId.Mumbai;

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThirdwebProvider desiredChainId={activeChainId}>
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;

Creating an edition and NFT

We also need to create an edition and an NFT inside of the edition to be able to mint them to the users. So, go to the thirdweb dashboard and create an edition. I am doing it with an Edition contract for this demo but it can be also done with one of one NFTs (ERC-721).

Fill out the details and deploy the contract!

Now, let's create and mint a new NFT inside of it. Fill out the details and make sure to set the initial supply to 0.

Making the website

Creating an nft card

To showcase our nft, we are going to create a simple card and we will get the data from the edition contract itself! So, inside index.tsx add the useEdition hook like this:

const edition = useEdition("EDITION_CONTRACT_ADDRESS");

We need to import it from the thirdweb sdk:

import { useEdition } from "@thirdweb-dev/react";

Now, we are going to create a new state to hold the nft data:

  const [nftData, setNftData] = useState<EditionMetadata["metadata"] | null>(
    null
  );

We also need to import EditionMetadata and useState:

import { EditionMetadata } from "@thirdweb-dev/sdk";
import { useState } from "react";

Finally, create a useEffect to get the data from the contract and update the variable:

 useEffect(() => {
    edition?.get("0").then((nft) => {
      setNftData(nft.metadata);
    });
  }, [edition]);

If you console log the nft metadata you will get something like this:

If the user is logged in we will show them this nft instead of there address, so replace the fragment (<>) with this:

<div>
  {nftData?.image && (
    <Image
      src={nftData?.image}
      alt={nftData?.name}
      width="280"
      height="210"
      objectFit="contain"
    />
  )}
  <p>
    <span>Name:</span> {nftData?.name}
  </p>
  <p>
    <span> Description:</span> {nftData?.description}
  </p>

  <button>Mint</button>
</div>

You will now get an error because we are using the next <Image /> component but haven't whitelisted the domain, so go to next.config.js and add the following:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ["gateway.ipfscdn.io"],
  },
};

module.exports = nextConfig;

Since we are changing the next.js config we need to restart the server. Once you restart the server you will see something like this

Creating the mint api

We are going to use the signature minting on our backend to ensure that the address is present in the airtable, but first let's get the signature minting working.

Create a new folder api in the pages folder and generate-mint-sig.ts inside it.

We will now build a basic api that will output "gm wagmi"

import type { NextApiRequest, NextApiResponse } from "next";

const generateMintSignature = async (
  req: NextApiRequest,
  res: NextApiResponse
) => {
  res.send("gm wagmi");
};

export default generateMintSignature;

This creates a basic api for us, if you now go to the api/generate-mint-sig endpoint you will get a response of Gm wagmi.

Let's now initialize the thirdweb sdk!

const sdk = new ThirdwebSDK(
    new ethers.Wallet(
      process.env.PRIVATE_KEY as string,
      ethers.getDefaultProvider(process.env.ALCHEMY_API_URL)
    )
  );

as you can see we are using 2 environment variables to initialize the sdk. The first is the PRIVATE_KEY which is the private key of the wallet. The second is the ALCHEMY_API_URL which is the url of the Alchemy api. Create a new file .env.local and add the two variables.

PRIVATE_KEY=<private_key>
ALCHEMY_API_URL=<alchemy_api_url>

Let's see how to get these two variables.

Getting the wallet private key

In your metamask wallet, click on the three dots, then click account details. You will see an option to export private key there. Export your private key and paste it into the PRIVATE_KEY variable.

This will give full access to your wallet to make sure to keep it secret!

Getting the alchemy api key

Go to Alchemy and sign up for an account. You need to create a new app, so click on create app. Fill out the details, and hit submit. I am using Mumbai network for this demo but you need to use the network that you are using!

Finally, paste this in the .env.local file too. Since we have changed the env variables we need to restart the server. So, cut the terminal and run yarn dev again.

We also need to import ethers and ThirdwebSDK:

import { ThirdwebSDK } from "@thirdweb-dev/sdk";
import { ethers } from "ethers";

Generating the siganture mint

In the api we are going to use the sdk to get access to the edition contract and generate a mint signature:

 const edition = sdk.getEdition("EDITION_CONTRACT_ADDRESS");
  try {
    const signedPayload = await edition.signature.generate({
      tokenId: 0,
      quantity: "1",
      to: address,
    });

    res.status(200).json({
      signedPayload: signedPayload,
    });
  } catch (err) {
    res.status(500).json({
      error: err,
    });
  }

We will get the address from the frontend so, add this:

const { address } = JSON.parse(req.body);

Let's now mint the api on the frontend by calling this api:

  const mintWithSignature = async () => {
    const signedPayloadReq = await fetch(`/api/generate-mint-sig`, {
      method: "POST",
      body: JSON.stringify({ address }),
    });

    const signedPayload = await signedPayloadReq.json();

    try {
      const nft = await edition?.signature.mint(signedPayload.signedPayload);
      return nft;
    } catch (err) {
      console.error(err);
      return null;
    }
  };

This function will request the api that we just built with the address. It will give us a signed payload that we can use to mint the nft via our edition contract. So, let's attach it to the button:

<button onClick={() => mintWithSignature()}>Mint</button>

Now our mint works! But wait, everyone can mint now so let's create an airtable database to store the addresses that can mint.

Creating an allowlist with airtable

Go to Airtable and create a new base.

After you create a new base, give a name to your base and add two columns: Address and Minted like this:

Getting airtable api keys and id

We now need to get some api key's and id's to interact with the base. So, go to your Airtable account and generate an api key

Store this api key somewhere safe as we are going to need it.

Now to get the base id go to the Airtable API and click on the base that you just created. When you open the page, at the top itself you would see "Your base id is app......".

Inside .env.local add three new variables:

AIRTABLE_API_KEY=
AIRTABLE_BASE_ID=
AIRTABLE_TABLE_NAME=

Creating a utility function for accessing the table

To keep our code clean we are going to create a file where we initialize the airtable with the api key, name, and id. So, create a new folder utils and Airtable.ts inside it. Now, add in the following in Airtable.ts:

import Airtable from "airtable";

// Authenticate
Airtable.configure({
  apiKey: process.env.AIRTABLE_API_KEY,
});

// Initialize a base
const base = Airtable.base(process.env.AIRTABLE_BASE_ID!);

// Reference a table
const table = base(process.env.AIRTABLE_TABLE_NAME!);

export { table };

As you can see we are going to need to install a new package called airtable:

npm i airtable # npm

yarn add airtable # yarn

Now, we need to update the api to first check if the wallet is present in the table. So, in api/generate-mint-sig.ts add the following:

  const record = await table
    .select({
      fields: ["Addresses", "minted"],
      filterByFormula: `NOT({Addresses} != '${address}')`,
    })
    .all();

  if (record.length === 0) {
    res.status(404).json({
      error: "User isn't in allowlist",
    });
  }

So, this queries the airtable to get the records of the address present in the addresses column and we are checking if the length record is 0. If it is 0, then we are not allowing the user to mint and send an error. We will also wrap the part where we send the response in an else block. The api should now look similar to this:

import type { NextApiRequest, NextApiResponse } from "next";
import { ThirdwebSDK } from "@thirdweb-dev/sdk";
import { ethers } from "ethers";
import { table } from "../../utils/Airtable";

const generateMintSignature = async (
  req: NextApiRequest,
  res: NextApiResponse
) => {
  const { address } = JSON.parse(req.body);

  const record = await table
    .select({
      fields: ["Addresses", "minted"],
      filterByFormula: `NOT({Addresses} != '${address}')`,
    })
    .all();

  if (record.length === 0) {
    res.status(404).json({
      error: "User isn't in allowlist",
    });
  } else {
    const sdk = new ThirdwebSDK(
      new ethers.Wallet(
        process.env.PRIVATE_KEY as string,
        ethers.getDefaultProvider(process.env.ALCHEMY_API_URL)
      )
    );

    const edition = sdk.getEdition(
      "0x62C84CC051544c43d05a5Ff0E8Da596fBdB15032"
    );
    try {
      const signedPayload = await edition.signature.generate({
        tokenId: 0,
        quantity: "1",
        to: address,
      });

      res.status(200).json({
        signedPayload: signedPayload,
      });
    } catch (err) {
      res.status(500).json({
        error: err,
      });
    }
  }
};

export default generateMintSignature;

In the mintWithSignature function we will now add a simple alert to show the error if the user is not in the allowlist.

 const mintWithSignature = async () => {
    const signedPayloadReq = await fetch(`/api/generate-mint-sig`, {
      method: "POST",
      body: JSON.stringify({ address }),
    });

    const signedPayload = await signedPayloadReq.json();

    if (signedPayload.error) {
      alert(signedPayload.error);
      return;
    }

    try {
      const nft = await edition?.signature.mint(signedPayload.signedPayload);
      return nft;
    } catch (err) {
      console.error(err);
      return null;
    }
  };

Now if you try minting you should now see an error that you are not in the allowlist. But if you add the address you are using to mint to the address column, it would allow you to mint!

Setting the minted to true when the address mints

We will create another api to not expose the api keys, so in the api folder create a new file set-minted.ts and add the following:

import type { NextApiRequest, NextApiResponse } from "next";
import { table } from "../../utils/Airtable";

const generateMintSignature = async (
  req: NextApiRequest,
  res: NextApiResponse
) => {
  const { address } = JSON.parse(req.body);

  const record = await table
    .select({
      fields: ["Addresses", "minted"],
      filterByFormula: `NOT({Addresses} != '${address}')`,
    })
    .all();

  try {
    record[0].updateFields({
      minted: "true",
    });
    res.status(200).json({
      success: true,
    });
  } catch (err) {
    res.status(500).json({
      error: err,
    });
  }
};

export default generateMintSignature;

Basically what this code block is doing is getting the record of the address and then updating the minted column to true. And for basic error handling if there is an error we will return the error. Now, in the mintSignature function I will add the fetch request to the set-minted api if the nft was minted successful like this:

if (nft) {
  await fetch(`/api/set-minted`, {
    method: "POST",
    body: JSON.stringify({ address }),
  });
}

If you try minting again and check the airtable it would now set the minted column to true! If you get an error like the column name not found then make sure that the names are same.

Adding users to allowlist

I am going to add a simple button for adding users to allowlist. You can even create an early access form or something similar. So, create a button in index.tsx:

<button>Add wallet to allowlist</button>

Now, let's create an api to add the wallet to the allowlist. So, create a new file add-to-allowlist.ts and add the following:

import type { NextApiRequest, NextApiResponse } from "next";
import { table } from "../../utils/Airtable";

const addToAllowlist = async (req: NextApiRequest, res: NextApiResponse) => {
  const { address } = JSON.parse(req.body);

  const record = await table
    .select({
      fields: ["Addresses", "minted"],
      filterByFormula: `NOT({Addresses} != '${address}')`,
    })
    .all();

  if (record.length > 0) {
    res.status(400).json({
      success: false,
      error: "User is already in allowlist",
    });
  }

  if (record.length === 0) {
    try {
      await table.create([
        {
          fields: {
            Addresses: address,
          },
        },
      ]);
      res.status(200).json({
        success: true,
        message: "User added to allowlist",
      });
    } catch (err) {
      res.status(500).json({
        success: false,
        error: err,
      });
    }
  }
};

export default addToAllowlist;

Here, we are first checking if the user already exists and if it exists we will return an error saying that the user is already in the allowlist. If the user doesn't exist we will create the user in the allowlist. Now, let's head back to the frontend code and create a function to call this api:

  const addWallet = async () => {
    const payload = await fetch(`/api/add-to-allowlist`, {
      method: "POST",
      body: JSON.stringify({ address }),
    });

    const payloadJson = await payload.json();
    console.log(payloadJson);

    if (payloadJson.success) {
      alert(payloadJson.message);
    } else {
      alert(payloadJson.error);
    }
  };

Finally, add an onClick event to the button:

<button onClick={addWallet}>Add wallet to allowlist</button>

If you try switching the connected wallet or remove the wallet from the database you will see that the user's wallet address is being added to the base!

Minor improvements (Optional)

Let's just add some minor improvements to our app!

Styling

Currently the site looks pretty boring, so let's add some simple styling. Create a new file globals.css in the styles folder and add the following to reset the styles:

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

Import it in the _app.tsx file:

import "../styles/globals.css";

Now, create a new file Home.module.css in the styles folder and add these simple stylings:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #c0ffee;
}

.container > button,
.btn {
  background: #1ce;
  color: #fff;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}

.btn {
  margin-top: 10px;
}

.NFT {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nftDesc {
  margin: 10px 0px;
  font-size: 0.8rem;
  color: #000;
}

.nftDesc > span {
  font-weight: bold;
}

Now let's implement these stylings in index.tsx by adding the classNames:

 <div className={styles.container}>
      {address ? (
        <div className={styles.NFT}>
          {nftData?.image && (
            <Image
              src={nftData?.image}
              alt={nftData?.name}
              width="280"
              height="210"
              objectFit="contain"
            />
          )}
          <p className={styles.nftDesc}>
            <span>Name:</span> {nftData?.name}
          </p>
          <p className={styles.nftDesc}>
            <span> Description:</span> {nftData?.description}
          </p>

          <button className={styles.btn} onClick={addWallet}>
            Add wallet to allowlist
          </button>

          <button className={styles.btn} onClick={() => mintWithSignature()}>
            Mint
          </button>
        </div>
      ) : (
        <button onClick={connectWithMetamask}>Connect with Metamask</button>
      )}
    </div>

Our website now looks much better!

Loading

Currently if you click the mint button or add to allowlist button nothing happens for a while, so let's add a loading text to tell the user that something is happening. So, create 2 states in the Home.tsx file:

const [addWalletLoading, setAddWalletLoading] = useState(false);
const [mintLoading, setMintLoading] = useState(false);

Add this ternary operator for changing the text of the buttons and disable the button if it is loading:

 <button
   className={styles.btn}
   disabled={addWalletLoading}
   onClick={addWallet}
>
  {addWalletLoading ? "loading..." : "Add wallet to allowlist"}
</button>

 <button
   className={styles.btn}
   disabled={mintLoading}
   onClick={() => mintWithSignature()}
>
  {mintLoading ? "loading..." : "Mint"}
</button>

Nothing happens yet because we aren't changing the states so, in the functions we need to change the loading states:

  const mintWithSignature = async () => {
    setMintLoading(true);
    const signedPayloadReq = await fetch(`/api/generate-mint-sig`, {
      method: "POST",
      body: JSON.stringify({ address }),
    });

    const signedPayload = await signedPayloadReq.json();

    if (signedPayload.error) {
      alert(signedPayload.error);
      return;
    }

    try {
      const nft = await edition?.signature.mint(signedPayload.signedPayload);
      if (nft) {
        await fetch(`/api/set-minted`, {
          method: "POST",
          body: JSON.stringify({ address }),
        });
      }
      return nft;
    } catch (err) {
      console.error(err);
      return null;
    } finally {
      setMintLoading(false);
    }
  };

  const addWallet = async () => {
    setAddWalletLoading(true);
    const payload = await fetch(`/api/add-to-allowlist`, {
      method: "POST",
      body: JSON.stringify({ address }),
    });

    const payloadJson = await payload.json();
    setAddWalletLoading(false);

    if (payloadJson.success) {
      alert(payloadJson.message);
    } else {
      alert(payloadJson.error);
    }
  };

If you now try to click any of the buttons you would see the loading text for a second.

Error handling

Currently, the user can be on the wrong network and get weird errors, so we will disable the button if the user is not on the correct network.

Get access to the network by using the useNetwork hook:

const network = useNetwork();

It will be imported from the thirdweb sdk:

import {
  useAddress,
  useEdition,
  useMetamask,
  useNetwork,
} from "@thirdweb-dev/react";

Now, in the mint button add the checks-

<button
  className={styles.btn}
  disabled={mintLoading || network[0]?.data?.chain?.id !== ChainId.Mumbai}
  onClick={() => mintWithSignature()}
>
  {network[0]?.data?.chain?.id === ChainId.Mumbai
    ? mintLoading
      ? "loading..."
      : "Mint"
    : "Switch to Mumbai"}
</button>

I built this Dapp on the Mumbai network so I am checking for the Mumbai network but you need to do this for the network you built upon.

Conclusion

This was a lot, now give yourself a pat on the back and share your amazing apps with us! If you want to have a look at the code, check out the GitHub Repository.

Sell your NFT in multiple currencies at the same time

Avneesh Agarwal — Tue, 19 Apr 2022 14:56:07 +0000

Introduction

In this guide, we are going to create an edition collection that will allow users to buy an NFT in multiple currencies. All this is going to happen with Next.js and thirdweb. We are going to use the signature-based mint feature of thirdweb.

Sounds cool, right!? Let's get started.

Setup

I am going to use the Next typescript starter template of thirdweb for this guide. If you already have a Next.js app you can simply follow these steps to get started-

Install @thirdweb-dev/react and @thirdweb-dev/sdk
Add metamask authentication to the site. You can follow this guide
You all are set to go now!

If you are also going to use the Next TypeScript template then follow these steps

Click on the use template button in the repo
Clone the repo
Install the dependencies:

npm install # npm

yarn install # yarn

By default the network in _app.tsx is Mainnet, we need to change it to Mumbai

import type { AppProps } from 'next/app';
import { ChainId, ThirdwebProvider } from '@thirdweb-dev/react';

// This is the chainId your dApp will work on.
const activeChainId = ChainId.Mumbai;

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThirdwebProvider desiredChainId={activeChainId}>
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;

Creating an edition and NFT

We also need to create an edition and an NFT inside of the edition to be able to mint them to the users. So, go to the thirdweb dashboard and create an edition.

Fill out the details and deploy the contract!

Now, let's create and mint a new NFT inside of it. Fill out the details and make sure to set the initial supply to 0.

Building the NFT card

I am going to create a simple card to display the NFT, which will have the name, and description of the NFT. A dropdown to be able to change the currency and a button to mint the NFT! At this point, your pages/index.tsx file should look something like this:

import { useAddress, useDisconnect, useMetamask } from "@thirdweb-dev/react";
import type { NextPage } from "next";

const Home: NextPage = () => {
  const address = useAddress();
  const connectWithMetamask = useMetamask();
  const disconnectWallet = useDisconnect();

  return (
    <div>
      {address ? (
        <>
          <button onClick={disconnectWallet}>Disconnect Wallet</button>
          <p>Your address: {address}</p>
        </>
      ) : (
        <button onClick={connectWithMetamask}>Connect with Metamask</button>
      )}
    </div>
  );
};

export default Home;

Instead of showing the disconnect Wallet button and wallet address, we will now show the card instead. So, replace everything inside the fragment (<>) with the following-

<div>
  <img
    src={nft.image.replace("ipfs://", "https://ipfs.thirdweb.com/ipfs/")}
    alt={nft.name}
    width="200px"
    height="100%"
  />
  <div>
    <p>Name: {nft.name}</p>
    <p>Description: {nft.description}</p>
    <select>
      {nft.tokens.map((token) => (
        <option key={token.name} value={token.name}>
          {token.name}
        </option>
      ))}
    </select>
    <button onClick={() => {}}>Mint</button>
  </div>
</div>

You might be wondering where are we getting the NFT object, we are going to create a new file and store the NFT object there to keep our code clean. So, create a new file nft.ts and add this:

import { NATIVE_TOKEN_ADDRESS } from "@thirdweb-dev/sdk";

export const nft = {
  name: "My cool NFT",
  description: "This is the description for my cool NFT",
  image: "ipfs://QmRdoPRtfb6MHLQgsBsC5WVDAf7BZijykYUefEmt6UrTTn/0.png",
  id: "0",
  tokens: [
    {
      name: "MATIC",
      address: NATIVE_TOKEN_ADDRESS,
      price: 5,
    },
    {
      name: "USDC",
      address: "0xe11A86849d99F524cAC3E7A0Ec1241828e332C62",
      price: 7,
    },
  ],
};

Here, we are creating and exporting a new nft object with some properties like name, description, image, etc. The tokens array will contain the different currencies using which we can mint the NFTs. You need to specify a name, address, and price for the token here. We are getting the NATIVE_TOKEN_ADDRESS from the thirdweb package.

Finally, import nft from this file in index.tsx:

import { nft } from "../nft";

If you now go to http://localhost:3000/ you will be able to see a card like this:

I haven't styled this so it doesn't look that beautiful but feel free to customize it for use and make it beautiful ;)!

Storing the currency

We need to store the currency which the user has selected. So, we will create a new state and change it every time the value of the dropdown changes. To do this use the useState hook and pass in the initial value as "MATIC".

const [tokenName, setTokenName] = useState("MATIC");

For updating it inside the onChange event we will use the setTokenName function.

<select onChange={(e) => setTokenName(e.target.value)}>
  {nft.tokens.map((token) => (
    <option key={token.name} value={token.name}>
      {token.name}
    </option>
  ))}
</select>

This will now update the currency so we can use it in the minting process.

Creating an api for generating the signature

Inside the pages folder, create a new folder api and generate-mint-sig.ts inside it. We will create our whole api for generating the mint signature here!

Let's start by building a basic api.

import type { NextApiRequest, NextApiResponse } from "next";

const generateMintSignature = async (
  req: NextApiRequest,
  res: NextApiResponse
) => {
  res.send("Gm wagmi");
};

export default generateMintSignature;

This creates a basic api for us, if you now go to the api/generate-mint-sig endpoint you will get a response of Gm wagmi.

Let's now initialize the thirdweb sdk!

const sdk = new ThirdwebSDK(
    new ethers.Wallet(
      process.env.PRIVATE_KEY as string,
      ethers.getDefaultProvider(process.env.ALCHEMY_API_URL)
    )
  );

PRIVATE_KEY=<private_key>
ALCHEMY_API_URL=<alchemy_api_url>

Let's see how to get these two variables.

Getting the wallet private key

In your metamask wallet, click on the three dots, then click account details. You will see an option to export private key there. Export your private key and paste it into the PRIVATE_KEY variable.

This will give full access to your wallet to make sure to keep it secret!

Getting the alchemy api key

Finally, paste this in the .env.local file too. Since we have changed the env variables we need to restart the server. So, cut the terminal and run yarn dev again.

We also need to import ethers and ThirdwebSDK:

import { ThirdwebSDK } from "@thirdweb-dev/sdk";
import { ethers } from "ethers";

Generating the signature for mint

From the frontend we will get the tokenName, tokenId, and the address of the person we are going to mint the NFT to. I am only getting these parameters to make sure that people can't manipulate the data. So, get these parameters from the response body:

const { tokenId, address, tokenName } = JSON.parse(req.body);

We also need access to the edition functions, so get the edition like this:

  const edition = sdk.getEdition(
    "YOUR_EDITION_ADDRESS"
  );

We can now use this to generate a mint signature. So, add in this try/catch block:

 try {
    const signedPayload = await edition.signature.generate({
      tokenId: tokenId,
      quantity: "1",
      metadata: "",
      to: address,
      currencyAddress: token?.address,
      price: token?.price,
    });

    res.status(200).json({
      signedPayload: signedPayload,
    });
  } catch (err) {
    console.log(err);
    res.status(500).json({
      error: err,
    });
  }

In this block we are using the edition.signature.generate function provided by thirdweb to create a custom signature for all the user's transactions. We are passing in the tokenId, quantity, metadata, to, currencyAddress, and price of the NFT. If it was successful we will return the signedPayload to the frontend otherwise the error will be returned.

You also need to remove the res.send("Gm wagmi") code block 🥺.

Right now you would be getting an error because we haven't yet added the token so we will create a new variable for getting the token the user is going to use to pay with:

    const getToken = (tokenName: string) => {
    return nft.tokens.find((t) => t.name === tokenName);
  };

  const token = getToken(tokenName) ? getToken(tokenName) : getToken("MATIC");

In this variable, we are getting the token from the nft.tokens array. If someone passes a token that is not on the list we will use the MATIC token.

We also need to import nft:

import { nft } from "../../nft";

The final api/generate-mint-sig.ts should look like this:

import { ThirdwebSDK } from "@thirdweb-dev/sdk";
import { ethers } from "ethers";
import type { NextApiRequest, NextApiResponse } from "next";
import { nft } from "../../nft";

const generateMintSignature = async (
  req: NextApiRequest,
  res: NextApiResponse
) => {
  const { tokenId, address, tokenName } = JSON.parse(req.body);

  const sdk = new ThirdwebSDK(
    new ethers.Wallet(
      process.env.PRIVATE_KEY as string,
      ethers.getDefaultProvider(process.env.ALCHEMY_API_URL)
    )
  );

  const edition = sdk.getEdition("0x4ebCf39BCeEA3C9790605BF292B4a2b8811C93eD");

   const getToken = (tokenName: string) => {
    return nft.tokens.find((t) => t.name === tokenName);
  };

  const token = getToken(tokenName) ? getToken(tokenName) : getToken("MATIC");

  try {
    const signedPayload = await edition.signature.generate({
      tokenId: tokenId,
      quantity: "1",
      to: address,
      currencyAddress: token?.address,
      price: token?.price,
    });

    res.status(200).json({
      signedPayload: signedPayload,
    });
  } catch (err) {
    console.log(err);
    res.status(500).json({
      error: err,
    });
  }
};

export default generateMintSignature;

Calling the api from the frontend

Let's now use the api in our frontend! Create a new function in index.tsx like this:

  const mintWithSignature = async (tokenId: string) => {
    const signedPayloadReq = await fetch(`/api/generate-mint-sig`, {
      method: "POST",
      body: JSON.stringify({ tokenName, tokenId, address }),
    });

    const signedPayload = (await signedPayloadReq.json()).signedPayload;

    try {
      const nft = await edition?.signature.mint(signedPayload);
      return nft;
    } catch (e) {
      console.error(e);
      return null;
    }
  };

We need to use the useEdition hook to access the edition contract here like this:

const edition = useEdition("0x4ebCf39BCeEA3C9790605BF292B4a2b8811C93eD");

We need to import this hook as well-

import { useAddress, useEdition, useMetamask } from "@thirdweb-dev/react";

Now, attach this function to the mint button-

<button onClick={() => mintWithSignature(nft.id)}>Mint</button>

If you try to mint the NFT now it works! 🎉

On the dashboard too, you would be able to see the supply increase.

Conclusion

Hope you were able to sell your NFT for various tokens! If you want to have a look at the code, check out this repo.