aave / interface

An open source interface for the decentralized liquidity protocol Aave

        .///.                .///.     //.            .//  `/////////////-
       `++:++`              .++:++`    :++`          `++:  `++:......---.`
      `/+: -+/`            `++- :+/`    /+/         `/+/   `++.
      /+/   :+/            /+:   /+/    `/+/        /+/`   `++.
  -::/++::`  /+:       -::/++::` `/+:    `++:      :++`    `++/:::::::::.
  -:+++::-`  `/+:      --++/---`  `++-    .++-    -++.     `++/:::::::::.
   -++.       .++-      -++`       .++.    .++.  .++-      `++.
  .++-         -++.    .++.         -++.    -++``++-       `++.
 `++:           :++`  .++-           :++`    :+//+:        `++:----------`
 -/:             :/-  -/:             :/.     ://:         `/////////////-

Aave protocol interface 👻

An open source interface for the decentralized liquidity protocol Aave

Enabling users to:

• Manage and monitor their positions on the Aave Protocol, and the overall status of it
• Manage and monitor their positions on the Aave Safety module
• Participate in the Aave Governance

How to use

Install it and run:

cp .env.example .env.local
yarn
yarn dev

Contribution

For instructions on local development, deployment, configurations & feature proposals, see Contributing

Also, contributors with at least one pull request that has been merged into the main branch are eligible for a unique GitPOAP. Visit gitpoap.io to claim it.

IPFS deployment

Each commit gets deployed to IPFS automatically

There's a github action commenting the appropriate IPFS hash embedded in the Cloudflare IPFS gateway after each commit

For ease of use:

• the DNS of https://staging.aave.com will always point to the latest main IPFS hash with all networks enabled
• the DNS of https://app.aave.com will always point to the latest main IPFS hash with disabled test networks

Links known to work at some point:

• https://app-aave-com.ipns.cf-ipfs.com/#/
• https://app-aave-com.ipns.dweb.link/#/

Troubleshooting

Issue: Cannot connect to app.aave.com

The aave-ui is hosted on IPFS in a decentralized manner. app.aave.com just holds a CNAME record to the Cloudflare IPFS gateway. You can use any public or private IPFS gateway supporting origin isolation to access aave-ui if for some reason the Cloudflare gateway doesn't work for you

Just go to <your favorite public ipfs gateway>/ipns/app.aave.com

⚠️ Make sure the gateway supports origin isolation to avoid possible security issues: you should be redirected to URL that looks like https://app-aave-com.<your gateway>

License

All Rights Reserved © Aave Labs

Credits

To all the Ethereum community

interface's Issues

Tx Execution logic

Supplying assets shows incorrect $ value of the asset

Background
When a user is supplying an asset lets say ETH. The value is being shown as 4K. However current value of ETH is around $3100

AC
If the value of the asset lets say ETH is 3100, we should show 3.1k

apollo setup

SEO meta

• add fallback meta (use Meta component in _document or _app with some default for when sharing the link on social)
• add governance meta

setup basic ci

• lint
• build
• deploy

Aave protocol copy needs to be updated

Reported by

• Aave community member

We need to update this text to make it more relevant, as its just a placeholder for now

tokenIcon

The current tokenIcon implementation is flawed in some ways:

• svgs are base encoded inflating the size by up to 30%
• we load all the svgs for all markets by default as they are bundled into the main bundle

Modal UI Boilerplate

Develop the basic Modal UI that will host the different flows.

The modal component should contain:

Title   -  Close button
-----
Any Content
-----
Call to action (1 button or 2 buttons)

Depositing with faucet has incorrect text

When a user deposits the faucet, the text says "is not used as collateral"

AC

• When user deposits with faucet. Text should say "You have successfully deposited {asset} from the faucet.
  

Setup CI

• make cypress run
• migrate suite from aave-ui

MarketSwitcher

Supply in dark mode does not have the correct theming for network switching

When in dark mode, if a user clicks supply the text for switching network does not have the correct theme

Supply - Modal Flow

The supply Modal flow involves the following components:

• Input
• Supply details
• Breadcrumbs
• Represent TX state

Net APY number on dashboard v3 test net looks incorrect

Reported from a community member, the net APY looks incorrect based on the amount deposited on the users dashboard

Network: Avalanche Fuji
Deployment: https://v3-test.aave.com/#/dashboard

use commit sha in github actions

before this repo goes live we should fix github action versions to a commit as versions are mutable afaik

Yes they are and we should pin actions to a sha. Same is true for other repos.
There's an action https://github.com/marketplace/actions/ensure-sha-pinned-actions checked for sha pinning of other actions.

Emode flow

Network change functionality

Add the necessary methods to the web3 provider so when called the network is changed in the wallets

fix v3 e2e with cypress (borken with eip1193 bridge)

cypress broken with v3 permits ethers-io/ethers.js#1683 (comment)

TX Breadcrumbs - Modal Flow

Asset page box is not really necessary?

Reported by

• Aave community

User feels the box on the asset page is reduntant from a UI perspective. We can just put the text under.

Support i18n translations with SSG

Annoyances umbrella

Just collecting a few things that annoy me on current(unfinished) ui.

• switch network imo is at the wrong position, literally didn't see it a single time and am always wondering why the button at the bottom is grayed out. Feels very non-intuitive to me.
• it's weird that i can't reach details from my supplied assets. Looking for it over & over again till i relalize i have to go via collapsed assets or markets overview

Faucet

• add faucet modal flow

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.

Change collateral FLow

Fantom values seem incorrect after supply on aave v3 testnet

Reported from community
After supplying fantom, the values supplied for 9 fantom say its 217 billion

Deployment: https://v3-test.aave.com/#/dashboard

Adding logic to Supply Flow

add image optimization to build pipeline

Could happen on merge to master, same with i18n actually 🤔

Number of steps is missing from the dialog

Reported By

• Aave community member

Having the number of steps missing is not as intuitive for the user with the two buttons one disabled on enabled.

charts

We should order the messages in terms of seriousness from the top first

Reported By

• Aave community

Feedback

• In the messages section, we should sort the messages with the most critical at the top., ie liquidation

Repay Flow

Governance

• delegation modal
• vote modal
• prerender pipeline
• index page (in progress)
• proposal page

--- i think these things can probably wait till a few weeks after the release

• top x voters
• show payload

Borrow - Modal Flow

Staking

• staking page
• stake modal flow
• cooldown modal flow
• claim modal flow

move StakeUiHelperIFactory to contracts-helper package

we need getUserUIData in a humanized version over there

Dialog Width on Success does not have the correct width

When a successful tx goes through, the dialog width is not correct in regards to the design specifications

AC

• Update the success dialog to have the correct pixel width

Gas configuration is difficult to close

When a user clicks on the ⚙️ icon to configure the gas. Its not very easy to close after. Should we add an (x) after to easily remove this popover?

Rate Switch - Modal flow

Wallet connection flow

Create a button where if user clicks will be presented with connection options:

• Metamask
• WalletConnect
• WalletLink
• MewWallet
• Frame
• Torus
  (do we actually need all of these?)

Once connected, it should show ens name with avatar
it should show a dropdown with network, disconnect:

It should set the connection params to the context / provider

tx modal flow

For tx modal flow it would be nice if we had more explicit control over the tx execution on a per transaction basis.

Things i remember were sub-optimal in the current implementation:

• we have no option to set a certain gas recommendation for a specific transaction (for swap related things we would have liked to default to fast)
• having custom errors was kinda complicated (for swaps there might be non tx related errors, we solved it somehow, but it was messy)

Casting a vote

Voting process

Initial vote

A user can vote with the voting power he had at proposal creation based on the selected strategy. While that's technical and might have nuances the relevant info for the user is:

For proposal x i have voting power y. If y > 0 I can vote for or against.
I can only vote with all my power at once for a single choice. All votes are binary. yes or no, nothing in between.

During the vote

Once I voted, i know if i voted for or against & with which power.

If I have a change of mind, I can now recast my vote for the opposite choice.

After the vote

Once the vote is over I can no longer cast my vote.
I now know if i voted, with which power i voted & if voted for or against.

Withdraw - Modal Flow

add multiicon for amm

On repayment clearing input creates NaN that cannot be inputted anymore

Steps to reproduce

When a user opens the repay dialog there is an input for the amount to repay. If you press backspace on the input it shows NaN. There is no way to get enter a repayment amount anymore.

Actual Expectation

• If user clear the input it should show either a 0 OR empty input with a 0 placeholder.
• User should always be able to input a number and not get stuck on NaN
  

Rewards

• claim modal flow
• integrate in dashboard ui

Not sure if we should have the E-Mode gear without borrowings

Reported By

• Aave community

User doesnt know if we should have the gear icon without already having any borrowing.

stable rate on api seems to be broken & api seems to be stuck on 31.01

The code for generating the data is hosted here:
https://github.com/aave/aave-api/blob/master/src/services/RatesHistory.ts#L105

For utilization variable & stable rate the the data seems to be correct (except for ampl, which is a subgraph error). For stable borrow rate it's broken.

You can check on https://app.aave.com/#/reserve-overview/0x0000000000085d4780b73119b644ae5ecd22b376-0x0000000000085d4780b73119b644ae5ecd22b3760xb53c1a33016b2dc2ff3653530bff1848a515c8c5 (stable tusd on mainnet)
In theory stable should move very similar to variable, just at a higher level.

The stableBorrowRate is a bit different then the other rates as it's not based on indexes. So instead of calculating the rate we simply take a snapshot ever x seconds.

The reasons on why this could be broken:

• we don't persists the correct stableBorrowRate in RateHistoryItems, so the underlying data is wrong
• we do persists it, but the api has some bug
• ...?

---

One way to perhaps fix this would be to calculate the stable rate based on utilization instead of taking it from the subgraph? Idk, would still be nice to figure out why it's currently broken.

Gas price view and editor - Modal Flow

User doesnt understand the isolated tag

Reported by community member

• They said that the can be collateral with the isolated badge isnt clear.