Stack Implementation

This documents how we will use the stack provided in the frontend of the protocol.

State Management

Within our stack, Redux will serve as the primary tool for managing application state. By implementing Redux, we can efficiently handle the extensive data required for consumption and maintain a centralized source of truth for our API integrations. Redux simplifies data flow and enables separation of concerns, enhancing scalability and maintainability throughout our application.

API Management

GraphQL will be utilized for streamlined dataset retrieval, ensuring that specific data is efficiently requested from the server. To handle API calls and avoid rate limit and congestion issues, we will leverage Redux, making use of its middleware capabilities. This approach enables us to store the returned data in Redux, making it easily accessible throughout the application.

Web3 Integrations

Wagmi, the chosen library within our stack, provides a comprehensive set of React Hooks for Ethereum integration. By utilizing Wagmi, we can seamlessly connect wallets, display ENS and balance information, sign messages, and interact with contracts. These integrations are made typesafe with TypeChain, and custom hooks will be created for a cleaner developer experience, reducing code repetition.

UI Components

Our stack includes powerful tools for building UI components that ensure a seamless user experience. Storybook serves as a development environment that allows developers to create and test UI components in isolation. Tailwind CSS, a utility-first CSS framework, simplifies and expedites the styling process. Radix UI enhances our stack with a flexible and fully accessible set of customizable UI components.