aave/aave-ui

[DEPRECATED] An open source interface for the decentralized liquidity protocol Aave

aave-ui's Issues

Allow user to be able to repay borrowed positions with aTokens

• Currently the user can repay borrowed positions either from their wallet balance OR their current collateral. A nice feature would be if they could repay their debt with some of their aTokens. Currently when u borrow Dai u can only repay with Dai. For next iteration if borrow with aDai you can also repay with aDai. FE repayment view should show the user has an aDai balance. They should be able to repay with dai OR aDai.

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Jobs to be done

• When I have positions borrowed on Aave, I want to the ability repay in atokens, so I don\t have to use my other assets.

• When I am have borrowed positions in Aave, I want to be able to know my options for repayment, so I know that I am aware of how I can repay.

• When I have positions borrowed in Aave, if i dont have any atokens, I should not be able to see this option available it should be disabled.

• When i want to repay, I want to know the values of my positions and the outstanding repayment balance, so I can chose which currencies I can repay in.

Examples 🌈

Motivation 🔦

Design Specifications

https://www.figma.com/file/R3a0OuN6jKoLnAo5mvAx6M/V3%3A-Repay-with-aTokens?node-id=9%3A9

Connecting to AAVE protocol should show ENS username

Background:

A user provided feedback that we should show ENS username and avatar when users have connected their wallet in the dashboard. When users have connected their wallet it currently shows "Ethereum Mainnet 0xxx…..4545". If a user has an ENS domain that can resolve from being connected we should show that instead. For example if I own an ENS domain and I connect my wallet it should show defimark.eth with my avatar pulled from ENS. See below the uniswap example.

ENS Specifications

https://gist.github.com/Arachnid/9db60bd75277969ee1689c8742b75182

Acceptance Criteria

When a user connects their wallet to the AAVE protocol we should show their ENS name and avatar if it exists.

If the user does not have an ENS registered show the default Ethereum Mainnet and their wallet address

Avalanche caching server doesn't work

Prerequisites

• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When i enable caching server on avalanche, it still uses light mode.
There seems to be an error on he gql side: overflow (fault=\"overflow\", operation=\"toNumber\", value=\"131773801700889904\", code=NUMERIC_FAULT, version=bignumber/5.3.0)

Expected Behavior 🤔

Should work like with other networks.

Steps to Reproduce 🕹

Visist app.aav.com & select avalache market.

Allow users to enable Efficiency Mode

If you borrow stablecoin assets of the same category. Currently in v2 we can only get 80% borrowing power. In v3 you can borrow up to 98%. The user needs to toggle if they want to enter into efficiency mode or not. The user needs to limit himself to a certain category of assets being borrowed(For example stablecoins).

They should be able to enable efficiency mode of ONLY 1 category at a time. If user activates efficiency mode and choses stablecoins. Deposit usdc and borrow dai USDC will have 99% borrowing power instead of 80%.

To learn more about v3 features see the governance proposal: https://governance.aave.com/t/introducing-aave-v3/6035

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

• When I want to borrow more of a collateralized asset, I should be able to trigger emode, so I can borrow more of a an asset(Up to 99%).
• When I want to enter efficiency mode, I should know the reason why I can only select one category, so that I am aware of how this works
• When I enter efficiency mode, I should be able to select the category of coins that I want to select, so that I can borrow an asset of that category.

Examples 🌈

Design Specifications: https://www.figma.com/file/SRPFQfp6ta3lkWqN0HreWE/V3%3A-E-Mode

Prototype: https://www.figma.com/proto/SRPFQfp6ta3lkWqN0HreWE/V3%3A-E-Mode?page-id=623%3A1551&node-id=623%3A1554&viewport=241%2C48%2C0.35&scaling=min-zoom&starting-point-node-id=623%3A1554

Motivation 🔦

Bundle size improvements

The current aave-ui is huge(13.7MB) and I think we should find ways to decrease bundle size & setup some sort of ci to prevent huge size regressions.

This would be nice in terms of ux - especially for ipfs deployments where replication might be slow & even slower for gigantic files.

Checked via bundle analyzer to find some(i'm sure there are more) culprits:

• paraswap-sdk seems to load a complete ethers 4. bundle via https://github.com/0xProject which might be resolved soonish ~300kb
• for the bigger charts the app uses visx, but not everyhing was migrated so apexcharts is still present with ~470kb

drop external gas recommendation

The aave app currently uses an external service for gas estimation.
In #33 I replaces gasnow with paraswap gas api, but while doing this I started wondering if we really need this.

Most interactions on the aave protocol don't need to happen fast.
Except for liquidations and swaps most transactions don't rely on timing - therefore I think i should be possible to completely drop the recommendation & instead go with the wallets getGasPrice/ rely on people speeding things up there.

Need to do some benchmarking on getGasPrice troughout supported wallets though.

Deposit matic in the history shows change of usage as collateral instead of deposit

Background:
When a user deposits matic into the pool, it should show up in their history. This currently happens however, it is shown as a change of usage as collateral. I feel this is a bit confusing for the user because they did a deposit but it shows up as usage as collateral

Borrow/ Supply cap

Summary 💡

Supply and Borrow Caps: Aave Governance will be able to configure both borrow and supply caps. Borrow caps would allow Governance to set limits on how much of each asset can be borrowed, while supply caps allow Governance to vote to limit how much of a certain asset can be supplied to the Aave Protocol. Borrow caps minimize liquidity pool insolvency while supply caps reduce protocol exposure to a certain asset and help prevent attacks like infinite minting or price oracle manipulation.

For more details on V3
https://governance.aave.com/t/introducing-aave-v3/6035

Tasks 📋

• add borrowCap / supplyCap to UiPoolDataProvider
• add caps to reserve view deposit / borrow
• check on the ui before borrow / supply if caps are reached
• when supply cap is reached show meaningful error

Design Spec

https://www.figma.com/file/0sno2ECNT9Mi3GntwFhwIb/V3%3A-Borrow-%26-supply-caps?node-id=9%3A9

isTestnet should be a flag on the network level

Currently testnetworks are hardcoded in the code which makes testing with unsupported testnetworks cumbersome.

isTestnet:
          network !== Network.mainnet &&
          network !== Network.polygon &&
          network !== Network.avalanche,

Instead there should just be a isTestnet flag on the network level.

Add APR to reserve overview

APY can be a confusing metric to understand. To help users better understand their deposit and borrow positions it might be a good idea to add the corresponding APR and daily interest rate to the overview page.

This guide details the calculation: https://docs.aave.com/developers/guides/apy-and-apr

Add badge/tooltip for aAMPL liquidity mining

The Ampleforth project runs a liquidity mining program for AMPL depositors on Aave. This issue proposes adding a badge, similar to Fei's Tribe badge, to let Aave users know about this.

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Proposed implementation is here:
#81

Examples 🌈

Motivation 🔦

The goal is to help Aave users know about all opportunities available in a lightweight way, but this does require staking on a third party platform so warrants some discussion. Thoughts on whether this is good to add?

Add permit support for pool actions

The V3 TxBuilder will support permit instead of approve for token transfer actions (supply, repay, etc.). This means that you will need to sign + one transaction instead of 2

• Add UI elements to display approve or permit depending on TxBuilder
• Use signTypedData (https://docs.ethers.io/v5/api/signer/#Signer-signTypedData) in place of signTransaction for permit
• Create option to fallback to approve if permit fails or is not supported by certain wallet

Empty screen on staking page

Empty screen on staking page for an unauthorized user

if we open the staking page as unauthorized user we get a blank screen

Should we remove rewards info on markets page for mobile

On mobile, when you click on the rewards it gives some basic information about the rewards. However there can be multiple rewards on a specific market. Should we just remove this information?

Acceptance Criteria

• On mobile devices remove this rewards information dialog

incentive claim logic

currently the claim button is dependent on the emission, which is wrong as emission can have ended while you're still having incentives to claim.

Multi incentive UI

Aave ui should support multiple incentice claims per market like on mainnet proto with aave/tribe.

https://www.figma.com/proto/sCtI8ad206YKc2uADZY70W/TRIBE-Rewards?page-id=315%3A13943&node-id=315%3A13944&viewport=241%2C48%2C0.21&scaling=min-zoom&starting-point-node-id=315%3A13944

Notification or Announcements of new features, asset listings, governance proposals

Background: We currently dont have a good way to indicate to the user in the application new asset listings, announcements, new governance proposals, changelog etc. One nice feature would be to have a bell icon which shows the latest updates across the Aave ecosystem.

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

When a user is inside the Aave app, we can add a bell icon which when clicked shows a history of the latest changes in the app. From governance proposals, new features, new listings etc.

Examples 🌈

Motivation 🔦

Stakedao has a nice way to indicate updates to the user

links to Uniswap V2 pools are broken AAVE AMM

Prerequisites

• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Expected Behavior 🤔

Links to the Uniswap V2 pools are broke in AAVE AMM. Links don't take you to correct Uniswap page.

Link should work and take you to correct Uniswap page.

Steps to Reproduce 🕹

Steps:

(1) Go to AAVE AMM
(2) Click on Deposit
(3) Click on one of the Uniswap V2 pools (ex. UNI UNI/WETH)
(4) Click on "View Pool

Your Environment 🌎

info

  browser: chrome
  os: win10
  vpn: yes

Console errors:

[error]: ...

Update the security page on the website to the latest design specifications

Background
We have been asked from legal and design to update our security page on the Aave website. Ive attached an image for reference

Acceptance Criteria

• Update the security page on the Aave website to the latest design specifications with the updated text.
• Figma Link: https://www.figma.com/file/IzJji5GA8FaRnGOt9Q9tYN/Website%3A-Security-Page?node-id=775%3A121
  

Show the toal APY (earned paid) from the protocol on the dashboard screen

Some protocols indicate to the user the amount paid APY from the protocol to the user. This is useful as it indicates to the user how much they have earned from supplying as an LP.

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

In my dashboard there should be an indicator either through an integer how much the user has earned through the protocol over time.

Examples 🌈

Motivation 🔦

Design Specifications

https://www.figma.com/file/llDg9En4y8aDmgjdqTryg0/V3%3A-Net-APY?node-id=9%3A9

Connecting to AAVE protocol should show ENS profile Picture

A user provided feedback that we should show ENS username and avatar when users have connected their wallet in the dashboard. We quickly updated this to add the ENS username, however we still are missing the profile picture. We first need a design and then we can implement this functionality.

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

• When a user connects their wallet. It should show their ENS name + profile picture if they have registered either of those.

Examples 🌈

ENS Specifications

https://gist.github.com/Arachnid/9db60bd75277969ee1689c8742b75182

Motivation 🔦

We quickly implemented the ENS username first, see here #48

Jobs to be done

• When im logged into the aave app and connected my wallet, I should see my avatar and ENS username if it is configured, so it is easy to identify which wallet is connected
• When my wallet is connected, and I click the menu bar, I should see my ENS avatar and ENS username with the address below, So i know which address im connected with
  

Design Specifications

https://www.figma.com/file/0ClevOXCXZioRVpogcNMFh/ENS-Profile-Avatar?node-id=229%3A3580

Add Arbitrum Rinkeby testnet market

Add configuration for a new Arbitrum Rinkeby testnet market.

TO-DO: Add deployed contract addresses and link to the deployed code on this issue

Something went wrong with mydashboard

Everytime i opened my dashboard on aave,it shows: Something went wrong
Please report the problem to our developer team so they can look into it.

My question matic address is 0x7DF95bB85f16602D9779972c8D3aD528bd1A9Fb0
I try other address
, That is ok. Could someone tell me how to enter the normal dashboard?

Polygon WMATIC Rewards Displayed Wrong

Prerequisites

• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When trying to flashswap collateral during
network congestion, I created multiple transactions that were pending.
(Polygon/MATIC network)

After finally resolving the issue, and getting my desired allocation of collateral,
my WMATIC rewards were displayed as +178 WMATIC.

When I claimed rewards, I received close to what I believe to be the correct amount (0.99WMATIC).

Expected Behavior 🤔

The WMATIC rewards balance should have been displayed correctly as lower
(<1 WMATIC), but they were really high!

Steps to Reproduce 🕹

Steps:

0. Polygon/MATIC network congested / slow.
1. Attempt to swap USDC for DAI with slippage set to 0%
2. Try to resubmit the transaction multiple times, and it's not going through, even when raising gas to speed it up
3. Cancel the transactions, and try manually withdrawing USDC collateral
4. WMATIC is displayed incorrectly as a really high number ! (Maybe related to flashloans, and balance being temporarily inflated ?)

Your Environment 🌎

info

  browser: Firefox / METAMASK
  os: win10
  vpn: NO

Console errors:

[error]: ...

Add Contribution guideline linking to how pr linking works & recommend using it.

• add issue templates
• update docker to a maintained version
• write a guide on how to add tokens
• write a guide on how to mock wallets
• aave-ui should clarify in the contribution guidelines that it won't promote any 3th party

Community sourced FAQ

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

When an issue/question is reported a lot of time we should put it into a FAQ, so we can reference it the next time it's being asked.

Examples 🌈

This could be just part of the readme. A seperate md file or a section in the app.

Motivation 🔦

People are often confused about the same things. e.g. APR/APY - might make sense to explain it once in detail.

Market select shouldn't show when there#s only one market.

Prerequisites

• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When there's only one market, there's stil the market select dropdown - which has only one choice.

Expected Behavior 🤔

Dropdown should disappear when it doesn't make sense?

Steps to Reproduce 🕹

Disable all markets except one.

Update to paraswap v5

Paraswap v5 brought some useful improvements and paraswap on avalanche only supports v5+, so the aave-ui needs to upgrade to v5.

Debt ceiling / isolated assets

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

“Isolation Mode” is intended to allow Aave Governance to enact risk mitigation features when a new asset market is created on the protocol.

When a community member submits a governance proposal to create a new asset market on V3, the proposal can seek to list the assets as “isolated collateral” such that users supplying those “isolated” assets can only borrow stablecoins that Aave Governance has “permissioned” to be borrowed in isolation mode, up to a specified debt ceiling.

When a user supplies an “isolated asset” as collateral, that user can only use that asset as collateral; even if the user supplies other assets to the protocol, the user can only earn yield on those assets and cannot use those assets as collateral.

To see more details on V3
https://governance.aave.com/t/introducing-aave-v3/6035

Tasks 🔦

• UiPoolDataProvider needs to provide DEBT_CEILING_DECIMALS , isolationModeDebtCeiling, isolationModeTotalDebt
• the ui needs to check before borrow if debt ceiling allows borrowing min(isolationModeDebtCeiling- isolationModeTotalDebt, availableLiquidity)

The idea is to put the calculation into formatReserves so it's recalculated whenever there's updated blockchain data available

We should update the text from Ethereum network to network now that we support multiple networks

Because we now support multiple networks, we need to update the text in the helper dialog so the user doesnt get confused if they are using a network other than ethereum.

Prerequisites

• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

It currently assumes that the user is always on the ethereum network. It is possible they may be on polygon or avalanche.

Expected Behavior 🤔

It should be network agnostic. We should update the text to be " 'The transaction may fail unless sufficient gas price is used to confirm the transaction in time. Failed transactions are also subject to a fee by the network. Use the fast gas price option to reduce the likelihood of the transaction failing.',"

Steps to Reproduce 🕹

Steps:

Your Environment 🌎

info

  browser: chrome
  os: win10
  vpn: yes

Console errors:

[error]: ...

swap redesign

swaps & repay with collateral should show both best/worst outcome, not only worst.

#18

Access to kovan governance/staking

Aave has contracts deployed for governance and staking on kovan. This allows:

• devs to preview their changes
• users to get familiar
  in a 0-cost environment

Right now the only way to access kovan staking/ governance is by checking out the repo and changing the config.
I think it would be nice to have a toggle on the ui, to switch between the two or similar.

utilize @aave/contract-helpers @aave/math-utils libs for UI pool data provider

@aave/protocol-js has historically grown over aave v1/v2 and workarounds piled up. Therefore a completely new library was developed to solve long outstanding issues in the code & bundle process.

Things are getting stable enough to utilize in aave-ui so let's start the efforts

Investigate AMPL yield bug

Background: A bug was reported in the aave governance forum about Ampleforth APY.

From Alexandra
The reserve seems fully utilised, based on the interest rate model the rate should borrow rate should be >10,000% the slope 2; and actually with the math util approximation close to 180k

While the Lending Pool Reserve Data and UI say 749.86%

There also seem to be some issues in the Utilisation Rate chart in the front end

migrate to .env over docker-compose config

When working on cypress setup i realized how annoying & unnecessary our configuration via docker-config is.

The problem is that to have a slightly different setup (e.g. other networks) you have to fork and alter existing files eventually resulting in merge conflicts with upsteam.
I think aave-ui should follow common practice of having a .env and a .env.test, env.x so you can either create your own .env or just copy over one of the supplied .env files.

Update Dialog with information about cool down period.

Background

When users unstake they need to wait for 10 days for the cooldown period. And then they'll have only 2 days to unstake.

Problem

Not all users understand how it works. They message Pablo.

Task

Help users to understand how it works and decrease submits to support.

Designs
https://www.figma.com/file/sMydmvG8ZtF7xq0EXQ24qx/Staking-Update?node-id=186%3A8001

Acceptance Criteria

Add the new dialog up to the latest design specifications

.

migrate to graphql-ws

https://github.com/enisdenjo/graphql-ws

https://github.com/apollographql/subscriptions-transport-ws#graphql-ws is deprecated

enable nash

nash doesn't need an api key so it could be enabled on ipfs i think.

Show warning when reserve is close to being fully utilized

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

When I try to withdraw from a close to fully utilized reserve, there#s a good chance that someone else will do the same and thus one transaction will fail. While this can't be prevented, I think the ui should show a warning that this might happen, so people can increase gas or wait till utilization cycles back to equilibrium.

Examples 🌈

Motivation 🔦

There should be less users wasting gas on failing transactions.

Add RepayWithATokens to aave-ui

When proposals are cancelled, we should not see buttons to still vote on them

When a proposal is submitted and then cancelled, when you enter the application on the proposal page it shows the ability to still vote on this proposal.

Prerequisites

• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

If a proposal is cancelled the section where it says "Your voting information" should not show buttons to vote if this proposal is already cancelled.

Expected Behavior 🤔

These buttons should not be displayed if the vote is cancelled.

Steps to Reproduce 🕹

Steps:

1. Go to app
2. Click governance
3. VIsit a proposal you voted on that was cancelled(we need a cancelled AIP)
4. Check if buttons are there

Your Environment 🌎

info

  browser: chrome
  os: win10
  vpn: yes

Console errors:

[error]: ...

Add bridge banner for Arbitrum

Add logo for Arbitrum bridge in src/ui-config/networks.ts

move from supported networks to supported markets

currently there's an env variable REACT_APP_SUPPORTED_ETHEREUM_NETWORKS which allows enabling/disabling markets for a whole market. That's unfortunate as it doesn't allow enabling/disabling of a certain market within a network.

Therefore REACT_APP_SUPPORTED_ETHEREUM_NETWORKS should be removed and REACT_APP_SUPPORTED_MARKETS should be introduced which will allow setting the exact markets to show.

governance rpc mode doesn't work

When using light mode - which will switch the app to user rpc over caching-layer/thegraph - for governance it will keep using thegraph.
That is on purpose atm, as the rpc implementation currently spams a lot of rpc requests eventually getting rate limited by public rpcs, but we should find a way to fetch the required data in a more reasonable way.

Add guide for testing the Aave frontend with network forks

• Open source tenderly fork tool
• Detail steps of creating fork, adding to wallet, and enabling fork in browser console

Improvement: Make it more clear for the user that they can use other web3 providers not shown

When connecting a web3 wallet with the Aave protocol, we show a list of possible providers. We should give a hint to the user or update the disclaimer to let them know they it is possible to connect to the protocol with any web3 browser or wallet connect connection than the icons shown.

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

We should update the disclaimer text or provide a hint somewhere in this UI to indicate to the user that they can connect with any web3 browser or wallet connect connection

Examples 🌈

Motivation 🔦

A user may not realize they can connect with their wallet if it is not shown here as an image

Replace Network with ChainId

Both chainId and network are used on the client and there's lot of transformations between the two.
Let's refactor to only use ChainId everywhere.

Sorting on avalanche market by market size sorts incorrectly

In the Aave Avalanche market, when you are sorting by USD value. If you click market size it does not sort them correctly. It appears to be sorted by the native size and not the market USD size. See image

Prerequisites

• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Column is not sorting numerically from largest to smallest

Expected Behavior 🤔

Sorting for USD and clicking Market size is sorting by native market size and not USD value. See image column market size.

Steps to Reproduce 🕹

Steps:

1. Visit aave and select avalanche market
2. on markets page select USD at top left hand side
3. Click sort on market size

Your Environment 🌎

info

Brave
Version 1.30.86 Chromium: 94.0.4606.61 (Official Build) (arm64)

Console errors:

[error]: ...

allow swaps on avalanche

Liquidity swap should be enabled for avalanche.

blocked: contracts are not deployed yet

Add IPFS Pin to Crust Network

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Since AAVE has already deployed the frontend to IPFS(Pinata), we proposed PR #122 to help AAVE's frontend to extend more replicas in a decentralized way.

Crust Network is an incentive protocol beyond IPFS, now it has 7000+ IPFS nodes and over 2000+ PB IPFS storage volumes around the world. It can help AAVE's frontend be unstoppable and make it more decentralized!

Examples 🌈

1. Uniswap is using the Github Action -- ipfs-crust-action to Pin the Dapp to IPFS in Github Action way. Here is the code ref(https://github.com/Uniswap/interface/blob/main/.github/workflows/release.yaml#L58-L64), and here is the issue introduced why Uniswap needs Crust([CI] Uniswap Interface decentralized IPFS pin Uniswap/interface#1339)

2. Polkadot Apps is using the crust-pin node package in the CD process, here is the code ref(https://github.com/polkadot-js/apps/blob/master/scripts/ipfsUpload.mjs#L94-L99)

Motivation 🔦

1. High Availability: frontend files will be distributed to 30+ IPFS nodes in Crust Network;
2. Decentralization: all the nodes in Crust Network are distributed and decentralized;