Giter VIP home page Giter VIP logo

palisade's Introduction

Build & Push to IPFS

Compound Web3 Front-end

Palisade is the web3 front-end experience to interact with the Compound Ethereum protocol.

Contributing

We welcome contributions from the community to help keep the Compound web3 front-end working great. You can read more here about how to contribute.

Configuration

The web3 front-end requires several items to be configured before it can be started properly. The required format is of the form of several json files that specify config options between local development (development.json) and the version that is intended to be deployed (production.json). The local and deployment scripts automatically look for those files to exist in the path config/env.

config/
├── env
│   ├── development.json
│   ├── production.json

The following is an example configuration file:

{
  "API_BASE_URL_MAP": {
    "v3_api": "https://v3-api.compound.finance/"
  },
  "DATA_PROVIDERS": {
    "development": "http://localhost:8545",
    "goerli": "https://goerli.infura.io/v3/YOUR-PROJECT-ID",
    "rinkeby": "https://rinkeby.infura.io/v3/YOUR-PROJECT-ID",
    "kovan": "https://kovan.infura.io/v3/YOUR-PROJECT-ID",
    "ropsten": "https://ropsten.infura.io/v3/YOUR-PROJECT-ID",
    "mainnet": "https://mainnet.infura.io/v3/YOUR-PROJECT-ID"
  },
  "NETWORK_MAP": {
    "mainnet": 1,
    "ropsten": 3,
    "rinkeby": 4,
    "goerli": 5,
    "kovan": 42,
    "development": 999
  },
  "DEFAULT_NETWORK": "mainnet",
  "BLOCKNATIVE_API_KEY": "YOUR_BLOCKNATIVE_KEY",
  "WALLET_CONNECT_PROJECT_ID": "YOUR_WALLET_CONNECT_PROJECT_ID"
}

Each of the top level keys have the following functions:

  • API_BASE_URL_MAP - Object mapping of Eth network name as key and value being the desired Compound Api host. This can be left as is.
  • DATA_PROVIDERS - Object mapping of Eth network name as key and value being the url of a corresponding JSON RPC host. This example shows Infura as a sample JSON RPC provider and you can find more information here. Note: this can be specified by setting in the env var DATA_PROVIDERS as JSON (e.g. export DATA_PROVIDERS='{"rinkeby": "https://infura.io/..."}').
  • NETWORK_MAP - Object mapping of Eth network name as key and value being the corresponding NetworkId value. This can be left as is.
  • BLOCKNATIVE_API_KEY - Blocknative API Key required to track transaction notifications. You can find more information here. Note: this can be specified by setting the env var BLOCKNATIVE_API_KEY. This key is not strictly required (but provides a better user experience).
  • WALLET_CONNECT_PROJECT_ID - Wallect Connect Project Id required to use Wallet Connect as a wallet type in the app. You can find more information here. Note: this can be specified by setting the env var WALLET_CONNECT_PROJECT_ID. This id is not required unless you want to enable wallet connect usage.

Getting Started

The Compound web3 front-end is written in elm and was bootstrapped with create elm app. We strongly recommmend getting familiar with the Elm framework before jumping into the Compound source code.

To get started, first clone this repo:

> git clone https://github.com/compound-finance/palisade.git && cd palisade

Next, install yarn dependencies (note, you should not use npm intsead of yarn during install because npm does not respect yarn.lock but you should be able to use npm for the other commands.):

> yarn install --lock-file

Next, build and watch for string translation changes:

> yarn watch-i18n

Note: For more information on string translations, see i18n.md

Next, build and watch for SASS changes:

> yarn watch-css

or, if you prefer just to build your CSS once, run: yarn build-css.

And separately start your development server for the front-end:

> yarn start

Note: Elm may take a while to pull in dependencies when you first run the app. At this point you should be able to navigate to http://localhost:3000 to view your application.

Deployment

This application is set-up for easy deployment as a static web site.

Generic Deployment

To deploy this application, first build your static assets:

> yarn run build-css
> yarn run build

Now the /build directly should contain all of the files necessary to serve your application from whatever hosting provider you choose. This repo includes support for two options as possible deployment targets, IPFS and Google Cloud Storage.

IPFS

To deploy the web3 front-end on IPFS, you first should be familiar with Hosting a single-page website on IPFS. Follow the instructions and you should be able to add all the files in the /build directory and obtain a IPFS hash which you can then open on any gateway provider to view the hosted web3 front-end.

Alternatively, you may wish to deploy to an IPFS hosting service like Infura IPFS. This repo includes a script to deploy the /build directory to an IPFS host specified by several environment variables.

To deploy a build to Infura IPFS:

IPFS_AUTH="PROJECT_ID:PROJECT_SECRET" \
  IPFS_HOST="ipfs.infura.io" \
  IPFS_PORT=5001 \
  yarn deploy-ipfs

Each of environment variables have the following functions:

  • IPFS_AUTH - Basic authentication for header for using the Infura IPFS add endpoint. You can find more information here.
  • IPFS_HOST - IPFS Pinning service host.
  • IPFS_PORT - IPFS Pinning service host port.

Note: The deploy-ipfs script has been tested and used with Infura IPFS. You may need a few changes to support alternative pinning services.

Google Cloud Storage

To deploy the Compound web3 front-end to Google Cloud Storage, you should be familar with Hosting a Static Site on Google Cloud. Follow the instructions on creating a CNAME record with your DNS provider and creating a fully-public bucket. Also, make sure to have the Cloud SDK tools installed, that you're logged in via gcloud auth, and that you have your correct project set.

To deploy to a gcloud bucket:

> yarn deploy-gcloud your.bucket.name

Internationalization

To learn more about internationalization, please view i18n.md.

Discussion

For any concerns with the web3 front-end, open an issue or visit us on Discord to discuss.

License

Copyright 2022, Compound Labs, Inc. and repository contributors. This repository is licensed under GPLv3 (please see LICENSE for the full-text of the license).

All contributors to this repository must release contributed code under this GPLv3 license, free of any other encumbrance. Contributors also agree that contributions may be re-licensed under MIT or BSD-3 licenses in the future without notice. In such instances, all copyright notices will be retained.

palisade's People

Contributors

ajb413 avatar alexandfox avatar arr00 avatar cryptickoan avatar hayesgm avatar kevjin avatar mykelp avatar scott-silver avatar torreyatcitty avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

palisade's Issues

https://compound.finance/governance/proposals -> Page navigation is not working when clicked on page numbers

In https://compound.finance/governance/proposals
when I clicked on page number "2" it is not redirecting to Page#2 to show next list of proposals.

Only when click on "NEXT" button it is redirecting to next Page#2.

Similarly if I am on Page#2 and click on Page#1, it is not redirecting to Page#1.

Refer : https://recordit.co/Nqw6AP0XlS

Kindly let me know in case you need additional info for this issue.

Pre-Authorization UI Bug

Overview: Compound Dashboard doesn't signal to user that pre-authorization is below the outstanding loan repayment threshold, resulting in failed transaction to repay loan. The User is confused, because the transaction is accepted on-chain but failed to repay loan amount.

Recommendation - If transaction failed due to pre-authorization being below the limit inform User via UI.

Ethscan URL: Failed Transaction due to Auth limit being too low - https://etherscan.io/tx/0x9c11099eff0cbdfc6577e71ed3d08e061399da7fb78febf2bce0dd117ebc5f25

Scenario: Users has open loan balance that they're trying to repay on compound
Given User has outstanding compound loan
And the pre-authorized amount is below the repayment amount
When User submits transaction to blockchain to repay loan amount (example above)
And The blockchain confirms the transaction, but the pre-authorization is too low to successful repay amount
Then Compound should update UI informing User their pre-authorization is too low and needs to be updated to repay

Incorrect cWBTC borrow and supply curves on frontend

The cWBTC borrow and supply curve is incorrect on the Compound v2 UI at https://app.compound.finance/markets/?market=v2

Example: Consider the cWBTC market at 80% utilization. Sample values for this point are

  • cash: 20000000000000
  • borrows: 80000000000000
  • reserves: 0
  • reserveMantissa: 200000000000000000

Entering these values into getBorrowRate and getSupplyRate in etherscan, the resulting values are 95129375951 and 60882800608 respectively. After multiplying this rate-per-block by the blocks-per-year value of 2628000, we find the borrow rate is 25% and the supply rate is 16%. But when hovering over the 80% utilization in the UI, the UI suggests a borrow rate of 24.5% and a supply rate of 18.13%. Therefore, the UI curves do not match the on-chain cWBTC deployment.

Another point of concern is that the slope of the borrow rate and supply rate in the UI is not linear. The borrow and supply rates have less than a 3% difference at 0% utilization, then have a difference of over 8% at 40% utilization, and return to less than a 6% difference at the 80% utilization point. This implies that the curves diverge and later converge, and therefore are not linear. The on-chain interest rate curves are linear.

MetaMask - RPC Error: Invalid transaction params: params specify an EIP-1559 transaction but the current network does not support EIP-1559

Steps to reproduce

  1. Use MetaMask + Trezor hardware wallet
  2. Attempt to perform any transaction on the frontend
  3. The confirmation screen never goes away, and no transaction is prompted from MM
    image
  4. The console logs the following error:
MetaMask - RPC Error: Invalid transaction params: params specify an EIP-1559 transaction but the current network does not support EIP-1559 
Object { code: -32602, message: "Invalid transaction params: params specify an EIP-1559 transaction but the current network does not support EIP-1559" }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.