[Migration] Migrate ContractInteraction to shadcn registry (#5)

[PetarStoev02]

Summary

• Migrate ContractInteraction component to shadcn registry format
• Extract types and utilities to separate files for better maintainability
• Add configurable functions and custom onExecute handler via props
• Support read/write function tabs with paginated result history

Changes

File	Description
registry/w3-kit/contract-interaction/contract-interaction.tsx	Main component with function selection, execution, and results
registry/w3-kit/contract-interaction/types.ts	TypeScript interfaces (FunctionType, ResultType, ErrorState)
registry/w3-kit/contract-interaction/utils.ts	Default functions, descriptions, and validation helpers
registry.json	shadcn registry manifest
components.json	shadcn configuration

Installation

npx shadcn@latest add @w3-kit/contract-interaction

Test plan

• Verify component renders correctly with default ERC20 functions
• Test read function execution (balanceOf, totalSupply, name)
• Test write function execution (transfer, approve)
• Verify error handling and validation
• Test pagination of results
• Test custom onExecute handler

Closes #5

[PetarStoev02]

Code Review: ContractInteraction Component

Overall Assessment: ⭐⭐⭐⭐ (4/5) - Good implementation

✅ Strengths

• Read/Write tab separation is intuitive
• Good mock data simulation for testing
• Input validation for Ethereum addresses
• Result history with pagination
• Nice error state handling with different types (error, warning, info)

⚠️ Potential Issues

1. Simulated random failures in production code

if (Math.random() < 0.2) {
  throw { message: 'Network error: Please try again', type: 'error' }

This should only run when onExecute is not provided, but the UX could be confusing.

2. ErrorState type assertion without validation

const errorState = err as ErrorState;

If a real error is thrown, it won't have the expected shape.

3. Missing React import

import { useState, useCallback } from 'react';

Should include React for JSX or ensure the tsconfig has proper JSX settings.

4. Address validation is basic

validateAddress(inputValue)

Should validate checksum addresses and handle ENS names properly.

5. Results stored in memory only
Results are lost on component unmount. Consider adding persistence option.

💡 Suggestions

• Add ABI parsing for dynamic function inputs
• Support multiple input parameters per function
• Add transaction simulation before execution

🤖 Generated with Claude Code