## HAI App UX / UI Dev

### Project Overview

HAI is a decentralized, multi-collateral, community governed, and controlled peg RAI fork stablecoin built on Optimism.

### Technical Overview
- **General**
- App is a Typescript app built on the [Create React App](https://create-react-app.dev/) framework.
- App is a fork of the original [Reflexer App Repo](https://github.com/reflexer-labs/geb-app)
- Interaction with deployed HAI contracts is done through the HAI SDK, which is an [npm package](https://www.npmjs.com/package/@hai-on-op/sdk)
- npm package is built and released from [HAI SDK repo](https://github.com/hai-on-op/sdk) and installed as a dependency to the app
- Keepers are currently a set of scripts in a standalone repo. These would be run on something like an EC2 instance
- Keepers are in the process of being migrated to Gelato
- **Technology Stack and Tools**
- Prod / Staging apps are deployed on Vercel
- RPC Provider - Alchemy
- Styling
- Main App - Styled Components (legacy from Reflexer app)
- Splash Page - Tailwind
- web3
- ethers / web3-react for provider
- HAI SDK for interacting with deployed HAI protocol
- Testing
- Jest / Cypress
- react-router
- create react app framework
- yarn

### Resources

[HAI App Repo](https://github.com/hai-on-op/app) (We will primarily working here)

[HAI System Diagrams](https://link.excalidraw.com/readonly/Lu9K2cIKaKYX2EKFKxli)

[HAI Technical Docs]()

[HAI Tetsnet App](https://www.letsgethai.com/#/app)

[HAI Deployed Testnet Contracts](https://github.com/hai-on-op/core/blob/dev/script/GoerliDeployment.s.sol)

[HAI Github Org](https://github.com/hai-on-op)

[HAI SDK Repo](https://github.com/hai-on-op/sdk)

[HAI Core Contracts Repo](https://github.com/hai-on-op/core)

[HAI Keeper Scripts](https://github.com/hai-on-op/scripts)

### Project Scope and Requirements
- **Update splash page design**
- **Complete update of App UI design**
- Design of main app pages / components / analytics page
- Migrate from styled components to tailwind as part of this process
- **UX Improvements**
- General UX
- The app feels targeted at power users. There are a lot of technical concepts the user is currently assumed to be familiar with.
- Onboarding experience
- Currently user's land on a page with a CTA saying to connect a wallet / create a safe with no other context on what the app is or what to do.
- **Integrate auxilary stats dashboard**
- We have a standalone [stats dashboard](https://dashboard.reflexer.finance/) ([code repo](https://github.com/hai-on-op/hai-stats-dashboard)) that is currently used to view SAFE / user data for Reflexer.
- This data is provided by a subgraph from the The Graph which is unique to Reflexer.
- When the contracts were forked many of the method names and signatures changed. So a new graph would need to be created for the integrated dashboard.

- **Additional Items ???**
- Current routing uses the react-router hash router so all urls are of the format `/#/[route]`
- This is legacy from the original Reflexer app
- This is ugly and I'd like to use a different router from react-router so the `#` isn't always in the url

### Roles and Responsibilities

- **HAI Core**
- Luke
- Overseeing project
- Coding / UI dev where needed
- Code reviews
- Communication w/ Wonderland Dev Team (they did the fork dev work)
- This could be answering any questions about the web app or changes that were made on the fork.
- Reza
- General comms and coordiantion
- UI / UX Input / Feedback
- Kingfish
- Answering any questions about the economics / tokenomics / finance piece of th app.

- **Number Group** (Not sure who does what)
- Ryan -> Dev
- Drew ?
- Zak ?
- Spector -> UI / design

### Development Process

- Code contribution
- Can either fork repo and submit pull requests back to base repo or add you all to the github org so you can create PRs in the main repo
- The latter might be preferrable as that will give us preview staging deploys for PRs which we wouldn't get from a fork

### Next steps ...