alpha-fi / nearswap-ui Goto Github PK
View Code? Open in Web Editor NEWNEARswap webapp
License: Mozilla Public License 2.0
NEARswap webapp
License: Mozilla Public License 2.0
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:
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
It should have one of the following name:
Example repo: https://github.com/near-examples/erc20-to-nep21
Related to: near-clp/smart-contracts#64
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.
Connect to the smart contract to display information about shares.
In Pool view, add a row above "Total shares":
This should be computed from the smart-contract using balanceOf(token, user_account)
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
We have 2 alerts: https://github.com/near-clp/nearswap-ui/network/alerts
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:
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:
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.
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
.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.