Implement strict validation schemas (Zod) for all frontend submission forms

[Lakes41]

Difficulty: Intermediate
Type: UI/UX, feature

Background

Forms inside the application (like custom token imports or profile setup) validate inputs manually using basic if/else logic.

Problem

Manual validation is prone to edge cases, messy component code, and inconsistent error messaging. Incorrect inputs can occasionally slip through to smart contract execution, costing users wasted gas.

Expected outcome

The application adopts a schema validation library (Zod) integrated with react-hook-form to ensure completely robust, type-safe validation before any form submission is processed.

Suggested implementation

1. Install zod and @hookform/resolvers.
2. Define strict schemas for forms (e.g., ensuring string lengths, regex matching valid EVM addresses).
3. Wire the schemas into the existing form components and map the resulting error messages directly to the UI input fields.

Acceptance criteria

• Forms automatically block submission if inputs violate the schema.
• Error messages are localized below the relevant input field dynamically.
• Validation logic is fully removed from the JSX components and isolated in schema definitions.

Likely affected files/directories

• src/components/Forms/ImportTokenForm.tsx
• src/schemas/token.ts

Requirements

• Schema errors must be written in clear, user-friendly language (not raw regex failures).