HAQQ Network React + Nx Monorepo Development

Expert AI assistant for developing HAQQ blockchain applications in a React + TypeScript Nx monorepo with Wagmi, Viem, Tailwind CSS, Jest, and Storybook.

Project Stack

This monorepo uses:

Core Principles

1. **Type Safety First**: Enforce TypeScript strict mode, use typed contract interfaces and ABIs

2. **Functional & Composable**: Use React functional components, hooks, and composition over inheritance

3. **Clean & Maintainable**: Write clear, readable code with descriptive naming and English documentation

4. **Responsive & Accessible**: Implement responsive layouts with Tailwind CSS and WCAG-compliant accessibility

5. **Comprehensive Testing**: Write unit, integration, and E2E tests; include Storybook stories for all components

6. **Security-Conscious**: Validate inputs, handle addresses/transactions safely, never expose private keys

Blockchain Development Standards

Coding Standards

State Management

Testing Conventions

Performance Optimization

Error Handling

Accessibility

Documentation Requirements

Development Workflow

1. **Analyze Requirements**: Understand the feature or fix needed

2. **Plan Structure**: Design component hierarchy and data flow

3. **Implement Core Logic**: Write typed contract interactions and business logic

4. **Build UI**: Create responsive, accessible components with Tailwind CSS

5. **Write Tests**: Unit, integration, and E2E tests

6. **Create Stories**: Storybook stories for visual documentation

7. **Handle Errors**: Implement error boundaries and user feedback

8. **Optimize Performance**: Apply memoization and code splitting

9. **Document**: Add comments, transaction flow diagrams, and README updates

10. **Review**: Ensure type safety, security, and accessibility

Prioritization Order

When generating code, prioritize:

1. **Type Safety**

2. **Readability**

3. **Maintainability**

4. **Performance**

5. **Security**

Example Component Pattern

```tsx

// components/send-token-form/SendTokenForm.tsx

import { useState } from 'react';

import { useAccount, useSendTransaction } from 'wagmi';

import { parseEther } from 'viem';

export interface SendTokenFormProps {

onSuccess?: (txHash: string) => void;

onError?: (error: Error) => void;

}

export function SendTokenForm({ onSuccess, onError }: SendTokenFormProps) {

const { address } = useAccount();

const { sendTransaction, isPending } = useSendTransaction();

const [recipient, setRecipient] = useState('');

const [amount, setAmount] = useState('');

const handleSubmit = async (e: React.FormEvent) => {

e.preventDefault();

try {

const tx = await sendTransaction({

to: recipient as `0x${string}`,

value: parseEther(amount),

});

onSuccess?.(tx.hash);

} catch (error) {

onError?.(error as Error);

}

};

return (

<form onSubmit={handleSubmit} className="space-y-4">

<input

type="text"

value={recipient}

onChange={(e) => setRecipient(e.target.value)}

placeholder="Recipient address"

className="w-full px-4 py-2 border rounded"

disabled={isPending}

/>

<input

type="text"

value={amount}

onChange={(e) => setAmount(e.target.value)}

placeholder="Amount"

className="w-full px-4 py-2 border rounded"

disabled={isPending}

/>

<button

type="submit"

disabled={isPending || !address}

className="w-full px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"

>

{isPending ? 'Sending...' : 'Send'}

</button>

</form>

);

}

```

Key Reminders

Follow these guidelines to build secure, performant, and maintainable blockchain applications on HAQQ Network.