How to build a Farcaster Frame - Like and recast to mint NFT

so in this video we're going to be building ourselves a forecaster frame and this Frame is going to require that a user likes and recasts a cast in order to Mint the nft so I'm in the frame validator here on warcast and we're going to just load our frame here so this is our test frame right over here and you can see we have get started and what this is going to do is first check to see if you have liked and recasted the cast that we are asking you to do and then it's going to check if you have the nft or not cuz if you already have the nft then we're not only going to allow you to claim it once and then if you don't have the nft you have liked and recasted the specified cast then you'll be able to claim the nft so hit get started and you can see here we have to like and recast to Mint so uh because this Frame isn't uh published on a cast I made it so that you have to like a certain cast on my profile so right over here you can see we have cast and recast so I can just like it and and recast this post right over here once I have liked and recast it I can click on that again and you can see here now I am able to Mint the nft so I hit mint there you go it says congrats the nft was sent to your wallet now this is using third web's engine behind the scenes and if I come over to my nft contract here we'll give it a moment you can see right here this is my wallet address for my forecaster account and you can see our nft was claimed there now I own an nft so if I come back to that frame and I try this again it'll say I already own the nft and I won't be able to claim another one hey everyone Shan Wata here back with another video and in today's video we're building a forecaster frame to Mint an nft but in order to Mint nft you're going to have to like and recast a cast in order to Mint it from our frame so an overview of what we're going to be doing in this video we'll first deploy the contracts that we need for our nft we'll then build out our forecaster frame and then test it in foraster so all that being said let's jump on the computer here and get started so again this is the frame that we're going to be building here and the first thing we're going to do is deploy our smart contracts so we're first going to deploy our smart contracts here I'm on third web's dashboard here I collected my wallet and everything already I'm going to head on over to the contracts Tab and I'm going to click deploy contract now you can deploy any type of contract you want for this tutorial an example I'm going to be doing an nft drop which is an ERC 721 nft so I'm going to select that there and I'm going to click deploy now now we can fill out the contract parameters here from the name symbol description you can upload an image and everything uh I'm just going to call this tester uh we'll just give it a symbol of test and again you can fill out your information here now I'm going to scroll down here and under Network and chains on this drop down here you can select any evm compatible blockchain we support all of them and you just need to search them up so let's say I want to use Mumbai here for this one you can choose Mumbai you can choose base Avalanche whatever Network you want to deploy your contract to select that there and then hit deploy now you'll get a transaction here that pops up we just have to pay the gas to deploy our contract so I'm going to hit confirm you'll get another popup here asking for a signature request this is so we can add the contract to our third web dashboard so we'll go ahead and sign that there we go once that has been successfully deployed you'll be brought to your contract dashboard you can see we have our tester contract here and our contract address uh we'll need that later on when we're building out our frame now we're going to deploy uh lazy mint some uh nfts to this contract here so on the left hand navigation we're going to go into the nfts tab and I'm just going to batch load uh some nfts here I have some metadata here but this is where you'll upload your metadata for your nfts so right over here I have 15 nfts here um they're just these little characters here uh once you have them uploaded if you do a batch upload you can hit next uh you can reveal upon min or you can do a delayed reveal I'm just going to do reveal upon mint here and upload my 15 nfts we'll get a transaction here to pay for the gas I'll confirm that and there you go we have our 15 nfts minted to our lazy minted to our contract now the next thing we're going to do is set up our claim conditions now our claim conditions are going to be uh set up in a unique way because we're going to be using third web's engine to do all the minting for us I'm going to open up a tab of engine here engine is basically a backend HTTP server that calls smart contracts on behalf of the user using a backend wallet so we have a wallet which we have stored the private keys and everything to and we'll be able to use that wallet to call onchain transactions whenever we get a request to it so we'll open up our third web engine here and over here we have some backend wallets uh I had my backend wallet right over here and we need to make sure that only this backend wallet can mint nfts from all our nft or smart contract here and in order to do that we're going to go to claim conditions here and we're going to add a phase and I'm going to hit allow list only now here we can set how many nfts are in our collection so I'm going to say 15 uh we're going to say it's free and I'm going to come here and um we can edit a claimer snapshot you can download these example CSV files uh but I already have one made and ideally if we look at a preview of this this CSV file just has the the address which is my backend wall and the max claimable amount that it can claim so I'm just going to click and drag the CSV file here you can see our address Max claimable 15 uh price and currency this is going to default to whatever we have set outside of here and then I'm going to hit next so brand price and currency default to what you have here now what this is going to do again is only allow our backend wallet to claim the nfts which we only want our backend wallet from engine to be able to call the mint function from here and we'll just send it over to the wallet that is connected to the forecaster account so I'm going to save this claim condition here and we're going to confirm that transaction here to save this claim condition and once this claim condition is saved our nft smart contract is set and ready for us to build a frame around right there that is saved and again our contract is done we can now start building out our application so I'm going to come over to my terminal here and I'm going to start building out our application actually before I do that let's take a look at frames here so if you want to learn a little bit more about frames we'll link frame uh forecasters frame documentation down in the description below now we do also have another video that we did on frames uh we'll link that down in the description below as well you can check that out we go more in depth on how frames work and everything essentially frames work using a set of meta tags within the head tag of the HTML page so with that we're going to be using these setting these meta tags with these Keys here um you can see here we have some require re ired properties that we need and we have some optional properties that we can use in order to build these frames again you can check out the other video that we did around foraster frames if you want to learn a little bit more about how to set up frames and how they work but we're going to come over to our terminal and I'm going to run npx oops create next app and we're going to call this a requirement frame project and for this next project uh yes we are going to use typescript I'm going to say no to the es lint no to tell when uh yes to the source directory I'm going to say no to app router for this and no for the customizing the default import right so we'll change into our requirement frame here and we'll open this up in our code editor and with that open let's start building out our project now the first thing we're going to do is in our source folder uh we're going to create a new folder here and we're going to call it config and in that config we're going to create a new config file so we're going to call this config TS and we're going to set up some configs here so we're going to export a config and we're going to need a few things one uh we're going to be using something called Nar and I'll come to here and show you folks what Nar is uh so Nar here is an API you can use to essentially get some information from forecaster now they do have a frames API which we're going to use to validate the frames message and we'll also be able to get information like if a user has liked recasted or followed um certain accounts so with that uh with Nar we'll be able to check has a user actually liked and recasted the cast that we are asking for and that is going to be our requirement in order to Mint the nft from our frame so if we want people to share our frame they can like and recast it in order to claim it so with Nar uh we are going to need an API key from there so we're going to create API key and this will be in our environment variable here so we'll just say process.env we'll call it Nar API key we'll need one for our contract address so this is going to be for our nft contract address um we'll make sure that this is a public environment variable here so we'll put next public and then contract address uh we're also going to need something from we'll call it warp cast here uh but we're going to need the cast hash so this is going to be used so we know the cast that we're going to require a user to like and recast uh before minting so we'll say cast hash um and then this will be our next public uh we'll say warp cast cast hash next we're going to need our host URL uh this will be our next public uh we'll just say yeah host URL here and then we're going to have some third web here and one thing we're going to need is the chain ID so this is going to be the chain that we deployed our smart contracts to in my case I deployed it to the Mumbai test net but this will be the chain ID that you deployed your contract to so we're going to make sure that this is a number and then we're going to get the next public third web uh we don't need third web we just need chain ID here then we have um our variables that we're going to need for our engine uh that is going to include the URL which we are going to say is our third web engine URL we're going to need our backend wallet which is going to be our third web engine wallet and then we're going to need our access token uh which is going to be our third web engine access token and this is going to be our config file here and again these are going to be all the envir environment variables that we're going to plug into uh we're going to use versel here so when we set up versel to host our frame here we'll make sure that we add in all these environment variables into there right next thing we're going to do is uh if we look at our frame here really quick our frame normally has a thumbnail image here that will be displayed and you can use any image we're just going to grab one really quick from here so I'm going to come back to my code editor and I'm going to get our image and put it into the public folder here so my image is just this light bulb here uh it's going to be example image.png you can use whatever image you want uh you'll also be able to put multiple images and switch through and toggle the images based on the state of the frame and we'll go over that in a bit so now that we have our config file set uh we added in our image let's go to our Pages folder here and we're going to go to theore do. TSX file now again this is where the frames take place this is what H uh where you'll build most of your frames we're going to build it within this head tag here and within that head tag we're going to add a bunch of meta tags and these meta tags are going to be used to again create our frame so the first thing we're going to do is add a meta tag for our OG title there going to be the meta tag for the title for something that is posted onto social media that isn't a frame uh same thing with this next tag here this is going to be the OG image so these are going to be the meta tags that are used when you're not rendering a frame and say you post this link onto some other social media um share page and you share it these are the things that are going to show up here so let's also import our config so next thing we need to do is set up this Frame to make sure that frames or forecaster can detect it so we're going to create a metat tag here with the property of FC frame and the content is going to be V Next and this is so we can specify that this is a frame here with the version next we'll create a meta tag to display the image for our frame and that's going to be using the property FC frame image and the content is going to be our host URL slash again that example image that we just added into our public folder next we're going to create a a new meta tag here for our post URL uh this is going to go to our API mint file which we are going to create in a bit uh but this here is going to be the API that calls our engine and Nar to check if a user has liking recasted whether they own the nft or not and then essentially to Mint the nft and then finally we're going to add a button here uh using the FC frame button you have to index the button you can actually add up to four buttons with a forecaster frame so so we'll say that this is button one and what it's going to say here is get started so I'm going to save that and that is going to be uh the basic structure of our frame so if I take a look back at our demo frame here so we look at our frame here we have our image here we have our button with our text and then depending and then when we hit this button that's where we're going to hit our post URL and that's where we're checking again if a user has like recasted and if they own the nft or not now next thing I'm going to do is come into my pages folder we're going to just delete this index. TSX file and we're going to create a new file here and we're going to call this mint. TSX so this Frame here is actually a website and if we were to actually click on this it you would bring you to the website or the URL that you're hosting here and for this demo here I just added some text that says like and recast to claim uh you can add a link to the uh forecast or cast you can build out your own web application your own website here um just when you share it to forecaster that frame is what is going to be displayed so you could create some type of again web 3 application website whatever you want here I just kept it simple and added some text but we're going to need to create this page that people will go to whenever they directly go to the URL on like a browser or something so in this mint. TSX file I'm just going to copy some code here uh and we're just going to call this our frame mint here and then we have some a div with some styling to Center everything and I just have some text that says like and recast to claim now we're going to need to make sure that the a user is directed to this mint. TSX file here so I'm going to open up my file directory here uh this next config file I'm just going to rename this tojs um and then I'm going to change our fig file here just to redirect to our SL mint page and that will be where our users get redirected to if they just type in our URL directly into something like a browser so now that we have those things set again this is where someone will land if they just go directly to the URL in the browser this these meta tags here are set to detect that this is a forecaster frame and that this should show for the frame uh including the image and button now we're going to create a file that is going to alter these meta tags depending where we are within our frame mint process so in my files here in my source folder I'm going to create a new folder here called UTS and in that UTS folder I'm going to create a new file called compute html. TS and in here I'm going to create an interface called uh compute HTML parameters and what we're going to do is we're going to accept the something called the post type which is going to be a string we're going to take the content uh which is going to be a string as well and then our image path then we're going to uh export our compute HTML and this is going to take again our post type content and image path and what we're going to do in here is and in here we're going to create our HTML file again so we'll have our meta tags that we set up for our forecaster frame so we'll have our tag for our image where we can set up a new image path so depending where we are within our frame we can set a new image path if we want that to change uh same thing goes for our post URL we can change the post type so depending where we are within our mint process again we can check uh and set the the post type to display different information and then the button we can display different content uh whether it's in the mint process you have to like or recast something or if we're congratulating that someone has successfully minted an nft so this is where we're going to be able to compute and lay out our new meta tags for our frame let me just import our configs here and there we go so again we have all of this set up now we just need to create our mint API to figure out if a user has liked and recasted the specific cast that we asked them to do and allow them to mint the nft using third web's engine so first let's check if if a user has liked and recasted our cast that we specify so in our sarch folder here I'm going to create a new folder we're going to call this classes and I'm going to create a new file here called warcast TTS and in here we're going to uh set up our API for Nar to check if a user has liked and recasted uh we'll also set up to check uh that our frame um to validate our frame message so first thing we'll do is we'll create a variable here called our API URL this is going to equal the api. nar.com then we are going to create and Define our schemas for our reactions and then for our validate message so we'll create our reaction schema here so we'll just call this reaction schema this uh we're going to open our terminal really quick and we're going to run yarn add Zod and then once we have that installed we can just say our reaction schema is going to be an object and we're going to get our likes and likes is going to give us an array and within the array we're going to have an object and let's make sure we import this real quick and that object we're going to get back our FID number which will be a number and we're going to get back our F name which is the forecaster username which will be a string and then we also want to check our reactions for recast which again will be an array we'll get back the FID number and the F name which is the username uh next we're going to create our schema for our validate message which will be an object as well we're going to get back back if the message is valid or not we're going to get back our action here which is going to give us back our interactor which is going to include the FID number the username and the custody address below action we're also going to get returned uh tapped button which is going to give us back an object as well and it's going to give us back the index of the button that we tapped uh which in this case uh again forecaster allows frames allows you to have three buttons so we'll say a z literal of 1 2 3 or four now that we have our schemas for our reactions and for our message validating we're going to create um we're going to create a class for our warp cast here uh which is essentially Nar and we're going to get our and get and fetch our reactions and check if a user has liked and has recasted our specified cast so we're going to export class here we're going to call this warp cast now we're going to first uh just create our default header for our API since we're going to use it a few times so we're going to create a private static a Sync here called compute default header and in here we're going to return our default header which is going to be our API key uh which we are going to get from our config it's going to be dot uh did I do config wrong config so from our config we're going to get config nr. API key and we're going to set the default content type to application Json on here then we're going to fetch all the reactions for the cast hash so depending on the cast hash that we provide we're going to check the response for it so we're going to get our private static async and we're going to say fetch all reactions so here we're first going to get the URL to get all our reactions from and this URL here is going to be our app URL that we have up here which is going to be our a Nar API we're then going to do V2 foraster slast uh identifier we're going to get and provide our cast hash depending on the cast we want to check for and then we're setting the type to Hash cuz we're going to again pass it to Hash here so next we'll get our response here and we are going to await fetch our URL provide it with our headers here which is going to be this which is going to be our warp cast. comput header and um let's see our API key here we'll make sure is as a string then below here we're going to set our method here to uh get method then we are going to get our data back and that data we're going to one await our response once we get back our response oops we will get the adjacent on of that then we will get our response and get our response do cast. reactions and then we are going to parse so we'll get our reaction schema and parse and finally we'll return the data back so that again should fetch us our reactions now we need to check our reactions and see if a user has recasted and liked our specified cast so we're going to create a public static async here and this is going to be called uh has recasted this is going to take a FID number which is going to be a number and check if a user has recasted that specific cast so we're going to get our reaction here uh which we're going to await and we're going to use Warp c. fetchall reactions and then we're going to here return our reactions. recast do suum and we're going to check if the recast FID matches a FID that we pass it here then we're going to do the same thing with has liked uh except this time we're going to get the likes um and then again check if a FID has a like um and F ID matches and it'll return to us if a if if that specified user has liked our cast or not finally down here we need to create one more function here to validate our message so this is going to be a public static async here this one's going to be called validate message we're going to get back our message what's see message bytes here which is going to be a string this we're going to have a new URL for our API here which is going to be our API URL slv2 foraster slf frame SLV validate uh we're going to get back our response here which we're going to fetch our URL we're going to set our headers here which will be our um warp cast. compute default header method is going to be post uh we are going to give it a body here which we are going to set here to our message bytes in HEX is going to equal our message bytes uh which did I spell wrong yeah message bytes there we go then we're going to get our data here which is is going to await our response it'll then get the Json here then we will get our response and then we're going to uh validate that M schema. pars and then we will return our data here uh actually we'll return data. action there we go and then we'll use this and we'll be able to also get the wallet that we need to send the nft to so again this is just going to be our class here for our warp cast again checking all the reactions to make sure that a user has liked and recasted our specified cast along with validating the frame message uh along with being able to validate the frame message so now that we have um we set up the ability to check the frame to check the requirements in order to Mint nft next we need to create the actual API call to third web engine to Mint the nft so in my files here I'm going to create a new folder in our source folder here called API I'm going to create a new file within that and I'm just going to call this on fetcher. TS and in here we're going to do similar to what we did for our warp cast class here we're going to create our API call to engine here to Mint the nft to also check the nft balance to make sure the user can't mint more than one so we're going to create our mint response schema uh this is actually going to be a object so we're going to import Z from and then we're going to get back our results and this is going to be a z object and this is going to give us back a cued ID which is going to be a string we're also going to get the owned response uh which we're going to which is going to be an object as well this is going to give us back our result which is going to be an array of object and this is going to give us the owner which will be a string and it should be an address so it's going to say start with 0x uh type which is going to be a string and then the supply which is going to be a string as well actually so once I have those two schemas set uh we're actually going to open up our terminal here and I'm going to run yarn add at thir web-dev sleng engine and then with this we're going to get our instance of engine here so we're going to say engine equals a new uh engine oops not set engine new engine then we'll import this here so we'll say import engine from at thir web-dev engine now our engine uh to set here we're going to need the URL uh which is going to be in our config file so config do3 web. uh engine. URL then we also need our access token which is going to be our third web. engine the access token we'll make sure this is as a string same thing here with the access token as a string so now that we have that we can get our we're going to one check uh the balance of the owned nfts for the user and then we'll also create um a request to Mint the nft so we're going to create uh export cons we'll say uh fetch is owned which is going to equal in a sync we're going to take the receiver which is going to be a string and we're going to get our response here which we are going to await engine dot we're going to say ERC um 721 get owned and this is going to give us back again the and this is going to give us the um the supply of owned nfts a user has based on our contract that we give it so here we need to give it a wallet address which is going to be our receiver then we need to give it the chain which we're going to get from our config file so config do contract address um sorry we need to do chain ID I think first uh get owned um yeah so chain ID so under our config we'll get the uh third web. chain ID and we'll say to string then we'll get the contract address which will be under the config do contract address as string then what we're going to do do here is just return our owned response schema and then we'll parse that with our response that we get here then we need to create one for our mint so we'll say export uh const we'll say mint nft this is going to equal an async function here and it's going to require Our receiver so who is receiving the nft which will be of type string and same thing here we're going to get our response which is going to await our engine we're doing this on the erc721 contract of course this depending on the contract type that you decide to use uh will be different uh but we're going to also do the claim two and with claim two we Supply the chain which we're going to get our config do3 web. chain ID to string we're going get the contract address so so our contract address as a string we're going to get the backend wallet from third web that we're going to be using from engine so we're going to get um our config do3d web. uh engine. wallet as string and then we need to give it our body here which it needs the receiver which is going to be our receiver here and then the quantity uh we're just going to say one and it has to be a string like this so this is going to be our respon or uh request to Mint an nft and then we're going to return here our mint response schema uhp parse and then we're going to parse that response right there so again this is going to be us utilizing engine here to one check the nft balance to see if someone owns the nft and then the ability to Mint the nft using engine next we're going to create one more class here so in our classes folder where we created that warp class class we're going to create a new file we're going to call this third thir web engine. TS and in here we're just going to export a class here called third web engine and in here we're going to have a public static for getting uh is nft owned which is going to take uh which is going to equal an async and take our receiver which is going to be a string and all we're going to do is get our response and we're going to await uh third web engine or sorry we're going to await uh fetch is owned and give it to the receiver we're going to import fetch his own here and then return um if our response. result. length is greater than zero then we'll create one for our mint so public static we'll call this mint nft again is going to take the receiver of who we're sending it to this is going to get our response which we are going to await mint nft and give it to the receiver uh make sure we import the mint nft as well uh we have it as lowercase so mint nft mint nft uh and then get rid of this there we go and then we're going to return the response here and that's it for our third web class so final thing we need to do is create our mint API so we're going to come back into our Pages folder in this API folder here we're just going to rename this hello. TS to mint. TS and I'm going to take all of this and delete it well actually we can get rid of this here get rid of that data um and then we'll get rid of what's in here so first thing we're going to do is create our request body warp cast schema so this is what we're going to be getting back from warp cast here uh we'll make sure we import that import Z and then we're going to um also create a request um query schema and depending where we set this so start will display a recast to Mint and like um to Mint so this is going to be where we display hey you need to go and so this is going to display um our starting point where we have to say get started um and then to like and recast our cast recast is going to be where we check to see if a user has liked and recasted it and then the mint here if they reach this um query here that means that they'll be able to actually press mint and mint the nft so we're just setting those as like states of start recast and mint I'm going Yar and add uh next JS cores here so we drop that down and what we're going to do first is set that up so we're just going to say um uh we're going to say oh uh let's make this async and then import this so we just make sure that we allow methods to get and post and we'll just set the origin to any here and we're just going to check uh if request uh method equals post or does not equal post sorry we're going to return a response of status 400 um and this is just going to send a invalid method then we'll run a try catch now for the catch uh we're not going to actually uh error it out we're going to return a response of status 200 but we're going to set the error on the button itself on our frame so we're going to send and we're going to put a compute HTML here and again we're going to give it our image path which we're going to set to just be our image but you can put like an error image or whatever image you want to reference there uh we're going to set the post type so we're going to set it back to start and then we're going to change the content uh which we're going to have it say uh something went wrong please try again so again if an error happens it'll just change the button text to this text right over here and restart our post type back to the start now here we're going to uh get the type of response that we are on so type here which is going to equal our request query schema and then we're going to again find out if we are on start recast or mint uh we also need to get back uh we're also going to get our trusted data which is going to be our request body warcast schema and then we're going to get back our action here which we are going to await uh warp cast. validate message and then give it our trusted btes uh from there we'll get back our action which we'll be able to get the uh connected wallet address with so now if we are on start so if type equals start means we're just starting off we need to check if the nft is owned and if a user has uh liked and recasted so on the start we're going to check one if the nft is already owned by the connected user so we're going to get is nft owned this is going to equal await we're use third web engine here do is nft owned and then we're going to give it our uh action do interactor did I not interactor custy address make sure that our uh warp cast here is actually set up correct uh action interactor um Y and then custody address okay that is correct there and then if the nft is owned we'll give it a response here and set the post type to start and say you already own this nft and then if they don't own the nft then we'll put uh return we'll say response status 20 100 and then we are going to uh compute set this to recast and then say that uh they have to recast uh so we'll say not recast we'll say like and recast to claim next we'll set uh if they are on recast so if type equals recast we're going to get uh if they have recasted and liked the specified uh cast so we'll say has recasted which is going to await and we'll say warcast do has recasted uh which we're going to give it the action. interactor FID and then if they have not recasted then we will set this to recast and we'll say recast uh required to Mint we'll do the same thing for like so we'll say has liked so we use our has a liked here and if they have not liked it we'll say a like is required to Mint and if everything is good we change the post type to Mint and then we say mint your nft and then finally if type equals mint we are going to await uh third web engine. mint nft give it our interactor custody address and then we are going to return a response status of 200 uh we'll set the post type back to start and say congratulations your nft has been minted so again this is going to be our API call here this is where we're going to point our forecaster frame to and it's going to check and make sure where we are within the process of our frame and again it's going to use the functions that we created to see if a user uh one owns the nft uh cuz they can't claim more than one it'll then check if they have liked and recasted our specified cast and then they'll be able to Mint the nft so now that we have all of that Set uh I'm going to open up my terminal here and I'm going to run versel and deploy our frame so yes we're going to deploy our requirement frame I'm going to deploy it to my account here uh no it is not an existing project we'll just name it requirement frame um and then we'll set that up let that build and deploy uh no we're not going to modify any of the settings so we'll just open this up here there we go our project is building and deploying while that is going we're going to come back to our project here go to the settings and we're going to set up the environment variables so these environment variables here are going to be the environment variables that we have posted in our config file so again we're going to have to set all these up so we're going to need our Nar API key we're going to need our next public contract address we're going to need our our warp cast hash we're going to need our URL we're going to need our chain ID uh we need our third web engine URL the third web engine backend wallet and we need the third web engine access token so you're going to fill in all these variables here um if you don't know what your engine URL or engine backend wallet is again we'll add some um links down in the description below to see how you can set up your own version of engine or instance of engine you can also get um your own instance of engine through third web it's $99 a month as of making this video and you can check that out as well contract address um the warp cast hash so for this example here we're just going to use um my test cast here I'm just going to unlike and unre cast this uh so you just select the cast that you want copy the URL um easy thing to do is come over to uh Nar here under the cast retrieve cast for a given hash uh just paste in the identifier the uh URL uh and hit try you'll be given back the cast hash right over here so you just need to copy that cast hash and that's what you're going to supply for the warp cast hash so whatever um whatever cast you want to require the like and recasting of that's what you're going to put right over here so I'm going to fill in all my environment variables we'll head back to our deployment um and then do that um and then for the host URL it's going to be the URL that you host the frame on and once you have that set we'll come back to deployments here and I'm just going to redeploy this here and make sure that my environment variables take place once that's done we'll take the domain here we'll go back to the frame validator and test out our frame so come back to the frame validator by warcast here we'll paste in our URL uh we'll get rid of of the slash mint we'll load our frame you can see here our frame loads we have our image we have our button everything looks good uh we can test this out so you can see here that we have to like and recast to Mint so if I try this uh you can see a like is required to Mint so we can go back to our cast I can make sure I can uh recast and I like this we'll come back to our frame here we'll try it again you can see now I can mint the nft if we hit mint you can see congrats the nft is sent to our wallet if we look at our engine here you can see that we have a transaction queued up engine is taking care of all the onchain transaction behind the scene you can see it is sent and then we'll wait for it to be mined we take a look at our contract here our nft contract come back to our nfts you'll see that uh one has been claimed and our wallet address here is showing that our forecaster account now owns the nft I come back here and I hit this button again you can see here it says I already own the nft and there you have it we built our own farcaster frame that allows a user to Mint an nft not only that it requires them to like and recast a certain cast before being able to claim the nft we also made sure that a user can only claim one nft with that you're able to create these creative and unique forecaster frames utilizing third web's engine and using nar's API so again I hope you folks enjoyed this video if you found some value in it don't forget to give this video a thumbs up hit that subscribe button and don't forget to turn on the notification Bell so you don't miss out on tutorial videos just like this if you have any questions or you need any support we'll drop a link down in the description below you can open a support ticket and our support team will be happy to help you out and answer any of your questions but again I hope you folks enjoyed this video you found some value in it and until next time see you [Applause] [Music]

Channel: thirdweb

Views: 3,338

Keywords:

Id: iOOt9PWGsp8

Length: 47min 4sec (2824 seconds)

Published: Fri Feb 16 2024