[Overlapping Strategy] New form design (Create, Edit, Withdraw, Deposit)

[GrandSchtroumpf]

Require #1140 to be merged for all warning to be WarningWithIcon

fix #948
fix #1131

[cloudflare-pages]

Deploying carbon-app with    Cloudflare Pages

Latest commit:	728f988
Status:	✅  Deploy successful!
Preview URL:	https://cf2c9093.carbon-app-csq.pages.dev
Branch Preview URL:	https://issue--1131.carbon-app-csq.pages.dev

View logs

[ashachaf]

• insufficient budget indication
  when interacting with token0, there might be a case in which the result requires the user to deposit an amount from token1.
  this amount needs to be checked against the token1 wallet balance and throw an "insufficient balance" error if needed.

mockup: TBA

• do not recalculate budgets unless prices have changed
  flow:
• user enters the "edit price" page
• scroll to select anchor
  expected: budget distribution should not indicate any deposit/withdraw needed
  actual:

• playing with prices lead to the allocation split to disappear

• following a price edit, error is shown
  Cannot read properties of undefined (reading 'toString')

• once anchor is selected, enable the CTA
  currently:

[ashachaf]

• edit budget section
  when closing the section (collapsing it), reset any input data that was entered by the user.

• when entering the "edit prices" page, hide "budget distribution" section until the user selects an anchor

• incorrect calculation

• optional - adjusting the prices or spread should reset the anchor selection

• edit budget - deposit check for wallet balance
  when a user input deposit amount, there should be a check against current wallet budget
  IF input amount > wallet balance:

• do not calculate distribution on the progress bars section

• indicate "insufficient funds" under the input field

current:

updated: (the screen shot is taken from the "deposit" into existing strategy flow)

• edit budget - withdraw check against allocation amount
  when a user input withdraw amount, there should be a check against current order allocation budget
  IF input amount > order allocation balance:

• do not calculate distribution on the progress bars section

• indicate "insufficient funds" under the input field

• progress bar - insufficient budget error
  there are 2 flows with slightly different errors to them

• IF user input budget amount (in the edit budget section under deposit/withdraw) AND there is an insufficient balance indication on the 2nd budget needed
  -- error message: "You should deposit {amount} {token} from your wallet, but your wallet has insufficient balance. Consider changing token deposit amount or prices."

• IF user update prices, spread or just select an anchor AND there is an insufficient balance indication on the progress bar
  -- error message: "You should deposit {amount} {token} from your wallet, but your wallet has insufficient balance. Consider changing prices, token selection or budget."

• font size and weight are not aligned
  this should be 12px and bold should be medium

[ashachaf]

• disable the CTA if there are no changes
  when opening the "edit prices" page, the default state of the CTA should be disabled until there are changes in price, spread or budget.

• deposit flow

• remove the edit price section

• remove the edit spread section

• hide the distribution section until the user selects an anchor token

• default CTA should be disabled. enable only when there are changes to the deposit amount AND wallet holds sufficient tokens for both orders.

• deposit flow input field
  currently: when trying to input 0.1, the value shows NaN

• withdraw flow

• remove the edit price section

• remove the edit spread section

• hide the distribution section until the user selects an anchor token

• default CTA should be disabled. enable only when there are changes to the deposit amount AND wallet holds sufficient tokens for both orders.

• withdraw flow input field
  currently: when trying to input 0.1, the value shows NaN

• edit prices error
  edit prices to a state in which you need to deposit 1 of the tokens. do not open the edit budget section. click the CTA to confirm the process.

[ashachaf]

• deposit flow
  add the chart at the top of the page.
  chart is not interactive and serve as an indicator to the current strategy details.
  chart will display current strategy details.
  mockup

• withdraw flow
  add the chart at the top of the page.
  chart is not interactive and serve as an indicator to the current strategy details.
  chart will display current strategy details.
  mockup

• text updates
  on the strategy type selection, when choosing "overlapping" please add these benefits under the existing text
  current:
  Overlapping Liquidity
  A concentrated position where you buy and sell in a custom price range, used to create a bid-ask spread that moves as the market does
  updated:
  Overlapping Liquidity
  A concentrated position where you buy and sell in a custom price range, used to create a bid-ask spread that moves as the market does
  Adjustable
  Easily edit your price range and position size without having to withdraw and redeposit into a new position, saving you time, gas and a whole lotta headache.
  Auto-compounding profits
  Your profits stay within your position, earning you more!

• text change
  on "create" overlapping strategy, we show a checkbox with the following text
  current: "I've approved the edits and distribution changes."
  updated: "I've approved the token deposit(s) and distribution."

• edit prices + deposit flow

• edit an existing strategy and move it below market price

• select the buylow token (quote) and deposit any amount that you have in the wallet
  expected:

• sell high budget would indicate a full withdraw as the strategy is now below market price

• deposit input amount validation should be against wallet balance and let the user proceed
  actual:
  https://github.com/bancorprotocol/carbon-app/assets/40430285/b7c2be28-2c69-4c75-866c-1e4f17d773a3

• (optional) update checkbox text when choosing anchor token that has 0 budget
  flow:

• user edit prices of a strategy

• select anchor token to use as the value for calculating the token budget distribution
  current:
  IF selected token budget = 0, we calculate the 2nd token and eventually withdraw the full budget from the strategy with no special warning
  updated:
  IF selected token budget = 0,

• update the checkbox text

• text: I've approved the edits and distribution changes and aware that the strategy will be empty and inactive.

• (optional) expose manage menu in strategy page
  currently:
  open strategy page of a strategy you own and see the short menu

update:
open strategy page of a strategy you own and see the full manage menu

• edit prices: incorrect "insufficient" message
  edit price flow, select token and try to withdraw.
  expected: IF the input amount > allocated budget -> show the warning below the input field

• token "de-selection"
  flow:

• edit prices

• user selects 1 of the two anchor tokens

• user changed the strategy details to make it so the selected token is disabled
  expected: un-select the token and basically do not select any token. the user is now expected to select a token again
  actual: auto select the token that is now available, which means switching from the user selected token to the 2nd option.

• edit prices: inactive strategy
  flow:

• create an overlapping strategy above market price

• withdraw the entire budget

• edit prices
  actual: both token anchors are available for selection. however, following user selection, one option is disabled as the strategy is above market price.
  expected: only have 1 option enable for selection given that the strategy is above market price.
  actual 2: mark the checkbox and the CTA will be enabled without making any changes to the strategy
  expected 2: CTA stays disabled as long as the user does not update at least 1 thing in the strategy

• edit prices: spread change keeps CTA disabled
  flow:

• edit prices

• change spread

• select token
  actual: CTA is disabled
  expected: CTA to be enabled and token distribution should be updated considering the new spread.

[tiagofilipenunes]

Great work again! Just some observations. Didn't look at the e2e code, only the changes from last review.

• When editing prices on an overlapping strategy with a token with unknown market price, when entering the price, two warning checkboxes are shown but the one to enable the CTA probably shouldn't show while the price is being set by the user.

• Creating an empty overlapping strategy doesn't show modal with warning about creating empty strategy like recurring does
• Using input "." in enter market price form field updates to value "NaN"

• When edit prices of PARQ/USDC, going to budget and deposit is showing "Insufficient Balance" with input 0

• Is it worth it to show the distribution on the simulate page? It will always show two graphs with 50% area occupied for the allocation and balance if the values are valid. Meaning it doesn't add any information to the user

Can you replace the animation object in the customTwMerge config with this one please?

      animation: [
        {
          animate: [
            'none',
            'spin',
            'ping',
            'pulse',
            'bounce',
            'slideUp',
            'scaleUp',
          ],
        },
      ],

• Regression: When wallet is not connected, on create overlapping strategy and create recurring strategy, the connect wallet CTA shows disabled for me.

• I get an error when inputting '.' for both the overlapping creation/edit prices as well as the simulator, but I assume that can be covered by Simulator - handling input values in overlapping strategies #1218

dismissing change request to merge