Sharing Progress with the community on Alternative UI

Development
1

Hi folks, gm!

I am Sejal. We are one of Aave’s grantees. In my last post, I shared the first iteration of designs for alternative UI we are building for Aave to onboard non-defi folks. We were amazed to see the response and especially support we received from Aave team - super encouraging. Special shoutout to @daveytea, @fig, @0xmigi, @0xGraham, @anstadu.

After multiple iterations of designs we started the development and are in middle of it. I wanted to share that we have competed the lending part of the interface and I would like to invite you all to test it out here https://aave.daolens.com/
Putting below in detail - What have we done? What is left? What is coming next?

#What have we done in lending?

  1. As per the redesign plan - we’ve made it possible to lend / supply assets on our wallet.
  2. We can choose from a market that we want to lend our assets into.
  3. Upon choosing the market, we are able to select an asset with a positive balance from the grid of assets, or we can choose an asset to lend from the dropdown
  4. We’re able to set an amount that we wish to lend, and it will show us the USD equivalent of the same.
  5. The user will be able to approve / sign the process from their wallet, after which the lending could be done.
  6. They need to approve / sign only once for a particular asset on the chain.
  7. Once approved, the same button can be used to lend the asset, which will ask the user to confirm the transaction on the wallet.
  8. Once confirmed, the user will be given an AToken (AAVE token) equivalent of the lent amount which has to be added to the wallet for the first time and then onwards it will be added automatically.
  9. Once the AToken is added, the lending process is completed and then the user can move on to check their wallet or lend another asset.

What is left?

  1. Testing the process with other wallets, and assets.
  2. Tested only on Testnet as of now.
  3. The borrowing flow of the transactions
  4. Mobile friendly (responsive) version of the app.
  5. FTUE flows to help the user understand how to use the app.
  6. Handling some edge cases.
  7. Handling Collateralization and health factors.

#Borrowing - short summary what we are picking up

  1. We have begun working on the borrowing flow locally.
  2. Just like the lending flow, we’ll make sure borrowing is super simple for the user.
  3. We will let them know about the assets and amounts they can borrow.
  4. Making sure that the end-to-end flow is seamless
  5. We’ll only support stable APY for borrowing as of now, since it will be beneficial for the new-comers of this platform.

#FTUE Details

We’ll be building an FTUE (First Time User Experience) for the new-comers of our community. This FTUE will help them understand the process of WEB3 lending and borrowing along with all the other pieces (getting tokens, understanding wallets, learning about AAVE, etc.) The FTUE will be built for the Lending and Borrowing flows.

A simple FTUE is listed down here which can be used to lend assets on the current lending flow by Daolens.

#Prerequisites

  1. Make sure metamask is active with some testnet tokens.
  2. The “testnet” switch on the portal is switched-on.
  3. Application should be viewed on a desktop or a laptop screen

#Flow for lending

  1. Connect your metamask wallet with the portal by giving it the required access.

  2. Select the desired market from the top right of the Navbar.

  3. Select the “Earn Interest” option on the home page, this will initiate the lending process.

  4. All the testnet tokens which have a balance above 0 will be shown at the bottom of the card visible, we can select the desired token to lend from this list.

  5. All the other tokens with 0 balance will be shown on the dropdown when we click on “Choose asset to lend”.

  6. Once an asset is selected, enter the amount you wish to lend.

  7. A dollar equivalent of the token amount will be shown towards the right of this input.

  8. We can click on “MAX” to select the entire wallet balance and lend it at once.

  9. Once the amount is added

a. If the token lending is approved from the wallet, we can skip to step 11
b. In case the token lending is not signed / approved yet…

  1. We can click on the “Approve” CTA at the bottom of the card, this will open metamask and prompt the user to sign / approve the process. Once approved,
  2. The “Lend” CTA can be used to start the lending process.
  3. The user will then be prompted to confirm the transaction via the metamask wallet, user can accept or reject the transaction based on their interest.
  4. Once confirmed, the transaction will begin processing.
  5. After successful processing of the transaction, the user will be redirected to the success page.
  6. Here the user will be awarded ATokens with an equivalent amount that was lent.

a. If AToken of that asset already existed, it will be added to the wallet automatically.
b. In case the AToken is not present, user can click on Add to wallet CTA and confirm adding the token

  1. This AToken will be used to compute whether the user is eligible for borrowing or not.

Just wanted to share the progress and any feedback is welcome. You can try the alternative UI built till now here https://aave.daolens.com/

Thank you folks :pray:
Sejal

6 Likes
2

Wow, thanks for your hard work,

I can’t wait to see progress on your front end.

FE diversity is key for decentralization support and an alt FE can only be welcomed.

2 Likes
3

Super cool, love the minimalistic design!

Would be interesting to see gasless transactions sometime in the future :eyes:

1 Like