aeternity / dex-ui Goto Github PK

View Code? Open in Web Editor NEW

5.0 7.0 4.0 2.53 MB

Superhero DEX - the official UI for the first automated market maker (AMM) on æternity.

Home Page: https://dex.superhero.com

License: ISC License

JavaScript 32.91% HTML 0.29% Vue 64.77% SCSS 1.92% Dockerfile 0.11%

superhero

dex-ui's Introduction

DEX UI

This repo contains an interface to the Superhero decentralized exchange (DEX).

The Superhero DEX consists of multiple parts:

Access

Find a hosted version of the interface over at aepp.dex.superhero.com or feel free to run it on your own machine following these instructions:

clone repo

git clone https://github.com/aeternity/dex-ui.git
cd dex-ui

install the dependencies (nodejs 16+ and npm 7+ required)

npm i

run the interface

npm run serve

Feedback

For bug reports or feature requests, please use the issues: https://github.com/aeternity/dex-ui/issues/new/choose

If you simply want to provide feedback, please use the following form: https://form.jotform.com/221174404956355

Contribute

If you wish to contribute to this repository, please read the CONTRIBUTE.md.

License

This repository is licensed using the ISC license

dex-ui's People

Contributors

Stargazers

Watchers

Forkers

marc0olo lfh2msn unit214

dex-ui's Issues

Optimize svg loading and setup svg inlining

look at how it is implemented in https://github.com/aeternity/superhero-wallet,
maybe we could just inline the code of vue-svg-loader

Copy AEX2 implementation to this repo

could be sourced from superhero wallet or vue boilerplate

Research Uniswap Contracts surrounding core

Are there any more contracts uniswap is using to facilitate its UI?

Save needed stuff in the localStorage

Atleast we may save an address, until the user decides to remove permission. But some other state fields could be also worth saving.

address
token list

Create Vue Action Templates

Add Liquidity
Remove Liquidity
Swap
Import Pool

Add lint without fix script call to the ci

Implement Add Liquidity / SWAP / Remove Liquidity in Vue Action

On mobile view use deeplinks for signatures & connection

Make WAE Contract AEX9 Compatible

Discuss:

Swappable?
Burnable?

Create list of all the possible calls we need from the contract

Look through the uniswap pages and all modals related to them:

Swap
Pool
AddLiquidity
ImportPool

problem with swap "SND" => "FST"

the modal never closes. seems to be loading indefinitely.

tx got reverted with error NON_NEGATIVE_VALUE_REQUIRED:

https://explorer.testnet.aeternity.io/transactions/th_NHw51M5V4RgchV129CeKZc61wbCZ18DJPWosPm58VADqb4JsY

Make Add Liquidity functional

[] Connect UI to vue action (addLiquidity)
[] use information provided by #70

Connect Contract Getter Calls to UI

We should start showing some real information in the UI.

refactor add liquidity

rename from / to --> token A / token B
remove hardcoded balance

Review current state of the repo in terms of code style and cleanliness

Research about which pairs can be swapped at all

Create Tests for W-AE contract

Specify Error Codes from the Contract with a Description

Create an ErrorModal component

Something like this only in dark mode following our current design language.

Handle Errors in Global Modal

See superhero wallet for reference. On unhandled error show the error popup.

show the error message only, not the stack for now.

Copy Contract Error Messages From Contract Repo

Delete Interface and reference DEX-Contract Repo

add error imports

Make Swap Functional

[] Connect UI to vue action (swap??For??)
[] use information provided by #70

Extract common colors, font-patterns etc. in the variables.scss, typography.scss

It could be implemnted like in https://github.com/aeternity/superhero-wallet/tree/develop/src/styles

Research about optimal swap routes

Build Add Liquidity Modal

without second token:

with second token:

with amount selected:

during approval:

after approval:

after clicking supply:

after clicking confirm supply:

after approving:

Setup technical step by step document

Create a document that contains step by step instructions (technically speaking). It should contain:

endpoints that have to be called
data that has to be handed to the endpoints
data transformations that need to be made
results of these calls

They should be available for the following processes:

provide liquidity
remove liquidity
swap
obtain estimate for pricing
collect fee? (cloud happen automatically)

Make Remove Liquidity Functional

Make List of Provided Liquidity functional

store the pairs in the state on adding liquidity
persist the relevant state
fetch the amount of liquidity tokens from the contract
explain to the user that the information shown here might be incomplete because its only a local list
allow to import provided liquidity

Setup CI / CD pipeline

add release please
add automated staging deployments

Legal Disclaimer

Discuss legal disclaimer aka use at your own risk, we dont take any liability.

Cache node_modules in ci to speed up pipeline

Currently npm ci takes about 5 minutes:
https://github.com/aeternity/dex-ui/runs/4482092131?check_suite_focus=true#step:6:238

I think should be possible to speed up the pipeline by caching node_modules folder

cc: @mmpetarpeshev

Setup CI / CD pipeline for prod

Build Header

Build the logged in / logged out header.

Visually we orient ourselfs on the newest version of uniswap V3 (https://app.uniswap.org/#/swap).

Regarding breakpoints:

Mobile First
Desktop should be fine
make sure it does not break inbetween

Both should contain:

Logo of dex (TBD) top left
Info Icon (Like about page in superhero wallet)

Logged out contains:

"connect to wallet" button

Logged in contains:

address & balance

feat: deep link abstraction

create a module that can handle:

signing
login

from the sources:

sdk
deeplink

Build Basic Tab Model

start with the pool view:

should contain a button
should be able to switch "Tabs" to swap

Deal with AE <--> WAE trade

https://github.com/Uniswap/interface/blob/e81e8a8f71aa1432575df703d185860c4a311ffb/src/hooks/useWrapCallback.ts#L45

Add AE to the token list in the SelectTokenModal

Create a WAE Contract

Create WAE token contract that is based on AEX9 standard just with two additional methods: deposit and withdraw reference implementation

Create a router contract to facilitate swaps & liquidity add / removal reference implementation --> we decided on 01 because 02 only additionally facilitates a deflating tokens which are not implemented on ae anyways atm.