This is a monorepo for Origin's DeFi applications, built using React and Nx. It contains several apps and libraries that share common code and configurations.
- Clone the repository
- Install dependencies with
pnpm install - Duplicate
.envfile to.env.localand fill in the required variables - Start the development server with
pnpm nx serve <APP_NAME>
We use multiple
.envfiles in the project: at the root for global settings and in/apps/<APP_NAME>folders for app scoped variables. They can be nested to increase specificity, more info here
- To generate graphql files:
pnpm codegen - To compile translations:
pnpm i18n - To execute tasks with Nx:
pnpm nx <target> <project> <...options> - To run multiple targets:
pnpm nx run-many -t <target1> <target2> - To run targets for specific projects:
pnpm nx run-many -t <target1> <target2> -p <proj1> <proj2>
| Status | App Name | Port | main |
next |
|---|---|---|---|---|
| ✅ | defi |
4200 | aws fleek | aws |
| ✅ | governance |
4201 | aws | aws |
| ✅ | prime |
4202 | aws | aws |
The monorepo also includes several shared libraries, such as:
shared/assets: Shared assets to be copied to every public app foldersshared/components: Shared presentational components (only relying on theme and i18n contexts)shared/utils: Shared utility functionsshared/providers: Shared context providers and componentsshared/icons: Shared SVG iconsshared/contracts: Shared contracts constants and ABIsshared/constants: Shared constantsshared/routes: Shared Swapper route configurations
The project uses react-query and graphql-codegen for interacting with GraphQL endpoints. To use:
- Write
.graphqlfiles colocated with your components - Run the codegen task:
pnpm nx run <APP_NAME>-shared:codegen-graphql - Use the generated hooks in your components
For convenience, there is a
pnpm codegenscript that generates all repository graphql documents.
The project uses Emotion and Material-UI for styling. Each app has its own theme library (e.g., defi/theme, prime/theme) that defines the app's color palette, typography, and other design tokens.
The project uses React context and hooks for state management. Shared providers are located in the shared/providers library, while app-specific providers are located in their respective app libraries.
The project uses React Router for client-side routing. Route configurations are defined in the routes.tsx file of each app. Routes can also be colocated in their modules (e.g., defi/)
The project uses react-intl for internationalization. Translation files are located in the lang directory of each app, and the i18n script compiles the translations for all apps.
For convenience, there is a
pnpm i18nscript that extracts and generates all repository translation files.
Each app is deployed to AWS and Fleek, with separate main and next deployments. The deployment process is automated using GitHub Actions.