I created my first @farcaster frame to allow anybody to mint Based Moon NFTs on Farcaster

I open-sourced my frame and below I explain how anybody can create their own NFT mint frame, based off my template, and share it for anyone to mint from 👇

A sufficiently decentralized social network. farcaster.xyz

I created my first @farcaster frame to allow anybody to mint Based Moon NFTs on Farcaster

I open-sourced my frame and below I explain how anybody can create their own NFT mint frame, based off my template, and share it for anyone to mint from 👇 

https://based-moon-mint-frame.vercel.app/api

Protocol Engineer @ OpenSea. Creator of Net + the Together Collective NFT studio. Nothing I say/share is financial advice. netprotocol.app/ham

Just a quick note, this tutorial assumes you have already deployed your NFT smart contract to a chain and that your smart contract has a mint function that allows the public to mint NFTs via your contract

First, fork the Farcaster Frames repo I created https://github.com/stuckinaboot/farcaster-frames

Then, clone the `farcaster-frames` project locally

Open up a terminal, run `cd farcaster-frames/frames/mint-based-moon-nextjs`, `yarn` and then `yarn dev`

Now go to your web browser and open http://localhost:3000/api/dev

You should see the Mint Based Moon frame and can interact with it. Feel free to mint a Based Moon here 😉

Open the project in your favorite code editor and view the `route.tsx` file (`frames/mint-based-moon-nextjs/app/api/[[...routes]]/route.tsx`)

From there, you can modify the contract address or the UI elements by updating the constants at the top: CONTRACT_ADDRESS, TITLE, etc.

Try modifying the TITLE constant, go back to your browser and refresh the page

You should see the updated title

Now, scroll down in `routes.tsx` to the mint transaction section. You can update `functionName`, `args`, and `value` to the appropriate values for your smart contract

Next, open up abi.ts and replace the Based Moon ABI with your smart contract’s abi

Great! So now our frame is set up for our NFT contract and is working locally. Time to commit and push all changes to GitHub

Then, we’ll deploy our frame on Vercel so that it’s accessible to everyone

Navigate to Vercel and sign in/sign up https://vercel.com

Then, import your GitHub repository that you created for this project, set the root directory to `frames/mint-based-moon-nextjs`, and deploy

Assuming your project deployed successfully, you’ll now have a link to the deployed frame on Vercel

Visit the production Warpcast frame debugger https://warpcast.com/~/developers/frames

In the url field, enter the Vercel url (important!) appended with /api, ex. “https://farcaster-frames-theta.vercel.app/api”, and hit the load icon

You should be able to interact with your frame here.

Now for the final steps!

Here's the fun part, share your frame in a cast so your frens can mint your NFT

After sharing a cast, try pressing mint on your frame and you'll see a pop-up like this that lets you (anybody) perform the actual mint transaction to mint your NFT

All from within a farcaster frame

Congratulations! You created and deployed your first NFT mint frame! If you enjoyed this, consider recasting the first cast 🙏

You can mint Based Moon via website here: https://togethernft.art/basedmoon

And via frame here:

Congratulations! You created and deployed your first NFT mint frame! If you enjoyed this, consider recasting the first cast 🙏

You can mint Based Moon via website here: https://togethernft.art/basedmoon

And via frame here: https://based-moon-nft-mint-frame.vercel.app/api

Special thanks to @paradigm and @wevm for creating the Frog framework for Farcaster frames, which dramatically simplifies frame development 🫡 

And for @dwr.eth and team for creating frames to begin with

The possibilities around frames are limitless 🚀