Forem: Avneesh Agarwal

Creating an NFT minting Farcaster frame on Solana

Avneesh Agarwal — Thu, 22 Feb 2024 18:11:37 +0000

Introduction

In this blog, we will create a Farcaster frame that allows users to mint NFTs on solana directly to their wallets or email after recasting and liking the cast. Try out the live demo here! Check out the video demo here.

What is a Farcaster frame?

A Frame empowers you to transform any cast into an interactive application. Seamlessly integrate features like polls, live feeds, galleries, NFT mints, etc. into Warpcast or any other Farcaster client. Frames extend the OpenGraph standard and turn static embeds into interactive experiences.

Tools

We're going to use various tools to build this:

Next.js: We'll use next.js as our framework for creating the frame.
Crossmint: To mint NFTs on solana to the user's wallet address or email, we'll use crossmint.
Neynar: We will use neynar to check whether the user has recasted and liked the cast.
Onchainkit: We will use the onchainkit to create the frame, and get the message from the frame on our server.

Setting up our NFT collection

Head over to Crossmint (staging for devnet), then head over to the Collections tab and click on "New Collection".

Then, fill in the metadata for your collection, and click on Next:

You can either select to create a new contract or import an existing one. I don't have a contract created so I'll create a new one:

Since we are going to be deploying on Solana choose Solana Devnet:

Here, you can enter any amount, since we won't be doing a claim but minting the NFTs to the user's wallet for free

Finally, confirm the details, and click on Create Collection:

Creating the frame

Creating a new next.js app

First, we need to create a new next.js app. We can do this by running the following command:

npx create-next-app farcaster-frame

This will create a new next.js app in the farcaster-frame directory. So, navigate to the farcaster-frame directory, and open it in your code editor.

Then, we need to install the packages we need:

npm install @coinbase/onchainkit @bonfida/spl-name-service @neynar/nodejs-sdk @solana/web3.js # npm

yarn add @coinbase/onchainkit @bonfida/spl-name-service @neynar/nodejs-sdk @solana/web3.js # yarn

Creating the frame

Firstly, let's clean the src/app/layout.tsx file since we don't need any styling or metadata in the layout:

export const viewport = {
  width: "device-width",
  initialScale: 1.0,
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Then, head over to the page.tsx file and replace the content with the following:

import { getFrameMetadata } from "@coinbase/onchainkit";
import type { Metadata } from "next";

const NEXT_PUBLIC_URL = process.env.NEXT_PUBLIC_URL;

const frameMetadata = getFrameMetadata({
  buttons: [
    {
      label: "Mint an NFT",
      action: "post",
    },
  ],
  image: {
    src: `${NEXT_PUBLIC_URL}/default.png`,
    aspectRatio: "1.91:1",
  },
  input: {
    text: "enter...",
  },
  postUrl: `${NEXT_PUBLIC_URL}/api/frame`,
});

export const metadata: Metadata = {
  title: "Mint an NFT",
  description: "Mint an NFT",
  openGraph: {
    title: "Mint an NFT",
    description: "Mint an NFT",
    images: [`${NEXT_PUBLIC_URL}/default.png`],
  },
  other: {
    ...frameMetadata,
  },
};

export default function Page() {
  return (
    <>
      <h1>Mint an NFT</h1>
    </>
  );
}

Here, we are creating the frameMetadata which contains the buttons, image, input, and postUrl. We just have a single button which creates an API request to the /api/frame endpoint. And, we take in the wallet address, domain or email as input.

Then, we export the metadata which contains the frameMetadata, and some other metadata like title, description, and openGraph.

Finally, we are returning a simple h1 tag with the text "Mint an NFT". This will be displayed on the website, but this has nothing to do with the frame.

As you can see we are using a default.png image. This is the image which will be displayed in the frame at the beginning. You can replace this with your image. You can take a look at the image I am using here.

Creating the API endpoint

Now, we will create the API endpoint which will get called once the user hits the mint button. Create a new file called route.ts in the app/api/frame directory, and add the following content:

import {
  FrameRequest,
  getFrameMessage,
  getFrameHtmlResponse,
} from "@coinbase/onchainkit";
import { NextRequest, NextResponse } from "next/server";
import { getDomainKeySync, NameRegistryState } from "@bonfida/spl-name-service";
import { Connection, PublicKey } from "@solana/web3.js";

export async function POST(req: NextRequest): Promise<Response> {
  let input: string | undefined = "";
  let recipientAddress = "";
  const NEXT_PUBLIC_URL = process.env.NEXT_PUBLIC_URL;
  let isEmail = false;
  const body: FrameRequest = await req.json();

  try {
    const { message } = await getFrameMessage(body, {
      neynarApiKey: "NEYNAR_ONCHAIN_KIT",
    });

    if (message?.input) {
      input = message.input;
    }

    if (!input) {
      return new NextResponse(
        getFrameHtmlResponse({
          image: {
            src: `${NEXT_PUBLIC_URL}/error2.png`,
          },
          ogTitle: "Error",
        })
      );
    }

    if (input.slice(-4) === ".sol") {
      const { pubkey } = getDomainKeySync(input);
      const connection = new Connection("https://api.mainnet-beta.solana.com");
      const { registry } = await NameRegistryState.retrieve(connection, pubkey);

      const pubKey = new PublicKey(registry.owner);
      recipientAddress = pubKey.toBase58();
    } else if (input.includes("@")) {
      isEmail = true;
      recipientAddress = `email:${input}:solana`;
    } else {
      recipientAddress = `solana:${input}`;
    }

    return new NextResponse(
      getFrameHtmlResponse({
        image: {
          src: `${NEXT_PUBLIC_URL}/success.png`,
        },
      })
    );
  } catch (error) {
    return new NextResponse(
      getFrameHtmlResponse({
        image: {
          src: `${NEXT_PUBLIC_URL}/error.png`,
        },
        ogTitle: "Error",
      })
    );
  }
}

export const dynamic = "force-dynamic";

A lot is going on here, so let's break it down:

We are getting the frame message from the request body using the onchainkit and then getting the input from the message.
If there's no input, we return an error image. I have created a simple error image which you can use, or you can create your own or even use an image generator to create specific errors but for now, I will use the images that I have created.
Then, we determine whether the input is a domain, email, or wallet address. If it's a domain, we get the wallet address from the domain using Bonfida. If it's an email, we set the recipient address to email:${input}:solana. So, the user can view it in his Crossmint wallet. If it's a wallet address, we set the recipient address to solana:${input}.

Now, let's mint the NFT to the user's wallet using crossmint. To do that add the following:

const env = process.env.CROSSMINT_ENV || "staging";
const crossmintURL = `https://${env}.crossmint.com/api/2022-06-09/collections/ENTER_YOUR_COLLECTION_ID/nfts`;
const crossmintOptions = {
  method: "POST",
  headers: {
    accept: "application/json",
    "content-type": "application/json",
    "x-api-key": process.env.CROSSMINT_API_KEY!,
  },
  body: JSON.stringify({
    recipient: recipientAddress,
    metadata: {
      name: "Cool NFT 😎",
      image: `${NEXT_PUBLIC_URL}/nft.png`,
      description: "This is my cool NFT",
      compressed: true
    },
  }),
};

Replace ENTER_YOUR_COLLECTION_ID with your collection ID. You can get your collection ID from the collections tab in Crossmint. Also, replace the metadata and nft.png with the image you want to use for the NFT. I have added the image to the public directory in the next.js app. We have also set compressed to true, so that it mints compressed NFTs!

We are using the CROSSMINT_API_KEY env variable here, I'll go over where to get it in the getting to production section.

Then, replace return new NextResponse with the following:

return new NextResponse(
  getFrameHtmlResponse({
    image: {
      src: `${NEXT_PUBLIC_URL}/success.png`,
    },
    buttons: [
      isEmail
        ? {
            label: "View your NFT on crossmint",
            action: "link",
            target: `https://${env}.crossmint.com/user/collection`,
          }
        : {
            label: "Your NFT will arrive soon",
          },
    ],
  })
);

Once the API call is successful, the user will see a success image, and a button to view the NFT on Crossmint. If the recipient address is an email, the user will see a button to view the NFT on Crossmint. If the recipient address is a wallet address, the user will see a message that the NFT will arrive soon.

Checking whether the user has recasted and liked the cast

This is an optional step but if we want to get some more engagement on the cast, we can make it compulsory for the users to recast and like the cast before they can mint the NFT. To do that, we can use neynar. Add the following to the route.ts file:

if (process.env.WARPCAST_HASH && process.env.NEYNAR_API_KEY) {
  const neynarURL = `https://api.neynar.com/v2/farcaster/cast?identifier=${process.env.WARPCAST_HASH}&type=hash`;

  const neynarResponse = await fetch(neynarURL, {
    headers: {
      api_key: process.env.NEYNAR_API_KEY,
      "content-type": "application/json",
    },
    method: "GET",
  });

  const data = await neynarResponse.json();

  const reactions = await data.cast.reactions;

  const hasRecasted = reactions.recasts.some(
    (recast: { fid: Number }) => recast.fid === message?.interactor.fid
  );
  const hasLiked = reactions.likes.some(
    (likes: { fid: Number }) => likes.fid === message?.interactor.fid
  );

  if (!hasRecasted || !hasLiked) {
    return new NextResponse(
      getFrameHtmlResponse({
        image: {
          src: `${NEXT_PUBLIC_URL}/error1.png`,
        },
        postUrl: `${NEXT_PUBLIC_URL}/api/frame`,
        buttons: [
          {
            label: "Try again",
            action: "post",
          },
        ],
      })
    );
  }
}

Here, we are making a call to Neynar's api and getting the cast. We are then checking whether the array of recasts and likes contains the user's fid. If it doesn't, we return an error image and a button to try again.

The final route.ts file should look something like this:

import {
  FrameRequest,
  getFrameMessage,
  getFrameHtmlResponse,
} from "@coinbase/onchainkit";
import { NextRequest, NextResponse } from "next/server";
import { getDomainKeySync, NameRegistryState } from "@bonfida/spl-name-service";
import { Connection, PublicKey } from "@solana/web3.js";

export async function POST(req: NextRequest): Promise<Response> {
  let input: string | undefined = "";
  let recipientAddress = "";
  const NEXT_PUBLIC_URL = process.env.NEXT_PUBLIC_URL;
  let isEmail = false;
  const body: FrameRequest = await req.json();

  try {
    const { message } = await getFrameMessage(body, {
      neynarApiKey: "NEYNAR_ONCHAIN_KIT",
    });

    if (message?.input) {
      input = message.input;
    }

    if (!input) {
      return new NextResponse(
        getFrameHtmlResponse({
          image: {
            src: `${NEXT_PUBLIC_URL}/error2.png`,
          },
          ogTitle: "Error",
        })
      );
    }

    if (process.env.WARPCAST_HASH && process.env.NEYNAR_API_KEY) {
      const neynarURL = `https://api.neynar.com/v2/farcaster/cast?identifier=${process.env.WARPCAST_HASH}&type=hash`;

      const neynarResponse = await fetch(neynarURL, {
        headers: {
          api_key: process.env.NEYNAR_API_KEY,
          "content-type": "application/json",
        },
        method: "GET",
      });

      const data = await neynarResponse.json();

      const reactions = await data.cast.reactions;

      const hasRecasted = reactions.recasts.some(
        (recast: { fid: Number }) => recast.fid === message?.interactor.fid
      );
      const hasLiked = reactions.likes.some(
        (likes: { fid: Number }) => likes.fid === message?.interactor.fid
      );

      if (!hasRecasted || !hasLiked) {
        return new NextResponse(
          getFrameHtmlResponse({
            image: {
              src: `${NEXT_PUBLIC_URL}/error1.png`,
            },
            postUrl: `${NEXT_PUBLIC_URL}/api/frame`,
            buttons: [
              {
                label: "Try again",
                action: "post",
              },
            ],
          })
        );
      }
    }

    if (input.slice(-4) === ".sol") {
      const { pubkey } = getDomainKeySync(input);
      const connection = new Connection("https://api.mainnet-beta.solana.com");
      const { registry } = await NameRegistryState.retrieve(connection, pubkey);

      const pubKey = new PublicKey(registry.owner);
      recipientAddress = pubKey.toBase58();
    } else if (input.includes("@")) {
      isEmail = true;
      recipientAddress = `email:${input}:solana`;
    } else {
      recipientAddress = `solana:${input}`;
    }

    const crossmintURL = `https://${env}.crossmint.com/api/2022-06-09/collections/56d9e10d-3caf-46a8-80a3-a507d034e51f/nfts`;
    const crossmintOptions = {
      method: "POST",
      headers: {
        accept: "application/json",
        "content-type": "application/json",
        "x-api-key": process.env.CROSSMINT_API_KEY!,
      },
      body: JSON.stringify({
        recipient: recipientAddress,
        metadata: {
          name: "Cool NFT 😎",
          image: `${NEXT_PUBLIC_URL}/nft.png`,
          description: "This is my cool NFT",
          compressed:true
        },
      }),
    };

    const response = await fetch(crossmintURL, crossmintOptions);
    await response.json();

    return new NextResponse(
      getFrameHtmlResponse({
        image: {
          src: `${NEXT_PUBLIC_URL}/success.png`,
        },
        buttons: [
          isEmail
            ? {
                label: "View your NFT on crossmint",
                action: "link",
                target: `https://${env}.crossmint.com/user/collection`,
              }
            : {
                label: "Your NFT will arrive soon",
              },
        ],
      })
    );
  } catch (error) {
    return new NextResponse(
      getFrameHtmlResponse({
        image: {
          src: `${NEXT_PUBLIC_URL}/error.png`,
        },
        ogTitle: "Error",
      })
    );
  }
}

export const dynamic = "force-dynamic";

That's it! We have created the frame. Now, let's get to production.

Getting to production

Create a new GitHub repository and push the code to the repository.

git add .
git commit -m "Initial commit"
git remote add origin https://github.com/<username>/<repo_name>.git
git branch -M main
git push -u origin main

Then, head over to Vercel and import the repository. Once you have imported the repository, head over to the environment variables and add the following environment variables:

NEXT_PUBLIC_URL: The URL of your next.js app.
CROSSMINT_API_KEY: The API key for crossmint. Head over to the API keys section in the Crossmint dashboard and create a new server key with permission to mint NFTs. Then, add the key as an environment variable.
CROSSMINT_ENV: If you switch over your app from testnet to mainnet, you can add the environment variable CROSSMINT_ENV and set it to www.

If you want to check whether the user has recasted and liked the cast, you can add the following environment variables:

WARPCAST_HASH: The hash of the cast which you want to check has been recasted and liked.
NEYNAR_API_KEY The API key for neynar. You can get it from the neynar dashboard.

Then, head over to the domains tab and add your domain.

That's it! You have created a frame that allows users to mint NFTs on solana directly to their wallets or email after recasting and liking the cast.

Test the frame

You can go to the Frames validator on Warpcast and test your frame. If everything looks good, make a cast with the URL of your frame and share it with your friends to test it out!

Conclusion

This guide taught us how to create a Farcaster frame that allows users to mint NFTs on solana directly to their wallets or email after recasting and liking the cast. You learned a lot, now pat yourself on the back and share your amazing apps with me!

Useful links

An Introduction to Solana Pay and how to Integrate it into Your Next.js App

Avneesh Agarwal — Tue, 28 Mar 2023 11:52:39 +0000

In this guide we'll walk through the following:

What is Solana Pay?
When to use Solana Pay?
How to use Solana Pay in a next.js app and create an app where people can scan a QR code to buy SPL tokens in exchange for SOL

By the end of this guide, we will build something like this:

Solana Pay demo - YouTube

This is a demo video for the build that we create in the "What is Solana pay and how to use it in your next.js app" guide.

youtube.com

Let's get started!

What is Solana Pay?

Solana Pay is a standard protocol and set of reference implementations that enable developers to incorporate decentralized payments into their apps and services.

Using Solana Pay you can create Transfer Request and Transaction Request via a standard URL (which can also be encoded to be used in a QR). These can be used for creating a payment request and doing something once the payment is completed.

When to use Solana Pay?

Solana Pay has a lot of use cases from complex payments on the web to using it in IRL stores to collect payments instantly. Some use cases for it:

Selling NFTs
Selling SPL tokens
Creating an E-commerce website
Accepting SOL/any SPL tokens in your IRL store
Many more, you can go crazy with it!

Using Solana Pay in our Next.js app

Creating a Next.js App

We'll first create a new next.js app, if you already have an app you can skip this section and go to the installing dependencies section. Run this command in your terminal:

npx create-next-app solana-pay-demo

I am using the following config but feel free to use whatever you like!

Once the app is created, open it in your favourite editor and let's get started!

Installing the dependencies

We are going to need these packages for integrating solana pay:

npm i @solana/pay @solana/spl-token @solana/web3.js bignumber.js bs58 # npm

yarn add @solana/pay @solana/spl-token @solana/web3.js bignumber.js bs58 # yarn

For rendering the QR code:

npm i react-qr-code # npm

yarn add react-qr-code # yarn

Finally, we are going to create our token for selling but if you already have an SPL token no need to install these:

npm i @metaplex-foundation/js @metaplex-foundation/mpl-token-metadata # npm

yarn add @metaplex-foundation/js @metaplex-foundation/mpl-token-metadata # yarn

Creating the SPL token

Create a new file called scripts/create-token.mjs and add the following:

import {
  bundlrStorage,
  keypairIdentity,
  Metaplex,
} from "@metaplex-foundation/js";
import { createCreateMetadataAccountV2Instruction } from "@metaplex-foundation/mpl-token-metadata";
import {
  createAssociatedTokenAccountInstruction,
  createInitializeMintInstruction,
  createMintToInstruction,
  getAssociatedTokenAddress,
  getMinimumBalanceForRentExemptMint,
  MINT_SIZE,
  TOKEN_PROGRAM_ID,
} from "@solana/spl-token";
import {
  Connection,
  Keypair,
  SystemProgram,
  TransactionMessage,
  VersionedTransaction,
} from "@solana/web3.js";
import base58 from "bs58";
import "dotenv/config";

const endpoint = "https://api.devnet.solana.com";
const solanaConnection = new Connection(endpoint);

const MINT_CONFIG = {
  numDecimals: 6,
  numberTokens: 10000,
};

const MY_TOKEN_METADATA = {
  name: "Solana Pay Demo",
  symbol: "SPD",
  description: "A demo token for Solana Pay",
  image: "https://cryptologos.cc/logos/solana-sol-logo.png",
};

const ON_CHAIN_METADATA = {
  name: MY_TOKEN_METADATA.name,
  symbol: MY_TOKEN_METADATA.symbol,
  uri: "",
  sellerFeeBasisPoints: 0,
  creators: null,
  collection: null,
  uses: null,
};

const uploadMetadata = async (wallet, tokenMetadata) => {
  const metaplex = Metaplex.make(solanaConnection)
    .use(keypairIdentity(wallet))
    .use(
      bundlrStorage({
        address: "https://devnet.bundlr.network",
        providerUrl: endpoint,
        timeout: 60000,
      })
    );

  const { uri } = await metaplex.nfts().uploadMetadata(tokenMetadata);
  console.log(`Arweave URL: `, uri);
  return uri;
};

const createNewMintTransaction = async (
  connection,
  payer,
  mintKeypair,
  destinationWallet,
  mintAuthority,
  freezeAuthority
) => {
  const metaplex = Metaplex.make(solanaConnection)
    .use(keypairIdentity(payer))
    .use(
      bundlrStorage({
        address: "https://devnet.bundlr.network",
        providerUrl: endpoint,
        timeout: 60000,
      })
    );

  const requiredBalance = await getMinimumBalanceForRentExemptMint(connection);
  const metadataPDA = metaplex
    .nfts()
    .pdas()
    .metadata({ mint: mintKeypair.publicKey });
  const tokenATA = await getAssociatedTokenAddress(
    mintKeypair.publicKey,
    destinationWallet
  );

  const txInstructions = [];

  txInstructions.push(
    SystemProgram.createAccount({
      fromPubkey: payer.publicKey,
      newAccountPubkey: mintKeypair.publicKey,
      space: MINT_SIZE,
      lamports: requiredBalance,
      programId: TOKEN_PROGRAM_ID,
    }),
    createInitializeMintInstruction(
      mintKeypair.publicKey,
      MINT_CONFIG.numDecimals,
      mintAuthority,
      freezeAuthority,
      TOKEN_PROGRAM_ID
    ),
    createAssociatedTokenAccountInstruction(
      payer.publicKey,
      tokenATA,
      payer.publicKey,
      mintKeypair.publicKey
    ),
    createMintToInstruction(
      mintKeypair.publicKey,
      tokenATA,
      mintAuthority,
      MINT_CONFIG.numberTokens * Math.pow(10, MINT_CONFIG.numDecimals)
    ),
    createCreateMetadataAccountV2Instruction(
      {
        metadata: metadataPDA,
        mint: mintKeypair.publicKey,
        mintAuthority: mintAuthority,
        payer: payer.publicKey,
        updateAuthority: mintAuthority,
      },
      {
        createMetadataAccountArgsV2: {
          data: ON_CHAIN_METADATA,
          isMutable: true,
        },
      }
    )
  );
  const latestBlockhash = await connection.getLatestBlockhash();
  const messageV0 = new TransactionMessage({
    payerKey: payer.publicKey,
    recentBlockhash: latestBlockhash.blockhash,
    instructions: txInstructions,
  }).compileToV0Message();

  const transaction = new VersionedTransaction(messageV0);
  transaction.sign([payer, mintKeypair]);
  return transaction;
};

const main = async () => {
  const userWallet = Keypair.fromSecretKey(
    base58.decode(process.env.WALLET_PRIVATE_KEY)
  );
  let metadataUri = await uploadMetadata(userWallet, MY_TOKEN_METADATA);
  ON_CHAIN_METADATA.uri = metadataUri;

  let mintKeypair = Keypair.generate();

  const newMintTransaction = await createNewMintTransaction(
    solanaConnection,
    userWallet,
    mintKeypair,
    userWallet.publicKey,
    userWallet.publicKey,
    userWallet.publicKey
  );

  const transactionId = await solanaConnection.sendTransaction(
    newMintTransaction
  );
  console.log(
    `Succesfully minted ${MINT_CONFIG.numberTokens} ${
      ON_CHAIN_METADATA.symbol
    } to ${userWallet.publicKey.toString()}.`
  );
  console.log(
    `View Transaction: https://explorer.solana.com/tx/${transactionId}?cluster=devnet`
  );
};

main();

This script is taking the metadata entered, and uploading it to the bundlr network, then creates a token on solana, finally, it mints the number of tokens we entered at the top.

Before running the script you need to do the following:

Install dotenv:

npm i dotenv # npm

yarn add dotenv # yarn

Add your private key in .env (Make sure to add .env in .gitignore or you can loose your funds) with the name WALLET_PRIVATE_KEY
Update MY_TOKEN_METADATA with metadata of your own token and MINT_CONFIG with the number of tokens you wanna mint

Now, you can run the script!

node scripts/create-token.mjs

Click on the transaction URL and copy the token address, since we are going to need it later.

Creating the UI

The UI of our application will be really simple. We will have one input for selecting the number of tokens you want to buy, a button for generating the QR code and a QR code.

So, let's add the input and button:

<main className={styles.main}>
  <div>
    <input
      type="number"
      value={quantity}
      onChange={(e) => setQuantity(Number(e.target.value))}
    />
    <button onClick={createPayment}>Generate QR</button>
  </div>
</main>

As you can see we need a state for storing the quantity:

const [quantity, setQuantity] = useState(0);

We also need to create a createPayment like this:

const reference = useMemo(() => Keypair.generate().publicKey, []);

const createPayment = async () => {
  if (!quantity) {
    return;
  }

  const apiUrl = `${process.env.NEXT_PUBLIC_APP_URL}/api/makeTransaction?amount=${quantity}&reference=${reference}`;

  const urlParams = {
    link: new URL(apiUrl),
    label: "Solana Pay Demo",
    message: "Thanks for buying our tokens!",
  };
  const solanaUrl = encodeURL(urlParams);
  setQrCode(solanaUrl.href);
};

Here, we are first creating a reference.

You might be wondering what exactly is a reference here. Click me to know more about itWhen a customer scans a QR code to make a payment, it can be tricky to update the website to show that the payment went through. Solana pay has a unique way of handling this. We generate a special public key called a "reference" and attach it to the payment. Then we use that public key to find the payment and update the website.

Then, we are checking if there is a quantity, if not we will do nothing. Later we are creating an API URL (we will create this later) and pass it to encode it and finally set it in a state.

So, create a new file called .env.local and add the following for now:

NEXT_PUBLIC_APP_URL=http://localhost:3000

This creates a new public environment variable that we can use in our app.

We also need to create a state for storing the URL:

const [qrCode, setQrCode] = useState<string | null>(null);

Finally, let's use the react-qr-code package to render it:

{
  qrCode && <QRCode value={qrCode} />;
}

You can customise it as you want but I am going to leave it just like this for now!

If you open up localhost you will be able to see a screen like this:

If you scan this QR code it will erroQRout, but wait for a while!

Building the API

We will now build the API that we passed in for generating our QR Code. So how Solana Pay works is, it will make 2 requests to the same router. One will be a GET request and another will be a POST request. The GET request is responsible for giving the icon and a label as metadata and the POST request is where the actual transaction stuff happens.

Here is a great illustration from the Solana Pay docs that explains this:

So, let's start building the API! Create a new file makeTransaction.ts in src/pages/api and add the following:

import { NextApiRequest, NextApiResponse } from "next";

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === "GET") {
    return get(res);
  } else if (req.method === "POST") {
    return await post(req, res);
  } else {
    return res.status(405).json({ error: "Method not allowed" });
  }
};

export default handler;

Here, we are simply checking what the request method is and based on that calling some functions:

If it is a GET method we are calling the get method and passing in res
If it is a POST method we are calling the post function and passing in req as well as res
Finally, if it is neither of the two we are sending the 405 status with Method not allowed error.

Now, let's write the get function:

const get = (res: NextApiResponse) => {
  const label = "Buy some tokens";
  const icon = "https://cryptologos.cc/logos/solana-sol-logo.png";

  return res.status(200).json({
    label,
    icon,
  });
};

The get function is pretty simple, we are just returning a label and an icon for the solana pay payment that the user will be able to see when the transaction pops up.

Now, let's head over to the post function which is where the actual magic happens:

const post = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const { reference, amount } = req.query as {
      reference: string;
      amount: string;
    };

    const { account } = req.body as {
      account: string;
    };

    if (parseInt(amount) === 0) {
      return res.status(400).json({ error: "Can't checkout with charge of 0" });
    }

    if (!reference) {
      return res.status(400).json({ error: "No reference provided" });
    }

    if (!account) {
      return res.status(400).json({ error: "No account provided" });
    }
  } catch (err) {
    console.error("error:", err);
    return res.status(500).json({ error: "error creating transaction" });
  }
};

We are adding a try-catch block for checking for errs and in the try block we will first get reference and amount from req.query and account from the body. Then we are doing some normal checks to make sure that we get the correct data when the API is called.

Then we need to create a connection with the solana devnet so add this:

const connection = new Connection("https://api.devnet.solana.com", "confirmed");

You can use any RPC you want but for now, I will use the official solana RPC.

Then, for the SPL token transfer we need the wallet private key, so create a new variable in .env.local called WALLET_PRIVATE_KEY and add in your private key. We will get it like this:

const walletPrivateKey = process.env.WALLET_PRIVATE_KEY as string;

if (!walletPrivateKey) {
  res.status(500).json({ error: "Wallet private key not available" });
}

const walletKeyPair = Keypair.fromSecretKey(base58.decode(walletPrivateKey));

Import Keypair and bs58 like this:

import { Keypair } from "@solana/web3.js";
import base58 from "bs58";

Now, we will add in the required addresses:

const buyerPublicKey = new PublicKey(account);
const walletPublicKey = new PublicKey(
  "FW79xRL1yks1Y9bD8NSB888YGRmyEq4SCMYhFodHLWh9"
);
const tokenAddress = new PublicKey(
  "FtQBZ2jsDLvXLdeo12LkMndjvLm6kAUWmdntiaxsWQqu"
);

The tokenAddress is the address of the token that we deployed earlier and the walletPublicKey is the address of the wallet where you want the funds to go and the wallet which has the tokens that need to be sent to the buyer.

Finally we need the tokenAccountAddresses of the seller and buyer:

const buyerTokenAddress = await getOrCreateAssociatedTokenAccount(
  connection,
  walletKeyPair,
  tokenAddress,
  buyerPublicKey
).then((account) => account.address);

const sellerTokenAddress = await getAssociatedTokenAddress(
  tokenAddress,
  walletPublicKey
);

You can import getAssociatedTokenAddress and getOrCreateAssociatedTokenAccount from @solana/spl-token :

import {
  getAssociatedTokenAddress,
  getOrCreateAssociatedTokenAccount,
} from "@solana/spl-token";

Now, let's add the transaction and transferInstruction of the SOL from the buyer to seller like this:

const { blockhash, lastValidBlockHeight } = await connection.getLatestBlockhash(
  "finalized"
);

const transaction = new Transaction({
  blockhash,
  feePayer: buyerPublicKey,
  lastValidBlockHeight,
});

const transferInstruction = SystemProgram.transfer({
  fromPubkey: buyerPublicKey,
  toPubkey: walletPublicKey,
  lamports: parseInt(amount) * LAMPORTS_PER_SOL,
});

transferInstruction.keys.push({
  pubkey: new PublicKey(reference),
  isSigner: false,
  isWritable: false,
});

And the token transfer instruction from the seller to the buyer:

const tokenInstruction = createTransferCheckedInstruction(
  shopTokenAddress,
  tokenAddress,
  buyerTokenAddress,
  walletPublicKey,
  parseInt(amount) * 10 ** 6,
  6
);

tokenInstruction.keys.push({
  pubkey: walletPublicKey,
  isSigner: true,
  isWritable: false,
});

Finally, we need to add the instructions to the transaction, partially sign the transaction, and serialise it:

transaction.add(transferInstruction, tokenInstruction);
transaction.partialSign(walletKeyPair);

const serializedTransaction = transaction.serialize({
  requireAllSignatures: false,
});

Now, we can return it like this:

const base64 = serializedTransaction.toString("base64");

return res.status(200).json({
  transaction: base64,
  message: `Buying ${amount} ${amount === "1" ? "token" : "tokens"}`,
});

The final API code looks something like this:

import {
  createTransferCheckedInstruction,
  getAssociatedTokenAddress,
  getOrCreateAssociatedTokenAccount,
} from "@solana/spl-token";
import {
  Connection,
  Keypair,
  LAMPORTS_PER_SOL,
  PublicKey,
  SystemProgram,
  Transaction,
} from "@solana/web3.js";
import base58 from "bs58";
import { NextApiRequest, NextApiResponse } from "next";

export type MakeTransactionOutputData = {
  transaction: string;
  message: string;
};

const post = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const { reference, amount } = req.query as {
      reference: string;
      amount: string;
    };

    const { account } = req.body as {
      account: string;
    };

    if (parseInt(amount) === 0) {
      return res.status(400).json({ error: "Can't checkout with charge of 0" });
    }

    if (!reference) {
      return res.status(400).json({ error: "No reference provided" });
    }

    if (!account) {
      return res.status(400).json({ error: "No account provided" });
    }

    const connection = new Connection(
      "https://api.devnet.solana.com",
      "confirmed"
    );

    const walletPrivateKey = process.env.WALLET_PRIVATE_KEY as string;

    if (!walletPrivateKey) {
      res.status(500).json({ error: "Wallet private key not available" });
    }

    const walletKeyPair = Keypair.fromSecretKey(
      base58.decode(walletPrivateKey)
    );

    const buyerPublicKey = new PublicKey(account);
    const walletPublicKey = new PublicKey(
      "FW79xRL1yks1Y9bD8NSB888YGRmyEq4SCMYhFodHLWh9"
    );
    const tokenAddress = new PublicKey(
      "FtQBZ2jsDLvXLdeo12LkMndjvLm6kAUWmdntiaxsWQqu"
    );

    const buyerTokenAddress = await getOrCreateAssociatedTokenAccount(
      connection,
      walletKeyPair,
      tokenAddress,
      buyerPublicKey
    ).then((account) => account.address);

    const shopTokenAddress = await getAssociatedTokenAddress(
      tokenAddress,
      walletPublicKey
    );

    const { blockhash, lastValidBlockHeight } =
      await connection.getLatestBlockhash("finalized");

    const transaction = new Transaction({
      blockhash,
      feePayer: buyerPublicKey,
      lastValidBlockHeight,
    });

    const transferInstruction = SystemProgram.transfer({
      fromPubkey: buyerPublicKey,
      toPubkey: walletPublicKey,
      lamports: parseInt(amount) * LAMPORTS_PER_SOL,
    });

    transferInstruction.keys.push({
      pubkey: new PublicKey(reference),
      isSigner: false,
      isWritable: false,
    });

    const tokenInstruction = createTransferCheckedInstruction(
      shopTokenAddress,
      tokenAddress,
      buyerTokenAddress,
      walletPublicKey,
      parseInt(amount) * 10 ** 6,
      6
    );

    tokenInstruction.keys.push({
      pubkey: walletPublicKey,
      isSigner: true,
      isWritable: false,
    });

    transaction.add(transferInstruction, tokenInstruction);
    transaction.partialSign(walletKeyPair);

    const serializedTransaction = transaction.serialize({
      requireAllSignatures: false,
    });

    const base64 = serializedTransaction.toString("base64");

    return res.status(200).json({
      transaction: base64,
      message: `Buying ${amount} ${amount === "1" ? "token" : "tokens"}`,
    });
  } catch (err) {
    console.error("error:", err);
    return res.status(500).json({ error: "error creating transaction" });
  }
};

const get = (res: NextApiResponse) => {
  const label = "Buy some tokens";
  const icon = "https://cryptologos.cc/logos/solana-sol-logo.png";

  return res.status(200).json({
    label,
    icon,
  });
};

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === "GET") {
    return get(res);
  } else if (req.method === "POST") {
    return await post(req, res);
  } else {
    return res.status(405).json({ error: "Method not allowed" });
  }
};

export default handler;

Solana Pay doesn't allow testing on localhost, so we will use ngrok to test it.

Go to ngrok, create an account/login, and download it on your machine.

Once ngrok is downloaded run this command:

ngrok http 3000

This will start a tunnel and serve your web app

Copy the forwarding ngrok URL and replace localhost in your env variable with it.

If you now try generating a new QR code and scanning it via your phone, a transaction will pop up and you will be able to buy some SPL tokens in exchange for SOL 🥳

Conclusion

That's it for this guide. Hope you learned what is solana pay and how to use it in your Next.js app! Massive shoutout to 0xMukesh for helping me with this guide and answering my stupid questions 🫡.

Useful links

GitHub Repo

Solana Pay

Connect with me

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.

How to support multiple chains in your thirdweb Dapp

Avneesh Agarwal — Tue, 04 Oct 2022 11:11:24 +0000

This guide will show you how to create a Dapp that works on multiple chains. In this Dapp we are going to allow users to select chains and claim an NFT from the respective chain. I am going to show goerli and Mumbai but you could do it on any network and go crazy with it.

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

Setting up our project

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.

Getting into the code

Creating a context to store chain

Create a new file called Context/Chain.ts and add the following:

import { ChainId } from "@thirdweb-dev/sdk";
import { createContext } from "react";

const ChainContext = createContext({
  selectedChain: ChainId.Mainnet,
  setSelectedChain: (chain: ChainId) => {},
});

export default ChainContext;

This will allow us to create a global state for storing and changing our chainId.

Now, head over to _app.tsx and replait ce with the following:

import { ChainId } from "@thirdweb-dev/sdk";
import type { AppProps } from "next/app";
import { useState } from "react";
import ChainContext from "../context/Chain";
import { ThirdwebProvider } from "@thirdweb-dev/react";

function MyApp({ Component, pageProps }: AppProps) {
  const [selectedChain, setSelectedChain] = useState(ChainId.Mumbai);

  return (
    <ChainContext.Provider value={{ selectedChain, setSelectedChain }}>
      <ThirdwebProvider desiredChainId={selectedChain}>
        <Component {...pageProps} />
      </ThirdwebProvider>
    </ChainContext.Provider>
  );
}

export default MyApp;

We are adding the react context here, so we can access the state everywhere!

Creating dropdown for networks

We will create a simple dropdown for users to switch between networks. So, in pages/index.tsx add this select element that will create a dropdown:

 <select
        value={String(selectedChain)}
        onChange={(e) => setSelectedChain(parseInt(e.target.value))}
      >
        <option value={String(ChainId.Mumbai)}>Mumbai</option>
        <option value={String(ChainId.Goerli)}>Goerli</option>
      </select>

We need to access the react context state that we just created, so we will use the useContext hook to do this:

  const { selectedChain, setSelectedChain } = useContext(ChainContext);

We also need to import these:

import { ChainId } from "@thirdweb-dev/react";
import ChainContext from "../context/Chain";

Now, we will create a JSON object that will have the addresses of the contract addresses:

 const addresses = {
    [String(ChainId.Mumbai)]: "0x25CB5C350bD3062bEaE7458805Fb069200e37fD5",
    [String(ChainId.Goerli)]: "0xA72234a2b9c1601593062f333D739C93291dF49F",
  };

This is creating a string key of the chainId with the contract address of the drops we created as values.

We will use the Web3Component for performing functions. Since I created an NFT Drop I am calling the call function but it might be different for you!

  <div style={{ maxWidth: "200px" }}>
        <Web3Button
          contractAddress={addresses[String(selectedChain)]}
          action={(contract) => contract.erc721.claim(1)}
        >
          Claim
        </Web3Button>
      </div>

If we go to localhost and check out the app, we can switch between networks and it all works completely fine! 🎉

Conclusion

This guide taught us how to allow users to claim NFTs from different NFTs in the same Dapp using the react sdk. If you have any queries hop 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.

How to add web3 sign-in with thirdweb ✨

Avneesh Agarwal — Wed, 07 Sep 2022 00:28:38 +0000

Introduction

Why use web3 sign-in?

Sign-in with Ethereum 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 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.

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 website url and for the private key, create a new .env.local file and add a new variable named PRIVATE_KEY. Learn how to export your private key from your wallet.

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 { ThirdwebAuthHandler } from "../../../auth.config";

export default ThirdwebAuthHandler();

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

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

Building the frontend

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

return (
    <div>
      {address ? (
        <button onClick={() => login()}>
          Sign in with Ethereum
        </button>
      ) : (
        <ConnectWallet />
      )}
    </div>
  );

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

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

This will add a sign-in with Ethereum 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.user) {
  return (
    <div>
      <p>You are signed in as {user.user.address}</p>
      <button>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 handleClick in pages/index.tsx like this:

  const handleClick = 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={handleClick}>Validate user</button>

Conclusion

Hope you learnt how to add web3 sign-in to your amazing Dapps via this guide!

Useful links

GitHub repo

Thirdweb Auth

How to use RainbowKit with Thirdweb 🌈

Avneesh Agarwal — Wed, 17 Aug 2022 15:44:45 +0000

Introduction

In this guide, we are going to see how to use RainbowKit with Thirdweb! I am going to create a Next.js app and show how the users can connect their wallet with the amazing UX and UI of RainbowKit and then claim an NFT from an NFT drop that will be created using Thirdweb! Let's get started

What is RainbowKit?

RainbowKit is a React library that allows a great UI and UX to connect to wallets on the ETH network as well as some other L2s with just a few lines of code!

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.

Setup

Creating a Next.js App

I am going to use Next.js for this particular demo but you can also go with react! So run this command to start up a new Next.js app with ts:

npx create-next-app thirdweb-rainbow --ts

Installing the required dependencies

We are going to need some packages for using RainbowKit and thirdweb so let's install them:

yarn add @rainbow-me/rainbowkit @thirdweb-dev/react @thirdweb-dev/sdk ethers wagmi

Adding RainbowKit Connect Wallet Button

To use the RainbowKit connect button we first need to wrap our app in Wagmi and Rainbow kit provider like this:

 <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <Component {...pageProps} />
      </RainbowKitProvider>
    </WagmiConfig>

And as you can see we need to pass some things like wagmiClient and chains, so add the following:

const { chains, provider } = configureChains(
  [chain.polygonMumbai],
  [
    alchemyProvider({ apiKey: process.env.NEXT_PUBLIC_ALCHEMY_API }),
    publicProvider(),
  ]
);

const { connectors } = getDefaultWallets({
  appName: "My RainbowKit App",
  chains,
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
});

You need to edit your chain from Mumbai to the chain that you want to use. Since we are using the alchemyProvider, so go to Alchemy, create a new app for your respective chain and copy the api key!
Finally, create a new .env.local file, add a new variable called NEXT_PUBLIC_ALCHEMY_API and paste the key. Since we are changing the env variables we need to restart the server.

If you want to customize the theme of the button just pass in theme={darkTheme()} in the RainbowKitProvider and import darkTheme from rainbowkit:

import {
  darkTheme,
  getDefaultWallets,
  RainbowKitProvider,
} from "@rainbow-me/rainbowkit";

Now let's add the connect button! Go in pages/index.tsx and clear out everything in the container div and add a ConnectButton component like this:

<ConnectButton />

You also need to import it from rainbow kit like this:

import { ConnectButton } from "@rainbow-me/rainbowkit";

Adding Thirdweb

Creating a test drop

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

Now, we need to add some NFTs so that we can claim and test it out! You can add a few of them manually or just use batch upload. I am going to use batch upload as it is faster

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.

Fill out the details and deploy the contract!

Setting claim phases

Once you have uploaded your nfts, go to the claim phase and add a claim phase with the values that suit your requirements

Create a claim button

To use Thirdweb in our app, we need to wrap our app in the ThirdwebProvider as well. I am going to create a custom component which uses the ThirdwebSdk with some props:

function ThirdwebProvider({ wagmiClient, children }: any) {
  const { data: signer } = useSigner();

  return (
    <ThirdwebSDKProvider
      desiredChainId={ChainId.Mumbai}
      signer={signer as any}
      provider={wagmiClient.provider}
      queryClient={wagmiClient.queryClient as any}
    >
      {children}
    </ThirdwebSDKProvider>
  );
}

As you can see we are using a custom signer here so we need to import that as well:

import {
    chain,
    configureChains,
    createClient,
    useSigner,
    WagmiConfig,
} from 'wagmi';

Finally, wrap our app in this provider as well:

  <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <ThirdwebProvider wagmiClient={wagmiClient}>
          <Component {...pageProps} />
        </ThirdwebProvider>
      </RainbowKitProvider>
    </WagmiConfig>

Here is what the final _app.tsx file should look like:

import "../styles/globals.css";
import type { AppProps } from "next/app";
import {
  getDefaultWallets,
  RainbowKitProvider,
} from "@rainbow-me/rainbowkit";
import "@rainbow-me/rainbowkit/styles.css";
import {
  chain,
  configureChains,
  createClient,
  useSigner,
  WagmiConfig,
} from "wagmi";
import { alchemyProvider } from "wagmi/providers/alchemy";
import { publicProvider } from "wagmi/providers/public";
import { ChainId, ThirdwebSDKProvider } from "@thirdweb-dev/react";

const { chains, provider } = configureChains(
  [chain.polygonMumbai],
  [
    alchemyProvider({ apiKey: process.env.NEXT_PUBLIC_ALCHEMY_API }),
    publicProvider(),
  ]
);

const { connectors } = getDefaultWallets({
  appName: "My RainbowKit App",
  chains,
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
});

function ThirdwebProvider({ wagmiClient, children }: any) {
  const { data: signer } = useSigner();

  return (
    <ThirdwebSDKProvider
      desiredChainId={ChainId.Mumbai}
      signer={signer as any}
      provider={wagmiClient.provider}
      queryClient={wagmiClient.queryClient as any}
    >
      {children}
    </ThirdwebSDKProvider>
  );
}

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <ThirdwebProvider wagmiClient={wagmiClient}>
          <Component {...pageProps} />
        </ThirdwebProvider>
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

export default MyApp;

Now that we have Thirdweb configured, let's add a button to claim these NFTs!

In pages/index.tsx add the following 2 hooks:

  const contract = useNFTDrop("0xf96e461a89aaF3bD5E8Df7Ed1d67DE1Eb1C9f472");
  const { address } = useAccount();

Update the useNFTDrop with your contract address and import the hooks:

import { useNFTDrop } from "@thirdweb-dev/react";
import { useAccount } from "wagmi";

Below the ConnectButton now let's add a button if the user is signed and a text if isn't:

  {address ? (
        <button onClick={claim}>Claim</button>
      ) : (
        <p>Please connect your wallet</p>
      )}

As you can see we are using a claim function so let's create that pretty simple function:

  const claim = async () => {
    try {
      if (contract) {
        await contract.claim(1);
      }
    } catch (e) {
      console.error(e);
    }
  };

Now our app works totally fine! 🎉

Conclusion

Hope you learnt how to make an amazing wallet connect button with rainbowkit and integrate it with thirdweb to create an NFT drop and allow users to claim it!

Useful links

GitHub Repo

RainbowKit

Thirdweb

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!