Sell your NFT in multiple currencies at the same time

Introduction

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

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

Setup

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

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

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

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

npm install # npm

yarn install # yarn

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

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

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

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

export default MyApp;

Creating an edition and NFT

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

Fill out the details and deploy the contract!

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

Building the NFT card

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

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

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

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

export default Home;

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

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