EPIC: Products

U3.1 Products page view

User Story	As the user I want to see the main page with the products so that I can see the product categories and products as well as navigation bar
UI/UX
Precondition	The user has opened the app from the landing zone or by calling http://app.domain.com and located on the main page of the app
Role	User

Acceptance criteria:

The page must have 3 main types of the product (product type):
- Bullish Products
- Range Products
- Bearish Products
Each product type must have 2 products which are represented by the underlying pair
- BTC/USD
- ETH/USD
Each category must have the short description
The products must have a form of the object with the short information
The overall currency accepted by the platform must be USDC
Each object must have the following attributes:
- product name
  - the product name defined, ex. ‘ETH bullish spread’
- product icon
  - this is media icon of the produtc
- estimated APY rate
  - APY (Annual Percentage Yield) is real rate of return earned on an investment
- underlying pair
  - as mentioned above - BTC/USD or ETH/USD
- duration
  - must be always ‘fixed’ as we are having only 30d staking product
- there must be the text information on the object: ‘100% principal protection’
- amount deposited
  - (progress bar) with the aggregation value of all the deposits invested by all the users within the selected product
  - example: USDC 19,000 / 100,000
- status
  - accepting deposits / withdrawals
  - funds locked
  - active
- issuance date
  - is the date when the product issue will be trigger - start of the contract
  - timer to the issuance date in form ‘xh xxm xxs’)
- CTA button
  - if Bullish product - ‘Call-spread’
  - if Bearish product - ‘Put-spread’
  - if Range product - ‘Butterfly’
There must be the filters on the products page
- user can filter by the product type (multiple selection):
  - Bullish
  - Bearish
  - Range
- user can filter by underlying pair (multiple selection):
  - BTC/USD
  - ETH/USD
- user can filter by the principal protection % (slider):
  - min 0%
  - max 100%
User can click on the object to see more details of the product and make deposit or request withdrawn (more information in U3.2)

Reference: https://app.ribbon.finance/

U3.2 Product details view

User Story	As the user I want to be able to see the detailed view in a modal window about the selected product so that I can get more information about the terms and yield
UI/UX
Precondition	The user has opened the one of the product from the Products page
Role	User

Acceptance criteria:

When the user clicks on the product object - the new screen must be opened with the more detailed view of the selected product
There must be some following attributes presented within the details view
- product name
- product icon
- estimated APY rate
- duration
- amount deposited
- status
- principal protection
There must be the section called ‘Product Recap’ with the following attributes:
- underlying pair
  - In case of SuperHedge it is either ETH-USDC or BTC-USDC
- product type
  - there must be the product category presented: Range, Bearish, Bullish
- coupon
  - example: 0.10 % per week
- strike N price’
  - there might be from 1 to 4 strikes
  - derived from the backend and presented on the frontend
Reference:

<aside> 💡 Please, be informed that there might be 1, 2, 3 or 4 strikes - this is configured by the backend of the product setup and presented by the frontend - therefore strikes dependant

</aside>