Build a simple claim button

Learn how to create a claim button on your website that allows users to claim a single drop.

What you get

This guide gives you a simple React component to claim a single drop and a component for a connect wallet button. Check the code at GitHub over here.

Dependencies

If you're starting from scratch, you can create a new thirdweb project by running:

npx thirdweb create

Or integrate into an existing project by installing the required dependencies:

npm install @thirdweb-dev/react @thirdweb-dev/sdk ethers

The App.js - Connect your wallet

In your index.js (or _app.js if you're using Next.js) file, we wrap our application in the ThirdwebProvider component.

pages/_app.js

import { ThirdwebProvider, ChainId } from "@thirdweb-dev/react";

function MyApp({ Component, pageProps }) {
  const desiredChainId = ChainId.Goerli;

  /**
   * Make sure that your app is wrapped with these contexts.
   * If you're using React, you'll have to replace the Component setup with {children}
   */
  return (
    <ThirdwebProvider desiredChainId={desiredChainId}>
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;

The Claim button

Now let's create a components under components/ClaimButton.jsx.

components/ClaimButton.tsx

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

export const ClaimButton = () => {
  const connectWithMetamask = useMetamask();
  // replace this with your NFT Drop contract address
  const nftDrop = useNFTDrop("0xA9F8815255E2fDC1CB2E164dE1bEedfD815D421B");
  const address = useAddress();
  return (
    <div>
      {address ? (
        <button onClick={() => nftDrop?.claim(1)}>Claim 1</button>
      ) : (
        <button onClick={connectWithMetamask}>Connect Wallet</button>
      )}
    </div>
  );
};

Then, we need to import this component on our homepage App.js (or index.js for Next.js) file:

pages/App.js

import { ClaimButton } from "../components/ClaimButton";

const Home = () => {
  return (
    <div>
      <ClaimButton />
    </div>
  );
};

export default Home;

That's it!

It's that easy. You can see the finished code in this GitHub repo over here.

If you have any questions, drop by our discord!