Farcaster Transaction Frame is an innovative application that enables users to claim NFTs directly from a Farcaster Frame. This repository contains all the necessary code and instructions to get the application up and running.
To use the Farcaster Transaction Frame, you'll need to clone this repository, install dependencies, set up environment variables, and deploy the application. Below are the steps to follow:
To get started, clone the repository to your local machine:
git clone https://github.com/thirdweb-example/farcaster-transaction-frame-youtube.git
cd farcaster-transaction-frame-youtube
This application requires several dependencies to function, including thirdweb and Coinbase's OnchainKit. Install them using npm or yarn:
npm install
or
yarn install
For a detailed setup and deployment guide, watch our video tutorial on YouTube:
How to build a Farcaster Transaction Frame
To deploy the Farcaster Transaction Frame, we recommend using Vercel. If you haven't already, sign up for a Vercel account and install the Vercel CLI:
npm i -g vercel
Then, within your project directory, run:
vercel
Follow the prompts to set up and deploy your project.
Vercel requires specific environment variables for the Farcaster Transaction Frame to operate correctly. These include:
TW_SECRET_KEY: thirdweb API secret key.CONTRACT_ADDRESS: The contract address for the NFT.NEXT_PUBLIC_HOST_URL: The URL of your deployed application.NEYMAR_API_KEY(optional): Your Neymar API key, if you choose to use it.
To add these variables in Vercel, navigate to your project settings on the Vercel dashboard, find the Environment Variables section, and add the variables listed above.
Once your environment variables are set, your application is ready to go!
You can test you Frame using Farcaster's Frame Validator
To learn more about thirdweb and Next.js, take a look at the following resources:
You can check out the thirdweb GitHub organization - your feedback and contributions are welcome!
For any questions, suggestions, join our discord at https://discord.gg/thirdweb.