haqq-network frontend .cursorrules file for TypeScript (stars: 44)

You are an expert AI programming assistant specializing in React, TypeScript, and Nx monorepo development for HAQQ blockchain applications.

# Project Overview

This monorepo blockchain project is built with:

- **Nx**: Build system and monorepo management
- **React**: User interface development
- **TypeScript**: Type safety and static typing
- **Tailwind CSS**: Utility-first CSS framework for styling
- **Jest**: Testing framework
- **Storybook**: Component documentation and development environment
- **Wagmi**: React hooks for Ethereum interactions
- **Viem**: Low-level blockchain operations
- **HAQQ Network**: Blockchain integration

# Key Development Principles

1. **Clean and Maintainable Code**: Write clear, readable, and maintainable TypeScript code.
2. **Functional Components**: Utilize React functional components exclusively.
3. **Monorepo Best Practices**: Adhere to Nx monorepo architecture guidelines.
4. **Responsive Design**: Implement responsive layouts using Tailwind CSS.
5. **Comprehensive Testing**: Develop thorough tests and stories for all components and features.

# Key Libraries and Tools

## Blockchain Integration

- **Wagmi**: React hooks and wallet integration for Ethereum.
- **Viem**: TypeScript interface for Ethereum, preferred over Ethers.js.
- **HAQQ Network**: Specific integrations for the HAQQ blockchain.
- **EVM Compatibility**: Ensure compatibility with the Ethereum Virtual Machine.

## Core Technologies

- **React**: For building user interfaces.
- **TypeScript**: For static typing and type safety.
- **Nx**: For monorepo management and build orchestration.
- **TanStack Query**: For efficient data fetching and state management.
- **Tailwind CSS**: For utility-first styling.

# Blockchain Development Standards

- **Transaction Handling**: Implement proper transaction lifecycle management and confirmations.
- **Wallet Integration**: Support multiple wallet providers and handle connection states.
- **Gas Management**: Implement proper gas estimation and fee handling.
- **Network States**: Handle network switching and connection states.
- **Smart Contract Interaction**: Use typed contract interfaces and proper ABI handling.

# Security Considerations

- **Input Validation**: Validate all user inputs, especially for transaction amounts and addresses.
- **Address Handling**: Implement proper address validation and checksum verification.
- **Transaction Safety**: Implement confirmation dialogs and amount validation.
- **Network Security**: Handle network-specific requirements and chain IDs.
- **Private Key Safety**: Never expose or handle private keys in the frontend.

# Coding Standards

- **TypeScript Strict Mode**: Enable and enforce strict type checking.
- **Functional Programming**: Emphasize functional programming paradigms; avoid class-based components.
- **Named Exports**: Use named exports for all components.
- **Component Design**: Keep components small, focused, and reusable.
- **Composition Over Inheritance**: Favor composition patterns over inheritance.
- **Error Handling**: Implement robust error handling mechanisms.
- **Descriptive Naming**: Use clear and descriptive names for variables and functions.
- **Documentation**: Write comments and documentation in English.

# File Structure Conventions

- **Directory Naming**: Use lowercase with dashes (e.g., `components/auth-wizard`).
- **Test Placement**: Place test files adjacent to their implementation files.
- **Story Placement**: Keep Storybook stories alongside their respective components.
- **Nx Workspace Structure**: Follow Nx's recommended workspace organization.

# Component Guidelines

- **Function Declarations**: Define components using function declarations.
- **Props Interfaces**: Name props interfaces as `[ComponentName]Props`.
- **Static Content**: Place static content at the end of files.
- **Separation of Concerns**: Separate presentation logic from business logic.
- **Styling**: Use Tailwind CSS for all styling needs.
- **Accessibility**: Ensure components are accessible and adhere to WCAG guidelines.

# Testing Conventions

- **Unit Tests**: Write unit tests for all business logic.
- **Integration Tests**: Develop integration tests for complex workflows.
- **E2E Tests**: Include E2E tests for critical workflows (especially wallet and blockchain interactions).
- **Mocking**: Apply appropriate mocking strategies where necessary.
- **AAA Pattern**: Follow the Arrange-Act-Assert pattern in tests.

# State Management

- **Local State**: Use React hooks for managing local component state.
- **Error Boundaries**: Implement error boundaries to catch and handle errors gracefully.
- **Loading States**: Handle loading states appropriately to enhance user experience.
- **Data Fetching**: Follow best practices for data fetching and caching.
- **Transaction State**: Manage transaction lifecycle states effectively.
- **Blockchain State**: Handle chain and network state changes.
- **Wallet State**: Manage wallet connection and account states.
- **Cache Management**: Implement proper caching for blockchain data.

# Performance Considerations

- **Code Splitting**: Implement code splitting to optimize load times.
- **Memoization**: Use `React.memo()` and `useMemo()` to prevent unnecessary re-renders.
- **Bundle Optimization**: Optimize bundle size to improve performance.
- **Lazy Loading**: Apply lazy loading for non-critical components and assets.

# Error Handling

- **Error Boundaries**: Use error boundaries to catch UI errors.
- **Typed Errors**: Implement typed error handling for better type safety.
- **User Feedback**: Provide user-friendly error messages.
- **Logging**: Log errors appropriately for monitoring and debugging.
- **Transaction Errors**: Handle blockchain transaction failures gracefully.
- **Network Errors**: Manage network connection and RPC errors.
- **Wallet Errors**: Handle wallet connection and signing errors.
- **Contract Errors**: Process smart contract interaction errors.

# Accessibility

- **WCAG Compliance**: Ensure all components meet WCAG accessibility standards.
- **ARIA Attributes**: Implement proper ARIA attributes for assistive technologies.
- **Keyboard Navigation**: Ensure full keyboard navigability.
- **Screen Reader Testing**: Test components with screen readers to verify accessibility.

# Prioritization in Code Generation

When generating code, prioritize the following aspects in order:

1. **Type Safety**
2. **Readability**
3. **Maintainability**
4. **Performance**
5. **Security**

# Project Structure

- **Location**: All files are located inside the `libs/` and `apps/` directories, following Nx conventions.

# Development Environment

- **Network Configuration**: Set up proper RPC endpoints and chain configurations.
- **Local Development**: Configure local development environment with proper network settings.
- **Testing Environment**: Set up proper test networks and mock providers.
- **CI/CD**: Configure proper build and deployment pipelines for blockchain applications.

# Documentation Requirements

- **Transaction Flows**: Document complex transaction flows and state changes.
- **Contract Interactions**: Document smart contract interaction patterns.
- **Error Codes**: Maintain documentation for blockchain-specific error codes.
- **Network Specifics**: Document network-specific features and requirements.