Skip to content

Extract SolverHeaderCard and SolverFillHistory as real, reusable components #238

Description

@james2177

Description: src/components/SolverHeaderCard.test.tsx and src/components/SolverFillHistory.test.tsx already exist and each define an inline local implementation of the component under test — but no SolverHeaderCard.tsx or SolverFillHistory.tsx actually exists in src/components/. Meanwhile, src/app/solve/[address]/page.tsx duplicates the same header-card and fill-history markup inline, and separately references CopyButton, SkeletonCard, and isValidStellarPublicKey without importing them. Extract the two real components and wire the page to use them.

Problem Statement & Context: This is duplicated, drifting logic hiding a broken page: solve/[address]/page.tsx currently cannot compile as written (missing imports), and the two test files describe a cleaner component boundary that was never actually built, leaving the tests validating throwaway inline copies rather than real shipped code.

Scope & Acceptance Criteria:

  • Create src/components/SolverHeaderCard.tsx and src/components/SolverFillHistory.tsx matching the interfaces implied by their existing test files (solver: Solver prop for the header card; solverAddress: string prop for the fill history, internally using useIntentFeed).
  • Update src/app/solve/[address]/page.tsx to import and render these two components instead of its inline duplicated markup, and fix the missing CopyButton/SkeletonCard/isValidStellarPublicKey imports.
  • Update SolverHeaderCard.test.tsx and SolverFillHistory.test.tsx to import the real components instead of defining local inline copies.
  • Out of scope: changing either component's visual design beyond what's needed to match the existing test expectations and page layout.

Implementation Guidelines:

  1. Key files: src/components/SolverHeaderCard.test.tsx, src/components/SolverFillHistory.test.tsx, src/app/solve/[address]/page.tsx, src/lib/stellarAddress.ts, src/components/CopyButton.tsx, src/components/Skeleton.tsx.
  2. Match the props/behavior already asserted in the two test files exactly, since those tests should pass unmodified (aside from the import swap) once the real components exist.
  3. Edge cases: SolverFillHistory's existing inline version filters useIntentFeed's 8-item-capped feed by solver === solverAddress, which may under-represent a solver's full history — consider (and note in the PR, even if not fixed here) whether it should use a different, unbounded data source; at minimum, don't silently change this behavior without flagging it.
  4. Testing: npm run typecheck must pass (this file currently would not compile); run SolverHeaderCard.test.tsx and SolverFillHistory.test.tsx against the real components; add a page.test.tsx case for solve/[address] confirming the extracted components render with real solver data.

Definition of Done:

  • Code written, tested; solve/[address]/page.tsx compiles and renders correctly with no missing imports.
  • Both orphaned test files now validate real, shipped components.
  • PR passes CI (npm run typecheck, npm test, npm run build).
  • Reviewed and approved.

Resources: src/components/SolverHeaderCard.test.tsx, src/components/SolverFillHistory.test.tsx, src/app/solve/[address]/page.tsx

Complexity: High (200 points)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

Stellar WaveIssues in the Stellar wave program

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions