[Frontend] Inconsistent cn() helper: ui/Button.tsx, ui/Card.tsx and ui/EmptyState.tsx redefine a local cn() instead of importing the shared @/app/utils/cn

[grantfox-oss]

Telegram (ask questions / claim the issue here first): https://t.me/+DOylgFv1jyJlNzM0

Why this matters

A shared helper exists at frontend/src/app/utils/cn.ts (clsx + tailwind-merge) and is imported by ui/Input.tsx and ui/Modal.tsx. But ui/Button.tsx (line 8), ui/Card.tsx (line 8) and ui/EmptyState.tsx (line 9) each copy-paste an identical local function cn(...). This is duplicated logic within the same design-system folder that should use one source of truth.

Acceptance criteria

• Replace the local cn() definitions in ui/Button.tsx, ui/Card.tsx and ui/EmptyState.tsx with import { cn } from @/app/utils/cn
• Remove the now-unused clsx/twMerge imports from those files
• Verify typecheck and that rendered classes are unchanged

Files to touch

• frontend/src/app/components/ui/Button.tsx
• frontend/src/app/components/ui/Card.tsx
• frontend/src/app/components/ui/EmptyState.tsx
• frontend/src/app/utils/cn.ts

Out of scope

• Changing the cn implementation itself

[Stella112]

Hi, I’d like to work on #1248. I can replace the local duplicated cn() helpers in Button/Card/EmptyState with the shared @/app/utils/cn import, keep the change focused, and run the relevant frontend checks before opening a PR.

[Exploit34]

Hi maintainer, Leave it to me I'll take care of this issue.

[amosleoamadi]

@amosleoamadi has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Can I work on this issue please

ℹ️ Repo Maintainers: To accept this application, review their application or assign @amosleoamadi to this issue.

[MethelyDev]

@MethelyDev has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I would like to work on this issue, kindly assign me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @MethelyDev to this issue.

[grantfox-oss]

🦊 GrantFox — @MethelyDev has been assigned to this issue!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #1248)
2. Your PR will be reviewed by the LabsCrypt maintainers

Good luck! Track your progress on GrantFox.

[drips-wave]

Congratulations, @MethelyDev! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @MethelyDev: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊