HAQQ Network React TypeScript Development
An expert AI programming assistant specializing in React, TypeScript, and Nx monorepo development for HAQQ blockchain applications.
Overview
This skill provides comprehensive guidance for developing blockchain applications using React, TypeScript, and Nx monorepos. It emphasizes HAQQ Network integration, modern web3 tooling (wagmi, viem), and monorepo best practices.
Technology Stack
**Nx**: Build system and monorepo management**React**: User interface development with functional components**TypeScript**: Type safety and static typing (strict mode)**Tailwind CSS**: Utility-first styling**Jest**: Testing framework**Storybook**: Component documentation and development**Wagmi**: React hooks for Ethereum interactions**Viem**: Low-level blockchain operations**TanStack Query**: Data fetching and state management**HAQQ Network**: Blockchain integrationInstructions
1. Core Development Principles
Write clean, readable, and maintainable TypeScript codeUse React functional components exclusively (no class components)Follow Nx monorepo architecture guidelinesImplement responsive designs using Tailwind CSSDevelop comprehensive tests and Storybook stories for all components2. Coding Standards
Enable and enforce TypeScript strict modeUse named exports for all componentsKeep components small, focused, and reusableFavor composition over inheritanceUse function declarations for componentsName props interfaces as `[ComponentName]Props`Use lowercase-with-dashes for directory names (e.g., `components/auth-wizard`)Place test files and stories adjacent to implementation filesWrite all comments and documentation in EnglishImplement robust error handling throughout3. Blockchain Integration
**Transaction Handling:**
Implement proper transaction lifecycle managementHandle transaction confirmations and status updatesProvide clear user feedback during transaction processing**Wallet Integration:**
Support multiple wallet providers using wagmiHandle wallet connection states gracefullyImplement proper disconnection flows**Gas Management:**
Implement gas estimation using viemHandle fee calculations and user approvalProvide gas price options when appropriate**Network States:**
Handle network switching seamlesslyManage connection state changesSupport HAQQ Network specific configurations**Smart Contract Interaction:**
Use typed contract interfacesImplement proper ABI handlingHandle contract call errors gracefully4. Security Requirements
Validate all user inputs, especially transaction amounts and addressesImplement address validation and checksum verification using viemAdd confirmation dialogs for all transactionsValidate amounts and prevent invalid transactionsHandle network-specific requirements and chain IDs correctly**Never expose or handle private keys in the frontend**Sanitize all user-generated content5. State Management
Use React hooks for local component stateLeverage TanStack Query for data fetching and cachingImplement error boundaries for graceful error handlingManage loading states appropriatelyHandle transaction lifecycle states (pending, confirmed, failed)Track blockchain state changes (block numbers, network changes)Manage wallet connection and account statesImplement proper caching strategies for blockchain data6. Testing Requirements
**Unit Tests:**
Write unit tests for all business logicTest utility functions and helpersMock blockchain interactions appropriately**Integration Tests:**
Test complex workflows end-to-endTest wallet connection flowsTest transaction lifecycle management**E2E Tests:**
Cover critical user journeysTest wallet interactionsTest transaction flows**Testing Patterns:**
Follow Arrange-Act-Assert (AAA) patternUse appropriate mocking strategiesTest error states and edge cases7. Performance Optimization
Implement code splitting for better load timesUse `React.memo()` for expensive componentsUse `useMemo()` and `useCallback()` to prevent unnecessary re-rendersLazy load non-critical componentsOptimize bundle size through proper importsCache blockchain data appropriately8. Error Handling
Implement error boundaries to catch UI errorsUse typed error handling for type safetyProvide user-friendly error messagesLog errors for monitoring and debuggingHandle blockchain-specific errors: - Transaction failures
- Network/RPC errors
- Wallet connection errors
- Smart contract errors
9. Accessibility
Ensure WCAG compliance for all componentsImplement proper ARIA attributesEnsure full keyboard navigabilityTest with screen readersProvide alternative text for imagesUse semantic HTML elements10. File Structure
```
libs/
├── components/
│ ├── feature-name/
│ │ ├── component-name.tsx
│ │ ├── component-name.spec.tsx
│ │ ├── component-name.stories.tsx
│ │ └── index.ts
├── hooks/
├── utils/
└── types/
apps/
├── app-name/
│ ├── src/
│ │ ├── app/
│ │ ├── assets/
│ │ └── main.tsx
```
11. Documentation Requirements
Document the following:
Complex transaction flows and state changesSmart contract interaction patternsBlockchain-specific error codesNetwork-specific features and requirementsComponent props and usage examplesHook parameters and return values12. Code Generation Priorities
When generating code, prioritize in this order:
1. **Type Safety** - Strict TypeScript types and interfaces
2. **Readability** - Clear, self-documenting code
3. **Maintainability** - Modular, testable structure
4. **Performance** - Optimized rendering and data fetching
5. **Security** - Safe handling of blockchain interactions
Examples
Component Structure
```typescript
// button.tsx
import { ReactNode } from 'react';
export interface ButtonProps {
children: ReactNode;
onClick: () => void;
variant?: 'primary' | 'secondary';
disabled?: boolean;
}
export function Button({
children,
onClick,
variant = 'primary',
disabled = false
}: ButtonProps) {
return (
<button
onClick={onClick}
disabled={disabled}
className={`btn btn-${variant}`}
aria-disabled={disabled}
>
{children}
</button>
);
}
```
Blockchain Hook
```typescript
// use-send-transaction.ts
import { useAccount, useSendTransaction, useWaitForTransaction } from 'wagmi';
import { parseEther } from 'viem';
export function useSendHaqqTransaction() {
const { address } = useAccount();
const { data, sendTransaction, isLoading } = useSendTransaction();
const { isLoading: isConfirming } = useWaitForTransaction({
hash: data?.hash,
});
const send = async (to: string, amount: string) => {
if (!address) throw new Error('Wallet not connected');
await sendTransaction({
to,
value: parseEther(amount),
});
};
return {
send,
isLoading: isLoading || isConfirming,
txHash: data?.hash,
};
}
```
Constraints
Never use class components - functional components onlyNever handle private keys in frontend codeAlways validate addresses before transactionsAlways use TypeScript strict modeFollow Nx monorepo conventionsUse viem over ethers.js for blockchain operationsEnsure all components are accessible (WCAG compliant)Write tests for all business logic