liskarchive / lisk-dex-ui Goto Github PK

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

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

• Implement Overview Page
• Implement Tab Component

Description

TBD

Motivation

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

Tasks

TBD

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

• #46
• #47
• #48
• #52
• #53

Sprint 23

• #49
• #50
• #51
• #54

Description

TBD

Motivation

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

Tasks

TBD

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

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.

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.

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.

Description

Motivation

• Implement the frontend user-interface of the DEX
• Support the information for users of the DEX

Tasks

• #85
• #86
• #87
• #88
• #89
• #90
• #91
• #92
• #93
• #94
• #103

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

• UI/UX design: Implement Perform Revote on a proposal

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.

• https://www.figma.com/file/BGnksnIbISCTuMqoOUJ9Q1/Lisk-DEX-Prototypes?node-id=5-68509&t=ROF7FHIrzZ18cawO-0

We also need to implement responsive for mobile.

• https://www.figma.com/file/DBw0j4J9yoUvfqfhg87pu5/Lisk-DEX-Prototypes-(Mobile)?node-id=1-24186&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.

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).

• https://www.figma.com/file/BGnksnIbISCTuMqoOUJ9Q1/Lisk-DEX-Prototypes?node-id=394-88877&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.

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.

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.

• https://www.figma.com/file/BGnksnIbISCTuMqoOUJ9Q1/Lisk-DEX-Prototypes?node-id=5-3&t=ROF7FHIrzZ18cawO-0

We also need to implement responsive for mobile

• https://www.figma.com/file/DBw0j4J9yoUvfqfhg87pu5/Lisk-DEX-Prototypes-(Mobile)?node-id=1-5972&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.

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.

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.

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

Description

TBD

Motivation

• Prepare the application for release onto the final mainnet

Tasks

TBD

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.

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.

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

• UI/UX design: Implement proposal page to show information of the proposal

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

• #131

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

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

• #13
• #14
• #15
• #16
• #17
• #18
• #19
• #20

Sprint 08

None

Sprint 09

• #32
• #33
• #34
• #35

Sprint 23

• #73
• #74
• #70
• #72
• #71
• #80

Description

Prepare the Beta release of Lisk DEX UI by solving known issues and pending improvements.

Motivation

• Prepare the application for release onto a devnet

Tasks

DEX v.1.0.0-alpha.1

• #107
• #123
• #124
• #141
• #134
• #128
• #144
• #145
• #146
• #157

DEX v.1.0.0-alpha.2

• #136
• #147
• #161

DEX v.1.0.0-alpha.3

• #151
• #154
• #164
• #168
• #152
• #153
• #177

DEX v.1.0.0-beta.0

• #182
• #165

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 governance page to create a proposal
• Create Proposal page.
• CSS styling

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.

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.

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

• #105
• #106

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.

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

TBD

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

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

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.

• https://www.figma.com/file/BGnksnIbISCTuMqoOUJ9Q1/Lisk-DEX-Prototypes?node-id=5-52778&t=ROF7FHIrzZ18cawO-0

We also need to implement responsive for mobile.

• https://www.figma.com/file/DBw0j4J9yoUvfqfhg87pu5/Lisk-DEX-Prototypes-(Mobile)?node-id=58-11297&t=COFMFlrgICRdWBdo-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 unit tested using jest.
• Light/Dark mode should work

Description

TBD

Motivation

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

Tasks

TBD

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

• Implement Chart with DEX Information board.

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

Description

TBD

Motivation

• Prepare the application for release onto the final mainnet

Tasks

TBD

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.

Description

TBD

Motivation

• Add support for "Define swap routing algorithm" LIP
• Add support for "Define cross-chain price feed" LIP
• Add support for "Define cross-chain swaps" LIP

Tasks

TBD

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

• UI/UX design: Proposal detail page

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.

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).

• https://www.figma.com/file/BGnksnIbISCTuMqoOUJ9Q1/Lisk-DEX-Prototypes?node-id=5-52778&t=ROF7FHIrzZ18cawO-0

We also need to implement responsive for mobile.

• https://www.figma.com/file/DBw0j4J9yoUvfqfhg87pu5/Lisk-DEX-Prototypes-(Mobile)?node-id=1-20280&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.

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.

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 Top Pools Table

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

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.

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.

• https://www.figma.com/file/BGnksnIbISCTuMqoOUJ9Q1/Lisk-DEX-Prototypes?node-id=5-2&t=KM9p3iL93ov94JVd-0

We also need to implement responsive for mobile.

• https://www.figma.com/file/DBw0j4J9yoUvfqfhg87pu5/Lisk-DEX-Prototypes-(Mobile)?node-id=1-438&t=COFMFlrgICRdWBdo-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.