Compound's Open Source Interface

[Music] [Applause] [Music] and now with that we are ready to move on to our next talk so next up we have tori who's gonna talk about the open source interface for compound so whenever you're ready hopefully to get started and welcome uh thank you for having me um perfect so um my name is tori i'm going to be giving in talk today related to compounds open source interface um this is a repo that we recently made open source in the last let's say month um and we kind of refer to it as palestine um and so the purposes of this talk is to kind of just give a quick overview for the developers that are interested in actually you know making changes to the open source repo this is the app that's deployed at app.compound.finance so let me share my screen here cool and then to just give a little bit of a quick intro on myself so um i've been at compound since the very beginning i'm actually the first employee at the company um and right now my current focus within compound is sort of leading the application development so this entails all the different compound web front-end properties including the dap uh you know the gateway front and the application that lives at compound.finance as well as some of the new interesting products we're building around compound treasury um so like i said the agenda uh for this one to just give a high level overview of palisades so palisade is the code name that we use for the application that's deployed app.compound.

finance um it's been previously closed sourced and it's kind of one of the last remaining closed source uh you know code sources that we had for the applications we're really excited that we've actually been able to get it into a state where we can open source it to the community and add you know have people in the community be able to make code changes on top of it um and also just you know watch some of the changes that are being made from our team specifically around you know new changes that are coming to the front end um and so with that i'm going to switch to my screen share and i switch to my repo here so the repo itself lives at palisade there's a link uh on my slide that kind of shows you um all the source code again uh for this project is actually was deployed to app.compound.finance and to just give you a little quick overview of the code base um you know some one of the things that developers need to figure out as they you know check out and clone the code base before they can run it is the code actually needs a little bit of configuration so out of the box you know trying to run the uh code uh won't actually work because we actually need to create a configuration file um that tells the application you know what are the different networks that are supported um what are the compound apis that provide it for things like gathering interest rate um in terms of data providers you know we need to actually query web3 uh to gather all the information to display in the dap as well as kind of displaying information related to what sort of networks are available and supported by the application now one interesting thing about the configuration file as you can see all these are e-specific uh networking configs um there's no reason why we actually can't uh configure the web3 front-end uh to support other networks or ethereum like networks like polygon in fact um our you know we at compound ourselves have actually have a version of the application running that supports the mumbai test net so that's kind of an interesting little tidbit for developers that are interested and possibly trying to reuse parts of the uh compound palisade app to get something running on polygon just for testing um so again the application is going to require a setup for some of the configuration um sorry quick description of uh all the different keys that are required and then i'm just going to jump into the get started to actually get the application running just do a little live demo here so i have my terminal window here i'm not going to install the dependencies because that takes a while but we kind of have three main uh scripts that required for the application to function correctly and the way that i like to do this is open a terminal window go to my repo directory open up three additional windows in the terminal and then just run each of these commands one at a time so yarn watch i18n this is the first one let's spell it correctly um the next one is yarn css watch css and then the last one is yarn start right and so i'll go back and quickly explain what each of these scripts are doing here in just a second but we can see uh this is the application that we know and love is actually the application that's deployed at app.com.finance um right now uh this is running locally at localhost port 3000 but it should give you the exact same application experience as if you were running it or accessing it from ipfs or app.

compound.finance so that's basically how easy it is to get the application running um what i want to do now is do a quick explanation of the script calls so the first one uh watching i18 ends so the application web three front end supports different languages and um the different languages uh are specified in different strings files in the source code so if i bring the source code window up here i open the source directory there's a strings directory and you can see inside the strings directory all the different strings that are actually configured in all the different languages so this is how the compound manages uh different strings for the various pages on the app so for instance if i wanted to come into the application look up the borrow balance maybe change that for the purposes of the demo um i can do a search for borrow balance here and then maybe because i'm too cheeky add in a little demo you know text string here um so the watcher string actually continues watching all these files and automatically rebuilds the app so you can see uh on this borrow balance string usage hey we kind of got a demo update um the next uh command that has been run is the watch css so uh the palisade app uses css to define all the styles in the application um and there is a css directory scss directory here that has all the different styles that are being described so if i wanted to come into the application and let's say inspect this background um maybe i want to do a change of maybe this black background here i can go into the content i can find uh the html section tag that has class hero one of the ways that i can do this is search for the class dot hero on my sas files i found it here right now the color is dark a variable that's configured but there's no reason that i can come into the code base and kind of change it to uh maybe something that looks blue right and again because the watch css script is running or sorry this is green we can actually see that this updates on the code base directly so that's kind of cool um the next thing that i wanted to show you is uh this application is all built in a programming language called elm and we chose alan because uh our team at compound labs is a big fan of functional programming languages and elm is a functional pure programming language uh we found that you know the language being able to force our own developers to handle all the different edge cases for any features that we build is actually quite powerful you know typically we say internally that you know with a high confidence factor when elm compiles it kind of just works and that's kind of uh been really stellar for you know making sure our team can continue to move fast with just a couple of members on the team um so within elm you know i advise any developer that wants to uh you know for the repo and look at it go through the elm documentation to kind of see how things work under the hood um i don't have a lot of time on this one so what i want to show you next is uh sort of how we use the elm code to call into a web3 call which the web3 calls are written in javascript so in my main class i'm going to search for a method called new block um and within the you know context of the elm code base this new block command basically is invoked whenever a new block uh happens on the ethereum chain i think this is roughly every 13 seconds and there's a lot of information here to go through the code base uh basically high level is for every page that exists and every different component things like transactions things like compound balances things like oral prices this function basically passes off uh information to these sub modules and the sub modules themselves actually figure out what are the necessary data pieces that we need and this uh module needs customer balances it needs account limits as metadata i can go to the definition of this account limits and there's a port here again on the alan system a port is a way to communicate from the elm layer onto the web 3 layer so if i do a search on my ports class here on the code base and do a search for this method you can see on my javascript ports class i have this function called subscribe with a data payload that exactly matches the one that i was showing you earlier in this elm class so they kind of match one to one in this particular call we make a call to account minutes and this kind of should look a little bit similar to some of the developers that are already familiar with doing web3 calls here is a specific call that calls in to a function on the compound lens contract called account limits it queries for uh account limits with the function parameters controller address and customer address and then if i pull in the compound protocol i can actually show you on the solidity layer the compound lens contract here's the function that's kind of being vote here's the uh strut that's been returned and i can come back to palisade and say okay as a result here is the struct for this particular call that's been made now if i want to make a change here i could come in and say you know the comptroller contract uh also has or the lens contract also has a function for something like um what let's see max assets here i'm gonna do controller with max assets so this is a call like if i wanted to add in a additional um call to web3 to track information i can log this this uh new variable and i can track it here max assets and i should refresh my page again and i'm going to go into the console and then we can see oh there's 20 max assets right now that are supported on content now the last thing that i want to show you um you know i have this app that i have you know console log a styling change um the adap palisade application also supports uh being able to deploy all of my changes to uh ipfs which is kind of the default environment um that we use uh to deploy any changes from ourselves that we make as well as g clouds so the scripts in here if you follow the instructions allow you to send ipfs port a host you can add in the necessarily api keys that you need run the ipfs script and then get the version of this uh application that i have locally with the green background deploy onto ipfs and then see how that kind of works out for your specific customers either for demo purposes or uh you know if you actually want to make a change a fork and make a change to the compound protocol and actually push it live into production um that should work out just fine here i actually might be able to run this here i have a tiny bit of time remaining i'll build the css first i'll do the build of the application and the build basically is creating a directory of all these uh you know sas css files all the bills um all the javascript files all the html contained in a nice package with the idea that you would kind of push this directly to um you know any of your desired static page hosting website um so this is building and uh before i kind of finish out here i just wanted to make a little shout out that you know um you know my team at compound do a lot of you know watching the different uh questions that the community has and specifically for questions around the compound palisade repo i would hit up the compound discord chat that's kind of the best uh resource for developers if they want to um you know get questions talk to some of us directly uh you know ask any questions that you have about how the depot is structured and just generally get help for any ideas or projects and questions that you have that you want to work on so i'm going to deploy this it should be able to deploy here really quickly well so this actually deployed my local changes to ipfs now i'm going to grab one of these links um open it up in my browser and if everything so oh i missed a number if everything worked out good i should see a nice compound application with sort of a green background let's see if it looks the first time you deployed ipfs it's a little slow but there we go we have a version that exists on compound that contains the code changes that i just made green background and all um that's about all the time that i have to describe again went through a lot of information really fast so if you please have questions please don't hesitate to reach out into the discord but um thank you all for letting me have this presentation with you this morning thank you so much tori i was gonna i was worried about murphy's law kicking in but then i realized you guys are zoned so there you go when it compiles it kind of just works awesome uh one one question before we move on to our next talk uh what is kind of the process from people wanting to contribute to this repo obviously this is the production compound app so can anybody contribute what are the prerequisites how do you think about that and how do you welcome community edits yeah actually yeah it's a great question so um in the compound repo there is a specific readme for the contributing for developers that want to contribute um you know the easiest answer is to just fork the repo get familiar with making changes to it after you for the repo you can create a pull request back to the the main palisade repo and then um you know our team will go through it and review it and make sure the changes seem to be okay and safe and valid and then any pr request that is merged into the mainline repo that automatically gets deployed to ipfs and then if that change kind of looks good on the ipf's ipfs side you know our team at compound labs at least for right now can go ahead and make that accessible at app.compound.finance so again i would take a read into the contributing guide to go get all the steps to figure out how to create the pull requests you know how to create issues on the pr and how to kind of get help and feedback on any changes that you want to make awesome well hope that was helpful for everybody too this was an amazing demo and thanks for talking about how everything is architected thank you [Music] [Applause]