Guides

How to Create an NFT Drop Transaction Frame on Farcaster

Mago Khamidov, Juan Leal

Apr 9, 2024 • 4 min read

In this guide, learn how to create a Transaction Frame on Farcaster — enabling users to perform onchain transactions (such as minting NFTs) directly on Farcaster.

We'll do this using:

For this guide, we'll build an NFT Minting frame on Base — but this can also be done on any of the below EVM chains (and their testnets):

Let's get started!

Video Tutorial

Pre-Requisite: Deploy an ERC-721 NFT Contract

Before getting into the Farcaster Frame, you'll need to have an NFT smart contract. With thirdweb, you can deploy pre-built, audited smart contracts to any EVM chain.

For the purpose of this guide, we'll be deploying an NFT Open Edition (ERC-721) smart contract to Base:

OpenEditionERC721 - ERC721 | Published Smart Contract

An open-to-mint ERC-721 NFT collection, where all NFTs have shared metadata.. Deploy OpenEditionERC721 in one click with thirdweb.

thirdweb

To learn more about this, see our guide for how to deploy a smart contract to Base:

Step 1: Get started

Get started with your frontend framework of choice. For this guide, we'll use Next.js — but for whatever framework you use, you'll need the frontend client + API somewhere so that the Farcaster Frame can send requests. Next.js has server-side features built-in already so it’ll be easier to use that so we can get both frontend and API servers.

Once a project is created, create a page where you can specify your own headers and metadata. Go ahead and create any page you’d like, but for this example we’ll use src/pages/index.tsx page.

Here is an example link:

Once you’ve created your own page make sure to specify your own metatags like shown in this transaction frame guide. We’ll also use next-seo package to define extra SEO tags. Here is the page example of the SEO metatags we use:

Step 2: Set up your Farcaster Frame

💡

You can test your Farcaster Frame by pasting your preview link into the Warpcast Frame Validator.

When you’re using a transaction frame, Farcaster needs to know what transaction data the user should execute. Here's an example of the type of response you'd need to give Farcaster:

The API would hit the same url you’ve defined for fc:frame:button:1:target in the SEO metatags. In our case it’s /api/frame/base/get-tx-frame.

Here's the example code:

Step 3: Create your Farcaster Frame

We've set up most things for you in the code, but the key part to look at is abi — which you can find in any blockchain explorer. In our case, it's defined in BaseScan here, under: Contract → Code → Contract ABI.

Here's the rest of the steps that we took in the code above, laid out:

Validate your Farcaster Frame with Coinbase's OnchainKit. The example code is here. Note: If you're using Neynar, a Neynar API key can be added optionally to increase performance. See the docs.
Get the Farcaster account address (verified account address or custody address). Example code is here.
Initialize the thirdweb SDK to get the contract instance. Example code is here.
Get the contract instance and prepare ERC-721 transaction data by calling contract.erc721.claimTo.prepare. Example code is here and here.
Finally we return the response to Farcaster and it’ll validate the transaction and let user sign it! Example code is here.

And that's it! You've got your Farcaster Frame ready. You can now test it out in the Warpcast Frame Validator.

Preview our example frame by pasting the following link into the Warpcast Frame Validator: https://thirdweb.com/frame/mint/base

Got any questions? Let us know in Discord.