bug: Critical UI/UX failures, missing validation, and DX tooling gaps across core routes #30

bug: Critical UI/UX failures, missing validation, and DX tooling gaps across core routes

1. Problem

• Critical crashes: /explorer hard-crashes on unsupported networks with no recovery state.
• Validation bypass: createOracle.tsx accepts malformed ETH addresses and negative rewards without UI warnings.
• Unused dependencies: zod and react-hook-form exist in package.json but are ignored in favor of manual procedural checks.
• Broken UX: The "Know Your Assumptions" (KYA) modal is unreachable and info tooltips fail to render.
• Missing DX guarantees: Repository entirely lacks .husky pre-commit hooks for linting.

2. Current Behavior

1. /explorer crash — no Error Boundary

• Reproduction: Connect any wallet on an unsupported network → navigate to /explorer
• Result: Raw error "Oracle Factory not deployed on this network" thrown to DOM.
  Page is unrecoverable.
• Fix: Wrap factory query in React Error Boundary. Render
  "Switch to a supported network" empty state instead.

3. KYA Modal broken

• Reproduction: Load /create — modal does not appear. Click footer KYA button —
  no DOM change, no overlay.
• Fix: Debug modal trigger logic in createOracle.tsx. Add Escape +
  backdrop-click close handlers.

4. Zero client-side form validation

• Reproduction: Type invalid_address into Owner Address field → Tab out →
  no red border, no aria-invalid, no inline error.
• Evidence: createOracle.tsx uses 10 manual useState hooks + chained
  if/else blocks. zod and react-hook-form are both in package.json
  but never wired up.
• Fix: Replace manual state with react-hook-form + zodResolver.
  Define Zod schema enforcing 0x-prefixed ETH addresses and bounded
  numeric ranges for all 9 fields.

5. Husky + lint-staged absent

• Evidence: No .husky directory. package.json has no lint-staged config.
• Fix: npx husky init + configure lint-staged for Prettier/ESLint on commit.

6. Info tooltips non-functional

• Reproduction: Hover over any field info icon (Reward, Alpha, Quorum) —
  no tooltip rendered.

7. Nav bar absent on / route

• Reproduction: Visit home / — top nav bar is missing entirely.

8. createOracle.tsx monolith

• 640 lines / ~28KB. Tightly couples wagmi simulation, DOM rendering,
  and un-abstracted state. Blocks modular testing.
• Proposed split: OracleMetadataForm, OracleParametersForm as pure
  components under a FormProvider.

9. External wallet deps removal

• Evidence: Wallet stack still appears to rely on external wallet UI wrappers instead of the minimal wagmi/viem core flow.
• Risk: Extra bundle weight, more state-sync edge cases, harder debugging, and tighter coupling between wallet connection UX and third-party abstractions.

Reproduction 1 (Crash): Connect wallet on unsupported network → Navigate to /explorer → DOM throws unhandled "Oracle Factory not deployed" error.

Reproduction 2 (Validation): Input invalid_text (Owner Address) or -10 (Reward) on /create → Tab out → No inline errors or red borders appear.

Reproduction 3 (Modal): Click KYA button in Footer → DOM fails to update; modal remains hidden.

Reproduction 4 (Tooltips): Hover over info icons ("Reward", "Alpha") → No tooltips render.

Evidence: createOracle.tsx (L84-103) executes iterative manual validation. /explorer lacks a React Error Boundary. No .husky directory exists.

3. Proposed Solution

• Implement Zod schema: Wire @hookform/resolvers/zod into createOracle.tsx to enforce 0x-prefixed addresses and positive numbers.
• Add Error Boundary: Wrap /explorer's factory query to catch deployment errors and safely render a "Switch network" fallback.
• Fix Modal triggers: Resolve boolean states for the KYA modal in Footer and attach Escape/backdrop-click handlers.
• Fix Tooltips: Ensure Radix UI tooltip components are properly wrapped and triggered.
• Configure Husky: Run npx husky init + lint-staged to enforce Prettier/ESLint on commit.
• Dynamic explorers: Refactor createOracle.tsx (L119-L135) to dynamically pull URLs from wagmi chain config.
• Fix: Audit all wallet-related dependencies/imports, remove unnecessary external wallet UI layers (e.g. RainbowKit/Web3Modal-style wrappers) where possible, and keep only the minimal wagmi/viem-based connection flow.

4. Acceptance Criteria

• /explorer renders graceful empty state on unsupported networks instead of crashing.
• KYA modal triggers from Footer and closes via Escape/backdrop.
• createOracle.tsx inputs reject invalid addresses and negative numbers with red inline errors upon blur.
• Info tooltips explicitly render on hover for technical fields.
• .husky/pre-commit exists and successfully runs lint-staged.
• npm run build and npm run lint pass with zero new errors.
• Successful Oracle creation transaction flow has zero behavioral regressions.
• Wallet-related external deps are fully audited with exact import sites listed.
• Unnecessary wallet UI deps are removed without breaking core connection flow.
• Connect / disconnect / switch-network flows continue to work correctly.
• Build and lint pass after wallet deps cleanup.