How to Create a Farcaster Frame

if you ever wondered that how to create this kind of custom cast on the farcaster network then this is the video for you so hi everyone s from Quick node here and today in this video we will see how we can create custom casts called as frames on the farcaster network so without any Ado let's jump into [Music] it anyone can create a custom cast using the frames standard of faster Network which is based on a open graph standard which means that any web page created using the frames metatag can be rendered into the foraster feed or into any foraster client so the frames metatag looks something like this it's FC colon frame so it will be rendered within the head of the HTML body and anything using the FC frame suffix will be rendered within the faser feed and you can do multiple operations using it you can add image you can add button you can add URLs etc etc so to create our own frame we will be using this foraster frames template shout out to this developer who created this template and First Step here would be to get clone this repo so let's clone this repo and once it's cloned let's go to the directory and once we are in it let's install the dependencies so this will install all the dependencies so once all the packages and libraries are installed let's try to run it and see what do template looks like so to create a custom cast or frame you'll need a web page which is accessible on a public URL so this template uses local T which makes your local app accessible throughout the web as you can see it gives you a URL which is a https URL and using that you can access your Local Host app anywhere so to test this template let's go to w cost developer frames page where you can test your frames so let's paste the URL refresh it and as you can see this is the template frame so if you type green the screen will turn green you can also type your own message something like this and then change colors yep so this is an example and a template but we will create our own frame in which we will calculate the borrowing power based on the tokens held in a users account or wallet address so let's open the terminal again close the server and open this repository in a code editor so here we have it in the code editor let's go back to the terminal we will need to install few more things like dotn because we'll need aend variable and ethers because we will be working with the ether JS Library so now let's also create a do end file and in our end file we'll need two variables the variables being quick no HTTP npoint and name our API key so using the quick node HTTP endpoint what we will do is we will get the tokens held by a account or a wallet address and we will also get the prices of those token tokens using quicknote marketplaces coin gecko API the next thing is Nar API so to create your own frame you'll need access to the hubs network of the Paras Network because your frame needs to interact with the user data or uh it needs to fetch the user data so to do that you'll have to run your own Hub but with Nar what you can do is you can get the hubs data via nar's API so that's what we will do so you can register for API key on Nar and then paste your API key over here and then you can also register for a quick node RPC endpoint like this this is a ethereum main endpoint and in the add-ons you'll need token and nft API version two bundle because we will need to fetch the tokens a particular wallet address holds and then the co Geo price feed data add-on from the quick note Marketplace because we will need to get the price of those tokens in Us dolls so we are all set and I'll copy this and paste it over here and I'll also copy and paste my n apiq over here and obviously I won't show that in the video and neither should you never share your RPC URLs or API keys with anyone and be very cautious while pushing to GitHub any public code sharing platform all right after that we will have to set up types uh new types where we will declare name as a string address as a string total balance as a string and decimals as a string we will need this to S out the data which we receive from the quick node API for the number of tokens or for the tokens held by a wallet address and then comes the index.ts file so in the index.ts file you can see that there are some import statements and then there is a get function which it will be used to get the app within the podcaster frame feed or the testing tool and then there is a post function which will be used to post the function calls from the forecaster testing tool or frames testing tool to our app or web page so let's quickly replace the code with our code and then go through it section by section that what the code actually is doing so over here we are again importing few things the first thing over here is the node server which will be used to create a node server locally and create a https link so that it can be accessed on browser or in any other apps as well and then we are getting the types from the frame signature package which is this and then we are getting the token balance type which is is this which we just created earlier and then we are importing ethers andn and then we are declaring few Global variables over here where we are declaring provider URL which will be our quick node URL and we are getting it from the environment variable and then we are declaring a new add tokens available to borrow where we are adding four tokens which we will use to calculate the borrowing power of any user and those four tokens will be um usdc the chain link link token wrapped BTC and wrapped ethereum so after that we are declaring a new function called get wallet token balances which we will be using to get the tokens held in a wallet so what we are doing is we are sending the qn get wallet token balance request to the quick node RPC and then providing the wallet address and the to contact address is so API will only return these tokens balances and holdings so the wallet address it comes from the custody address of the foraster ID of the user we will see how we get that later in the video and then we are just filtering the data and uh matching it with name address token balance decimals and then returning token balances and then after that the function which actually calculates the borrowing power is get borrow power where we are supplying the token balance array and the initial token borrow power will be zero now the contracts info comes from this object where we are supplying the address then collateral factor for each token which is the deciding factor that how much that particular user is eligible to borrow based on their Holdings so we are declaring four tokens and they are different collateral factors these are just hardcoded for the purpose of this demo but in a real world scenario or in a production app it will be different and probably fetched from something like compound Finance then mapping the token array with contract info which is over here if there is no info return zero and then we will send another request to our quick node RPC to fetch the prices of each token in USD so we are sending the coin gecko simple price RPC request to our quick URL and in parameters we are passing the token info ID which is the token info and the ID being the IDS which we declared over here and then we are also saying that we want the price back in USD which is US dollar for each token so then we are passing the data which we get from the coin gecko API and uh then saving everything in the token price variable then the borrowing power is calculated over here where we multiply the token balance with the token price and then we multiply the output with token info collatoral factor which is this the collatoral factor for each token is different which we said earlier and then return the borrowing power and ultimately ring the total borrowing power which was Zero earlier and then in this function called get user from ID what we will do is we will use the Nar API to get the custody address of the faster user interacting with the frame and we will get the custody address using the farcaster ID or FID so over here we have the NR endpoint then we are passing the API key then what we are doing is we are sending a request to the Nar endpoint to fetch the account using the foraster ID and once we fetch the data we are storing it in user data then fetching the custody address from that data which will be stored in the user add and then if no custody address is found we will throw this error and then we are returning the custody address and then this is our get function which our frames tool we'll use to get the web page and over here what we are doing is we have a placeholder background and that will go over here and and over here as well then we have a post URL which will be the frames post URL which will be the live URL using which the frames tool can send the post request to the web page and then we have two buttons button one and button two the button one will say calculate borrowing power button two will say source code which will be linked to the GitHub gist of this exact code used to create this Frame and this is just a title of the frame and in the post function we will call all of the functions which we created earlier and over there we will get the frame signature packet in which we will get the FID which we will be using to fetch the custody address and then the FID or the FAS ID will be stored in FID variable then the get user from ID function will be called which we just saw over here and using that function we will get the data of the user which will be stored in this and uh that data will the custody address and then we will call get wallet token balances on that custody address so that we can get all the token balances and using those token balances we will call get borrower power function so that we can get the borrowing power of that particular user and then when all of this is executed the borrow image which is nothing but the borrow power will be updated and the frame will show the updated borrowing power and then after that we are just saying that the frame server will be running on Port 3000 which is our local port and then we are serving the app using Fetch and the board number let's go back to oural let's run NM and this is our URL which will let connect to our space here and this refresh button looks like the so in justed our it's Clos so let's R Ser again okay let's poop this Reish it okay there it is this is how our frame looks like this is the calculate boring power text which we added the two buttons one will take us to the source code which is a gith up gist of that exact code which we used to create this Frame and then if we click click on calculate borrowing power it should give us the borrowing power for this particular account which is my account which does not have any tokens so let's find uh random address which has some tokens and let's find some address of usdc holder so let's go to usdc token onas scam and go to Holders find a random address let's use this address then let's then let's go back to our code and we will need to replace this part because that's what is fetching the custody address from the farter ID and because my address doesn't have any of those tokens right now so that's why we will hardcode address which has one of those tokens so let's go back let's recalculate the borrowing power and as you can see the borrowing power for this particular address is very high it's [Music] 145.230 Nam Channel which is there on the braster network and you'll find a lot of examples plus discussions to get inspired and to get help so if you learned anything from this video make sure to hit the like button subscribe to the quick node YouTube channel and I'll see you in the next one bye-bye

Channel: QuickNode

Views: 1,133

Keywords: how to create a farcaster frame, how to create a frame on farcaster, farcaster frame tutorial, farcaster frames tutorial, farcaster frames, farcaster frames explained

Id: 6OFgBzx4aSM

Length: 15min 49sec (949 seconds)

Published: Fri Feb 23 2024