GithubHelp home page GithubHelp logo

liskarchive / lisk-dex-ui Goto Github PK

View Code? Open in Web Editor NEW
0.0 4.0 0.0 4.07 MB

:gem: Lisk DEX blockchain user-interface

Home Page: https://lisk.com

License: Apache License 2.0

JavaScript 0.33% TypeScript 99.44% CSS 0.12% Dockerfile 0.09% Shell 0.01%

lisk-dex-ui's Introduction

Lisk DEX: UI

Lisk DEX: UI

License: Apache 2.0 GitHub tag (latest by date) GitHub repo size DeepScan grade GitHub issues GitHub closed issues

Lisk DEX: UI is a frontend user-interface for the Lisk DEX: Core blockchain application. The project is developed using the Next.js framework and uses WalletConnect as a remote signing protocol.

Project Index

Below is an index of the repositories which relate to this repository for easy navigation:

Repository Description
Lisk DEX: Specs The Lisk DEX blockchain specifications.
Lisk DEX: Core The Lisk DEX blockchain application.
Lisk DEX: Service The Lisk DEX blockchain middleware between Core and UI.
X Lisk DEX: UI The Lisk DEX blockchain user-interface.

Installation

From Source

  1. Clone the repository and change into the application directory:
git clone https://github.com/LiskHQ/lisk-dex-ui.git
cd lisk-dex-ui
  1. Install Node Version Manager and the required version of Node.js:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install
  1. Create an .env.local file and set the application environment variables:
NEXT_PUBLIC_PROJECT_ID=1234567890 # wallet project id
NEXT_PUBLIC_RELAY_URL=wss://relay.walletconnect.com # wallet connect websocket url 
NEXT_PUBLIC_TEST_NET=testnet # network name
NEXT_PUBLIC_LISK_SERVICE_URL=https://testnet-service.lisk.com # lisk service https url
NEXT_PUBLIC_DEX_SERVICE_URL=https://testnet-dex-service.lisk.com # lisk (dex) service https url
NEXT_PUBLIC_DEX_SERVICE_WS_URL=wss://testnet-dex-service.lisk.com # lisk (dex) service websocket url 
  1. Install the node modules (using yarn):
npm i -g yarn
yarn install --frozen-lockfile
  1. Build the Next.js application:
yarn build
  1. Start the Next.js application:
yarn start

Once the application process has started, the user-interface can be accessed locally at: http://localhost:3000/.

To stop the application process, press the key combination:

CTRL+C

With Docker

  1. Install Docker with Docker compose.

  2. Clone the repository and change into the application directory:

git clone https://github.com/LiskHQ/lisk-dex-ui.git
cd lisk-dex-ui
  1. Start the application container:
docker-compose up

Once the application container is started, the user-interface can be accessed locally at: http://localhost:3000/.

To stop the application container, press the key combination:

CTRL+C

Tests

Assuming the Next.js application is already built from source.

To run the tests, execute the following command:

yarn test

Contributors

https://github.com/LiskHQ/lisk-dex-ui/graphs/contributors

Disclaimer

Warning

The source code of Lisk DEX: UI is considered to be a pre-release beta version that is subject to missing or incomplete features, bugs, and potential security flaws, and is therefore not suitable for usage in a production environment such as the Lisk Mainnet.

By using the source code of Lisk DEX: UI, you acknowledge and agree that you have an adequate understanding of the risks associated with the use of the source code of Lisk DEX: UI and that it is provided on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. To the fullest extent permitted by law, in no event shall the Lisk Foundation or other parties involved in the development of Lisk DEX: UI have any liability whatsoever to any person for any direct or indirect loss, liability, cost, claim, expense or damage of any kind, whether in contract or in tort, including negligence, or otherwise, arising out of or related to the use of all or part of the source code of Lisk DEX: UI.

License

Copyright 2016-2024 Lisk Foundation

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

lisk-dex-ui's People

Contributors

daniel-lightcurve avatar naureen1lightcurve avatar abhishekjalan87 avatar karmacoma avatar irfan-personal avatar emiliolisk avatar

Watchers

Juan Gonzalez avatar shuse2 avatar  avatar  avatar

lisk-dex-ui's Issues

Add liquidity (Increase existing liquidity)

Description

This component consists of development of the UI components designed in UI design specifically Add Liquidity (Increase existing liquidity).

Acceptance Criteria

  • All the developed UI components should be displayed with accurate HTML and CSS and visually inspected.
  • All the developed components should be tested by the tester by trying different values and ensuring that the flow is working as expected.
  • All the developed components should be unit tested using jest.

Create a pool incentivization proposal

Description

“Pool incentivization proposal” component should be selected to allow users to create pool incentivization proposals, therefore following two new input components should be added:

  • “Select a pool ID” component should allow the users to select a pool ID by clicking on a dropdown button
  • “Add a multiplier” component should allow the users to set the number of multipliers by input value.

Acceptance Criteria

  • A complete list of available pool IDs should be available in “Select a pool ID” dropdown component.
  • Test if all elements are loaded successfully
  • Test if dropdown and input works correctly
  • The component should be visually tested using browser inspection for accuracy of text and color schema.
  • Implementation should be unit tested.
  • All files are updated
  • Issues were checked with Deepscan and codecoverage.

Additional Information

UI/UX design is here: Create a pool incentivization proposal

Remove liquidity (Claim rewards)

Description

This component consists of development of the UI components designed in UI design specifically Remove Liquidity.

Acceptance Criteria

  • All the developed UI components should be displayed with accurate HTML and CSS and visually inspected.
  • All the developed components should be tested by the tester by trying different values and ensuring that the flow is working as expected.
  • All the developed components should be unit tested using jest.

Prepare Lisk DEX: UI v2.0.0 for beta

Description

TBD

Motivation

  • Prepare the application for release onto a temporary betanet
  • Prepare the application for security auditing

Tasks

TBD

Implement user interface for DEX governance module

Description

This roadmap objective aims to implement a lean front user interface to allow users to create proposals and vote on them on-chain in a decentralized manner. The purpose of the governance system is to give the token holders a say and give their opinions in the decision about new feature proposals and changes to the governance system that will dictate the protocol's features.

Motivation

Develop the front-end of a Lisk DEX application following a UI/UX design and fulfill all the functional / non- functional requirements.

  • Users should be able to utilize a DEX application to perform the following functions.
  • Submit a pool incentivization proposal
  • Submit an universal proposal
  • Vote on proposals
  • Re-vote on proposals
  • View proposals
  • Check community participation on active and finished proposals

Additional Information

(LIP: Introduce DEX Governance module)

Tasks

Sprint 22

Sprint 23

Update the UI for Dex Settings

Description

We need to update the UI for Dex Settings dialog as the new UI/UX design
Here's the link to new figma design for Settings dialog.

We also need to implement responsive for mobile.

Acceptance Criteria

  • All the developed UI components should be displayed with accurate HTML and CSS and visually inspected.
  • All the developed components should be unit tested using jest.
  • Light/Dark mode should work

Implement wallet connect support for DEX UI

Description

This roadmap objective aims to implement a lean front user interface to allow users to connect wallet and check wallet information.

The purpose of the Connect Wallet components is to give token holders, users and visitors to connect Lisk Mobile or Lisk Desktop.

Motivation

  • Allow uses to connect Lisk Desktop and Lisk Mobile using the wallet connect messaging layer and standard to access the following features of Wallet.

  • Connect wallet - this will be the main feature of the task, it has the workflow which shows the process of each user connecting wallet.

  • View account wallet balance of assets - this component will be where the users will be able to copy address and view accounts on liskscan.

  • View transaction history - this component will be where the users will be able to view transactions history of the wallet

  • Disconnect wallet - this component will be where the users will be able to disconnect wallet

Tasks

Prepare Lisk DEX: UI v1.0.0 for alpha

Description

  • The purpose of this epic is to prepare the Lisk DEX v.1.0.0 for beta release after fixing the bugs identified by the initial quality assurance.

Motivation

  • Prepare the application for release onto a temporary alphanet

Tasks

Implement NavBar

Description

Allow users to easily navigate through web applications using a header at top of the web page with links to other pages of the Lisk-DEX webapp.

Acceptance Criteria

Users should be able to route to different web pages of Lisk-DEX webapp using clickable links in NavBar.

  • Web UI users: Horizontal NavBar
  • Mobile UI users: Vertical collapsable NavBar.
  • Implementation is Unit Tested.

Prepare Lisk DEX: UI v2.0.0 for rc

Description

TBD

Motivation

  • Conduct an external security audit of the codebase
  • Prepare the application for release onto a permanent testnet

Tasks

TBD

Implement Featured Pools

Description

  • This tasks contributes to the Overview Page.
  • Next and Prev button should allow the users to explore the featured pools.
  • It should allow the users to select one of the featured pools by clicking on it and navigate to the pool page.

Acceptance criteria

  • A complete list of feature pools should be able to be explored.
  • Implementation should be unit tested.
  • All components should be loaded successfully
  • Click Next and Prev button should work correctly
  • The component should be visually tested using browser inspection for accuracy of text and color schema.
  • Hover effect should be added to each individual Featured Pool component

Additional Information

Implement Featured Pools

Update the UI for swap token

Description

We need to update the UI for swap token as the UI/UX design was widely changed.
Here's the link to new figma design for swap token.

We also need to implement responsive for mobile

Acceptance Criteria

  • All the developed UI components should be displayed with accurate HTML and CSS and visually inspected.
  • All the developed components should be tested by the tester by trying different values and ensuring that the flow is working as expected.
  • All the developed components should be unit tested using jest.

Implement Confirm Swap

Description

This component should provide user an estimated figure

  • Of the token after the successful token swap process.
  • Of the pertoken exchange rate (Price).
  • Of the minimum amount of converted token (Minimum Received) to be deposited in the wallet in case of successful transaction.
  • Of the cost of a swap transaction (Liquidity Provider Fee) in the form of a successful transaction.
  • Of the price impact (final execution price of the order)

Moreover the “Confirm Swap” button to agree with the amounts and confirm the swap transaction.

Acceptance Criteria

  • Correct estimated digits should be displayed clearly on this page with accurate currency.
  • Implementation should be unit tested, integration and e2e tested for “Confirm Swap” button and different amount of tokens.

UI for Connect Wallet

Description

We need to update the UI for Dex Settings dialog as the new UI/UX design
Here's the link to new figma design for Settings dialog.

We also need to implement responsive for mobile.

Acceptance Criteria

  • All the developed UI components should be displayed with accurate HTML and CSS and visually inspected.
  • All the developed components should be tested by the tester by trying different values and ensuring that the flow is working as expected.
  • All the developed components should be unit tested using jest.

Implement base user-interface for DEX module v1.0.0

Description

Develop a front-end of a Lisk DEX application following a UI/UX design and fulfills all the functional / non- functional requirements.
Users should be able to utilize a DEX application to perform following functions.

  • Swap tokens: Link
  • Add liquidity ( Create Position): Link
  • Add liquidity (Create pool): Link
  • Add liquidity (Increase existing liquidity): Link
  • Remove liquidity (Claim rewards): Link

Motivation

  • Implement the frontend user-interface of the DEX
  • Support the essential user-goals (Swap and automated market making) of the DEX

Tasks

Sprint 07

Sprint 08

None

Sprint 09

Sprint 23

Implement Color Library

Description

Users will be able to interpret the UI easily in a correct manner using several color variables (primary, secondary, error, success, warning, background and line color). This color library will be defined based on the color-scheme of the app and exported as a part of app general layout.

Acceptance Criteria

  • All the colors to be used in the application should be described in this library.
  • This color library should be easily expandable for adding other colors.
  • Implementation is visually tested for different colors.

Prepare Lisk DEX: UI v1.0.0 for rc

Description

TBD

Motivation

  • Conduct an external security audit of the codebase
  • Prepare the application for release onto a permanent testnet

Tasks

TBD

Update the UI for Add Liquidity (Create pool)

Description

We need to update the UI for Add Liquidity (Create pool) as the UI/UX design was widely changed.
Here's the link to new figma design for Add Liquidity (Create pool).
https://www.figma.com/file/BGnksnIbISCTuMqoOUJ9Q1/Lisk-DEX-Prototypes?node-id=5-5&t=ROF7FHIrzZ18cawO-0

We also need to implement responsive for mobile
https://www.figma.com/file/DBw0j4J9yoUvfqfhg87pu5/Lisk-DEX-Prototypes-(Mobile)?node-id=1-15159&t=5FleicQlUS4Nx6MC-0

Acceptance Criteria

All the developed UI components should be displayed with accurate HTML and CSS and visually inspected.
All the developed components should be tested by the tester by trying different values and ensuring that the flow is working as expected.
All the developed components should be unit tested using jest.

Implement Footer

Description

Allow users to easily route to different different web pages of Lisk-DEX webapp using a footer at the bottom of the web page.

Acceptance Criteria

  • Users should be able to route to different web pages in the application using the clickable links in the footer.
  • Users should be able to access Lisk-DEX social platforms and contact info uing the clickable buttons in the footer.
  • Implementation is Unit Tested, Integration and e2e tested.

Implement governance page to choose a proposal

Description

  • List of proposals should be displayed to allow users to choose a proposal to vote on.
  • A filter component should allow the users to select a filter option by clicking on a dropdown component.
  • It should allow users to navigate to a proposal detail page to vote on by clicking one of the proposals.

Acceptance Criteria

  • The proposal should display all mandatory and optional information: proposal number, proposal type, title, and duration.
  • A complete list of filter options should be available in the filter dropdown component.
  • Implementation should be unit tested.
  • Test if all elements are loaded successfully
  • Test if the filtering proposals works well.
  • Test if all the navigation works correctly.
  • The component should be visually tested using browser inspection for accuracy of text and color schema.

Additional Information

Implement Text Library

Description

User will be able to easily read the text on the website so several fonts (Gilroy, Roboto) along with their font-sizes ({h1,2.5rem}, {h2,2rem}, {h3,1.75rem}, {h4,1.25rem}, {h5,1rem}, {h6,0.75rem}) and font-weights (Semi-Bold) should be defined and exported as a part of app general layout.

Acceptance Criteria

  • All the fonts/fontSizes/fontWeights to be used in the application should be described in this file.
  • This font library should be easily expandable for adding other fonts.
  • Components are visually tested for different colors.

Update the UI for Add Liquidity (Position)

Description

We need to update the UI for Add Liquidity (Position) as the UI/UX design was widely changed.
Here's the link to new figma design for Add Liquidity (Position).

We also need to implement responsive for mobile.

Acceptance Criteria

  • All the developed UI components should be displayed with accurate HTML and CSS and visually inspected.
  • All the developed components should be tested by the tester by trying different values and ensuring that the flow is working as expected.
  • All the developed components should be unit tested using jest.

Prepare Lisk DEX: UI v2.0.0 for alpha

Description

  • The purpose of this epic is to prepare the Lisk DEX UI v.2.0.0 for beta release after fixing the bugs identified by the initial quality assurance.

Motivation

  • Prepare the application for release onto a temporary alphanet

Tasks

  • TBD

Implement Perform Search

Description

  • This task contributes to the Overview Page.
  • Search options component should be displayed to allow the users to get search information by clicking on it.
  • “Search Option” component should display the Pools list with TVL to allow the users to choose a pool or token.
  • “Search Option” component should display the Tokens list with Price to allow the users to choose a pool or token.
  • “View more” button should allow users to load more Pools and Tokens.
  • “Search Option” component should be removed if the user chooses one option or closes it.
  • If the user chooses one pool or token, the Overview page should be navigated to the pool or token information page.

Acceptance criteria

  • Top three pools with TVL should be displayed in the Pools table.
  • Top three tokens with Price should be displayed in the Tokens table.
  • Implementation should be unit tested.
  • The component should be visually tested using browser inspection for accuracy of text and color schema.

Additional Information

Design: Implement Perform Search

Implement Top Tokens Table

Description

  • This tasks contributes to the Overview Page.
  • It should allow the users to see the top 10 tokens with detailed information.
  • It should allow the users to navigate to view all tokens by clicking “View all tokens”, which will lead users to tokens page.
  • It should allow the users to navigate to the token page by clicking one of the tokens.
  • It should allow the users to navigate to add liquidity by clicking the “Add Liquidity” action button.
  • It should allow the users to navigate to swap by clicking the “Swap” action button.
  • It should allow the users to sort the data by each column.

Acceptance Criteria

  • A complete list of top 10 tokens should be able to be explored.
  • Each token should have information like price, price change, volume 24H, and liquidity.
  • Implementation should be unit tested.
  • The component should be visually tested using browser inspection for accuracy of text and color schema.

Additional Information

Implement Top Tokens Table

Implement Transaction Settings

Description

This component should allow users to select the “Slippage Tolerance” from the list of predefined values and to select the translation deadline in minutes.

Acceptance Criteria

  • A list of click-able buttons with predefined options for “Slippage tolerance” along with a custom box can be selected by the user.
  • Implementation is unit tested, integration and e2e tested for the functionality of the boxes.

Implement Tab Component

Description

  • This task contributes to the Overview Page.
  • List of switch options should display tab options.
  • It should allow the users to see the information by clicking one of the tab options.

Acceptance criteria

  • A complete list of switch options should be available in the tab component.
  • Implementation should be unit tested.
  • All components should be loaded successfully
  • Click different tab to navigate different pages
  • The component should be visually tested using browser inspection for accuracy of text and color schema.

Additional Information

Perform Re-vote on a proposal

Description

The "Re-vote" feature allows the users to re-vote by clicking the “Re-vote” button. Upon clicking the re-vote button, a popup modal confirms the submission of vote. The “Recast your vote” modal allows the users to confirm the re-vote by selection options.

  • The “Vote” button allows the users to select if they confirm the revote by selecting the “Yes' ' option and show a popup to approve the request.
  • The “Revote casted” modal should be popped up to let the users know the votes performed successfully after the requesting.

Acceptance Criteria

  • Added the unit tests to evaluate if “Vote” and “Revote” button clicking shows a popup modal.
  • Implementation should be unit tested to evaluate if it is working as expected.
  • Test if all elements are loaded successfully
  • Test if all navigation work correctly
  • The component should be visually tested using browser inspection for accuracy of text and color schema.

Additional Information

Implement Chart with DEX Information board

Description

  • This tasks contributes to the Overview Page.
  • A switch component should display “Liquidity” and “TVL” options to allow the users to choose an option to check the chart.
  • The chart and information states which shows the Liquidity and TVL should be able to change to follow the switch options.
  • A switch component should allow the users to choose filter options by following the duration.
  • The DEX Information board should display basic information for Lisk DEX.

Acceptance criteria

  • A complete DEX basic information should be displayed in the Information board with details.
  • Implementation should be unit tested.
  • All components should be loaded successfully
  • The component should be visually tested using browser inspection for accuracy of text and color schema.

Additional Information

Add liquidity (Create position)

Description

This component consists of development of the UI components designed in UI design specifically Add Liquidity (Position).

Acceptance Criteria

  • All the developed UI components should be displayed with accurate HTML and CSS.
  • All the developed components should be unit tested using jest.

Implement Swap

Description

Develop a front-end of a Lisk DEX application following a UI/UX design and fulfills all the functional/non- functional requirements. Users will be able to:

  • Add liquidity to a pool
  • Modify position in a liquidity pool and
  • Swap LSK tokens with an application token

Acceptance Criteria

  • Developed UI should fulfill all the requirements of each and every user story mentioned here.
  • Each developed component has full functionality as shown in UI design.
  • Swap LSK tokens with application token.
  • Developed all components mentioned in the User Interface(UI) which are necessary for the process of token swapping.
  • Add unit tests.
  • Using Jest, writing unit tests for “Launch App”, “Connect Wallet”, “QR Code”, “Select Token” and “Swap” functionalities.

Implement Top Pools Table

Description

  • This tasks contributes to the Overview Page.
  • It should allow the users to see the top 10 pools with detailed information.
  • It should allow the users to navigate to view all tokens by clicking “View all tokens”, which will lead users to pools page.
  • All components should be loaded successfully
  • It should allow the users to navigate to the pool page by clicking one of the pools.
  • It should allow the users to navigate to add liquidity by clicking the “Add Liquidity” action button.
  • It should allow the users to navigate to swap by clicking the “Swap” action button.
  • It should allow the users to sort the data by each column.

Acceptance Criteria

  • A complete list of top 10 pools should be able to be explored.
  • Each pool should have information like TVL, volume 24H, fees 24H, and APY.
  • Implementation should be unit tested.
  • All components should be loaded successfully
  • The component should be visually tested using browser inspection for accuracy of text and color schema.

Additional Information

Implement Select Token

Description

Select token component should allow the users to select the individual tokens for swapping purposes from a pre-populated list of available tokens.
It should also allow users to quickly select from popular token pairings for swapping as well.

Acceptance Criteria

  • A complete list of available tokens should be available in the vertical scroll window.
  • A list of frequently used tokens for swapping purposes should be available in the popular pairing tab.
  • Implementation is unit, integration and e2e tested for selection and availability of various tokens in the list.
  • The component should be visually tested using browser inspection for accuracy of text and color scheme.

Create an universal proposal

Description

The “Universal proposal” component should be selected to allow the users to create universal proposals.

Acceptance Criteria

  • Implementation should be unit tested.
  • The component should be visually tested using browser inspection for accuracy of text and color schema.
  • Functionality should work as expected.
  • All files are updated.

Additional Information

The UI/UX design for the component is this: Create an universal proposal

Implement Create Proposal component

Description

The Create Proposal component should allow the users to enter all the mandatory and optional information to create a new proposal.

Acceptance Criteria

  • All inputs should be blank as default.
  • All input information should be passed validation.
    • Author: required, maximum chars maximum
    • Title: required, maximum chars maximum
    • Summary: required, 500 chars maximum
    • Description: required, 102400 chars maximum
    • Discussions to: 200 chars maximum
  • Implementation should be unit tested.
  • Test if all elements are loaded successfully
  • Test if validations work correctly
  • Test if all navigation works correctly
  • The component should be visually tested using browser inspection for accuracy of text and color schema.

Additional Information

The Ui/UX design is here: Implement Perform Create Proposal

Implement Swap Tokens

Description

Swap token component should allow the users to select the individual tokens for swapping purposes by clicking on a dropdown button (Select token) or a “Choose Tokens” button.
It should contain a flip token button that allows the user to quickly flip the tokens for swapping.

Acceptance Criteria

  • Selected tokens and its amount should be properly/clearly displayed on the Swap Tokens page.
  • Implementation should be unit tested, integration and e2e tested for “Choose tokens” and “Select token” dropdown button.

Update the UI for Remove Liquidity

Description

We need to update the UI for Remove Liquidity as the UI/UX design was widely changed.

Here's the link to new figma design for Remove Liquidity.

We also need to implement responsive for mobile.

Acceptance Criteria

  • All the developed UI components should be displayed with accurate HTML and CSS and visually inspected.
  • All the developed components should be tested by the tester by trying different values and ensuring that the flow is working as expected.
  • All the developed components should be unit tested using jest.

Create a pool incentivization proposal

Description

The “Pool incentivization proposal” component should be selected to allow users to create pool incentivization proposals. Therefore following two new input components should be added:

  • “Select a pool ID” component should allow the users to select a pool ID by clicking on a dropdown button
  • “Add a multiplier” component should allow the users to set the number of multipliers by input value.

Acceptance Criteria

  • A complete list of available pool IDs should be available in “Select a pool ID” dropdown component.
  • Implementation should be unit tested.
  • Test if all elements are loaded successfully
  • Test if validations work correctly
  • Test if all navigation works correctly
  • The component should be visually tested using browser inspection for accuracy of text and color schema.
  • Al files are updated
  • Checks for deepscan and codecov are complete.

Additional Information

The UI/UX design is here: Create a pool incentivization proposal

Implement proposal page to show information of the proposal

Description

The proposal page should allow the users to see all the information of the current proposal along with “Votes list” , “Your voting info”, “Status history” and “Current result”.

Acceptance Criteria

-Following unit tests are implemented:

  • The title of the button component should be able to be changed by following the vote status. (“Vote”, “Revote”)
  • “Votes list” component should be able to load more votes by clicking the “View more” button.
  • “Votes list” component should allow the users to see the votes of the current proposals with pagination.
  • “Your voting info” component should allow the user’s vote status on the current proposal.
  • “Status history” component should allow the users to see the status history of the current proposal.
  • “Current result” component should allow the users to see the current vote acceptance rate of the current proposal.
  • The component should be visually tested using browser inspection for accuracy of text and color schema.
  • All checks for deepscan and codecov are passing.
  • All unit tests are passing.
  • All files are updated.

Additional Information

Implement governance page to create a proposal

Description

“Create a proposal” button should allow the users to create a new proposal and navigate to the Create Proposal page. This must follow CSS style specifications of the approved design.

Acceptance Criteria

  • "Create Proposal" page is developed and follows the approved designs.
  • “Create a proposal” button works as expected.
  • The component should be visually tested using browser inspection for accuracy of text and color schema.
  • When there’s no proposal, it should show “No proposals found”.
  • A link to DEX service for required actions is established.

Additional Information

Implement Liquidity Home

Description

This component consists of the development of the common UI components that are going to be used for

  • Add Liquidity (Create Position, Create Pool, Increase existing Liquidity);
  • Remove Liquidity (Claim Reward).

Acceptance Criteria

  • Interactive UI screens should be displayed with accurate HTML and CSS.
  • All the developed components should be unit tested using jest.

Update the UI for Add Liquidity (To existing position)

Description

We need to update the UI for Add Liquidity (To existing position) as the UI/UX design was widely changed.
Here's the link to new figma design for Add Liquidity (To existing position).

We also need to implement responsive for mobile.

Acceptance Criteria

  • All the developed UI components should be displayed with accurate HTML and CSS and visually inspected.
  • All the developed components should be tested by the tester by trying different values and ensuring that the flow is working as expected.
  • All the developed components should be unit tested using jest.

Implement Perform Vote on a proposal

Description

  • It should allow the users to vote by clicking the “Vote” button and show a popup model to confirm the vote.
  • The “Cast your vote” model should allow the users to confirm the vote by selection options.
  • The “Vote” button should allow the users to select if they confirm the vote by selecting the “Yes” option and show a popup to approve the request.
  • The “Vote casted” model should be popped up to let the users know the votes performed successfully after the requesting.

Acceptance Criteria

  • Implementation should be unit tested.
  • Test if all elements are loaded successfully
  • Test if all navigations work correctly
  • Test if “Vote” button clicking show a popup
  • The component should be visually tested using browser inspection for accuracy of text and color schema.

Additional Information

Implement Perform Vote on a proposal

Add liquidity (Create pool)

Description

This component consists of development of the UI components designed specifically for "Create Pool".

Acceptance Criteria

  • All the developed UI components should be displayed with accurate HTML and CSS and visually inspected.
  • All the developed components should be tested by the tester by trying different values and ensuring that the flow is working as expected.
  • All the developed components should be unit tested using jest.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.