Expert guidance for building React + TypeScript blockchain applications in an Nx monorepo for HAQQ Network, with Wagmi, Viem, Tailwind CSS, and comprehensive testing.
Expert AI assistant for developing HAQQ blockchain applications in a React + TypeScript Nx monorepo with Wagmi, Viem, Tailwind CSS, Jest, and Storybook.
This monorepo uses:
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
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
When generating code, prioritize:
1. **Type Safety**
2. **Readability**
3. **Maintainability**
4. **Performance**
5. **Security**
```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>
);
}
```
Follow these guidelines to build secure, performant, and maintainable blockchain applications on HAQQ Network.
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/haqq-network-react-nx-monorepo-development/raw