Compound Grants 🛠️ Compound III Account Health App Workshop

foreign [Music] welcome to the compound workshop for Heath Global New York 2023 going to tell you a little bit about compound and the Bounty price you can win in this year's eth Global New York hackathon I'm Adam I'm the developer relations lead at compound Labs I'm here to help out with ethereum related development projects that use the compound protocol you can find me on Twitter and Discord I'm mostly in the development channel of the compound Discord I can answer your technical questions there compound grants is sponsoring the hackathon this year and we're really excited to be at this event where we're ready to see all the cool things that you're all building and ready to help out with compound related projects and if you want you can apply to compound grants we can tell you a bit more about that if you're interested and help you get your application accepted so in this presentation I'm going to tell you about the hackathon bounties for this year and if you're not familiar with compound I'll tell you about the compound protocol I'll tell you about the key differences between the protocols V2 and V3 V3 is the latest version that has new deployments that came out this year and a little bit of last year as well I'll tell you about protocol governance and I'll also show you some developer resources so you can get started building right away all right compound grants has a pounding prize this year a five thousand dollars USD to the best integration of compound three the rules are that your product must interact with a smart contract or with Json RPC with any instance of the compound V3 protocol or be a supportive project that is specifically created for the compound community's use all right a little bit about compound I work at compound labs and we're the authors of the compound protocol it's a protocol made up of several smart contracts running on ethereum mainnet since 2018 and our mission is to create efficient algorithmic money markets what gets me excited to work in the D5 space is that we author and continue to Steward decentralized free and open crypto tools for everyone with an internet connection including the banks the underbanked and the unbanked and if you think about it that's a huge amount of Market to serve globally anyone on Earth with a smartphone and an internet connection can use D5 and can use compound so historically we've seen interest rates for suppliers to the protocol as high as 15 apy on usdc as well as other supported assets and I love that what we're doing is different from Trad Phi because D5 systems like the compound protocol are transparent and they're voluntary with public ledgers where code is Law and with D5 you instead get decentralization and transparency unlike centralized Banking and Financial systems that's what gets me excited to work in D5 and also in the ethereum space what is the compound protocol simply put it is crypto asset money markets and we refer to it as the compound protocol it runs on ethereum as well as several l2s that you can see here it's decentralized which I will explain a bit more shortly the main use case is that it allows users to earn interest on their cryptocurrencies or permissionlessly borrow other cryptocurrencies so instead of an asset like ethereum or usdc sitting idle in your wallet you can supply it to the compound protocol and earn a varying interest rate users that Supply crypto collateral and borrow a different crypto asset against their collateral and the interest that suppliers earn is driven by the interest that borrowers pay those are the two basic uses of the protocol for everyone earn interest on your crypto or borrow other crypto assets the protocol can only support crypto assets that are tokenized on ethereum or other evm chains as erc20s it allows suppliers to earn a variable interest rate on their assets an individual that uses an app like the ones listed on the compound home page or their own code can use every feature of the protocol developers can build their own apps they use the protocol as interest learning infrastructure users or organizations can use interfaces to earn interest to borrow assets or participate in protocol governance so use cases that we've seen are crypto wallet applications they use the protocol to offer interest earning for their users and also any business that holds funds for a period of time they use the protocol to earn interest for that period to create some income instead of letting those assets sit idle so I'm going to give you a little bit of an example here let's say you use one of the many interface applications for the protocol you can supply assets to compound when a supplier supplies they get a fixed amount of C tokens which you can think about as a one-to-one asset that is representing the underlying that you have in the protocol in V3 C tokens are only minute for the supplying the base asset they're not minted when you supply collateral uh they're 1-1 and they rebase so uh when you supply you have this balance of C tokens your wallet and that balance will go up over time automatically and you can redeem those C tokens for your underlying asset at any time I'll give more differences between compound V2 and V3 in a later slide those assets are stored in smart contracts that no individual controls there's an on-chain government system that will be covered later C tokens are redeemable at any time users can supply for as little as one EDM block and interest accrues every evm block which is about 12 seconds nowadays on ethereum this enables on-demand supplying and redeeming from the Protocol no need to wait for a lockup period you can earn interest for supplying to the protocol for even just one minute the other big use case is over collateralized borrowing of assets so user can supply a collateral asset before they borrow they can only borrow up to a certain amount of USD value of their collateral so the token value of their collateral is always worth more than their total borrow value relative to USD so an example would be to supply a collateral like wrap Bitcoin or wrapped ether or one of the many others and borrow a smaller value of dye or usdc such that your account is over collateralized the limit of the bar depends on the collateral asset there's a percentage called the collateral factor which is set for each individual collateral token type wrapped ether and wrap Bitcoin have different collateral factors those factors are chosen by the community members and are selected based on perceived risk of the value fluctuation in order to borrow a user must Supply a supported collateral asset and they can then borrow in V3 there is only one asset that can be borrowed from each instance of comet So currently there are deployments of usdc and wrapped ether as the base asset so you can supply a collateral and borrow those two assets or you can earn interest on those two assets only those two assets so you can't earn interest on collateral and V3 but you can earn interest on the base asset if an account becomes under collateralized like when the USD value of the collateral goes down or too much borrower interest a cruise for that borrowing account the user's collateral can be liquidated and a liquidator will perform a liquidation by calling these two methods on the protocol they can call absorb and then buy collateral so what happens is the user's collateral is taken over by the protocol their borrow is repaid by the protocol reserves and their collateral is sold off at a discount to a liquidator that can then swap it on a decks for a profit so supplying only is safer than borrowing you can't get liquidated if you only Supply there's much less risk involved when a user only supplies and does not borrow Liquidators keep the protocol safe and collateralized they are incentivized to do so so borrowers that become under collateralized are subject to liquidation of their account at any time they will lose all of their collateral but they will get some of the base asset back after the liquidation process ends due to the autonomous nature of the protocol the liquidation system is much harsher than traditional Finance there's no negotiating there's no delinquent repayments allowed with the on-chain code so the latest version of compound is compound three it is more gas efficient and capital efficient than compound V2 it streamlines the most popular use case of compound V2 which was to supply a volatile priced asset like wrap Bitcoin or ether and then to borrow a stable price asset like usdc or die this version has additional safety for liquidations it has a higher threshold for the same collateral Factor so you can borrow more with the same collateral one asset can earn interest or be borrowed per deployment that's called the base asset and it makes opening positions in V3 have less stacked risk than V2 currently there are seven deployments of compound three there are deployments with usdc and weth as the base asset and that is on ethereum mainnet and also on base there are deployments on other chains like polygon and arbitrum and there are many more to come soon this version of the protocol is able to be deployed on any evm chain the key differences between V2 and V3 are that V3 has less risk less gassiness and can be deployed anywhere that solidity is supported V2 you can borrow any supported asset but V3 you can only borrow the one single base asset per deployment of comment compound V2 and V3 coexist V2 is not going anywhere however there is a deprecation going on by the community at the moment you can follow along with that at the forums at www.com.xyz basically what the community is doing is they're lowering the protocol rewards for v2 and also incentivizing users to move from V2 to V3 so here are some key differences between compound V2 and compound V3 and compound v2c tokens are minted to the suppliers of any asset and C tokens are about a 50 to 1 ratio and the C tokens Can Be redeemed for more underlying as the block height increases in compound V3 C tokens are only minted for supplying the base asset and those tokens are one to one and they're rebasing so that balance automatically goes up in your wallet in compound V2 you can borrow any asset supported by the protocol but in compound V3 you can only borrow the base asset per deployment of comment and currently there are only two base asset deployments usdc and wrapped ether compound V2 was a single system with many assets it's only running on ethereum mainnet and compound 3 is a single asset Focus per deployment and it's running on several l2s as well as ethereum mainnet compound V2 is a single protocol deployment on ethereum and compound three can be can be deployed on any evm chain uh in combat V2 Max borrowing and liquidation are at the same point so if you borrow the maximum amount Allowed by your collateral you'll get liquidated in the next block in compound three there's a separate Max Bar and liquidation point so there's a no new borrows period which makes it safer for borrowers to borrow the maximum amount and they won't always be liquidated immediately in compound VT you can earn interest on any supported asset but in compound V3 you can only earn interest on one asset per deployment and that's the base asset in compound V2 there are some assets that are not valid collateral they can't be used as collateral to borrow other assets and in compound three there is no interest for suppliers of collateral collateral is only used as collateral and compound three so in compound V2 there's an integrated comp distribution into the Comptroller contract in compound three there's an encapsulated rewards contract that can be used with any erc20 token it's outside of the protocol and is a little bit meter from a developer's point of view compound V2 has one account controller and that's the one controller of that account and compound V3 there's account manager so you can approve a different manager for your address or you can revoke those permissions later and those permissions allow an account to transfer or borrow or withdraw on behalf of that account compound protocol is decentralized and it's governed by the comp token holders the comp token is a erc20 token that can be used to propose on-chain protocol upgrades or to vote yes or no on those proposals and the community can make those proposals the contracts for governance are in the compound Finance GitHub organization under the compound Dash protocol repository you can check them out there there's a governor contract as well as a comp token contract so the comp token is the voting and proposing token that allows on-chain governance to function for the compound protocol the protocol has been decentralized since June of 2020 and the comp tokens have been distributed to users of the protocol in a slow drip and those users can take those tokens and vote on proposals or they can create their own on-chain code proposals to upgrade protocol code or protocol asset configuration settings and with this token you can delegate your voting weight to your own address or you can delegate that voting weight to another address so say there's a delegate that has more knowledge than you of the protocol many addresses can delegate to that one if they trust them to vote on their behalf or you can always vote on your own behalf if you delegate to your own address the governance process is a seven day process for ethereum and it's an eight day process for all l2s so what happens is a Community member will make a proposal and there's a two-day review period where all of the other community members can check out that proposal make sure it does exactly what it says it does there are no bugs there are no issues and also the consequences of that proposal succeeding for um for apps that depend on the protocol or other protocols they use the compound protocol as infrastructure after two days of review there is a voting period where anybody with comp tokens delegated to their address can cast their vote on The Proposal whether they they can vote in favor or against the proposal after the three-day voting period The Proposal either succeeds or is defeated needs to reach Quorum of 400 000 votes in order to proceed after a proposal succeeds it is in the time lock for two days where it is queued and then executed and after it's executed there's an additional day and execution for all l2s so what happens is the time lock will pass the message to the bridge for the L2 and then there'll be an additional one-day time lock on the L2 before it's executed on the L2 so those are only for proposals that affect the comment deployments on other chains than ethereum the time lock phase is only two days on ethereum so if you're a developer you can head over to docs.compound.finance to find Smart contract method documentation you can find contract addresses as well as SDK documentation explanations for how each of the contracts work and links to guides and security audits if you have a technical question or just want to join the community conversation you can go to compound.

finance Discord and join the Discord if you want to apply for a grant to work on something in the compound ecosystem you can go to questbook.app if you want to see code examples for building on top of compound you can go to the compound Dash developers GitHub organization or if you want to see the compound protocol smart contract code you can head over to the compound Dash Finance organization on GitHub here's the workshop we're going to be working on today you can head over to GitHub and check out this repository you can always clone it it's open source and you can use this QR code with your phone if you want to check it out on your phone compound grants is an independently read organization that funds projects that are working on the protocol you can head over to questbook.app if you want to apply for that program they have rolling applications and they have funded many builders in the ecosystem and got them going building on compound if you have more questions about that you can come over to US during the hackathon and ask us and we're happy to help and connect you with the right people to get your project approved for a grant if you're not sure what you want to build in this hackathon we have an ideas blog post you can head over to this link if you want to check out that ideas post we have several ideas that can help you win this year's hackathon Bounty for youth Global New York and you can also see links to previous year's winners of hackathon prizes in the each global hackathons so please check out this blog post all right that concludes my slide deck for this presentation I'm going to go through a developer Workshop now where I show how to build an app that has account health for each instance of comment and shown in a dashboard it's going to go over some solidity code as well as front-end web code for getting that data from the blockchain all right here's the repository for this Workshop if you want to clone this code or check it out you can always come over to this repository I have the link in the description as well as the QR code during the presentation so you can rewind to find that as well so basically what we have here is a full stack web application that queries each blockchain that compound exists on and gets all of the account data on those blockchains and it decides whether or not those accounts are healthy uh these are just accounts that borrow assets so if you borrow again you can get liquidated if your collateral doesn't support your open borrow and accounts that get to that liquidation threshold are considered unhealthy and this dashboard will show will show the most unhealthy accounts and also will show the ones that could be liquidated so this is a node.js application it uses express.js for a server we're going to query blockchains from that server script and we're also going to host an API from there and our front-end web application will be hosted from the express app as well and it'll use it as an API to fetch that data and show it in a browser page so in order to run this application you need to install node.

js and you need to install each of the dependencies you do that with the npm install command in addition to that you need Json RPC provider URLs you can find each of those four on alchemy.com if you don't have them already you can get them for free and basically what that does is it allows it allows our app to use the Alchemy API like it was a rest API and it fetches data from the blockchain that is up to date so this is what the finished product of our app looks like it's a simple web dashboard it has the selector so we can choose each instance of compound three that we want to look at the borrowers for and it has this table here that shows each account in order of its unhealthiness accounts that are in red are actually liquidatable right now if you wanted to you could liquidate these accounts on compound and the ones that are non-red are close underwater but they are still considered healthy from the protocol's point of view so if you want to see the latest data you can always refresh this page and we'll get data that is more recent from the blockchain and if you want to see a different instance of compound three you can see that on cusdc V3 on polygon there are three accounts that can be liquidated right now so before we begin I encourage you to go over to docs.compound.finance this is where all of the documentation for the protocol exists you can find each of the deployments of compound three here and their contract addresses you can also find developer resources there are guides for building on top of the protocol as well as a list of security audits and smart contract method documentation you could use the search bar at the top to search for any subject that you need in the docs all right I'm going to run through building this application now if you want to build something on top of this you can clone this code here you can go to GitHub and then and then clone the repository to your machine there's instructions for doing that here I've already done it so I have the app on my local machine here and I'm going to open up the source code in Sublime so the first thing we're going to go through is the server script it's called index.js and in order to run this app we have to run this server script uses ethers to get data from the blockchains uses Express to serve the HTML CSS and JavaScript as well as our API which serves some Json data uh helmet is just like a safety package in Express sleuth is a new way of querying data on blockchains in a more efficient and fast manner I'll explain what sleuth queries I'm using later and how it works uh we're we're doing a query for account data so these are for getting each of our borrowers on the instances of compound three I'll show that query later it's written in solidity and we have our Port we're running on our machine it's going to be a local host Port 3000 and this JavaScript object called DB is sort of like our local in-memory database where we're storing all of our borrower data after we get it from the blockchain so this app is going to automatically get the latest borrower data from the blockchain every hour unless somebody is using our application and hitting the rest endpoints if they hit the rest endpoints then it'll update itself automatically I have a setting for each of the instances of compound 3 in this object so uh every 90 seconds at at maximum uh the data will be updated for each instance the proxy address is actually the comment address so this is where the protocol is located on each blockchain we have a provider URL which is a Json RPC URL provided by alchemy.

com you can head over to alchemy.com and get yours for free today for each of this for each of the blockchains used in this Workshop so for this Workshop there's ethereum polygon arbitrum and bass so we have some data pertaining to each deployment of compound three I got this data from the documentation page that we saw earlier I have it here inside my app so I can quickly get data from blockchain so each of these Keys here represents a compound three instance there are currently seven so the base asset is the asset here and I have underscore the blockchain then just using so ethos ethereum polis polygon are Biz arbitrum and basis base so here's our API for using compound three also called comment as well as erc20 ebi for getting some basic erc20 token data I have a helper function here for updating the console so as the developer you can watch your console running and see exactly what our script is doing it has some line at the bottom that updates and and gives a little message that says what we're doing at the moment so this is a little helper function to facilitate that display we have the sync instance function what this function does is it fetches data from the blockchain so we pass an instance ID which is the ID you sell you saw in these objects earlier at the top so there's one for each instance of comment when we pass that to sync instance we update all of the data in our local database that we have in memory and we make sure that we don't query the blockchain more than once every 90 seconds so if people are were to be making lots of requests to our app we wouldn't be running out our Json RPC API key we would make sure that we stay safe and only make a certain amount of requests each month to say to keep our usage low to keep our bills low so we're doing something called The Bouncing which is essentially keeping the amount of requests that we make to our Json rpca API MO and we're going to save the timestamp every time we do make a request so basically we pull a bunch of asset data from the blockchain so each of the collateral assets as well as the base asset so our our instance so our database has that data ready to go when we need to serve it to our users later and the two most important parts here are getting price data as well as borrower data so when we get price data from the chain we're talking about the prices of the collateral assets we can use that price data to make sure that borrowers are not underwater so to do that we're going to go through each instance of compound three we have a update here that that shows the developer on the console log line uh what the script is doing so basically we're going to query the comment contract we're going to get all of the available collateral assets and we're going to find out their price using the get price method and we're going to update that in our database so it's going to do this for each collateral asset in that instance of comment then we're going to pull the borrower data from the blockchain so this will get all of the current borrowers from the comment instance this is where the majority of the code in this file is from so we're going to get that free each instance of compound three and we're going to do that for the latest blocks in which we have not already got data from so we got our update console log line here to say what's going on we're going to get our instance data we have from our JavaScript object at the top of the file nicely is this with sleuth we have a way to look up each instance of compound using the asset address which we'll use later we're gonna get a Json RPC provider using the ethers SDK we're going to find out what the latest block height is on the blockchain that we're querying and we're going to get every withdrawal event from compound three so in order to borrow one compound three you need to withdraw from the protocol and whenever you withdraw there's an event emitted called withdraw if we get all the historical events of borrowing on the blockchain then we can find out who specifically is borrowing at this time so this gets all of the borrow events from the beginning of the blockchain's history so it gets it from block height zero all the way into the present block height and subsequently we're not going to re-query specific blocks we're just going to query the most recent blocks for which we don't have data so if we're going to query this at the beginning we're going to get from zero and then every a few minutes or so how often our app updates based on the requests made to it we'll get the latest block data and we'll get any withdrawal events that have occurred since the last update okay once we have all the withdrawal events we can find out who's a borrower so when we get the withdrawal events we get all the accounts that are maybe borrowing and then we can check later to see if they're actually borrowing so we have all the previous borrowers in our database from when we saved them last and then we're going to get all the new accounts that we got from the blockchain just recently this is where we make our sleuth query to get data from the blockchain in a much faster and more efficient way than if we were to query them using Json RPC from this script so to get data from all accounts we're going to use sleuth sleuth is a JavaScript package that you can find here so if you want to check out sleuth you can check out how it works here and some examples in the readme of the repository for sleuth I'm going to run through my sluice query here so here's how we declare it we need to reference the byte code from a smart contract that we compile so here we reference our sleuth query and what we're going to do is we're going to pass a thousand maybe borrower addresses at a time to the sleuth query and make a single jsonrbc call instead of making several for each individual address so this will greatly minimize the amount of Json RPC calls that we need to make and I'm going to take a look at that sleuth query by going over to my contracts folder and this is queries folder here's my account data query so it just looks like a regular smart contract I have references to a library that I call comment structs these are structs that are on the comment contract here's an interface for comment these are all the methods that I'm going to want to call on the comment contract and then here's a struct that I made up specifically for this query this has account data for each account on comet and I'll return an instance of the struct for every single address that I'm querying using sleuth here's my actual sleuth query it looks like a smart contract with a function called query I'm going to pass the comment address and all of the accounts a thousand at a time in which I'm going to get data from the comment smart contract and I'm going to return an array of account data structs so the first thing I'm going to do is find out how many collateral assets there are in comments so I can use a loop I'm going to make an array of account data structs so there's going to be one struct for each account that we pass to the query I'm going to Loop through every single account that I pass I'm going to find out if that account is currently liquidatable I'm going to find the borrow balance of this account if it's greater than zero then that account is currently borrowing I'm going to make an array for every collateral asset as well as the balance of those collaterals and we're going to return that to the API so then we can show the health level of each account so if the collateral value is not high enough to support the open borrow they'll have an account health of over a hundred percent and they'll progressively get closer to that as their collateral is not high enough to support their open borrow so I'm going to Loop through each collateral asset I'm going to get the info for that asset and I'm get gonna get the collateral balance for each specific account for each specific collateral that's supported by that instance of comet I'm going to make an account data struct and I'm going to add that to my array and eventually I'm going to return my account data array so this function uses sleuth to get lots of data for many accounts by doing very few Json RPC calls and taking advantage of the sleuth query interface so now that we have the data for each and every account we can find out which one is borrowing so we're going to Loop through each of those accounts that we query data for and we're going to find out if they are borrowing which collaterals they're using and we're going to turn those integers into doubles so we can read them in our app a little bit easier and we're going to show if they're liquid dateable which we'll be able to make them bread in our app or black if they're not liquidatable so after we've gotten the data for each borrower we save the Block in which we've queried data up until so later we can make sure that we we don't re-query the same blocks and then we set our database to our latest borrowers that we found from the blockchain after we've pulled all the borrower data from the blockchain we're going to calculate their account health so we're going to find out that percentage that we saw in the app earlier so to calculate their account Health we get each and every borrower we get each and every borrower from our database and we find out their collaterals we go through each collateral and use the collateral Factor as well as the liquidation factor to find out how close they are to liquidation we set a number for their bar limit their liquidation limit as well as a percentage to liquidation which we show in the app we're not using this in this app this code was reused from an older Workshop where I showed the liquidation price if the account has one specific collateral so we can know what the price of that collateral would be when this account would likely get liquidated it doesn't really work when you have multiple collaterals because uh which price would have to go down we're not sure so it only works with one and when we sync with the data from the blockchain we're going to do this in an interval we're going to do it every every hour so if nobody is querying our app it'll still update the data at once every hour as long as the app is running so we have our main function here at the bottom this will run as soon as the app boots up we'll sync the data with the blockchain basically get all the data that we just showed and put it in our in-memory database that we have in our app we're going to create an express application there's some housekeeping stuff with Express this makes post bodies for requests only acceptable if they're a certain size up to 100 bytes helmet has some security features for Express apps in this instance where it's just for an example this isn't really important but this is something you'd want to put in a production app as well as this Header information here we're going to allow the app to get files from a specific directory so we have a public directory with our HTML CSS and JavaScript this will allow the express app to serve those assets here's our single API request route you can use this API to get the borrowers from the blockchain you could use this route to get the borrowers from our app which got them from the blockchain each of these instance IDs corresponds to the instances of comment here whenever a user makes a request to our app we're going to try and get that data from the database we'll return a bad request if we don't recognize the ID that they pass we're going to sync with the blockchains this of course only works if the last request was made more than 90 seconds ago otherwise it will not make any requests to our Json RPC API key and here we're going to sort the data by percent to Liquidation in descending order so we can see the most unhealthy counts so we can see the most unhealthy Accounts at the top and then we're going to return that Json data if anyone puts in a bad API route we'll give them a bad request and this runs the server on our Port which will be Port 3000 and gives the developer a message in the console so they can see that the app is running and localhost port 3000. and that's this whole app I'm going to run over to my console and I'm going to do npx hard hat compile this will compile the sleuth query it's already compiled so there's nothing to compile and then I can do node index.js to run the server script but I'm actually going to do npm start which does both of these commands for me so our our app boots up and it gets the data from each blockchain and each instance of comment it gets it from block height zero to present so this takes a little while for each app to run for each instance to get its data after we've got all the data we can then display it in our app it already got data for the ethereum instances so we should be able to see those in our app so here's the latest data we have the date and time of the latest accounts here's each of our accounts there's still several that can be liquidated right now so next I'm going to walk through this front end code here so you can build your own app like this or you can even add to this app I challenge you to make a button so you can liquidate any of these accounts with a single click and run that transaction from your meta mask you can do that if you piece together multiple workshops there's a workshop on the comp.xyz forums for liquidating accounts so what you can do is you can use the on-chain Liquidator smart contract and you can call that contract using an eoa and a liquidate an account so if you head over to www.

comp.xyz you click on guides you can find the compound 3 liquidation guide and learn how to run your own Liquidator on compound and you can use the on-chain Liquidator contract and call it from an eoa to liquidate any address on compound three so I challenge you to make it so you can click on any of these and a transaction will pop up with your metamask and you can liquidate any of these accounts that that project would be eligible for the Bounty prize in this hackathon okay on to the front end code so our front end code is in our public folder and start off with index.html so what we see in that web page is some basic HTML we have a reference to a CSS file which I'm not going to go through if our account Health dashboard header we have the select box with each instance of compound three each of the values corresponds to the Keys in our server script file that we saw earlier one for each instance of compound three we show the date that the data was last fetched from the blockchain so we know if it's stale or not as a user then we have a table here where we display each of those rows of data one for each account and we have a Javascript file that powers that page and interacts with our API so I'm going to head over to the Javascript file we have a function that runs when the web browser page finishes loading we refer to the three HTML elements we saw earlier whenever we use that select box we're going to render the page with all the data in the table based on the instance we selected in the select box this render function makes a query to the API using the selected instance before it does that it shows like a loading Shimmer which we don't really see because the data is returned so fast but if we were to set up this API on a server there might be a a delay where a user would like to see a loading screen so we have a loading Shimmer effect after we get the data from the API we show when that data comes from so we have a we have a parameter in that JavaScript object that shows the timestamp of the data so that's this time stamp here we can show that as a JavaScript daytime using the data object we only show the top 100 borrowers in our interface because if we were to show all the borrowers it might be a bad user experience on the web page so we're just showing the top 100 and we create a nice big HTML string for each of those rows so each of those rows has its own HTML element and we put the data for each borrower in an HTML div so we have one for the address we have the borrow size we have a list of symbols of the collateral assets that the account is currently using separated by a comma and then we have the percentage of percent to underwater so basically if they hit 100 that means that they are liquidatable the account is underwater and is violating the collateral requirements of the compound protocol any Searcher can liquidate their position on chain at any moment sometimes we'll see positions like these that are not profitable for a liquidator they would probably waste more money in gas than they would get from a liquidation so that's why this one remains open for one cent of usdc some of these are a bit bigger though might be worth the gas might not be after we've filled up our table HTML string with all of the rows of accounts we put it into that table content element that's here so we update that with a new HTML string and the browser will show all the nice rendered data when this web page first loads it's going to load the data for the very first element in the select box so for us that's cusdc V3 on ethereum mainnet so when we load the page it automatically renders for that instance of comet down here we have some HTML strings we have the Shimmer for the loading screen that I mentioned earlier and we also have the header row HTML which we see here which explains what each row is in the table so we paste then over and over again each time the user interface reloads that's it that's all the JavaScript code for the front end this is a very simple app you can get this app running on your own if you clone the repository and walk through each of the steps I had in this Workshop remember you can always check out the readme here we have instructions for running as well as setting up and a link to each of the dependencies if you want to learn more about each of the dependencies this project uses remember you can always find me at the hackathon I'll be walking around the floor and you can message me in Discord I'm happy to come over and help you out with your code or to explain to you how the compound grants application process works or to validate your project idea for the compound grants bounty in the youth Global New York 2023 hackathon on behalf of compound grants thank you for watching and best of luck to you in the hackathon we're excited to see what you built and happy to help you out in getting a grant in compound grants remember you can always apply at Quest book there's a rolling application for Grants going on come find us at the event if you want a compound t-shirt or a compound sticker best of luck to the hackathon participants happy hacking and see you soon