DAO Webapp Architecture

The DAO webapp has been built using React (opens in a new tab) and Vite (opens in a new tab). React is a JavaScript library that can be used to build user interfaces from individual components, while Vite acts as the build tool and development server. The project uses React Router (opens in a new tab) for client-side routing. All of the code has been written in TypeScript, to ensure type safety and improve code readability. The project also enforces code quality and formatting using ESLint and Prettier.

The project relies on several important dependencies to build a robust and efficient web application. It leverages Web3 packages, such as Ethers and Wagmi, for seamless interaction with default and custom smart contracts, the Polygon blockchain, and wallet connections.

For most blockchain interactions, we usually utilize an intermediary SDK (Software Development Kit), either the Alchemy SDK (opens in a new tab) or our own Diamond Governance SDK (opens in a new tab). These interactions can be anything from creating proposals, voting on proposals, fetching proposaols, fetching the DAO's token balances and much more. Therefore, the Diamond Governance SDK forms a bridge that connects the frontend with the the Diamond and the DAO. To use the Diamond Governance SDK, we instantiate a client and pass it the required parameters. This includes a signer for the currently connected crypto wallet, which the SDK will use to prompt the user to sign blockchain transactions and the address of the Diamond to be used, which decides which deployment of the Diamond is used by the webapp. The Alchemy SDK is only used to fetch the balance of tokens in the DAO and the token transfers to and from the DAO treasury. All other interactions with the DAO are handled by the Diamond Governance SDK. Furthermore, we use Ethers (opens in a new tab), which is a library that enables interaction with blockchain and smart contracts. We use it for various utility functions and to fetch information about specific tokens using the smart contract interaction.

Additionally, the project utilizes Class Variance Authority for styling components with variants, Clsx and Tailwind-Merge for conditional CSS class application, and Radix UI as a collection of customizable UI components. These dependencies enhance the project's flexibility and maintainability by providing streamlined styling and highly reusable UI components. In particular, we use a component library built on top of Radix UI called shadcn/ui (opens in a new tab), which provides a default styling theme for Radix UI components, as well as some unique components of its own.

To test logic functions in the webapp, the project uses Jest (opens in a new tab), which is a JavaScript Testing Framework with support for TypeScript. In addition to logic testing, the project supports visual testing using Storybook (opens in a new tab), a frontend workshop for building UI components and pages in isolation. In addition to providing the ability to view and build components in isolation, it allows you to automatically verify that components run without errors and even test UI interaction behavior for things like forms.

For additional information on the project's architecture, check out the readme (opens in a new tab) on the Github repository.