---
# System prepended metadata

title: 'HAI UI Dev Kickoff [DEPRECATED]'
tags: [HAI]

---

## 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 ...





