[Frontend · Shared primitives] Create shared StatusBadge primitive

[amina69]

Epic: Shared primitives
Labels: ui, phase-2, frontend
Size: XS (~2-4 hours)

Description

Base badge component that all domain-specific badges (Adoption, Custody, Dispute, Escrow) build on.

Tasks

• Accept color: "gray"|"blue"|"teal"|"green"|"amber"|"red", label: string, tooltip?: string props
• Render pill with correct background and text colors using design token vars
• Add pulse prop for SLA_BREACHED use case (CSS animation)
• All domain badges import and configure this primitive
• Unit test: each color variant renders correct CSS classes

[Tybravo]

@Tybravo has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hello, I am a full-stack Software Engineer with 7+ years of experience and a Blockchain Developer. New to open-source contributions and adapting very quickly, and I do like to work on the Issue.

I have strong hands-on experience building advanced, user-friendly and visually engaging frontend interfaces using React, TypeScript, and Next.js, with a focus on reusable component architecture, modern UI patterns, responsive design, state management, and performance optimization. I work across both frontend and backend systems, including backend logic, API design, database architecture, and schema modeling.

I have experience building modern, scalable web applications using React, Typescript, Next.js, Node.js, Java, Rust, and related technologies. Some relevant projects (personal and OPEN SOURCE) I have worked on include:

--> https://www.verilens.xyz/
--> https://repeasy.wal.app/
--> https://docwalrus.vercel.app/
--> https://grainlify.0xo.in/

I am comfortable working within an existing codebase or independently , following project conventions, and delivering clean, maintainable, and well-structured solutions. My GitHub repositories can speak for themselves in demonstrating my experience and consistency across different types of projects.

I am confident I can contribute effectively and deliver high-quality results.

Thank you for your time and considering my application.

Regards,
Michael

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

[drips-wave]

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

🧑‍💻 @Tybravo: 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 🌊