How to build a Farcaster Transaction Frame

what we're going to be building is our very own transaction forecaster frame so I'm actually using the frame validator here in warp cast which allows us to test our frames without to actually cast this out so this is what we're going to be building right over here which is a frame and it's going to have a button here that is going to allow us to call a transaction to our smart contract and mint this nft directly to our wallet so before we do that I'm just going to show you the contract here I have an ERC 721 smart contract here you can see this is on the optimism main net I have one nft right now which is one I claimed for this demo I'm going to go back to our frame validator here I'm going to hit mint nft so what would appear here is a transaction window that is going to show us hey look uh we simulated our transaction here this is the domain it's coming from the chain that it's on the account that it's going to uh send the nft and interact with so right here we're going to continue to our wallet this is going to be my metamask wallet you can see here uh it brings up my metam mask I have to pay the gas for the transaction I'm not charging for this nft you just have to pay for the gas to actually mint it we'll hit confirm here there you go transaction was sent our transaction will be confirmed shortly uh we can view the status here or we can return to feed which will just bring us right back here to our frame validator but if I come on over to my smart cont contract here you can see there we go we now have a second nft that was just minted uh to the same wallet address right over here and again this is what we're going to be building we're going to be building a transaction frame allowing a user to put up a frame and allowing people to then claim an nft from it hey everyone Sean watas here back with another video tutorial and in today's video we are going to be building our very own forecaster transaction frame as you saw in the demo in the beginning of this video we're going to be creating a frame FR with a simple mint button that allows a user who sees a frame to claim an nft directly from the frame itself now an overview of what we're going to be doing in this video we're going to first deploy ourselves an ERC 721 smart contract that we are going to use as the nft to allow users to claim we'll then build our very own next project where we'll utilize third web's connect SDK along with coinbase's onchain kit to build ourselves a transaction frame for foraster we'll then go through the simple deployment flow on how you can deploy this to something like versel and use forecaster tools like the frame validator to test them out now some things to mention before we start this video through testing out creating transaction frames they are a little bit buggy on test net now we will walk through how to deploy the complete smart contract on a test net but the smart contract that we actually use within our frame will be on the optimism main net now I always suggest that you start off by deploying your smart contracts to test net just to make sure you do everything properly the first time around then you can redeploy the smart contract to mainnet optimism's gas fees and deployment fees are fairly cheap so it's not too expensive to deploy your own main net on a supported chain for forecaster like optimism or base with all of that said let's jump on the computer here and let's deploy our contract so I'm going to head on over to third web's dashboard and connect my wallet I'm then going to head to the contracts tab here here and deploy a contract now from here we're going to scroll down just a bit to this nft section and we're going to deploy ourselves an open Edition ERC 721 now what an open Edition ERC 721 is it's a standard ERC 721a smart contract but all we're going to be doing is uploading an individual metadata for nft and all the nfts will share that same metadata so we won't have a supply cap or anything to our contract it is an open I condition so anyone can just come in and pay for the gas to Mint the nft but all nfts again will share the same metadata this includes the media title and the description of the nft this right here is what we're going to be using in this tutorial but feel free to deploy any of the contracts you want to use within your transaction frame now I'm going to hit deploy now here we're going to give this a name so we'll just call this a transaction uh frame nft we'll call this uh TX frame for for the symbol uh we'll upload an image here you can give this contract a description as well and then coming down to the bottom you're going to select the network or chain you want to deploy to now if you are doing this on Main net you'll have to use a chain that is supported on forecaster so you could use something like ethereum optimism or base now for this deployment in this tutorial I'm going to deploy to a test net I'm going to deploy to the op sepolia test net here but when we go into actually building out our transaction frame I am going to use the smart contract I already have deployed to the optimism main net again like I mentioned in the beginning of this video testing out transaction frames on a test net was a little buggy so we're going to be using a main net contract when we actually build the transaction frame but to walk you through on how to deploy the smart contract I'm going to be using a test net so again we choose our test net here I'm going to hit deploy now we'll get a window here that pops up saying we have to pay for the gas to deploy our contract we'll hit confirm we'll get one more transaction here to confirm this is to set our nfts metadata then we're going to finally get a signature request here to add this contract to our contract dashboard so we're going to sign that once that's been deployed you'll be brought to your contract dashboard here and you'll have to set up a couple things for this contract so we're going to come on to the leftand navigation here and I'm going to come over to the nfts tab and we're going to set the nft metadata so again what I'm using in this tutorial is an open Edition ERC 721 uh there's no Supply cap to this smart contract but again all nfts are going to share the same metadata so I'm going to add a name here I'm just going to call this uh transaction frame nft select an image you can add a description you can add some Advanced options like image URL or animation URL but once you set your metadata you're going to just hit set metadata or nft metadata right over here you're going to get a transaction to confirm and save this so right over here we're going to confirm once that is set the second thing we need to set up is our claim condition so on the left hand navigation again we're going to head right under the nfts tab to the claim conditions Tab and we're going to set the claim condition for this nft now you can select different claim conditions here we're going to select public for this now if you do want to charge for the nft you can put in the price right over here but for this tutorial I'm going to leave it free the user just needs to pay for gas in order to claim the nft we aren't limiting this nft drop we're going to keep it as unlimited and a wallet can claim as much as they want as long as they pay for the gas so we're going to save this here as our claim condition I'm going to hit save phase we're going to confirm that transaction there and there you go we now have our claim condition set and our nft metadata set and that does it for our ERC 721 smart contract again this example here was deployed on a test net I am going to be using a main net contract which is this contract right over here that we're going to use to build our transaction frame out again test net was just a little buggy when we did some testing and building out of the transaction frame uh but on Main net it works just fine and that's what we'll be using and with all of that said let's now build out our transaction frame so I'm open up my terminal here and I'm going to create myself a new next project so we're going to run MPX create uh next app and I'm going to call this one transaction frame now for our next project uh we are going to use typescript I'm going to say no to es lint no to tell when uh yes to Source directory I'm going to say no to app router for this and I'm going to say no to customizing the default import Alias here so we'll create our project here then I'll change into our transac action frame project and the next thing I'm going to do is install third web now I'm going to change into my next project here and then I'm going to use uh yarn and add and we're going to add third web and once that is done we can just open this in our code editor and we can start building out our transaction frame what we just installed was third web's new connect SDK so headed on over to third web's documentation here this will be linked down in the description below as well well you can see installation here you can install using mpm yarn pmpn or button here and you just need to install third web and this is what we're going to be using along with coin bases onchain kit uh to build out our transaction frame uh onchain kit here from coinbase gives us some nice typescript utilities here that we can use for forecaster and for frames so if we click on frames here we'll be using some of these here to build out our transaction frame so coming back to my code editor first thing we're going to do is build out our frame now if you never built a frame before essentially we are going to be using meta tags within the head tags of our application here and if we come into our source folder and I come into Pages I'm going to head over to the index. TSX page here and again these metat tags right over here is what we're going to be using to build out our frame I'm going to delete everything in here here I'm not going to use any of this within our app and I'm going to delete everything within the head tag as well I'll get rid of this fonts here and we're going to just get rid of all of these Imports here so within the head tag here we're going to create some meta tags now we're required to have a few meta tags here the first one is going to be the first one we're just going to say uh property here is going to be our OG title this is going to be the title of our frame here uh we can set the content here and what I'm going to do is uh just right outside of here I'm going to create a title variable here and set my title to transaction forecaster frame on optimism we're also going to create a variable for our frame image URL which is going to equal we'll make one more variable here we're going to create a variable for our host URL which is going to equal we're going to save this in our environment variables so we'll just say next. env. uh next public and then host URL and then for our uh frame image URL this is going to be our poost URL and then slash we call this nft image.png so I have an image for my forecaster frame which I'm going to drag into my public folder here so right over here I have my next image.png which is the same image as our nft uh this is going to be what displays in our frame and that is what we're setting the frame image URL to we're setting the title just for the title of our frame here and we're setting the host URL to the URL that we are going to deploy this transaction frame to uh once we deploy it so for the metat tag we need an OG Title Here the content for this is going to be our title we also need to specify now that this is a forecaster frame so we're going to get a metadata or a meta tag and we're going to get uh property this is going to equal our FC frame we set this by saying content is V next next we're going to set our image for our frame so we're going to again get some meta tags here we're going to set the property of this to FC frame image and we're going to set the content of this to our frame image URL now because our frame or our image here is a 1ex one ratio image we're going to set the ratio by default I believe the forecaster frame is a 1x19 uh so by default it's going to crop to that aspect ratio unless you change it so you can change it here by creating another metat tag setting the property here to FC frame image and then aspect ratio and then setting the content of this to one by one uh and then you can specify the aspect ratio of the image next thing we want to add is the mint button so I'm going to come back to our frame validator really quick just to show you here so this that is going to the ones that we just created is going to be for the frame image that gets displayed in our frame next we need to add the button down here so we're going to create a meta tag again this one with the property here of FC frame button now in a frame you can have up to four buttons so we're going to say and specify that this is a button number one and then for the content you're going to provide it with the text of what you want the button to say so in this case it's going to say mint nft now we can specify what this button is going to do and we can specify that this button is going to have the action of executing a transaction so we're going to say property here we're going to say FC frame button number one has the action here and then the content we're going to set this to transaction and then finally for a transaction frame we need to give it the target of which this button is going to get the transaction data and execute the transaction so we're going to say meta here uh for this one we're going to say property is going to be an FC frame uh number one and this is going to be our Target and then our Target is going to be our content here which is going to our host URL and then slash API slf frame slop SLG get transaction frame and we're going to create this API in just a moment uh but this is what I'm going to name it right over here so again we're going to provide it with the button say that the button's action is going to be a transaction and then we're going to provide it the target of where it's going to get that transaction data from and that does it for our transaction frame so again when we build forecaster frames we're using these meta tags within the head tags here of our project now I'm just going to add a header one here and say that this is a transaction frame uh and this is just so when we look at the web page or load the web page we can just make sure that everything is loading properly here now that we have our frame built we need to build out this transaction now we're going to be utilizing third web again to do this so I'm going to open up my files here I am going to create a new folder and we're going to call this folder UTS and in this UTS folder we're going to create a file called constants TTS and in this constants TTS we are going to first get our third web client so we're going to be using our third web client so we're going to have to export a uh variable here called a client which is going to equal our create third web client which we are going to import from third web and then we are going to provide our create third web client here with a secret key uh we're going to be using this client here on the backend side so we're going to provide it with our secret key so we're going to actually store this in our environment variable so we're going to say process. EMV uh dot we'll say third web secret key uh then we'll also stay as a string here then we're going to get the chain so we're going to export another variable here called chain and to set our chain we're going to use the Define chain here from third we and we are going to define the chain that we are going to be using so depending on the chain that you deployed your contract to you're going to put that into here now I use optimism and I'm going to now and I'm going to import op I'm going to import optimism from third web SL chains here and I'm going to provide Define chain here and I'm going to say optimism there you go so now whenever we need to by our chain we know that optimism is the chain that we are using and then finally we're going to export our ERC 721 uh contract address and again this is going to be stored in our environment variable as well and that does it for our constants that we're going to be using throughout our uh transaction frame here again we need our third web client uh the chain that we are interacting with and then the contract that we're interacting with here now I'm going to create this EnV file here and again we are storing these variables here into our environment variable so if you deploy this transaction frame through something like a versel you'll have to set that up in versel but we'll walk through that when we get to there next file we're going to create is in our utils folder again I'm going to create a new file and this file I'm going to call TX frame for transaction frame. TS and what we're going to do here is when we build out our transaction for our frame we need to provide the frame with the encoded data of our contract call so what I'm going to do here is export cons and we're going to say create a function called get erc721 prepared encoded data this is going to be an async function and we're going to provide it and we're going to provide it with a wallet address that we need to send the n of2 so to create this function here we're first going to get the contract and we're going to get this contract using the connect SDK from third web so we're going to create a variable here called contract we're going to use get Contract here now for get Contract we're going to provide it first with our client which we can provide it with our client from our constant file we created we then need to provide it the chain which we can also provide provide from our content file and then the address of our contract so we're going to say contract and this is going to be our ERC 721 contract address variable again all from our consents file there once we get that contract we can now prepare our claim function call and we're going to create a f variable here called transaction which we are going to prepare again our claim function now because we are using a pre-built contract from third web we do have some extension functions that you can use in the third web SDK and what we're going to do is call the claim 2 function here what we're going to do is call the claim 2 extension and we can import this from import this from third web slash extensions slash erc721 now this claim 2 function here the we're going to prepare the claim function function and we need to provide it with a few things we need to provide it with the contract that this is going to be called on which is our contract that we got right up here we're going to give it the two or the wallet address that it is going to be sent to uh in this case it's going to be the wallet address that we pass through to this function here and then the quantity that is going to be claimed and all we're going to do is set this to a big in of and then give it one because you're only going to claim one nft when you click the button but once we have prepared the claim function we can encode this prepared transaction so we're going to create a variable called encoded data and this is going to equal and we're going to use the encode here from third web and give it our transaction that we just prepared and that will give us back our encoded data which we are going to return here within this function and this encoded data here is what we are going to provide to the transaction frame so it knows what transaction it needs to execute we're going to create one more function down here so we're going to export a function here called get forecaster account address and this function here is going to be a function used to get the connected wallet that the user has to their forecaster account and if they don't have a connected wallet to their forecaster account then it's going to default and use their forecaster account wallet so in this here we're going to provide it with an interactor which is what our validated message returns which is what our validated data returns now this interactor here we're going to use uh the frame validation data type from onchain kit so if we come back over here and we go to types here for frame we're going to use this Frame validation data here and within the frame validation data we have um the custody address which is the the wallet address that you get generated for you when you create a forecaster account or you have your verified accounts here and those verified accounts are going to be the uh external wallets that you've verified onto your forecaster account so we'll check this first to see if there's an external wallet that the user wants to send their nft to if not it'll default to the custody address right over here so we're going to provide a frame validation data here and that's what our interactor is going to be so we say frame validation data and we only want to provide it with the interactor and we'll import frame validation data here from onchain kit which I don't believe we installed yet so I'm going to come back to my terminal here and if we look at the GitHub repo here for onchain kit uh you can see we can just install this right here by saying yarn ad at coinbase SL onchain kit so I will install that there we go we'll come back to our code editor here and then we can say at coinbase onchain kit here and that's where we're going to import the frame validation data type so to get the address here we're going to return the interactor do verified accounts now we're just going to say return the first account if there is an account in there and that will be the verified wallet that the user has added if they don't have that then we're going to get the interactor do custody address and we'll just send it to the custody address instead so this here is going to again just get which wallet address we are going to send the nft to whether the user has a verified account like a metamask wallet or something connected to their forecaster account or if we're just going to use the forecaster account itself to send the nft to right and then once we have that Set uh we're going to come back to our file directory here I'm going to create another folder here and we're going to create a folder called classes and we are going to create a new file in there and we're going to create a class for our coinbase kit here so I say coinbase do coinbase kit. TS and in here we are going to export a class and we're going to call this coinbase kit and in this coinbase kit class we have a public static or validate message and what we're going to have to and what we're going to do in here is validate the message that we get from our frame now if you watched our other frame tutorials in the past we'll link those down in the description below essentially when you interact with a frame it wants to validate that the user interacting with it is a valid user and what we're going to be doing in this here is actually utilizing the onchain kit and if we go to the frame documentation here here we are going to be using the type of frame request here and we're going to be getting the frame message and we're going to make sure that it is valid or not and we'll use this again to validate the message for our transaction frame so coming here validate message is going to equal a async we're going to an async function which we're going to use the body of the frame request and we we going to check and we're going to check and see if that message is valid or not so what we'll return is is valid along with the message here and this is going to equal and we're going to await the get frame message from the onchain kit where we provide it to the body and in and then we are going to return is valid or the and the message here now in get frame message so if we come here and get frame message you just need to provide it with the body of the message or the actual frame request now you do have some options here and you can provide a Nar API key now Nar is a tool that we used in our other forecaster frame videos which is essentially an API that allows us to pull some data from forecaster we were able to use this for things like getting cast reactions like whether or not a user has a like or recasted a certain cast but they also have a API to validate a message as well we found that utilizing nar's API was much more consistent when interacting with a transaction frame you don't have to provide it here it is an option but if you do have nart you can use that here just to give you a heads up though nart is a paid service so you do have to be on one of their plans in order to get your API key but if you did have it uh and you did want to use it all you need to do down here here in there options is just provide a Nar API key which you can just store in your environment variable here so again just provide the option with your Nar API key we found it to be a lot more consistent and helpful when building out transaction frames and then one more thing that we're going to provide here in the utils folder we're going to create a file and we're going to call this for I erc721 contract Abi .ts um and in here we're going to get our ABI for our claim function and that's something that we need to provide with the transaction frame here so we're going to export a variable here called our ERC 721 contract ABI and we can get this claim function ABI by coming over to our contract so your contract that you have deployed you're going to come over to sources here and in your source all the way down at the bottom you'll have your ABI this is going to show you the ABI for all the functions of your contract we're just going to find the claim function here so we're going to look for this really quick uh as we scroll through and that's tokens claimed claimer and right over here we have our function and name claim right over here so all I'm going to do is take this ABI right over here copy that come on over here and we are going to paste that in Brackets and then we'll say as a constant here and that is going to be the contract ABI that we provide again for our transaction frame now if you remember if we come back to our pages. index our Target for our transaction frame button here was pointing to this API frame uh op get transaction frame and we're going to create that right over here so in this API folder I'm going to delete this hello. TS file I'm going to create a another folder we're going to call this Frame within that frame I'll create another folder we'll say op for optimism which is a chain that I'm using for my transaction frame and then we'll create a file in there called get transaction frame. TS and now in here we're going to export our default async function Handler which is going to take our request which will be a next API request uh we'll have our response which will be our next API response and let's import that and for this here we are going to first double check to make sure that our request method is a post method so we'll say if request method is not equal to post will return a status 405 with an error message saying method is not allowed then we are going to validate the message from our forecaster frame so again we are going to get back is valid and our message and we are going to await we'll say coinbase kit. validate message and we're going to provide it here with our request body and we'll say as a frame request and and once we validate our message and get we get returned back our if it is validated and the message we will check if it is not valid or there is no message uh we'll return the status 400 saying invalid request but if it is valid and we do have our message then we can continue on but if it is valid then we can continue on through our transaction here so next we're going to get the account address that we need to send the nft to uh and we can do this by getting by using our get forecaster account address function that we created and we're going to provide it with our message. interactor and again with that if we look at our forecaster frame again we're getting back our frame validation data which is going to give us the FID the custody address the verified accounts and what we're going to be doing there is just getting either the verified account or the custody address if there is no verified accounts so once we get the address that we need to send the nft to let's get the data prepped for our transaction which here we are going to await and we're going to use our get ERC 721 prepared encoded data and we're going to provide it with our account address and let's see uh promise oh so we'll just say right here uh await and get our account address so again this get erc721 prepared encoded data function is what we created here it takes the wallet address that we need to send the nft to we get our erc721 contract we prepare the claim function here with the contract the two address and the quantity that is being sent uh we get that transaction data we encode that data here and we return that encoded data and with that returned encoded data we can then return our transaction for our transaction frame so we're going to return our response status 200 with the Json of r one our chain ID which is going to be EIP 155 and then the chain ID of the chain that you deployed to in my case optimism's main net chain ID is 10 but you'll provide it with either your eth or B Bas main net uh chain ID the method that we are going to be calling is a eth send transaction and then the params for that are going to be one uh we're going to provide it with our ABI which is going to be our ERC 721 contract ABI then we'll set the two which is the contract that we are going to be calling this on here which is our ERC uh 721 contract address the data here we're going to provide it is with the data that we just got back here which is our encoded transaction data and then the value that we're sending we're not sending any value with this so we're just going to say here zero and that does it for our transaction frame so again a quick run through we just check to make sure that our transaction that our frame request is a post request uh we check our request PR body here we check if and we run it through our validate message and we get back if our frame message is validated and if it is we'll get our account address again we either get the verified account if not the custody address we then get our encoded transaction data here and we return that as our transaction frame where a user will then be able to go through the mint process of our nft directly from the transaction frame so once that is set you are ready to deploy your transaction frame now in this tutorial we're going to use versel here to deploy it I'm just going to open up my terminal here and run versel we don't have versel installed we'll link that down in the description too once you do all you need to do is run for sale we're going to say set up a deploy here for our transaction frame yes uh I'm going to deploy it to my account here is this an existing project no it is not uh we'll name this project transaction frame uh directory where our code is located uh which is just the main directory there uh are we going to modify these settings no so this is going to deploy here we'll open this up and we're going to have this deploy to our and we're going to have this deployed to for sell now while this is going here I'm going to set up my environment variables so you can just come back to the project that you just deployed um you can see your deployments are running right over here here we're going to go to settings we're going to set up our environment variables and in here you're going to set up your key and values for all the environment variables that you need to provide now these environment variables are going to include your host URL your Nar API key if you are using Nar your third web secret key and your contract address and then you'll just provide the values for those right over there now your host URL is going to be the URL that you deploy deoy your project to on versel or whatever URL that you're going to be hosting your transaction frame on N our API key your third web secret key and then your contract address this is going to be the contract address of the erc721 nft that you deployed so I'm going to fill in these environment variables here once that's done you just hit save and then we'll go back to our deployments so that is done uh you can see here we're going to come back to our deployments here we'll check on it it looks like it's finished and this is the domain or URL here that my project got deployed to so if I open this up in a new tab you can see we have our web page here that says transaction frame and that is because in our index. ttsx file here uh we just have that header one here that says transaction frame um so I'm going to actually take this URL and add that into my environment variable for my host URL so again coming back to your settings environment variable uh you can find your host URL we're going to edit that and we're going to paste that in now I'm going to do this without a backslash here and we'll hit save and there we go so now coming back to my deployments so now we can come back to our transaction frame here let's copy this URL let's head on over to the frame validator so we'll provide the link to this Frame validator it's a way where you can test out all your forecaster frames you can test them out before actually casting them so in this Frame validator here we're going to paste in our new project URL here we'll hit this reload button here on the side and looks like we have a error here for our frame image so let's actually double check this here we have our frame image URL then we have our our frame image here sorry for frame image uh not the property but the name for the meta tag is supposed to be set to FC frame image not property uh same thing goes for the aspect ratio as well so it's going to be name not property so let's fix that and let's actually just redeploy this and I'll come back to the frame validator once this is deployed again through verell all right so our redeployment of our transaction frame just finished we'll come back to the frame validator let's hit that refresh button again there you go you can see our frame is now working we have our our image here you can see all the properties here you can see that everything looks good our aspect ratio to our button to our post URL all of that looks good and we have our mint nft button here so again if we take a look at our contract uh let me just go back to our overview page or let me see just nft page here we have a supply of uh claim Supply right now of two so if we come back to our developer our frame validator here we hit mint nft you see here oh we got an error our simulation shows that this transaction not enough eth oh got it uh let's change our wallet really quick um I'm in a wallet that doesn't have main net funds in it there we go so switch my wallet uh this wallet should have funds in it now so let's mint the nft you can see we get the review warnings our simulation shows that this is a transaction it is from a frame that has not been reviewed yet uh this is again we are just testing out this transaction frame here uh but you can see here it shows our domain uh it shows the chain that we're claiming the nf2 which is optimism and it shows my wallet address which is my metamask wallet address here and we're going to hit continue and you're going to see here it's going to continue to wallet it will then open up a transaction again we need to just pay for the gas to Mint the nft right now gas on optimism mainnet it's going to cost us 2 cents so we're going to hit confirm transaction was sent and we can view the status or we can return to the feed here and if we come back to our smart contract you can see here claim Supply is now three and we just claimed ourselves a third nft and there you have it we built our very own transaction forecaster frame utilizing third web and utilizing coin bases onchain kit you can see how easy it is to build and deploy your own transaction frames through forecaster all you need to do is deploy a pre built contract through third web set up your nfts and you can then build out your transaction frame and users can now claim nfts directly through the frame so if you folks did enjoy this video don't forget to 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 videos just like this if you need any help or support we'll drop a link down in the description below where you can open up 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 can't wait to see what forecast or transaction frames you folks build and until next time see you

Channel: thirdweb

Views: 1,268

Keywords:

Id: j7U97ZgnDts

Length: 41min 47sec (2507 seconds)

Published: Tue Apr 09 2024