bancorprotocol / carbon-app Goto Github PK

View Code? Open in Web Editor NEW

19.0 19.0 10.0 125.31 MB

Home Page: https://app.carbondefi.xyz

License: MIT License

HTML 0.15% CSS 0.58% TypeScript 98.32% JavaScript 0.93% Shell 0.01%

carbon-app's People

Contributors

Stargazers

Watchers

Forkers

cleancoindev murad544 0xkorok vicnguyenqt krishnanand5 akabulbul iakashpatel leyr1112 droomprotocol

carbon-app's Issues

Strategy overview - Edit Delete strategy

as a user i would like to have the option to delete an existing strategy.

Mockups

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1655%3A52325&t=TiAtXWhViFuOvC3y-4

Delete strategy

this option will withdraw all associated budget (for both tokens) and delete the strategy (and NFT)

flow

visit the overview page
Press "Manage" on the desired strategy
click on "delete strategy"
view the delete confirmation popup
confirm deletion
trigger a wallet transaction
sign the transaction

end result -> all funds should be moved from the strategy to the user and NFT should be burned.

Task: Add support for token list management

We should support all ERC-20 tokens, and therefore should support token list management similarly to what we're doing in the V3 app, including assuring that proper icons are displayed - but without the complexity of having to compare against our pools.

Task: Strategy page - with info, activity and action buttons

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-design?node-id=772%3A21031&t=S8sV8wew70t4VJNm-0

Strategy details: Confirmation popup

As a user, I would like to be able to approve using my tokens

High Level

Token approval popup

Details

Flow

User defines strategy details
User clicks confirm strategy

Check flow -> details below

Mockups

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1626%3A48146&t=L9LCB8b5RZBMfIXy-4
https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1626%3A48178&t=L9LCB8b5RZBMfIXy-4
https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1626%3A48491&t=L9LCB8b5RZBMfIXy-4
https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=2012%3A38116&t=L9LCB8b5RZBMfIXy-4
https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=2160%3A55987&t=L9LCB8b5RZBMfIXy-4

Check flow

the approval flow and text changes based on different values.

IMPORTANT
"create strategy" CTA in the approval popup is disabled if there is a need for approve

If token0.balance = 0 AND token1.balance = 0,

[true] skip the popup and trigger strategy creation on the connected wallet
[false] If token0.balance<=existing approve AND token1.balance<=existing approve
-- [true] (meaning there is no need for an approval on either tokens), skip the popup and trigger strategy creation on the connected wallet
-- [false] (meaning the user needs to approve at least 1 token), show approval popup with the following:
--- for token0: IF token0 <=existing approve OR token0=ETH,
---- [true] show the token as "pre-apprpved"
---- [false] show the "approve" CTA and ask the user to approve the token
--- for token1: IF token1 <=existing approve OR token1=ETH,
---- [true] show the token as "pre-apprpved"
---- [false] show the "approve" CTA and ask the user to approve the token

Approve process

defaults:

limit toggle is set to "off" mode
approve transaction is set to "unlimited" amount

once the user clicks the approve, we should follow this process.

IF limit toggle is "off"
-- [true] trigger the approve with unlimited amount
-- [false] trigger the approve for the exact amount (user input)
while wallet confirmation is open and waiting user feedback, show the following status:
"Waiting confirmation"
IF user reject the transaction -> show "user rejected, try again"
IF user confirm
during blockchain pending -> "pending blockchain confirmation"
IF failed -> "approval failed"
IF succeed -> "approved"

Task: Withdraw/deposit modals for existing strategies

Filter sort overview

Add filter sort to overview

open the drop down
select different sort or visibility
expect: the strategy card to change order/visibility
actual: nothing happens

Order book - trade page

part of the epic issue: #81

as a user, i would like to have visibility into the closest available orders to buy and sell the base asset.

Overview

orderbook is a visualization that helps identify the buckets and liquidity above or below last known price
this visualization is similar to the depth chart but only shows the closest 14 buckets to the last known price

Mockup

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1849%3A40044&t=LuvWDO7FnCzILJ6h-4

Fetching the data

this is the same data we use in #94

Orderbook behavior

this section will explain how we expect the book to behave

from the data, identify mid-market price

How should we calculate mid-market price?
IF the book is empty, there is no value and no data to show.
-- mid- market price is a calculated value that can be one of three options:
-- IF sell.book or buy.book are empty
--- [true] mid-price is the point in which the lowest.buy or highest.sell bucket of the existing order is
--- [false] IF sell lowest bucket > buy highest bucket
---- [true] means the orders overlap, use the interception bucket as mid-market point
---- [false] means the orders do not overlap, mid-market is the average between them

display the 14 "best" buckets (above and below) mid-market price
on update, blink the entire data for 0.1 seconds

UI should better handle narrow screen in strategy overview

set min (or fixed?) width to the strategy cards. When the screen is narrow move to a new line

Task: wallet connect

Add support for wallet connect - latest version of react-web3

Display when filtered without results

there are 2 issues here:

create button is broken
I'd expect a different display when the filter returns no results - check with product

Strategy details: strategy type

As a user, I would like to have the option to choose my order type Buy/Sell or Buy and Sell

High level

Giving the user the option to choose between Dual order (BUY & Sell) and Single order (Buy / Sell)

Flow

User chooses tokens pair
User selects one of the options Dual or Single order.

Options

Dual order

Buy and sell prices sections are visible to the user
Turning off one of the sections is not possible

Singel order

Only one field is visible as Buy
Clicking the Buy title (Or toggle - TBD) will switch between Buy to Sell and vice versa

Switching between options

Dual to Single order

Hide Sell option
Keep the data of the Sell/Buy section if exists

Single to Dual order

Add the opposite direction

When the user selects Buy and changes to Dual Order, add the Sell section to the order
When the user selects Sell and changes to Dual Order, add the Buy section to the order

If any data were inserted into the original section, keep them

Token List Modal Performance

Token Select Modal

improve performance
when opening the token select modal, performance (FPS) drops significantly on lower end computers. This is due to loading and rendering hundreds of token images

possible solution: Virtual Lists (https://tanstack.com/virtual/v3/docs/guide/introduction)

Incorrect network indication

as a user, i would like to have visibility and know that i am connected to the wrong network (on metamask) which will prevent me from interacting with the Carbon frontend.

High level

Notifying users their wallet is not connected to a supported network by adding a popup and status indicator.

Mockups

General behavior

Once a user wallet is connected to the app, we follow the wallet RPC.
IF RPC is pointing to an unsupported network, show "incorrect network" indication.

Incorrect wallet indications

top bar - red indication around the wallet indication with text "wrong network"
popup overlay - on the page, no matter what page the user is on, open the popup to indicate that the user should change network. this popup cannot be closed. clicking outside it will also not close it. only changing network will resolve it.
https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=2683%3A41856&t=hAbpvISUXguYoudg-4

Supported networks

currently, we only support this:

Ethereum mainnet

Flows to check/be aware of

on wallet connect, wallet RPC is pointing unsupported network.
on visit with a previously connected wallet, wallet RPC is pointing unsupported network.

Wallet switch trigger

https://docs.metamask.io/guide/rpc-api.html#usage-with-wallet-switchethereumchain

top bar flow

Clicking the button will open the dropdown menu with the option "Switch network ->"
Clicking "Switch network" opens switch network on the wallet

Pop up flow

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=2683%3A41856&t=hAbpvISUXguYoudg-4

Clicking "Switch network" opens switch network on the wallet
Clicking "Disconnect wallet" trigger a log out event and force to disconnect the wallet

Create queryKey Service

I think we should consider creating a queryKey Service to stay on top of the keys we are using and to make sure we are invalidating the correct keys.

Lets discuss this on a sync before starting to work on this.

Make prettifyNumber function with less dependencies

Currently using numbro and numeral

Create Navigation Service: goToPage

We need a navigation service to programatically navigate to different routes.

Lets create a 'goToPage' service based on how we did it in the Bancor V3 app.

Task: Setup github actions to run tests and check linting

Connect a wallet

As a user, I would like to have the option to connect or disconnect my wallet to the Carbon frontend.

High Level

Menu where a user can choose and connect his wallet

Flow

User clicks "Connect wallet"
Menu open
User chooses his wallet from the wallet list
User is redirected to the selected wallet app
User approves the connection
Wallet connected

Design

Wallets list - https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1701%3A58543&t=ebXDUVf7gD31x8lL-4
Wallet error -

Behavior

Show wallet menu when user clicks "Connect wallet" from any place on the app - Top bar, Trade, Strategy view, create Strategy
Supported wallets - Same wallets as in V3
If the user declines the connection on his wallet app keep showing the "Connect wallet" button

Hardware wallet

Larger - If user chooses Ledger from the wallet list redirect him to - https://www.ledger.com/academy/security/the-safest-way-to-use-metamask
Trezor - If user chooses Trezor from the wallet list redirect him to - https://trezor.io/learn/a/metamask-and-trezor

Error message

Show an error message in any of the scenarios below

User clicks decline to connect his wallet
User leaves the connection process in the middle
-- Choose WalletConnect -> Press "X"
User has a network problem connecting his wallet

Mobile

Flow

Enter one of the mobile browsers
Enter Carbon webapp
Clicks "Connect wallet"
Wallet list opens

Supported wallets

MetaMask / WalletConnect / Coinbase Wallet / Formatic

Behavior

If the user chooses MetaMask - Show error message and prompt the user use the MetaMask in-app browser
-- Design - https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=2867%3A46319&t=SePzDeB4888fnC9C-4
Error message the same as desktop
-- Design - https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=2867%3A46319&t=SePzDeB4888fnC9C-4

MetaMask app

Flow

Enter MetaMask app
Enter in-app browser
Go to Carbon webapp

Behavior

Automatically connect to MetaMask
Do not show the disconnect option when clicking the wallet address

Create Strategy: setting up startRate & endRate

As a user, I would like to have the option to set the prices of my orders.

High Level

Giving the users the option to set their desirable prices for their orders

User flows

User sets his token pair
User chooses one of the prices options for the Buy side and Sell side (price explained later in the issue)

Details

Design

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1621%3A47312&t=18zeGECkmuLL6mzU-4

General behavior

Default option - Limit price
Empty state -
-- Sell - "Price (Token1 name)"
-- Buy - "Price (Token1 name)"
Price always defined by token1 (numeraire)
User can manually input the price
Price must be bigger than 0
The input field should support numbers with decimal point (i.e 12345.6789)
input decimal should be relevant to the token decimals (i.e. token with 6 decimals can only accept 6 digits after the decimal point)

Price Options

We have two states users can choose from, Specific price, and Range

Limit

Design
https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1621%3A47377&t=18zeGECkmuLL6mzU-4
One input field
field title- Token0 per Token1
Data format - ( startRate = endRate )

Range

Design
https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1621%3A47312&t=18zeGECkmuLL6mzU-4
Two input fields (startRate -> endRate)
Field title -
-- min token0 per token1
-- max token0 per token1
Data format ( startRate < endRate )
Range price validation
when inputing a range, the left input value should always be smaller or equal the right input value.

Task: Trade Page

Task: Strategy overview page

updated - see next comment

Create Strategy: Selecting token pair

As a user, I would like to have the option to choose the tokens I want to use in my strategy

High Level

A token pair selection section allows users to choose tokens for their strategies.

User flow

User enter create strategy page
User clicks on one of the tokens fields in the "token pair" section
Token list popup opens

Design

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1621%3A47293&t=18zeGECkmuLL6mzU-4

Behavior

User can select a source or target token without a specific order (i.e. we do not force to select the left token first)
If token0 OR token1 are selected,
-- [true] enable the arrow between the tokens. clicking the "Arrow" sign will switch the order (token0 will take token1 position)
-- [false] do nothing (meaning the arrow is disabled and not clickable)
Given we are using the same "Tokens list" flow, a detailed explanation can be found in #48
Any change in one of the tokens should delete all user inputs (Meaning if user chose a pair and insert price/budget and than change the pair, all fields should be reset)

Tooltip

Design - TBD
Behavior

web: Show tooltip only when hovering over the (i) icon
mobile: Show tooltip only when clicking the (i) icon

Text - TBD

Fix console errors

check console logs and fix errors

Task: App menu with entries similar to today (theme, links, and custom children)

Polish: Notification Service

store notification history in local storage
add option to only show notification and not add to history (eg. app network error)
handle tx hash status checking (pending/success/failed)
cleanup code / improve styling / improve animations

strategy overview - enhancements

strategy logos
current: token0 is below token1 in the display
updated: token0 should be over token1
https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1520%3A34855&t=L9LCB8b5RZBMfIXy-4
price limit/range visual image
trim down the height of the visual
buy/sell sections - reduce padding
reduce the space and padding between the different rows in each section
strategy not found
when searching, if the search string result in showing 0 strategies
https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=2159%3A55488&t=L9LCB8b5RZBMfIXy-4
add number rounding
on the overview page (and only on the overview page), please support number rounding based on the decimal display we show.
this should be implemented to both price and budget values we show on the strategy card

Overview incorrect budget allocation

create a new strategy
input only budget in the buy order
complete the creation
view strategy on the overview page
actual: buy amount (number) is displayed under the sell order budget.

Create Strategy: Strategy confirmation

As a user, I would like to have the option to confirm my strategy on Carbon

High Level

Confirmation flow where user can confirms his strategy and approves the use of his liquidity on Carbon

Mockup

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1621%3A47950&t=pjVo4ubph2jIRgju-3

Flow

once a user clicks the "create strategy" on the #69 form, we would like to follow this process.
IF token0.balance AND token1.balance = 0
[true] user is not depositing into the strategy -> skip the approval popup and trigger the transaction on the connected wallet
[false] (means that one of the tokens is not 0), IF token0.balance>existing approve OR token1.balance>existing approve

[true] (means that new approve is required) -> open the popup and let the user trigger the relevant approve.
-- IF token0.balance<existing approve -> indicate "Pre-approved"
-- IF token1.balance< existing approve -> indicate "Pre-approved"
-- ETH special case -> since ETH doesnt require approve, if token is ETH -> indicate "Pre-approve"
[false] (means there is no need for new approve) -> skip the approval popup and trigger the transaction on the connected wallet

Task: BNT Page

App Menu and BNT Page

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-design?node-id=772%3A21033&t=S8sV8wew70t4VJNm-0

Take off curve

As a user, I would like to have the option to pause and reactivate my strategy.

High level

Allow users to pause their strategy by taking it off curve and then reactivate it with a new price point

-- Take off-curve --

This option will set both orders to price 0 and basically disable them from being traded.

mockup

TBD

flow

visit the overview page
Press "Manage" on the desired strategy
click on "take off curve"
view the confirmation popup
confirm
trigger a wallet transaction
sign the transaction

-- Reactivate --

This option will give the user the option to set a new price for both orders and enable the strategy for being tradable

mockup

TBD

flow

visit the overview page
Press "Manage" on an off curve strategy
click on "take on curve"
Set new prices (Range or Specific)
confirm
trigger a wallet transaction
sign the transaction

Task: implement support for forks - with /debug page and wallet impersonation

Required capabilities:
Set fork
Impersonate user
Reset to mainnet

Create Strategy: Token allocation (budget)

As a user, I would like to have the option to choose how to allocate my tokens when creating a strategy.

Hige level

Token allocation section is part of the strategy creation and allows the user to define the associated budget to deposit for each token in the strategy.
this is relevant for creation flow only. editing flow will have its own issue with details.

User Flow - Create a new strategy

User enter create strategy page
User chooses the tokens he would like to use
User sets the price for the orders
User set the amount of liquidity for each order

Design

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1621%3A47351&t=18zeGECkmuLL6mzU-4

Details

General behavior

tokens are pre-populated from the "token selection" step in the strategy creation. user should NOT have the option to switch the token from this section.
Users do not have to put a budget for any of the orders (meaning users can create a strategy without a budget at all or only for one of the orders)

User Balance

Get the user balance from his wallet for the selected tokens
Present the amount under the amount fields (under the "wallet" section in the design)

Input field - token input

Buy section - Show the numeraire token (Token1)
Sell section - Show the main token (Token0)
Empty state -

Buy section -> "Amount ({Token1})"
Sell section -> "Amount ({Token0})

User can manually input the amount
The input field should support numbers with decimal point (i.e 12345.6789)
input decimal should be relevant to the token decimals (i.e. token with 6 decimals can only accept 6 digits after the decimal point)
"max" button (different behavior between ETH and all other tokens)

TKN - clicking "max" will populate the user balance into the input field.
ETH - clicking "max" will populate the user balance minus the gas needed to complete the transaction into the input field. (fallback value can be 0.02 ETH is needed for gas)

errors and validations

in order to better communicate issues with the input values, we would like to have a clear error indication in such cases.
display:

change input border to red
change input font to red
add a specific error text (as outlined below) below the input field

IF input amount > user balance, error text: "insufficient balance"

Tooltip

Design - TBD
Behavior

Show tooltip only when hovering over the (I) icon

Text - TBD

port notification service from v3

leave only the relevant messages

Task: create chart component for interactive historical data

Use TradeView components to create a chart component that allows to select fixed/range prices based on historical prices

https://github.com/tradingview/lightweight-charts

https://www.tradingview.com/widget/advanced-chart/

spec:
https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-design?node-id=39%3A16778&t=joWajBTcRfh8CA0C-0

Token selection: Using token lists (Create strategy)

As a user, I'd like to be able to select the tokens I want to use on Carbon easily

Hige level

Add a token list to trade and strategy pages so users can select, search and add their tokens easily.

Token list

Design

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1712%3A62719&t=0mmc9dqCRjvyQfm0-4

User flow

User enters to trade or strategy page
Clicks on select token
The token list is opened.

Technical data

The list is sorted by alphanumeric - ascending order
Use CoinGecko list from tokenlists.org (pre-select this list, do not allow user opt-out)
Search filed - Any string of letters start, end, or middle of the name, ignore case sensitive
The list contains all tokens from CoinGecko + All tokens with open strategies on Carbon
Token icons - (based on token address)

Use our internal images list
If not found on our list use CoinGecko image
If not found on CoinGecko use a place holder -

Search

this section outlines general behavior the token dropdown and popup would have in every page/flow we include it.

By name

1. Existing token

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1712%3A62915&t=zjIsKuG2Sfl6YZPh-4

User search for DAI
Show only options containing the letters DAI
Show the exact match first and the closest next
(EX. 1. DAI, 2. DAIx 3. xDAIx)
In case there is more than one exact match, cross reference the information with CoinGecko list and add a warning sign to the options not shown in the list

2. Nonexistent token

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1712%3A62755&t=zjIsKuG2Sfl6YZPh-4

Show the user a message that guides him to try to search by address

By address

1. Existing token

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1712%3A62794&t=zjIsKuG2Sfl6YZPh-4

Show the user the token details
Only one option can be relevant

2. Nonexistent token

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1712%3A62774&t=zjIsKuG2Sfl6YZPh-4

Display a message that the token doesn't exist on the list and ask the user If he would like to add the new token

Add a new token

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1712%3A62810&t=zjIsKuG2Sfl6YZPh-4

Flow

A popup presented to the user with a link to the contract page on etherscan
User clicks inport the token adds to the user local list
If the user completes the strategy creation and add liquidity to the new token - > Add the token to the public view and all users can see it

Input improvements

Clicking "max" with ETH should have a different behavior

In the token pair list section, the token name field should be the same size regardless of the length of the name

All Input fields are not using correct token decimals

(which later does not allow you to proceed with the approve window)

Task: Implement a self managing notification service

Similarly to V3 - we will need to show and manage notifications. Let's achieve this by a decoupled service that offers a proper API and support similar flows as we do today.

logo animation

https://codepen.io/whipcat/pen/ExKPQqZ

Strategy view: Tokens pair

As a user, I would like to have good visibility regarding the tokens pair I have selected.

High Level

Tokens׳ pair display rules system

Details

Due to the contract design, we are not saving the initial intent of the user (e.g., ETH to USDC or USDC to ETH).
The user's tokens pair is only saved by the address of TokenA and TokenB in numerical order. Therefore, TokenA will always be the address with the lower numerical value, and TokenB will always be the address with the higher numerical value, regardless of the user's intent. As a way of making it more logical for the user, we would like to add a set of rules that will assist us in organizing the information in the presentation.

Token pair rules

Goal and details

The ruling system's purpose is the create a uniform view of the user's pair choices.
Currently, we don't know the correct order of the pairs, to avoid showing different views, we decided to go with the best practice approach and pre-defined display that will order them in the same way every time - (Token -> Numeraire).
To do so, we will implement a ruling system to identify which token is which

Pre-defined display

Pair displayed order - tokenA (Token) -> tokenB (Numeraire)

tokenA = The token with the lower index value
tokenB = The token with the higher index value

Token index

USDT
USDC
DAI
ETH
wBTC
BNT
LINK

Pre-defined flow:

Fetch strategy data from the chain:

tokenA and tokenB address 
Address 1 - 0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48 
Address 2 - 0xdAC17F958D2ee523a2206206994597C13D831ec7

Compare the fetch address with the token index

Address 1 - USDC/index 1
Address 2 - USDT/index 2

Order the tokens by the Pre-defined view

tokenA (index 1) -> tokenB (index 2)
USDC -> USDT

Page is scrollable although there's no real overflow

open the app and scroll

Trade page - Tokens selection

part of the epic: #81

As a user, I would like to have to option to see and choose token pairs with liquidity on Carbon

High level

A list contains all Carbons' active token pairs with liquidity.

Design

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1894%3A37808&t=fJ6hqLMy9lpCF8jW-4

General behavior

Open the popup and default the cursor into the search field
Only include existing pools on Carbon.
Selected tokens should be visible but marked as selected - Design TBD
On selection -> close the popup
since pools are generic, the display should change based on the first input token.

pool ETH/USDC
if search starts with ETH -> show the pool data where ETH is the base asset and USDC is the quoted asset.
if search starts with USDC -> show the pool data where USDC is the base asset and ETH is the quoted asset.

Popular tokens filter

Add a row under the search fields with the favorites tokens filter.
Tokens - ETH / WBTC / BNT / USDC / USDT / DAI
Behavior:

When a user clicks on one of the options shows only token pairs where the selected token is the base token
User uses the search field after choosing a token
-- User chooses ETH and then searches DAI result should be ETH/DAI

Pairs order

When the user enters the list, he should see only pairs containing ETH / WBTC / BNT / USDC / USDT / DAI sorted by alphanumeric( ascending order) as a default.

example:
BNT/DAI
BNT/ETH
DAI/LINK 
ETH/USDT
USDC/DAI
USDT/LINK
WBTC/DAI

Search

When searching, show user all pairs related to his search and not only from the default view which is explained above

* Show pairs that start with the searched string or contract address

example:
search string: ETH or ETH contract address 
show results where the first token in the string is "ETH"
valid result: ETH/USDC, ETH/USDT, ETH/BNT...
invalid results (should not show up): USDC/ETH, WBTC/ETH

* Input can include space to indicate the 2nd token

example:
search string: ETH US
show results where the first token is "ETH" and the second token includes "US"
valid result: ETH/USDC, ETH/USDT

* Token not found

User searchs for a token by its name, and the token is not found - > User prompt to search by address
User searches by address, and the token is not found - > User prompt to create a strategy for this token
User clicks "create strategy" -> Create strategy page opened
Mockup - https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=2262%3A41549&t=fZJ01RlPsaWaiIR8-4

* Warning message

The same behavior as in strategy page (#48 )
https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=2375%3A45022&t=WYzr31iPMySeZHJ4-4

pair information

once a pair has been selected, fetch the relevant data and display it on the frontend

loading animation while fetching -TBD

Depth chart - trade page

part of the epic: #81

as a user, i would like to have the option to view a depth chart for the selected pair.

Overview

when we display pair information, we would like to include a depth chart visual.

What is a depth chart?
A depth chart is a tool for understanding the supply and demand of Bitcoin at a given moment for a range of prices. It is a visual representation of an order book, which is the outstanding buy or sell orders of an asset at varying price levels.

Fetching the data

this section will explain how to pull the relevant order data from the available strategies and make it available for the frontend (this is the same process we would need for the order book display)

in the SDK, https://docs.google.com/document/d/19Rs3RVNthffyc1_jQ4B-3ZHkg1sbaEIJwSYwfD_2ayg/edit#

How to define bucket size

Given that there are multiple pairs, we should try to default to some automated process in defining bucket size and the process of data fetching.

step 1: fetch all buy data and split it to 100 buckets
step 2: fetch all sell data and split it to 100 buckets
step 3: compare bucket size and choose the smaller one to normalize the bucket size for both books

buy.bucket.1(tickEnd - tickStart)
sell.bucket.1(1/tickStart - 1/tickEnd)
compare the buckets size and choose the smaller one

step 4: refetch the data using the bucket size

you can fetch both orders again but you only need to fetch the data for the book with larger bucket size from step 3.

- 100 buckets is a value we might want to change
- display can use portion of the available buckets (assume we display 50 buckets while we fetch to receive 100)

How to use the data

sdk function will return the sell orders of the token.
normalizing the data:
response for sell USDC to ETH
(this represents "buy" ETH)

this data will be colored green
take the sell quoted asset array and do the following
calculate the liquidity amount to "base asset" using the tick rate. (liquidity*(1/tickStart)

example
if the selected pair is ETH/USDC
sell USDC will represent buy ETH.
assume the response is:
[1150.000001, 1155, 50000]
1150.000001 is the tickStart
1155 is the tickEnd
50000 is the amount of liquidity in USDC
liquidity amount in ETH -> 50000 * (1/1150.000001) = 43.4782608318 ETH

response for sell ETH to USDC

this data will be colored red
take the sell base asset array and do the following
invert the rates to show values in the quoted asset. (tickStart = 1/tickEnd, tickEnd = 1/tickStart)

example
if the selected pair is ETH/USDC
sell ETH will return rates in ETH per USDC.
assume the response is:
[0.0008298755187, 0.0008333333333, 25]
0.0008298755187 is the tickStart
0.0008333333333 is the tickEnd
25 is the amount of liquidity in ETH
new tickStart = 1/tickEnd= 1/0.0008333333333 = 1200
new tickEnd = 1/tickStart = 1/0.0008298755187 = 1204.9999999596

Chart behavior

this section will explain the chart behavior
references:
https://www.highcharts.com/samples/stock/demo/depth-chart?codepen
https://www.binance.com/en/trade/ETH_USDT?theme=light&type=spot

mouse over:
-- highlight the area between mid-price and where the mouse is mockup (reference here)
-- if the mouse is on the chart area and is not moving for 1.5 sec, show the tool tips
-- show the price and available liquidity on that price point (bucket) on the y and x axis
scroll: do not support zoom in/out at this stage

Chart data and structure

this section will explain how to place the relevant data on the chart

Empty chrt

if there is no data to show, use this mockup:
https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=2041%3A38182&t=LuvWDO7FnCzILJ6h-4

X-axis

this axis represents the price of the asset. (horizontal)
assuming ETH/USDC, it will represent the price of ETH in units of USDC which means showing it as 1100, 1200, 1300, etc

mid-market price indicates the middle of the chart with "sell base asset" on the right (red) and "buy base asset" on the left (green). How should we calculate mid-market price?
-- mid- market price is a calculated value that can be one of three options:
-- IF first.wei.sell or first.wei.buy are empty
--- [true] mid-price is the point in which the lowest.buy or highest.sell bucket of the existing order is
--- [false] IF sell lowest bucket > buy highest bucket
---- [true] means the orders overlap, use the interception bucket as mid-market point
---- [false] means the orders do not overlap, mid-market is the average between them
default view would show all available buckets above and below mid-market price
buckets with 0 liquidity should NOT be skipped
scale indication is using the tickEnd value

Data organization
since the data is always organized around the mid-price (which is always in the middle of the chart area), we need to identify the amount of data we have in each direction before we display the data

step 1: fetch the data for each direction.
step 2: compare how many buckets to display

IF sell.buckets OR buy.buckets < 50,
-- [true] means we have only handful of buckets, show the data as if there are 50 buckets (50 should be a value we can easily change)
-- [false] means we have sufficient data, IF sell.buckets > buy.buckets
--- [true] means buy.buckets are fewer, display data using the number of buy.buckets
--- [false] means sell.buckets are fewer, display data using the number of sell.buckets

Y-axis

this axis represents the amount of liquidity in the token (vertical)
assuming ETH/USDC, it will represent the amount of tokens in each price point (bucket). this amount is in the base token, meaning in this case the amount of ETH tokens.

chart top space/buffer: scale should be dynamically adjusted to maintain a 10% space on the top end. this means that if the max liquidity is 100 tokens, the scale should be up to 110 and allow some extra space at the top
chart data is accumulative -> meaning that if there is no liquidity in a specific bucket, the liquidity would stay at the last amount.

example:
- bucket 1 has 100 tokens: chart view shows 100 tokens
- bucket 2 has 50 tokens: chart view shows 150 tokens
- bucket 3 has 0 tokens: chart view shows 150 tokens

Task: Data service

Create a self contained data fetching service with transaction management and a clean API to allow isolating the UI components from directly working with chain providers.
Recommendation is to implement it with react-query.

Also - have it returning mock strategy data, depending on env/config/flag - so that we can use it in development phase - and later on for tests

Trade page - Buy & Sell

part of epic: #81

As a user I would like to have the option the sell or buy tokens using the frontend.

High level

A simple and easy way where users can insert their details for the buy or sell orders

Design

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1849%3A40044&t=C9AatagrmdAWxDXf-4
Buy - Green , Sell - Red

Flow

User can interact with either "sell" or "buy" trade options
User set the order params
-- Amount of tokens he wishes to buy / sell
OR
-- Total value he wishes to use for buying / receive in selling
Price is been calculated
-- Use the calculation below
Based on the price, the Total / Amount is auto-fill
-- If the user inputs the amount auto-fill total
-- If the user inputs the total auto-fill amount
User clicks "Buy/Sell token"
Approve tokens if needed
Send order to the chain

General Behavior

Tokens pair are pre-implemented and can't be changed from this section
Reset all fields if the user changes one or more tokens through the tokens pair section

CTA behavior

CTA is always enabled
on CTA.click check
IF amount OR total fields are not filed (empty, null)

[true] indicate error "{field} cannot be empty"
[false] IF wallet not connected,
-- [true] trigger the wallet connect popup. following wallet connect, show the same state of the page as before with all data. include wallet balance.
-- [false] IF approve is needed
--- [true] trigger approval popup
--- [false] trigger the transaction on user wallet

Amount field

-- Amount field refers to the quantity of the token user is going to use in the buy or sell order
-- For reference, this is the "source" token that the user is deducting from its wallet.

This field represents:
-- Buy - Token1 (Quoted token) //in order to buy base token, you need to deduct the quoted token from your wallet
-- Sell - Token0 (Base token) //in order to sell base token, you need to deduct the base token from your wallet
User can edit / manually input the amount
"max" button (different behavior between ETH and all other tokens)

TKN - clicking "max" will populate the user balance into the input field.
ETH - clicking "max" will populate the user balance minus the gas needed to complete the transaction into the input field. (fallback value can be 0.02 ETH is needed for gas)

The input fields should support numbers with decimal point (i.e 12345.6789)
Input decimal should be relevant to the token decimals (i.e. token with 6 decimals can only accept 6 digits after the decimal point)

Total

-- Total field refers to the total amount of tokens the user is going to get from his order
-- For reference, this is the "target" token that the user is receiving into the wallet

This field represents:
-- Buy - Token0 (Base token) //when buying base token, the result is to receive base token to your wallet
-- Sell - Token1 (Quoted token) //when selling base token, the result is to receive quoted token to your wallet
User can edit / manually input the amount
The input fields should support numbers with decimal point (i.e 12345.6789)
Input decimal should be relevant to the token decimals (i.e. token with 6 decimals can only accept 6 digits after the decimal point)

Amount and total fields relation

The Amount field and Total field are directly related to each other.
Meaning if a user inserts a value of 10 in the Amount field and the current market price of the token is 100, the Total field will automatically update to 1,000 (10 units x 100 per token). If the user changes the Total field to 900 the amount field automatically updates to 9 (900 total / 100 per token)

Price (Market)

-- Market price is the token price at a specific time, it can vary depending on the quantity of tokens available

Field can't be edited
The price is determined by token1 (quoted token)
-- If user chose ETH/WBTC the price will be in WBTC
Price calculation

Example:
1. User wants to trade ETH to USDC 
-- If the user inputs the "Amount" field use **tradeBySourceAmount** (indication of how much ETH  user wants to sell) 
-- If user inputs the "Total" field use **tradeByTargetAmount** (indication of how much of USDC user wants to buy)
2. Retrieve the orders suggested in the SDK response, sum them and divide it by the user input 
--  tradeBySourceAmount orders sum / Amount = Price 
--  Total / tradeByTargetAmount orders sum= Price

Whenever one of the input fields is changed, the price must be recalculated

Trade page

As a user, I would like to be able to trade my tokens and obtain as much information as possible on strategies on Carbon using the frontend.

High Level

Trade page should allow users to trade between existing pairs on Carbon protocol while showing all available orders that are available for this pair.

Trade flow

User Enters trade page
User selects the token pair he would like to trade
User can interact with either "sell" or "buy" trade options
User clicks Buy/Sell token options
Confirmation popup -User approves the tokens
user confirms approval on wallet
user confirms trade on wallet

Design

https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=1849%3A40044&t=QM79HeQq35NaUnaF-4

Unselected token pair

-- Trade page behavior before the user chooses the pair he wishes

Upon entering the trade page, open the token pair selection pop-up
If the user clicks "x" and closes the popup without choosing a pair, show an empty state page
-- Design -TBD

bonus enhancement

store last viewed pair in local storage
when visiting the page, IF there is a last viewed pair,
-- [true] open this pair.
-- [false] open the "unselected token pair" view

Behavior

-- Here will be presented all the page components and their explanation this issue has been divided into four parts due to its complexity

Token selection

Token selection flow is explained in #93

Trade widget

Trade widget details are explained in issue #83

Order book list

Order book details are explained in issue #99

Depth chart

Order book details are explained in issue #94

Settings

user defined settings are explained in issue #116

Token approval

Once a user clicks the "Buy" / "Sell" on the #83 form, we would like to follow this process.
-- Token balance>existing approve -> open the popup and let the user trigger the relevant approve.
-- Token.balance<existing approve -> indicate "Pre-approved" (skip the approval popup and trigger the transaction on the connected wallet)
-- ETH special case -> since ETH doesnt require approve, if token is ETH -> indicate "Pre-approve"
Design - https://www.figma.com/file/YpsatcY9jtxJr0SJwlFYNj/Carbon-Screen-Design?node-id=2375%3A44162&t=U5m8ZuPTBwAgNuvf-4

google tag manager

Paste this code as high in the of the page as possible:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5H2KXW7');</script>
<!-- End Google Tag Manager -->

Additionally, paste this code immediately after the opening tag:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5H2KXW7"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

top bar - carbon app

as a user, i would like to have the ability to navigate between different sections of the site and connect my wallet to perform transactions and view my strategies