---
# System prepended metadata

title: PORFI FrontEnd Scope
tags: [PORFI]

---

# Tech Stack
| Aspect | Selection |
| -------- | -------- | 
| CD platform | Vercel |
| UI Framework | NextJS |
| Styling | Chakra UI | 
| Web3 Interaction | Wagmi |

# Main Functions
- Landing Page 
    - explain PORFI concept
- dApp page 
    - display live PORFI protocol metrics
    - support user mint & redemption (wrap/unwrap) flows

# Components
- Navigation
- Footer
- Modals
- Toasts

## Navigation
- Links
    - Home
    - dApp
- Wallet status button
    - connect (when disconnected) -or-
    - display address/ENS (when connected)

## Footer
- Social links
- Partial nav links (Home, dApp)
- Blog, whitepaper, or terms of service links if applicable. 

## Modals
- wrap wallet tokens to mint PORFI 
    - including form to select/define parameters
- unwrap PORFI to redeem basket tokens
    - including form to select/define parameters

# Pages
- Landing 
- dApp 

## Landing 
- Navigation
- Header - logo
- Content - description of project; link to whitepaper
- Content - features: refer to whitepaper
- Content - info about underlying basket
- Footer

## dApp 
- Navigation
- Header - logo
- Content - PORFI mkt price; total generated liquidity; protocol-owned liquidity
- Content - Wrap button; Unwrap button; tooltip on hover
- Content - Supply cap: r/t metrics of tokens in circ; Variable supply cap indicator 
- Footer 

### dApp Interaction Flows
- wrap wallet tokens to mint PORFI
- unwrap PORFI to redeem basket tokens

# Non-Functional Deliverables
- CI build
- 80% test coverage
