# 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