# Overview

# Milestone 1 - UI plumbing
## Features
- User can select network and connect wallet
- User can select tokens from a tokenslist for input and output tokens
## Requirements
- Network selector
- Must be able to select network even if wallet is disconnected
- Changing the network dropdown must change the user's actively connected wallet and RPC if the user's walelt is connected
- If the user's wallet is connected, changing network to a network the user doesn't have yet should prompt the user to add the network in their wallet
- Must be able to search by chain (for now default unstyled html dropdown is fine)
- Token list
- Must support token lists for many chains
- Tokenlist will be provided as a json file by x48
- Reliable RPC endpoints will be provided in an API call or JSON file by x48
- Must support searching for tokens in token list (for now default unstyled html dropdown is fine)
- Balances
- Must support fetching user balances for selected tokens
- No requirement to fetch user balance for every token in the list at this time
- Wallet
- Wallet connection should use a well supported library
- Wagmi, Rainbowkit, Blocknative onboard, something like this
- Styling
- Inputs and UI elements can be plain HTML with no styling (or border 1px solid black), or can also use a framework like Material-UI
- You can use default html elements for dropdowns if desired
- Slippage
- Should support selecting slippage threshold (not MVP)




# Milestone 2 - Viewing quotes and solvers
## Features
- UI is connected to decentralized RFQ system and showing swap request quotes in the front-end
## Requirements
- Must be able to view quotes even if wallet is disconnected
- Must be able to see a list of active solvers and timestamps they were last seen (will be provided over websocket)
- For mobile the list of quotes can go below the main swapper
- Quotes should auto-refresh every 30 seconds


# Milestone 3 - Quote execution
## Features
- Allow user to execute a quote
## Requirements
- Approval
- Must allow user to approve a token to be swapped if approval is not set already
- If a user's wallet is not connected the main button should say "Connect"
- If a selected token is not approved main button should say "Approve"
- If user is connected and approved main button should say "Swap"
- Execution
- Signature is done by EIP-712 (sample repo provided where this is working end-to-end) and submitted over websocket
- Must show user a transaction receipt and quote fufilfment status after the quote is submitted (this will be provided over websocket in real-time)


# Milestone 4 - Configuration (not MVP)
## Features
- Allow user to select decentralization configuration
## Requirements
- Must allow user to select libp2p bootstrap addresses
- Must save the user's choice in localstorage

# References
- For mobile see:
- https://swap.defillama.com/
- https://sushi.com
- https://cow.fi
- https://app.uniswap.com

# Tech
- Should probably use next.js
- Use styled components? Open for feedback