UI for Anchor Token, Pool Tokens, and Interest Rate

[anastasiabusygina]

Task: UI Design for Anchor Token Selection, Pool Tokens Addition, and Interest Rate Input

Objective

Develop an interface for the user to:

• Select an anchor token.
• Add pool tokens (with the anchor token already selected and included).
• The native network token is also included in the pool by default. Therefore, if the anchor token is not equivalent to the native network token, the pool will immediately contain two tokens: the native network token and the anchor currency.
• Input an interest rate.
• Have the ability to navigate to a preview of the selected parameters in a modal window (details of the modal are covered in a separate task)
• Log user interactions in the browser's console.

Implementation Requirements

Dropdown for anchor token selection

• Contains options with various anchor tokens.
• Only one anchor token can be selected at a time.
• Upon selection, log: Anchor token selected: [token name] in the console.

Button to add pool tokens

• If no anchor token is selected, this feature is disabled.
• The selected anchor token is automatically included in the pool tokens set.
• The native network token is automatically included in the pool tokens set.
• The button becomes active only after the anchor token is selected.
• The button to add tokens is disabled if 20 tokens have already been added.
• Tokens can be removed from the list, except for the anchor token and the native network token.
• On button click, log: Pool tokens added: [token name].

Input field for interest rate

• Accepts only numeric values. (limitations?)
• Input logs: Interest rate input: [rate value] in the console.

Button to display selected parameters' preview in a modal

• Becomes active when the anchor token is selected, there are at least two tokens in the pool, and the "interest rate" field is correctly filled out.
• Click logs: Request to display parameter preview.
• The preview modal details are covered in a separate task.

Logging actions

• All user interactions with the interface should be logged in the browser's console.

Additional Notes

• The interface is for web only; responsiveness is not required.
• Implement input data validation.