alpha-fi / nearswap-ui Goto Github PK

We need to change a UX of adding new pool. Instead of having the form at the end, we need a modal with single box and following input fields:

• token address
• initial token amount
• initial NEAR amount

The modal should automatically compute an expected price based on the initial amounts.

The, to add a new pool user has to perform two actions:

1. approve allowance
2. submit (will only get active, once the 1. completed)

Integrating the 2 actions above will be done in other task.

Currently, when a transaction is made and the user is redirected to the NEAR wallet, the view state is reset. (Example: a user goes to add liquidity to the pool and when redirected back to NEARswap, they will be taken back to the swap view rather than the correct pool view.) Navigational URLs are needed so that the correct view is loaded when the user is redirected back.

React Router seems to be the best choice to implement this.

We have 2 alerts: https://github.com/near-clp/nearswap-ui/network/alerts

• Move shared style definition to separate files

Related to: near-clp/smart-contracts#64

Check the following dependencies and update to the latest version (>=17.0). If there are breaking changes we will need to fix them.

"react": ">=16.3.0",
"react-bootstrap": "^1.4.0",
"react-dom": "^16.13.1",
"react-hook-thunk-reducer": "^0.2.4",

Dev dependency:

"react-test-renderer": "^16.13.1"

List of breaking changes: https://reactjs.org/blog/2020/08/10/react-v17-rc.html#other-breaking-changes

Connect to the smart contract to display information about shares.

In Pool view, add a row above "Total shares":

• "my shares: xxx"

This should be computed from the smart-contract using balanceOf(token, user_account)

Example repo: https://github.com/near-examples/erc20-to-nep21

Related to #8

For better UX, we should make it clear what's the token denomination.

I propose to add some small, low contrast information about decimals, eg decimals=18, next to the token amount (in all places where we display an amount).

Other idea is to add an icon and display the information on pointer hover.

On Pool tab, "Add Liquidity" button should pop up a modal with two input boxes for inputting amount to pool along with details of already provided liquidity.

Details: https://discord.com/channels/@me/754282711157440512/780940065911603229

Extract tokens list from src/config.json to the test-net.json file in https://github.com/near-clp/token-list and load that filen in the NEARswap UI (so we will need to load to files: json.config and a second one, based on the config.nearNetworkId.

When formatting an amount, we need to check token decimals from token list.

For example, when:

• token.decimals=2, amount=1230 then we should display the amount as 12.3

It should have one of the following name:

• mainnet
• testnet
• guildnet

We have one big UX default: the swap (exchange) calls has a guard parameter to protect the user from a front running. For each swap, user has to provide a max / min value he is willing to pay / receive. Since the NEARswap is based on a bonding curve, the price grows after each purchase. If we will keep same guardian value then of course the transaction will be invalidated because the price changed and we can't but the asset any more for the same price.

Solution:

1. show to the user the guardian (max) price (idea: maybe small input field)
2. let the user adjust the guardian price
3. After each trade reset the field.
4. On each asset change (whenever user will change the pair) get a new price from the blockchain.