How to build a Farcaster Frame - NFT Mint

and right here on my computer you can see I am on warcast frame validator here this is where you can test out your URLs that you've built your frames on so right over here this is just a preview of what our frame will look like and this Frame right now is connected to an nft smart contract that I have so right now it's connected to this smart contract here you can see frames test it's deployed on the base sapoia test net I have 10 nfts on here um I've tested it out on a few you can see we've minted four out of the 10 or sorry five out of the 10 uh the next one is going to be friend number six here you can see it's not owned by anyone and if we come back to our frame reload this page really quick you can put in your frame URL here you can load that frame you can see what it's currently rendering what its next frame is going to be in this case we're going to call our mint API which is going to call again our third web engine to Mint this nft for us and you can see here the status of your frame so you can test it in here before you actually go out and you know cast it on foraster uh right now I have a image ratio I just uploaded the wrong ratio for my image which is why this is a red dot here but that should be okay here and all we're going to do here is with frames you can add up to four buttons down here we have one button which is a mint nft so if I click on this here what this is actually going to do is again make that API call to third web's engine it's going to Mint us an nft and right here you can see once that happens it says congrats the nft was sent to your wallet now if we come back to our nft contract here we'll give it a moment cuz this is actually going through engine right now and it's queued up and being scent and minted so once that's minted we should see this update here to the same wallet address that I have up here cuz this is my forecaster wallet here and you can see right there we have friend number six and the address has been updated matching the previous two right over here again that is the forecaster wallet so again you can create these really cool experiences with forecaster frames there's a lot of ideas going out Concepts that people are trying crying out it's really exciting to see people utilizing decentralized social media platforms like forecaster to create these unique experiences but again this is just going to show you one how to build a simple frame and how to add a nft minting capability to your frame using third web's engine hey everyone Shan Wata here back with another video and in today's video what we're going to be doing is building our very own forecaster frame and not only are we going to be building a forecaster frame we're going to be building a frame that allows you to Mint an nft utilizer third webs engine so an overview of what we're going to be doing in this video we'll jump in deploy our very own smart contract for the nft that we would like users to claim through our foraster frame then we'll go through some of the things that we're going to use to build out the frame and then we'll jump into our code editor here and build out our very own farcaster frame which is pretty easy to do and we'll add in some web 3 functionality again using third web's engine to be able to Mint an nft so the first thing we're going to do to start off this project here is to actually deploy a smart contract of the nfts that we want to allow the user to Mint here in our frame so I'm going to come back to third web here I'm going to go to the contracts Tab and I'm going to hit deploy a contract and right over here what we're going to do is we're going to deploy a ERC 721 contract or an nft drop contract uh you can deploy any contract that you want you can do a token uh you can do an addition drop which is an ERC 1155 you could do a token drop as well which is an ERC 20 token uh but for the sake of Simplicity here we're just going to do an ERC 7 21 we'll go through the areas of the code that you may need to change depending on the type of contract that you deploy so I'm going to select nft drop here again this is an ERC 721a standard contract I'm going to click on deploy now on the top right and I'm going to give this a name so I'm going to call this forecaster frame here uh frame nft and then we'll just say FF nft as a symbol you can add a description image you can configure these parameters to your liking I'm just going to scroll down here and and I'm going to hit this drop down and this is where you can select the networker chain you want to deploy your contract to so this is going to be the chain that your nft lives on when someone mints the nft now you can search any evm compatible chain here you just need to search its name here and you'll find all the different chains here you just select it I'm going to use the base of polia test net here and once you select that chain you're going to just click deploy now and you'll get a popup for a transaction here can hit confirm you'll get another popup for a signature request to add this contract to your third web dashboard so we're going to sign that and once it has been successfully deployed you'll be redirected to your contract dashboard here you can see we have our forecaster frames nft the network or chain that we deployed it on and we have our contract address which is what we're going to need for our frames now one thing we need to do here is actually prep our nfts so we need to Lazy mint our nfts here to our contract so I'm going to come over to the nft tabs here on the left and we're going to you can single upload and you can basically choose a name and image and add descriptions for all the nfts that you want to add to your contract but I do have some metadata already built so I'm going to do a batch upload here and I'm going to grab the Json files of the metadata for those nfts drop them in here you can see that I have 15 nfts that I'm going to upload I'm going hit next and I'm going to just reveal them upon mint you can do a delayed reveal too and have a different image and reveal them all at once if you choose to do so I'm going to upload these 15 nfts here we're going to get a transaction here that we need to confirm so we'll confirm that and there you go we now have our nfts lazy minted to our smart contract you can see the owners of it are these null addresses here but as people claim the nfts they'll be sent to the owner's wallet next thing we're going to do is take a look at engine so if you haven't used engine before we'll actually throw a guide and a tutorial video video down in the description below you can follow that guide and tutorial on how to set up engine how to set up your own instance of engine but basically what we're going to do here is we need to come to our engine so over here I have a instance of engine running here and this is basically going to be our HTTP backend where we're going to make our mint API requests to an engine is going to take care of all the blockchain transactions uh behind the scenes for us now the one thing that we need is a backend wallet and this back-end wallet allows us to perform blockchain actions on behalf of whoever is claiming the nft so essentially what we're going to be doing is this backend wallet here will have some funds in it so this is my backend wallet here I have some funds in it and when we make this API call to engine it's going to say hey this wallet here go ahead and mint a new nft but send it to this wallet address and that wallet address add will be the wallet address of the person the forecaster account of the person who is minting the nft now we are going to need this wallet address here uh because we're going to make sure that our nft is only claimable from this wallet address we only want our backend wallet to be able to call the function the claim function on our contract and so that way no one can go directly to the contract and claim these nfts for themsel but of course you can configure your nft contract the way you want maybe you want people to be able to come manually into the contract and Min the nft however you want to configure it you can do it that way this way that I'm doing it is only so that the N so that the nft can only be claimed directly through the forecaster frame and the only wallet that should be able to Mint it is this backend wallet here once the request is made to it so if I take that backend wallet I come back to my contract here I need to set up my claim condition so on the left hand navigation there's this claim condition here and we're going to add a phase and we're going to do allow list only because we only want to allow that again that backend wallet to claim an nft and what we need to do here is you can name the phase when it's going to start how many nfts are going to be in here so we can say 15 uh they're going to be free and what we're going to do here is edit the claimer snapshot so when you open this up here you can download an example C CSV file which will allow you to set up the allow list and I'll open up an example right here so right over here I just opened up this uh CSV file file in vs code here and you can see this is how we need to set it up the address that we're going to allow list to claim and then the amount that we want to be able we want to allow that wallet to claim so in this case 15 would be the max for our back-end wallet which is this address here and this is what we're going to give to third web so we come back over here we're just going to take that file and again this is that that example snapshot right over here we'll just take that file drop it in we can see that it's our wallet address Max CL claimable is 15 and then the price and currency is just going to default to what we have set out over here so I'm going to hit next so again the price and the currency will default to these here if you have them at default you can edit those if you want specific uh currencies and certain amounts to be able to claim but again we're just going to make it free to claim and once all of that is set we're going to hit save phase we'll have to confirm this transaction here once that is successful there you have it we are done now with our smart contract for our nft that we're going to allow people to claim in our frame now the next thing I want to go over is just a little bit about what frames are so again frames uh we can look at forecaster documentation here and we have our standard frame here or standard OG frame that think of it as when you post a link to like social media or anything you normally get the metadata of the link along with like an image and those are all stored in the uh the in meta tags in the head tags of your HTML file now frames kind of takes that same information what it'll be able to do is create a frame out of that and what we'll also be able to do is add things like buttons and we'll be able to in a way create our own little application within that frame so if we go to the frame specifications here you can see we can create a frame which shows an image and a button and when they hit the button we can actually toggle what is shown in the kind of the frame thumbnail or image section of the frame we can also add buttons and depending on which button is pressed we can navigate the user through an an application like UI where they can answer polls we can hit buttons to open certain pages we can also make buttons in this case to Mint nfts and we're going to be able to create that again all with the creating metat tags within the head section or the head tags of our HTML down here you can see constructing the frame it requires three main things we're going to have to set up our meta tags like this here we're going to need an FC frame an FC frame image and an OG image as well too this is just the fallback for if the frame isn't supported this is kind of like what you would normally see in your social media post on top of that though we do have some optional properties here that we're going to be using like a post URL a button as well you can also add input text areas if you wanted to do like a form or something like that so again with all of this we're going to be able to add these little meta tags into that head tag of our HTML file and be able to build out our custom forecaster frames using this now on top of third web's engine we are going to be using something called Nar and we'll be using nar's API to one validate the message that we need in order to interact with buttons and everything on frame and you can also use this to create unique features and everything for your frames you can check if a user has followed you you can check if a user has liked or recasted certain cast so you can do a lot of creative things in here we're not going to be doing that in this video we'll make a video later on for those things but what we're going to be doing here is looking at the frames API here under the under that the validate which is going to validate Val a frame action against the forecaster Hub and this is going to be an easy API call here that we can create to again to just validate the message that we need in order to create a action on the button so you'll have to grab an API key from Nar We'll add a link down in the description below where you can grab your very own and on top of that again we're going to be using a third web engine so if you don't have an instance of engine you can create a managed instance here where you can sign up it's $99 a month or or you can host your own instance of engine connect it to the engine dashboard here by importing it and you'll be able to use the tools and follow along with what we're doing so we have all of that set next thing we're going to do is build out our project here so I'm going to open up my ter so in my terminal here we're just going to create a new Next app so I'm going to run MPX uh FF frame so I'm just going to run npx create next app and I'm going to name this project F frame nft in here we are going to use typescript in this tutorial so I'm going to say yes I'm going to say no to the es lint no to C uh tailn CSS yes to the source directory we're not going to use app router in here and I'm going to say no to customizing the default once that's done we'll change into our project folder and open this up in our code editor first thing we're going to do here in our source folder we're going to create a new folder and we'll call this config and in that we'll create a new config.sys and in this [Music] config.sys and we're going to store our API key in an EnV variable here so we'll just say uh this should be API key API key there we go we're also going to have our contract address which will store in our if I can spell right here contract address so this is going to actually be a next public and it we'll say contract address we'll also need our host URL which is something that we are going to need to provide we're also going to use our host URL which we are going to use also throughout our application when we're building out our frame so we need the URL that we actually Host this frame on then we're going to have our third web configs here we're going to have one uh for our chain ID this is going to be the chain that we have our contract deployed to and we need to make sure that we get a number we're going to get the number of the chain ID that we post into ourv variable EMV file here as well so our environment variable next public chain ID then we need a few things for engine and engine we need one our engine URL which uh we are going to do process. env. thir web engine URL we're going to need our backend wallet which will be our third web engine wallet and then we're going to need our access token for engine as well which we're going to store in our third web engine access token so now that we have our config here set up we're going to start building out the basics of our frame here so in our files if we come down into the pages folder here we're going to we're going to go to theore do. TSX file so in this documentor do. TSX file again this is where we're going to add those meta tags into the head tag here so let's just uh open up this head tag here and inside of that we're going to add our meta tags so if we go back to the frame documentation here we have our required properties which we need these three keys here and those are going to be our metat tag proper ities so the first one is FC frame so coming back to our code editor here in this head tag we're going to set the metat tag property to FC frame and the content is going to be V next so if we look here again we can set the uh release date but the only valid version right now is V next next we need to do is set the frame image and it has to be the aspect ratio of 1.19 by1 or a 1x1 aspect aspect ratio so in my code Eder here I'm going to in my public folder just drag an image that I have so I have this image right here which is a 1.91 by1 aspect ratio here and I'm going to create a meta tag for that with the property of FC frame image and we're going to set the content to that image so it's going to be our if we go to config oops. host URL and then it'll be slash and we have sample image.png so sample image.png and we'll just import our config here and make sure we close off this meta tag here come back here and then the next thing we need to do is also set an OG image as well which is going to be the same thing we're just going to give it the key of the property of this OG image so we come here let's just copy this paste that and then this is going to be uh OG image and it will make it the same image but if you want to make it something different you can make it something different here cool so the next thing we're going to do is add a couple more properties here from frames we're going to add the post URL this is going to be the URL for our API request to our nft and then we're going to add a button as well a button as well and you can see here you can contain um 0 to four buttons so we're just going to name the index of the button here that we want it to be and we'll go back here to our code editor so we're going to add a couple more meta tags here and this one's going to have the property oops of FC frame and then post URL we'll give it its content and then the next one is going to be have the property of FC and make sure I spell that right frame and it's going to be button and then we're going to say index of one and then this will have a Content as well so the button here we're going to have it say mint nft so we'll just say mint nft this will be the text that shows on that button and then the content for our post URL here is going to be again the the pathway to our mint API so this is going to be our URL so we'll say config do host URL and it will be slash and we're going to put this in our API folder and then we're going to call it mint right and then the last thing we're going to do is we're just going to add a OG property metat tag here so property and then this is going to be OG and then we're going to give it a title and this content here is going to equal we'll just have it say uh third web tutorial YouTube tutorial and then we'll say uh foraster frame cool so again these are going to be the components of building out a forecaster frame it's these meta tags within the head tag of our HTML file and what we're really doing here is setting our frame setting our frame image here setting our frames post URL and then setting our frame to have a button which is going to call that post URL and mint our nft for us now if we take a look back at our example frame again this is going to be the image this is going to be the button here so let me just load this again that says mint nft you can see the next frame what happens is when we hit that button it's going to call our API to Mint our nft so again we take a look at the example frame here that we looked at earlier we have the frame button which has the text of mint nft we have the image set up and again you can make multiple buttons and everything input text Fields if you wanted to with those frames now this acts just like again if you had one of those posted a link on social media this link here up top over this image if we click on it will still bring us to our actual website that is linked to this now now I only have some text here that's showing so what you can do is actually build this on top of your existing web app or you can build out your own little web page here that you want to people to be redirected to when when they actually click on the link and get redirected to the URL of your actual web page here so in here I mean we can create one we're just going to create a new page here we'll create a new file called mint. TSX and you can create your own little uh page here of whatever you want to display or your own web app uh we'll just display a H1 header here that says third web engine forecast or frame but again this is where you can build out your own page and and everything when someone actually clicks that link on forecaster it'll redirect them to this and we'll set it up here next thing we're going to do is build out a file that we can update what our frame is going to look like because our frame is going to update our button here so we go back here come back to our validator let me just load this one more time again when we hit mint nft right it mints the nft and then the text of our button here actually changes and tells the person or the user if it actually went through or not uh let me just refresh this page here real quick load this so again when we hit mint nft um once the nft goes or the mint goes through successfully it says congrats the nft was sent to your wallet so to update that text what we're going to do is create a new file that we can compute and change the things like the text button we can even change the image we can change whatever we want in this Frame here uh depending on what happens through our through our little workflow of our frame so coming back here I'm going to create a new file in my source folder here call this utils and then I'm going to create a new file within that this one is going to be called compute html. TS so in this compute html. TS file this is where we're going to take in our compute HTML parameters we're going to take things like content and image path and we can change what we want our frame to look like so maybe we want to change the image path to something else when someone hits a button maybe you want to change the content of the button to show different text which what is what we're going to do here in this case so again you can configure this to change how you want uh and we're going to be using again this compute HTML and passing it the image path and content so that it can make the necessary changes depending on the interactions that someone makes on our forecaster frame and the next thing we're going to do is we're going to build that API request to Mint the nft key now we do need to do a couple things first uh one we need to validate that message again when someone interacts with that button to take action to Min the nft we're going to be using Nar for that and then we need to create our API request to third web's engine to Mint the nft so in my files here I'm going to come into my source folder here create a new folder I'm going to call this classes and in classes we'll first create our our new file here we're going to call this warcast TTS and this is where we're going to build our Nar API request to validate the message so in here we're going to create a variable we'll call this API URL this is going to be uh api. nar.com then we're going to create our schema for our validate message so we're going to create a validate message schema which is going to equal a z do a z. object and we're going to create our object here um what I'm going to do here is open up my terminal and we're going to run yarn ad zld here awesome and then we're going to import that and this is where we'll give our structure of our validate message here which is going to look like this so we have validate our action and we're going to have our interactor which is going to give us the FID which is a unique identifier that forecaster uses let me just fix this here uh we have the username which is your username for forecaster and then you have your custody address which is going to be the address or the wallet address that you get when you create an account using forecaster we also have the tapped button here uh which is going to give us the oops the Q index so what we'll do here is we'll create our own class so we'll call this warp cast and in this class we're going to we're going to make our API call to Nar to validate the message so over here we're create a private static get which we're going to compute our default we say default header for our request here and this will return our what our header would look like so we're going to say API key will be our config do Nar do API key make sure we import config here and then we'll have a content type which will be application Json we'll also make sure our API key is as a string and then this way too if you wanted to again make more requests uh using Nar to check things if a user has liked your cast or if a user has recasted your cast uh you can use that here and you can make multiple calls within here uh again all we're going to be doing in this tutorial is validating a message so in here we'll create our public static async function here for validating our message which will take our message bytes which is going to be a string and we're going to make our call to our URL so we'll get our URL um so we'll create our URL and what this will look like is if we come back here we'll go to Nar again under frames and validate frame here we're going to be using this here which is the V2 forecaster frame validate so again we'll take our API URL from up here we'll say slv2 forecaster frame validate we'll get our response here which we were going to await and fetch we'll use our URL we'll give it our headers here uh which is going to be our warp cast. compute default header we have our method here which is going to be a post and then we have our body here and what we need to do here is provide it with our message our message bytes so we'll do uh St Json stringify and then in here we're going to have our message bytes in HEX and we're going to provide it with our message bytes then we'll get our data here we'll await our response and we will get the Json then we will get our response and parse through and then parse through our response get our data and then return our data and our action cuz again remember um all we need from this validate message schema which is what we're going to parse through here is our action here um right over here and what we're also going to do from this validate message is get the custody address and this is going to be the address that we are going to Mint the nft to when someone interacts with this Frame next we're going to work on our engine here so in our source folder here I'm going to create a new folder called API and in that API folder I'm going to create a new file called a fetcher. TS and this is what's going to this is going to be our uh mint request here to Mint our nft so we're going to create a new mint response schema here make sure we import that and then all our mint response schema is going to be is we're going to get back a result and in that result we're going to get back a cued ID make sure that's a string then we're going to export our HTTP request to Mint so we'll call HTTP mint uh it's going to be an async function here we're going to take our receiver which is going to be a string of the address that we need to send the nft to and in here we're going to make our request to engine to Mint our NF T so if we come back to our engine dashboard here right over here now this is going to be dependent on the contract and everything that you deployed but you can take a look at the Explorer tab here and I'm going to scroll down and I deployed an nft drop which is an erc721 so that's what we're going to be using in this tutorial example but if you deployed an ERC 1155 or an ERC 20 you'll choose the corresponding type of contract that you deployed but in the ERC 721 we're going to look for the Post request to claim to which is this one right here and you can see right here this is what our URL is going to have to look like uh we're going to have our contract uh SL contract slash the chain that we're using slash the contract address SL erc20 uh 721 and then SL claim 2 so with that we're going to come back to our code editor here we're going to get our response here we are going to await and fetch oh I just noticed that I spelled contract address wrong here so we're going to get our um URL here again it's going to be our engine URL SLC contract slash the third web chain ID slash the contract address which is going to be the contract address we deployed SL erc721 SL claim 2 now in here we have our method which is going to be post we have our headers here this is what we need to so this is going to be um content type application SL Json we have our authorization which is going to be a bearer and we're going to provide it with our third web access token or engine access token and then we're going to have our backend wallet backend wallet address which is going to be our third web engine wallet then in our B we need to provide it with the receiver of the nft and then the quantity uh that we're sending them so right here we're going to put in json.stringify and we need to give it the receiver who is going to be the receiver and then we'll just do two lowercase here make sure we lowercase our address and then we have the quantity which we're going to provide it with a string of the quantity which is going to be one then in here we're going going to get our results which we are going to await our responsejson and we're going to return our mint response schema and we're going to parse it for our results so again we want the results here and we want to make sure we get back our cued ID so that is going to be our again our request here to um and that is going to be our API call here to third web engine to Mint our nft next thing we're going to do here is in our classes we're going to create one more file here we're going to call this third web engine. TS and we're just going to create a quick class here for Thro web engine which is going to call the mint here the mint function the mint request that we just created so we're going to create a class called third up engine we're going to create a function called mint which is going to take the receiver and we're just going to call the HTTP mint pass it a receiver and then get get returned our response here and now that we have that we can now create our mint API here so in our Pages folder under the API folder here we're going to create a new file and we're going to call this mint. TS and for this we're going to create our request body for warp cast schema here which is going to again be our trusted uh which is going to give us back the message bytes which we are going to have to validate uh let me just import uh we're going to use next API request and response and then we're going to export uh default async function for Handler here which will be our request which will be a next API request and our response which will be a next API response now we're also going to we're going to install yarn add nextjs cores here close this and the first thing we're going to do is await next cores and oops we'll import that and this is going to have our request and response and the methods we're going to say get and post oops and we'll set the origin to any here we'll check if our request method is a post method if it's not a post method then we'll return a status 400 and saying that is the invalid method then we'll run a try catch here and then for the catch what we're going to do is we don't want to post an error on the frame or anything uh but what we'll do is we'll just change the text at the button saying that there was an error and something went wrong so what we'll do here is we'll return our response of status 200 uh and what we're going to send here is we're going to use our compute HTML and we're going to provide it with an image path which is going to be to our sample image still so if you have another image that maybe you want to have an error image or something you can put it in here but I only have one image so I'm going to just send it to the same sample image here and in the content this is what the button is going to say we'll just say uh something went wrong please try again now in the try here what we're going to do is one validate the message and then two once the message is validated we can get the custody address and then mint the nft to that custody address so we'll get our trusted data here which is going to be our request body warp cast schema which we're going to parse through and get our message bytes here then we're going to create a function called action which is going to await and we're going to use our warcast validate message and we're going to pass it our trusted data. message bytes what that is going to do is again call our warp cast here and call the validate message function which is going to use Nar to validate the frame which is going to use Nar to validate the message once we have the message validated we're going towait and say uh third web engine and we're going to Mint and we're going to mint using the action right cuz what we're going to get returned here is the this here this action what we're going to get returned here is this scheme message schema here so in action again we can get the uh interactor and the custody address so that's what we're doing here is we're getting action um from here we're getting the interactor and then we're getting the custody address and with that custody address we can then mint the nft called the mintun function which is our third web uh class here calling this mint function which is going to call the HTTP mint function that we created here which makes the request to third web's engine to Mint the nft using that uh address that we provided it and then from there we're going to return a response of status 200 and similar to how we did the catch what we're going to do is compute our HTML here provide it with the image path maybe we can do a success image or something like that and then we can just say uh congrats you have minted a new nft and there you go that is our frame now in order to actually post a frame on forecaster or warcast you do have to publish this Frame get the URL and put the URL into your cast now you do like we did earlier here you can use this Frame validator oops you can use this Frame validator and we'll drop a link to the this down in the description below but you can just put in the URL to your frame here and you can test it out in here make sure it works prior to actually casting it out so the next thing we're going to do is actually deploy this using ver cell we'll go through really quick how to set up everything with for sale like your environment variables and we'll test out our frame here in the frame validator so coming back to our application here I'm just going to open up my terminal and I'm going to run yarn build really quick just to make sure everything's good all right then I'm going to run verell and yes we're going to set up and deploy this I'm going to deploy it to my account here uh is it an existing project no uh we're going to name this F frame nft and directly where it's located no and we can see that is and expecting in building and I just remembered one thing uh right when I hit um deploy to forell uh we need to set up our next config file here so uh we're going to come to our next. config.js actually I'm going to rename this uh just tojs here and we're going to set up our next. config file here to have the redirect our source we're going to set our source and then we're going to set the destination here to the slash mint to redirect uh users to that SL mint page where again you can create uh your page however you want to make it but that's what what people will see if they actually go to the URL uh then we'll send react restrict mode to True here uh so you can do that if you're going to be redirecting again setting that destination to that mint. TSX page um and let me just redeploy this again one more time so run for sell and let's just open this up and take a look at the inspe Vector so right here you can see that uh our build is going through and while that's going through let's set up the environment variables here for our application so coming back to our project here uh I'm going to inverell go to the settings tab here I'm going to go to environment variables and in here we're going to have to set up the environment variables that we had in our if we take a look uh our config file all these environment variables here that we're going to need we're going to provide it to our environment variable there so we're going to get Nar API key we'll then add another we'll get our next public contract address now next public of course is saying that this is going to uh expose the values to the browser uh so you do want to make sure that you preference next public to variables that you're okay with exposing uh then we have the host URL then we have our chain ID then we have our third web engine URL we have our third web engine wallet and we have our third web engine access token so what you'll do here is you'll fill out all of these values for your environment variables here you'll need that in order to when you publish your frame that we have all the proper variables that we can use throughout so all you're going to do is get your environment variables here put in the Valu so get your NR API key your next public cont contct uh your contract address uh your host URL wherever you have it uh hosted to and then your chain ID you can get the chain ID if you don't know what it is you can go to third web.com chainless and you can uh search your chain ID so like in our case my case here I used a base sapoia test net and in here you have all the information you can just get the chain ID here and then that's going to be the chain ID that you use uh for that variable and then you'll do the same thing for your engine URL your engine backend wallet so if you are using engine you can get your backend wallet over here under the permissions you can get access to your access tokens just create an access token which gives you API access to your engine instance and that's you just fill all of that in save it um I'm going to do that now and then I'll come back in my deployments tab here in just a bit all right so I came back to our deployment here for our frame you can see here we have a preview which is our third engine forecaster frame here which is that text that we added I'm just going to push this to production here and get a URL for it which is going to be this guy right here so we're going to promote to production here and then I'm going to take that URL go back into my environment variables and add that last piece to in and then we'll test out our frame so there we go we can see our if we click on here it brings us to if we look at the URL here the F the FR frame nft . for.app mint cuz again we're looking at the regular web page oops the regular web page version of it which is just going to show our H1 header here that we got so if I copy that URL here we're going to come back to our settings one more time set the environment variable and I'm going to set it for our next public host URL and then we'll jump back into the frame validator to test this out so we're back in our frame validator here you can see we just got to put in our frame URL so I'm going to put in my FR Fram nf. forell doapp here we're going to hit load and you can see here that we're loading out our frame a preview of it which we have our image here we have our mint button you can see it's currently rendering out the URL here and you can see here the next frame is going to call our API mint to Mint the nft so what we can do here is you can see here that all of our things are passing we have our frame we have our image we have our post URL we have a button here which is of title NF uh mint nft it's a post type and we have our OG image and our OG title here as well so we can test this out let me actually grab uh bring up our engine dashboard so we can look at it so we should see our engine requests come in right over here so what we'll do here on our frame validator example is we'll mint an nft so we'll hit mint nft the button here on our frame we'll wait give it a moment and you can see here if we come back to our transactions you can see that our transaction was just sent 11 seconds ago it's been mined and if we take a look at our nft contract I think this is it here yeah right over here you can see that we now have that nft sent to us and it is the wallet ending in 83a which is my forecaster wallet we can try it again we'll hit mint nft we'll come over to our third up dashboard that way this time you can see it there you go the transaction pops up it's sent engine is handling everything for the blockchain transaction behind the scenes once that's been mined we'll give it a second here we can come back to our contract here and nft number two should also be minted there you go to the same wallet address and there you have it you built your own nft minting foraster frame using third web's engine you can build a whole bunch of cool things utilizing frames and in Tatum with using third web's engine you can do a whole bunch of onchain actions interact with the blockchain as well so I hope you folks enjoyed this video you found some value in it if you did give this video a thumbs up hit that subscribe button and don't forget to turn on your notification Bell so you don't miss out on more 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 to our support team you can open up a ticket and they'll be happy to help you out and answer any of your questions but again I hope you folks enjoyed this video and until next time see [Music] [Applause] [Music] you

Channel: thirdweb

Views: 4,245

Keywords:

Id: 771Sym9FgXw

Length: 46min 56sec (2816 seconds)

Published: Fri Feb 09 2024