OpenFrontEnds - Compound Protocol

[AdamSC1-ddg]

OpenFrontEnds is aiming to build, fund and release open source front ends for popular defi protocols to ensure continuance and fair access.

We're starting with Compound.finance, if successful we'll move on to other open protocols.

The first run through of these will be run on Github pages, but the long term goal is that OpenFrontEnds will creating tooling for users to run these locally.

Given this, there is an importance on simplicity, reliability and having as few external dependencies as possible.

Core Requirements:

• Show users supply balance
• Show users Borrow Balance
• Show users borrow limit
• Show users borrow %
• List assets a user can supply
• List assets a user can borrow
• List assets a user is currently supplying
• List assets a user is currently borrowing
• Show a users balance for each asset.
• Show a user the APY earned or accrued for each asset.
• Let a user toggle each asset on/off as collateral.
• Show user current reward balance (comp) and allow them to claim.
• An additional widget, under an 'advanced' heading, that allows users to interact with assets that are currently not on the frontend. (This is a fallback to prevent the need for human updating of these pages)
• A clear indicator in the footer showing the address of the contracts connected to so that the user knows they are connected to the correct contract.
• It must fit within the requirements for running on Github Pages (https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages)
• You cannot use any copyrighted elements of Compound's design including name and mark. You should also make sure the visual elements are distinct and that users cannot confuse this frontend with the official Compound Labs interface.

Considerations:

• The site should ideally be self-contained and not need any backend.
• If any data is needed that cannot be run live time on the front end, then it should be from a public hosted instance of TheGraph and detailed instructions should be available on how to configure a new instance of TheGraph node on TheGraph's hosted platform in case there are issues with the original.
• All web3 actions should be done through local provider such as MetaMask.
• The goal is that these frontends should be runnable in a Github pages instance. In the future the goal will be to make it easy for users to run on their local system.
• Extra preference is given to any proposal structured in a way that will make it easy for future translation of the frontend to support different languages.
• Extra preference is given to any proposal that can structure elements of this light front-end in a modular way that we can standardize for other projects. For example, having distinct organized files for variables and functions that are separate from the interface layout.
• It is a preference to keep the package light for easy loading on any device or environment while still maintaining some basic design
• The site should ideally minimize the need for any human updating. While not always possible, it is ideal to empower the user with inputs on components that may need updating.

Documentation:

• Code should be well documented inline, and any deployment/setup steps should have separate documentation.
• Any variables (contracts, tokens, endpoints, etc) should be well labelled and pulled in from a specific variables file so that they can be easily referenced if they ever need to be documented.

To apply for this bounty you should:

• Include links to previous front end work.
• Include a brief overview of how you will build the site. This can include things like which dependencies you will use, how you will make it self contained, the sacrifices you would have to make to achieve that, or how you will make it simple. Anything that can convince me you are taking a thoughtful and expert approach to this design.
• Give an estimated timeline on building the site.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

This issue now has a funding of 8000.0 DAI (8000.0 USD @ $1.0/DAI) attached to it.

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
  • Want to chip in? Add your own contribution here.
  • Questions? Checkout Gitcoin Help or the Gitcoin's Discord
  • $2,237,857.09 more funded OSS Work available on the Gitcoin Issue Explorer

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Workers have applied to start work.

These users each claimed they can complete the work by 264 years, 2 months from now. Please review their action plans below:

1) zerquix18 has applied to start work _(Funders only: approve worker | reject worker)_.

Hello. I am interested in working on this. I'm a React/Typescript developer, with years of experience in web programming. I have to disclose that I don't have much experience in Web3 more than just theory and a few practice scripts, which is why I think this is a great opportunity to learn.

I plan to use Create React App with Typescript to build the website, using Semantic UI React for the front end (for simplicity, since it's very well documented): https://react.semantic-ui.com/

I don't think I will need many dependencies other than those to connect to / test the smart contracts and interact with the wallet. I read that Compound has an SDK which makes it very easy to make the backend calls: https://compound.finance/docs/compound-js

Backend calls can use service files (to use compound.js and ethers and handle errors), and smart contracts can be in their own directory.

I would also include Typescript for everything.

I don't have many public things from my work experience, but some of them include: On the front end:

• My attempt to make a Ceramic Explorer: https://github.com/Zerquix18/ceramic-explorer
  • A website to show statistics of COVID19 in my country: https://github.com/Zerquix18/coronavirusrd (deployed at coronavirusrd.zerquix18.com ) On the backend (for code quality and approach):
  • A discord bot: https://github.com/Zerquix18/epigram-discord-bot/blob/master/bot.ts
  • CDK to create canaries for Harmony: https://github.com/Zerquix18/harmony-cloudwatch

I've also written articles:

• https://dev.to/zerquix18/let-s-play-with-google-maps-and-react-making-a-car-move-through-the-road-like-on-uber-part-1-4eo0

I expect to complete this in about three weeks (most likely two, just trying not to underestimate) and can provide daily updates on progress. I am currently employed so I would provide more updates during weekends. 2) radchukd has applied to start work _(Funders only: approve worker | reject worker)_.

Hi, I have recently created something similar for Badger DAO. Demo - https://badger-hackathon.vercel.app/ Gitcoin - https://gitcoin.co/issue/Badger-Finance/gitcoin/11/100026092 Code - https://github.com/radchukd/badger-hackathon/tree/badger-portfolio-hackathon

I would use nextjs with typescript and styled-components and the front-end library of your choice(whichever you find suitable). It would take me 2-3 weeks. 3) jehamanantonius has applied to start work _(Funders only: approve worker | reject worker)_.

Github is good project community 4) bshevchenko has applied to start work _(Funders only: approve worker | reject worker)_.

Let’s first discuss it in Telegram @bruceomni **5) invinciblemax has applied to start work (Funders only: approve worker | reject worker)_.**

Hi I am from 4EVERLAND team, our team is very interested in this project, our platform can help Compound's front-end developers to deploy in IPFS through our service, and provide a gateway compatible with Http protocol and global acceleration, we believe that any project can make the project more decentralized development through the front-end development of the community, I wonder if we can step into this plan together with the official. 6) rloovi has applied to start work _(Funders only: approve worker | reject worker)_.

Hi. I am interested in working on this project. I'm c#, JavaScript and solidity developer. I have some experience in Web3. In last few days ,I have some free time doing some analysis about compound.finance contracts, and realize that I can do this for you in less than few weeks. This project will be my fist project on GitHub ,although I have more than 15 years experience in development section. My plan in doing this project is using pure JavaScript as front end and using Web3 and Ethers libraries to interact with compound.finance contracts on blockchain.

Learn more on the Gitcoin Issue Details page.

[0xkarl]

Got started on this here https://compound-v2.vercel.app. Looks like the compound.js library will be sufficient in providing the required data. Looking forward to properly implementing this once approved on the bounty.