Stake LQTY Form

• As a user, I want to be able to stake my LQTY rewards using my web3 wallet.
• As a user, I want to have option to click on max button for staking max amount of LQTY available in my wallet.
• As a user, as part of the the LQTY stake form, I should see my staking share.
• As a user, as part of the the LQTY stake form, I want to see my average rewards predicted based on past 6 months past performance.

Stake LQTY Info Panes

• As a user, I want to see a pane with LQTY price action chart with current price displayed.
• As a user, I want to see a Fee Revenue pane in the Stake LQTY dashboard.
• As part of the Fee Revenue Pane, I want to see my return on investment (note: What is the return percentage? Seems unclear).
• As a user, I want to see the confirmation screen of my Stake LQTY deposit, including the T&C for stake price change.

Implement this part of the design

Should be implemented on these pages:

• trove
• stability
• staking

This task requires to develop Header/Navbar, Footer and implementing it as a Layout

LUSD Stability Pool Form

• As a user, I want to deposit LUSD in the LUSD Stability Pool so that I may earn ETH and LQTY.
• As a user, I want to see the confirmation screen of my LUSD Stability Pool deposit, including the T&C for trove liquidations.
• As a user, upon acceptance of the T&C for trove liquidations, I want to confirm my LUSD Stability Pool deposit with my Web3 wallet.
• As a user, I want to see the success or failure displayed for my LUSD Stability Pool Deposit upon completion of the transaction.
• Upon completion of my transaction, I want to go back to the dashboard.

Stability Pool Dashboard Info Panes

• As a user, I want to see the Liquity platform liquidation performance for the last 30 days including the average return per liquidation.
• As a user, I want to see the current weekly rewards issued by Liquity platform. As part of weekly rewards pane, I would like to visit the "fixed schedule" link for more information.
• As a user, I want to see the kickback rate provided to Bankless Dao.

The task requires developing the landing page according to Figma design.

Implement Transaction feedback in the Card loader

Currently we are using this component for Transaction notification

This ticket refers to the replication of that comp functionality within the Card loader element

s

Align dev with the Figma Nav designs

• desktop
• mobile

Also when changing pages there a some weird layout shifts.

Might be related.

To reproduce:

1. Submit deposit transaction.
2. Click Cancel before transaction is confirmed.
3. Observe screen that says You have no LUSD in the Stability Pool
4. Wait until transaction is confirmed.
5. Observe that screen does not update.
6. Click Deposit
7. Observe that loading spinner is still on screen.

https://cdn.discordapp.com/attachments/971603152690356244/971828189473153065/Kazam_screencast_00019.mp4

BORROW LUSD Form

• As a user, I want to click on connect button to see my ETH balance available for collateral.
• As a user, I want to use ETH as collateral for LUSD. I want the option to click on the button for the max ETH available in my wallet.
• As a user, I want to input the amount of LUSD that I want to borrow. I want the option to click on the button to borrow the max LUSD available.
• As a user, I want to see my LUSD liquidation reserve that will be refunded upon debt repayment.
• As a user, I want to see my LUSD borrowing fee.
• As a user, I want to see my LUSD total debt.
• As a user, upon completion of the Borrow LUSD form, I want to next go to Borrow LUSD confirmation screen.

Borrow LUSD info panes

• As a user, I want to see my liquidation risk pane displayed in the Borrow LUSD dashboard.
• As a user, I want to see the Current collateralisation ratio pane displayed in the LUSD dashboard.
• As a user, I want to see my current collateralisation ratio change based on the amount of LUSD that I input into LUSD borrow form.
• As a user, I want to see the Redemption Risk pane of my LUSD trove in the Borrow LUSD dashboard.

LUSD Trove Dashboard

• As a user, I want to see my Liquity trove details.
• As a user, I want to see the Current Collateralisation ratio pane with liquidation and redemption risk summary, as well as recommendations for my LUSD trove based on my ratio.
• As a first time Stability pool depositer, I want to see the Stability Pool Action Button pane so that I can Deposit my LUSD into the Stability Pool.
• As a user, I want to see the Liquity system stats pane.
• As a first time LQTY Staking user, I want to see the Liquity Staking pane and action button to start staking.
• If I have already deposited into the LUSD Deposit Pool, I should see buttons to Adjust my Deposit, or Withdraw my rewards.
• If I have already deposited into the LUSD Deposit Pool, I want to see my LUSD Deposit and Rewards infographics.
• If I have already deposited LQTY into Staking Pool, I want to see my LQTY staked balance and rewards, as well as buttons to Adjust Stake, and Withdraw Rewards action buttons.
• If I have already deposited LQTY into Staking Pool, I want to see my staked LQTY and LUSD reward infographics.

Update to:

B1. Decentralised Finance
B2. About Liquity Protocol
B3. Smart Contract risks
C1. IMPORTANT LEGAL STUFF
C2. NO WARRANTIES

BORROW LUSD Confirmation, Loading, Success screens

• As a user, I want to see my Borrow LUSD transaction details, including liquidation trove T&C, and general transaction T&C acceptance.
• As a user, upon acceptance of liquidation trove T&C, and general transaction T&C, I want to Sign transaction so that I can borrow LUSD.
• As a user, I want to see the loading status of my Borrow LUSD transaction so that I know that my transaction is processing.
• As a user, I want to see Success or Failure status of my Borrow LUSD transaction. Upon completion of the transaction, I want to click on Dashboard button to go to main Dashboard.

When creating a trove this appears at the bottom of the screen

This task requires customizing Chakra-UI's Box component for matching our design. The current requirement is to just make the border radius 18px.

Integrate React Router into project.
Make 3 links functional in header for: Borrow, Deposit, Stake.
Setup Global routes file.
Setup state guard / wrapper to ensure that any external dependencies are hydrated for loading each of the 3 major routes.

TrovePreview.tsx
StabilityPreview.tsx
StakingPreview.tsx

Should likely be using Card component as wrapper

Since a lot of Infura API's functionality can be requested with the API key only (without need for a Secret), I think the key is sensitive enough, and anyone possessing it can technically drain quotas in the Infura account and/or trigger payment method charges for extra usage.

To reproduce:

1. Submit deposit transaction.
2. Click Cancel before transaction is confirmed.
3. Observe screen that says You have no LUSD in the Stability Pool
4. Wait until transaction is confirmed.
5. Observe that screen does not update.
6. Click Deposit
7. Observe that loading spinner is still on screen.
8. Select Stake LQTY
9. Select Stability Pool (return to the Stability Pool screen)
10. Observe that screen has updated and current deposit is recognized but the loading spinner is still on screen (Unfortunately I didn't get a screenshot of this)
11. Select Borrow
12. Select Stability Pool (return to the Stability Pool screen)
13. Observe that loading spinner is now gone.

related to #203

We need to add a ReadME file to provide a general idea about the project, branch naming conventions, and setup.

https://cdn.discordapp.com/attachments/971603152690356244/971819571810025492/Kazam_screencast_00014.mp4

When creating a trove the strange circle appears in the bottom left.

Need to set up the project with Next.js, TypeScript, Chakra-UI, and folder structure.

Add new disclaimer page, using the card component.

Implement the disclaimer content found here - https://docs.google.com/document/d/13ya_R4KYjYqYuRMwI7w6zr1pYzIDYGfpFD8cQj8kBig/edit

The cancel button and the text are the same white color as background

This disclaimer text should always appear in the background no matter if the wallet is connected or not.
The text should be brighter and more ledgible

https://cdn.discordapp.com/attachments/971603152690356244/971810678031646771/Kazam_screencast_00011.mp4

When selecting your wallet(after adding it) The modal window has 1 button, "Change "
After selecting change 1 time. if you launch the modal again it goes to the standard 3 choice wallet select "Metamask", "wallet connect", and "Coinbase Wallet"

Error in console which does not appear to affect behavior but needs investigating.
ERROR: webSocket is already in CLOSING or CLOSED state

Might be localdev related
https://stackoverflow.com/questions/48472977/how-to-catch-and-deal-with-websocket-is-already-in-closing-or-closed-state-in

Implementing linting with eslint and prettiier. Airbnb way is preferred and more fine-tuned settings are :

• Single Quotes
• No semicolon

Implement this part of the design

Should be implemented on these pages:

• trove
• stability
• staking

Currently in Bankless Loans we are not following Chakra UI best-practices when it comes to use of Chakra components and theming.

This issue would be to 1) create Button themes that match the new design, and (2) add those new theme styles to the existing buttons in the existing forms.

Looking at the Figma - I do not see a dark grey Claim button that OverAchiever and IsraelRex created. Currently am seeing all purple Claim buttons - I asked IsraelRex in Bankless Loans.

Additionally, it might makes sense to implement some sort of "ButtonGroup" variant within the theme that would handle the layout of two buttons (side-by-side). Currently there is a "layout.actions" variant named in the TSX but not implemented in chakra theme that might be an option for this "ButtonGroup" variant.

Currently in the Stability Pool form we display 3 buttons in that form. I would say to add the design to the existing buttons. Let's create a separate issue for the following: the idea being that a user would click on a single "Claim" button, and then two Claim buttons would render with each option (see Stability Pool route to see those 2 claim options today).

Given that the new form layout has not yet been implemented - it might be tricky to size the buttons as per the figma file. To get around that, my first thought is give the buttons an auto width to scale to their container. But if that existing form width is a blocker for the button width then message Birdman for another task.

Time required for this task is estimated roughly 4 to 8 hours. Keep track of your time.

The task requires developing a utility function to borrow LUSD against the user's assets. And plugging it into UI to test it out.

Setup custom theme for this project by extending Chakra-UI theme.

Note:- colors can be gathered from Figma designs.

Reference: - https://chakra-ui.com/docs/theming/customize-theme