safe-wallet/.cursor/rules/safe-monorepo.mdc

---
description: 
globs: 
alwaysApply: true
---
You are an expert developer proficient in TypeScript, Web3/Blockchain(ethers.js, Safe Ecosystem (formally known as Gnosis Safe)), React and Next.js, Expo (React Native), Tamagui, Zod, Yarn v4 (Monorepo Management), Redux, RTK.

Project Structure and Environment

- Follow the established project structure
- Use the `apps` directory for Next.js and Expo applications.
- Utilize the `packages` directory for shared code and components.
- use `expo-plugins` directory for custom expo config plugins
- Use `dotenv` for environment variable management.
- Follow patterns for environment-specific configurations in `eas.json` and `next.config.js`.

Code Style and Structure

- Depending on the part of the code you work on, follow the code style document in the respective docs folder.
- Write concise, technical TypeScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., `isLoading`, `hasError`).
- Structure files with exported components, subcomponents, helpers, static content, and types.
- Favor named exports for components and functions.

TypeScript and Zod Usage

- Use TypeScript for all code; prefer interfaces over types for object shapes.
- Utilize Zod for schema validation and type inference.
- Avoid enums; use literal types or maps instead.
- Implement functional components with TypeScript interfaces for props.
- follow the lint rules and don't use ts "any" type

Syntax and Formatting

- Use the `const` instead of `function` for pure functions.
- Write declarative JSX with clear and readable structure.

UI and Styling
- in the mobile project utilise Tamagui for UI compoentns and styling
- in the nextjs project use Mui
- Implement responsive design with a mobile-first approach.
- Ensure styling consistency between web and native applications.

State Management and Data Fetching

- Use Redux for state management.
- Use Redux RTK for data fetching, caching, and synchronization.
- Minimize the use of `useEffect` and `setState`; favor derived state and memoization when possible.

Error Handling and Validation

- Prioritize error handling and edge cases.
- Handle errors and edge cases at the beginning of functions.
- Use early returns for error conditions to avoid deep nesting.
- Utilize guard clauses to handle preconditions and invalid states early.
- Implement proper error logging and user-friendly error messages.
- Use custom error types or factories for consistent error handling.

Performance Optimization

- Optimize for both web and mobile performance.
- Use dynamic imports for code splitting in Next.js.
- Implement lazy loading for non-critical components.
- Optimize images use appropriate formats, include size data, and implement lazy loading.

Monorepo Management

- Follow best practices using Yarn v4 for monorepo setups.
- Ensure packages are properly isolated and dependencies are correctly managed.
- Use shared configurations and scripts where appropriate.
- Utilize the workspace structure as defined in the root `package.json`.


Testing and Quality Assurance
- use faker to create test data
- Write unit and integration tests for critical components.
- Use jest and the testing libraries specified in each package
- Ensure code coverage and quality metrics meet the project's requirements.
- when testing Redux code prefer actual state changes test over mock calls
- when testing functions that call network endpoints prefer Mock Service Worker (MSW) over mocking function calls


Key Conventions

- Use descriptive and meaningful commit messages.
- Ensure code is clean, well-documented, and follows the project's coding standards.
- Implement error handling and logging consistently across the application.

Follow Official Documentation

- Adhere to the official documentation for each technology used.
- For Next.js, focus on data fetching methods and routing conventions.
- Stay updated with the latest best practices and updates, especially for Expo, React-Native and Tamagui.

Output Expectations

- Code Examples Provide code snippets that align with the guidelines above.
- Explanations Include brief explanations to clarify complex implementations when necessary.
- Clarity and Correctness Ensure all code is clear, correct, and ready for use in a production environment.
- Best Practices Demonstrate adherence to best practices in performance, security, and maintainability.