Frontend for Opening a New Position with 1-Click-LP #710

nikkaroraa · 2022-11-05T05:47:48Z

Task:

Frontend for Opening a New Position for Mint + LP. New LP page is at /new-lp slug

Description

This is the 1st part of 1-Click-LP project, which basically builds on top of ControllerHelper smart contract.

Loom video

The frontend lets the user input ETH amount. This amount then gets split out into ethInVault and ethInLP.

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Document update

How Has This Been Tested

Couldn't test it on any network, neitherlocal nor Goerli, since ControllerHelper contract isn't ready to be deployed there. @DemolaJames is currently working on deploying it on Goerli.

So no other way but to compare it with the reference implementation in this PR. Compared the ETH deposit values and everything seems fine.

FE Checklist

I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
My changes generate no new warnings
Added video recordings if it is a UI change

User Facing Checklist

I fully understand the user problem this PR is solving
I know who the target user is for this PR and have a deep understanding of that user
I have tried this flow thinking from the pov of the target user for this PR
I (or working w someone on team) have scheduled a user test for this PR (if it is a large change)

vercel · 2022-11-05T05:47:50Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
continuouscall	✅ Ready (Inspect)	Visit Preview	Nov 21, 2022 at 7:53PM (UTC)

nikkaroraa · 2022-11-10T18:18:19Z

packages/frontend/src/state/lp/hooks.ts

@@ -252,6 +285,40 @@ export const useGetTickPrices = () => {
  return getTickPrices
 }

+export const useGetTicksFromPriceRange = () => {


I'm still not sure about this calculation. Whosoever is reviewing it, please take a look!

nikkaroraa · 2022-11-10T18:19:28Z

packages/frontend/src/theme.ts

@@ -141,4 +168,36 @@ const darkPalete: ThemeOptions = {
  },
 }

+const newDarkPalette: ThemeOptions = {


colors and fonts being used in this new lp page are different from the existing ones. hence made this a separate one.

nikkaroraa · 2022-11-10T18:19:55Z

packages/frontend/tsconfig.json

@@ -25,7 +25,8 @@
      "@styles/*": ["src/styles/*"],
      "@types/*": ["src/types/*"],
      "@utils/*": ["src/utils/*"],
-      "@queries/*": ["src/queries/*"]
+      "@queries/*": ["src/queries/*"],
+      "@state/*": ["src/state/*"]


not sure why we weren't doing this already?

alexisgauba

Here liquidation price doesn't update as I adjust collat ratio - is that out of scope for this PR and being added in a diff PR?

Also the default checkbox should uncheck itself if I adjust my collateralization ratio, and then if I re-check the box it should go back to the default ratio

We should also have the default price ranges filled out to be full range

alexisgauba · 2022-11-11T04:05:35Z

packages/frontend/src/components/Lp/MintAndLp/DepositPreviewModal.tsx

+)
+
+function getSteps() {
+  return ['Depositing ETH', 'Earning interest']


lets actually just make this one step of 'Depositing ETH' since the user isn't earning fees + funding at their deposit, they earn fees + funding over time

Got it. If not "Earning interest", there should be something else I think. Otherwise the stepper design looks incomplete.

For now I'm removing the stepper component and just keeping "view dashboard" there.

alexisgauba · 2022-11-11T04:09:04Z

packages/frontend/src/components/Lp/MintAndLp/PageHeader.tsx

+          Deposit ERC-20s, earn ETH.
+        </Typography>
+        <Typography variant="subtitle1" className={classes.subtitle}>
+          Provide liquidity to earn interest through fees and funding.


Suggested change

Provide liquidity to earn interest through fees and funding.

Provide liquidity to earn through fees.

alexisgauba · 2022-11-11T04:11:47Z

packages/frontend/src/components/Lp/MintAndLp/PageHeader.tsx

+    <div className={classes.root}>
+      <div className={classes.container}>
+        <Typography variant="h1" className={classes.title}>
+          Deposit ERC-20s, earn ETH.


Suggested change

Deposit ERC-20s, earn ETH.

Deposit ETH, earn fees

nikkaroraa · 2022-11-21T13:55:21Z

Here liquidation price doesn't update as I adjust collat ratio - is that out of scope for this PR and being added in a diff PR?

Also the default checkbox should uncheck itself if I adjust my collateralization ratio, and then if I re-check the box it should go back to the default ratio

We should also have the default price ranges filled out to be full range

Re: Liquidation price and Default checkbox should uncheck

It works as expected now.

Re: Default price ranges filled out to be full range

The max price for full range would be a really big number, wouldn't look good in the input IMO. Can we change "Default" label to "Use full range" instead? Would that be clear enough?

nikkaroraa changed the title ~~[WIP] Frontend for opening a new position with 1-click-lp~~ [WIP] frontend for opening a new position with 1-click-lp Nov 5, 2022

vercel bot deployed to Preview November 5, 2022 06:05 View deployment

vercel bot deployed to Preview November 5, 2022 06:36 View deployment

vercel bot deployed to Preview November 7, 2022 19:28 View deployment

vercel bot deployed to Preview November 9, 2022 12:06 View deployment

vercel bot deployed to Preview November 9, 2022 12:31 View deployment

vercel bot deployed to Preview November 9, 2022 12:54 View deployment

vercel bot deployed to Preview November 9, 2022 18:07 View deployment

nikkaroraa force-pushed the uno-click-lp branch from 332d57b to b32a291 Compare November 9, 2022 18:24

vercel bot deployed to Preview November 9, 2022 18:27 View deployment

nikkaroraa force-pushed the uno-click-lp branch from b32a291 to 822a7fa Compare November 9, 2022 18:29

vercel bot deployed to Preview November 9, 2022 18:33 View deployment

nikkaroraa force-pushed the uno-click-lp branch from 822a7fa to 31fa866 Compare November 10, 2022 06:37

vercel bot deployed to Preview November 10, 2022 06:40 View deployment

vercel bot deployed to Preview November 10, 2022 14:49 View deployment

vercel bot deployed to Preview November 10, 2022 18:15 View deployment

nikkaroraa commented Nov 10, 2022

View reviewed changes

vercel bot deployed to Preview November 10, 2022 18:24 View deployment

nikkaroraa force-pushed the uno-click-lp branch from b20f7aa to dfda8ed Compare November 10, 2022 19:07

vercel bot deployed to Preview November 10, 2022 19:11 View deployment

nikkaroraa force-pushed the uno-click-lp branch from dfda8ed to e93ac9f Compare November 10, 2022 19:12

vercel bot deployed to Preview November 10, 2022 19:16 View deployment

nikkaroraa changed the title ~~[WIP] frontend for opening a new position with 1-click-lp~~ Frontend for Opening a New Position with 1-Click-LP Nov 10, 2022

nikkaroraa requested a review from KMKoushik November 10, 2022 20:43

alexisgauba suggested changes Nov 11, 2022

View reviewed changes

nikkaroraa added 4 commits November 20, 2022 17:14

feat: TokenInput component

55417f5

feat: styling done, still very messy

4397329

refactor: separated into individual components

8b4cab2

feat: modal stepper ready, also ready for demo

968f105

nikkaroraa added 5 commits November 20, 2022 17:31

feat: debounce ethToDeposit for better performance

645fc5b

refactor: pull everything to one subdir up

ee47657

style: change input width based on input length

13efe06

refactor: general refactor for better reusability

431a9de

feat: work on showing input errors

34d3148

vercel bot deployed to Preview November 21, 2022 07:05 View deployment

nikkaroraa added 5 commits November 21, 2022 12:35

refactor: no need to use TokenPrice component

dc79b30

style: use mono font for numbers

e7bca00

fix: remove lpPriceError on setting to default

b897377

style: input width changing based on number of chars

85b9c28

feat: add uniswap lp nft warning

cfc1ecd

vercel bot deployed to Preview November 21, 2022 08:57 View deployment

nikkaroraa added 6 commits November 21, 2022 17:16

feat: show minCollat error

dda22c0

typo: add fullstop to error messages

96bfab3

feat: collateral ratio slider optimizations

3317f13

feat: change collat ratio value based on min value

dda0ea0

feat: min collatRatio error

86f1bdc

PR reviews

df26fbe

typo

a276f68

vercel bot deployed to Preview November 21, 2022 14:11 View deployment

nikkaroraa added 3 commits November 21, 2022 23:04

feat: add footer

5327386

very minor

b3971ca

style: hide modal scrollbar

8d129be

vercel bot deployed to Preview November 21, 2022 18:02 View deployment

nikkaroraa added 2 commits November 22, 2022 00:46

fix: handle the case of single asset LP position

c165f2f

style: minor style changes

9f43c4f

vercel bot deployed to Preview November 21, 2022 19:26 View deployment

fix: handle the case of invalid initial bracketing for liquidation price

1dc55e8

vercel bot deployed to Preview November 21, 2022 19:53 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Frontend for Opening a New Position with 1-Click-LP #710

Frontend for Opening a New Position with 1-Click-LP #710

nikkaroraa commented Nov 5, 2022 •

edited

Loading

vercel bot commented Nov 5, 2022 •

edited

Loading

nikkaroraa Nov 10, 2022

nikkaroraa Nov 10, 2022

nikkaroraa Nov 10, 2022

alexisgauba left a comment

alexisgauba Nov 11, 2022

nikkaroraa Nov 21, 2022

alexisgauba Nov 11, 2022

nikkaroraa Nov 21, 2022

alexisgauba Nov 11, 2022

nikkaroraa Nov 21, 2022

nikkaroraa commented Nov 21, 2022 •

edited

Loading

	Provide liquidity to earn interest through fees and funding.
	Provide liquidity to earn through fees.

Frontend for Opening a New Position with 1-Click-LP #710

Are you sure you want to change the base?

Frontend for Opening a New Position with 1-Click-LP #710

Conversation

nikkaroraa commented Nov 5, 2022 • edited Loading

Task:

Description

Type of change

How Has This Been Tested

FE Checklist

User Facing Checklist

vercel bot commented Nov 5, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexisgauba left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nikkaroraa commented Nov 21, 2022 • edited Loading

Re: Liquidation price and Default checkbox should uncheck

Re: Default price ranges filled out to be full range

nikkaroraa commented Nov 5, 2022 •

edited

Loading

vercel bot commented Nov 5, 2022 •

edited

Loading

nikkaroraa commented Nov 21, 2022 •

edited

Loading