Skip to content

Fix App.tsx duplicate state declarations and missing imports — TypeScript compilation broken #503

Description

@PrincessnJoy

Description

frontend/src/App.tsx does not compile. It contains numerous duplicate declarations and references to variables, hooks, and components that are never imported. The TypeScript compiler and the Vite dev server both fail on this file.

Duplicate Declarations

Identifier Declared how many times?
walletAddress 2 (once from useWallet(), once as useState)
tokenBalance 2
disconnect 2
connect function 3 separate const connect = ... definitions

Used but Never Imported

The following are referenced in JSX or logic but have no import statement at the top of the file:

  • theme / setTheme (dark mode state)
  • showNewForm / setShowNewForm (proposal form toggle)
  • page / totalPages / setPage (pagination state)
  • styles (CSS Modules import from App.module.css)
  • t (i18n translation function from i18n.ts)
  • AriaLive (component — exists in components/AriaLive/)
  • ErrorBoundary (component — exists in components/ErrorBoundary/)
  • ConnectWalletModal (component — exists in components/ConnectWalletModal/)
  • Pagination (component — exists in components/Pagination/)

Missing Context Provider

useWallet() is called inside App, but App is not wrapped in WalletProvider — this will throw a React context error at runtime.

Acceptance Criteria

  • Remove all duplicate const declarations; each identifier is declared exactly once
  • Remove the two extra connect function definitions; keep one canonical implementation
  • Add all missing import statements for state variables, components, and utilities listed above
  • Wrap the app root (in main.tsx or equivalent) with WalletProvider so useWallet() has a valid context
  • npm run build (TypeScript + Vite) completes with zero type errors
  • npm run dev starts without console errors on the initial load
  • Existing frontend unit tests (npm test) continue to pass

Priority

Critical — the frontend does not build.

Estimated Effort

Small-Medium — mechanical fix once the full list of missing imports is confirmed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions