Skip to content

chore(design-system): relocate single-use client components to consumer's _components/ #18193

@myelinated-wackerow

Description

@myelinated-wackerow

A component-disposition audit identified "use client" components with exactly one consumer (with a couple of borderline cases noted). They should live next to that consumer in a _components/ directory, not in the shared src/components/ namespace.

Single PR. Each move = git mv + import path updates + verify build.

Items

  • src/components/CentralizedExchanges/ -> app/[locale]/get-eth/_components/CentralizedExchanges/

    • Consumer: app/[locale]/get-eth/_components/CentralizedExchangesLazy.tsx (dynamic import)
  • src/components/StablecoinAccordion/ -> app/[locale]/stablecoins/_components/StablecoinAccordion/

  • src/components/StablecoinsTable.tsx -> app/[locale]/stablecoins/_components/StablecoinsTable.tsx

  • src/components/Layer2NetworksTable/ -> app/[locale]/layer-2/networks/_components/Layer2NetworksTable/

    • Has internal hooks (useNetworkColumns, useNetworkFilters); ensure all internal imports update correctly
  • src/components/StartWithEthereumFlow/ -> app/[locale]/start/_components/StartWithEthereumFlow/

  • src/components/EthPriceCard.tsx -> app/[locale]/get-eth/_components/EthPriceCard.tsx

  • src/components/ConnectToEthereumButton/ -> co-locate inside src/components/StartWithEthereumFlow/ConnectYourWallet/ (or with StartWithEthereumFlow's new home once that relocates)

    • Technically server (no "use client"); sits inside the StartWithEthereumFlow feature
    • Coordination: this and StartWithEthereumFlow should land together to avoid a stale import path
  • src/components/FindWalletProductTable/ -> app/[locale]/wallets/find-wallet/_components/FindWalletProductTable/ (borderline)

    • Has an existing story file; relocating moves the story with it
    • Reviewer may choose to keep it in shared src/components/ for designer discoverability

Verification before merge

  • pnpm lint passes
  • npx tsc --noEmit passes
  • pnpm build passes
  • No git grep "from \"@/components/<MovedName>" hits remaining
  • All internal sub-imports inside Layer2NetworksTable/ and StartWithEthereumFlow/ resolve correctly after the move
  • Storybook still builds (relevant for FindWalletProductTable/ if it moves)

Out of scope

  • src/components/ListingMethodology/ -- brand new and designed for reuse on other pages; only one consumer today but the design intent is shared. Stays in src/components/.
  • src/components/WalletProviders.tsx -- two consumers but kept shared rather than folded into a feature dir.
  • Components consumed only through BaseLayout.tsx / Static.tsx (Logo/, EnergyConsumptionChart/, FeedbackWidget/, MatomoOptOut.tsx, History/, TranslationChartImage/) -- shared via layouts, pending team decision
  • Components already covered by issue chore(design-system): relocate tight-scope components to page-scoped _components/ #18190 -- relocated there instead
  • Functional-only client components (ClientOnly.tsx, etc.) -- intentionally left alone per team decision

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: StaleThis issue is stale because it has been open 30 days with no activity.design systemthis label will be used in all issues related to design systemneeds triage 📥This issue needs triaged before being worked on

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions