How to Build a Farcaster Frame that Mints NFTs

hey everyone this is Steve and today I'm going to show you how to make a frame that can mint nfts so you might have caught our last video on how to make a frame on farcaster we'll be doing some stuff that's a little similar but also some stuff that's pretty different something that's really popular right now is the ability to Mint an nft within a frame now we should clarify the way this is actually working is different than a standard mint on a contract typically with an nft minting contract you'll probably have people interacting with that contract themselves they're the ones signing the transaction and paying the gas fees to get this nft from the contract this works a bit differently because you can't really sign transactions through frames yet instead what we can do is use the data already available in foraster to get their address and then airdrop them in nft so the way it works is that you'll want to have a contract already set up that you created that you deployed and have a private key for and with the private key of the wallet that deployed that contract you can sign sign the transactions to Mint and basically just send it to their address that's how it works with that said I want to say a word of caution please be careful whenever you're messing with private keys for wallets don't use the private key for your main wallet make a fresh wallet put some test net funds in there don't put real money in there yet just be careful you never stress this stuff enough with uh nfts so just keep that in mind as we go through this tutorial now one of the things that you're going to need for this tutorial is a already deployed smart contract and there's lots of different ways to do it if you're not exactly sure how I would recommend following this video on how we do a Min on base is it follows a pretty simple way of doing it and the way I did it in this tutorial is went to open Zeppelin used their contract Builder made a really simple ERC 1155 contract deployed It On remix use the address and grab the contract API from remix as well but essentially the three main things you're going to need for minting a nft in a frame is the private key for the the wallet that deployed the contract that has the authority over it you're going to need the contract address and you're going to need the contract ABI which is a Json file with all of the different functions that the contract has so that way your frame server can interact with the contract on the blockchain we're also going to try out the pinata fdk which is our frame development kit if you watched that last frame video it was a bit messy dealing with all those HTML tags and putting all that in responses the pinata fdk makes that so much easier and allows you to use some of your pre-up loaded ipfs content from pinata and makes image links even easier so with that let's get into it so the first thing you're going to need to get started this project is going to be a piñata account you can go to app. pat. Cloud to sign up for a free account and once you have the account you're going to need two things we're going to need an API key and we're going to need the Gateway so first we can do the API keys by clicking on API Keys clicking new key and we can give this a name such as frame name m make it admin and then generate API key once you do this it's going to show you your API key API key secret and your JWT the JWT is the one we're going to use so hold on to that one next you're going to want your gateway domain this is already pre-generated whenever you sign up for a piñata account so you can just go to the gateways page and you can just see here I have one called teal elaborate AP 568 my Pata Cloud go ahead and copy that and save it somewhere save another thing you're going to need is an Alchemy RPC end point this is what we're going to use to help communicate between our server and our smart contract that's already deployed on the blockchain to do that you just go to alchemy.com create a free account create a new app and then you can choose the network that you're going to use for this tutorial I'll be using Bas ofoia testnet and once you've created it you just click on this button here for API key and it'll show you your keys now you can go ahead and go to your terminal and we're going to go ahead and create a nextjs app to get us started so do that we'll do MPX cre create next app at latest and give it a name like frame Miner whatever you want to call it we're going to select all the defaults here using typescript tailwind and the app router right once it's created let's go ahead and CD into it CD frame Miner next we're going to install some dependencies we do that with mpm install and we're going to install the pinata D fdk which is our frame development kit and VM which is the library we're going to use to contact our smart contract now done we're going to add one more file and that's going to to be touch. env. local and you're going to want to paste in the following values from the blog post which we'll have linked down below so you can see here at the very top we have our pinata JWT this is going to be that API key we made in the very beginning we're going to have our Gateway URL that we used earlier and it's going to be in the same format as where you copied it from so example dolphin 369 something like that my pin. cloud so no https in the beginning we also have base URL and this is going to be the actual domain main of your app so while we're in development we could just leave it at HTTP Local Host 3000 but when you deploy to ver cell you want to use the URL domain that for sell gives your app so it might require deploying the app and then coming back and changing that environment variable other thing we're going to need is our Alchemy URL from that API key we just showed you a minute ago and the last two things we're going to need the private key now again remember this is the private key for the wallet that deployed your smart contract please please please do not use a wallet that you use all the time make a completely fresh wallet start with test net funds please be cautious you do not want to paste this many other places other than this file and inverell when we eventually launch the app so please be careful and finally we want the smart contract address and this is going to be the contract address for our minting contract now that we have our EnV and our project setup we're going to go ahead and start writing some code the first thing that we're going to write is basically a couple of new AP API routes inside of the app router for nextjs and to do that it's really easy we're basically going to add a frame and then a route. TS inside of there and we're also add another route for redirect and add another route. TS inside there and let's go ahead and go into the route. Ts for frame and we're going to go ahead and paste this code in from our blog post so if you need a link to that it's going to be below and it'll have all the details of every step here and let me go ahead and walk you through what's going on so the very beginning we have next request and next response from our next SL server then we have some helper functions that we basically importing that we haven't made yet but we will show you those in just a second and we have our pinata fdk and we're going to initialize that pinata fdk with our pinata JWT and our pinata Gateway that we showed earlier in the EnV file next we're going to have our first function which is going to be our get endpoint so whenever somebody queries our URL slf frame with a get request they're going to to get this back and we're basically able to create some frame metadata or the content for that frame and it's going to have a few things in here first we're going to have the post URL this is where it's going to go to next when the person clicks on the button we're going to have the button itself so the button we're going to say mint nft and it's going to be a read going to be an action of post to that frame route going to have an aspect ratio of one to one and our CID what's really cool about this Frame development kit is that you can either use the image URLs or you could just use raw cids of content you have on your Piñata account or ipfs I find this a lot easier so I don't have to deal with a really long URLs and gets really messy I just put in the cids I need and for this Frame we're basically going to have just three images one for like the intro saying hey mint this nft a second image that says you've minted and then a third one that says you've already minted so this is going to be that first one that's basically welcoming somebody to M this nft and then it's going to basically return the next response there next up we have the actual minting request endpoint here and so for this one we're going to start by gathering the body of the request whenever somebody clicks on a frame it's going to actually send a body of Json to our server that has information about that user and so we're basically going to be parsing that information and we're going to be gathering their FID which is forecaster ID this will give us all the information we need about them once we have that FID we can pass it into our get connected address for user function this just takes in the FID and gives us the ethereum address that they have connected to their account we're also going to do a balance check one of the functions that we haven't written yet is going to basically check if they've already minted this nft or not that way we can determine if they're allowed to Mint or not and we can keep people from being greedy so in our first check we're going to basically say if they have less than one nft we're going to allow them to mint this nft and to do that we're going to call our mint nft function and we're going to pass in that address we're basically going to have our contract mint something directly to their wallet just like that they're going to pass that frame metadata saying that they've minted the nft and give them a button they can click to learn how to do it we'll have a link to the blog post and then we'll return that response otherwise we're going to say you've already minted this nft and you can still click on the button to learn how it was done now we have everything pretty much set up for the route inside of frame let's go inside the route for redirect and this one's going to be really simple we're going to paste in this code from the blog post and all this is going to do is redirect our user to the location that we want them to go so in this case it'll be a link to the blog post or the pinata website now that we have our routes done all we have to do now is add our utilities so to do that we're going to add a utils folder and we're going to have a fc. TS we're going to have a mint. TS and we're also going to have a contract. Json this is going to be the ABI that you got from your contract when you minted and created and deployed it so here's some example that I just posted in this is what the ABI might look like just keep in mind that how you access it might depend on the structure of your ABI Json data so for me I have to get it through output and then ABI you'll see here in just a minute so let's start inside the fc. TS and we're going to basically going to make that helper function that helps us get the address from an FID so here's our code from the blog post and it's really simple it's just going to be basically an API request to the pinata Hub which are basically the hubs that run farcaster that allow you to get data and write data to forecaster and so for this one we're going to do verifications by FID pass in the FID we get from the function and we're going to parse the information just grab the first address if you wanted to you could grab multiple addresses and feed those back it's totally up to you you can make that really fancy and give people the choice of what address that nft is mint to if they have more than one now let's go into mint. TS I'm going to paste in this code here and let's walk through everything that's happening here so first we're going to import our wallet client and our public client from VM and we're also going to import our private key to account and Bas AIA from chains if you're using a different chain you want to import the appropriate chain that you're using I'm also going to import that contract. Json file that we used earlier for our contract ABI and I'm going to make a constant of contract address and process that from our EnV file next I'm going to create an account by doing private key to account importing the private key from the wallet that we use to deploy our contract next I'm going to set up my clients the only difference between the two is that one of them will have the account and that's in wallet gives it right access and we're also going to use our Alchemy URL inside of that transport the first function is pretty simple it's just going to be the mint nft it's going to take in an address and we're basically going to do a request simulate contract request with our account account address the ABI which you can see here I did contract ai. output. ABI might be different for you depending on the structure of your ABI we're going to call the function name and this also might be different for you depending what contract you're using this is an 1155 contract if you're using ERC 721 it might be safe Mint or something else so keep that in mind and arguments here also might be different for your contract for the 1155 contract I'm passing in who's being minted to the Token ID the amount and then the call data which I'm just going to make empty do a0x and with that request or that simulation of that request we're going to actually pass it into write contract and that's going to return our transaction hash the last function is just going to be our balance check where it takes in our address and for this one we can just use the public client which is read only and we're going to pass in pretty much all the same things use the function of balance of pass in our address and the token ID once we get that number back it's going to be a big integer and so we're going to parse that as a regular integer or as a number and return that balance back to our API and now with our frame ready to go we can go to the frame validator which I'll have link down below and it's also going to be in the blog post and with the frame validator we can basically paste in our URL slf frame because that's the beginning of our API route and it's going to load up our frame it's going to tell us all the information about it and if I click mint nft I've already minted an nft so it is working if you want to try it for yourself go ahead and grab the URL that is for this Frame it is live it is still working go ahead take go to the frame validator see if you can in nft see if it works for yourself and then click on the blog post link to see how it's done well that wraps it up for this video I hope you guys enjoyed it and found it useful if you have any thoughts comments or questions below please feel to read them in the comments be sure to like And subscribe this video for more content as we continue to build things with foraster until next time happy [Music] pity

Channel: Pinata

Views: 2,576

Keywords:

Id: 5VVOMolm-TA

Length: 13min 55sec (835 seconds)

Published: Fri Feb 16 2024