[Frontend] MarketStats Component – Dashboard

[aguilar1x]

🎯 Objective

Build the MarketStats component to display key Soroswap market data inside the dashboard.

---

🏗 Component Structure

apps/webapp/components/dashboard/market-stats.tsx

---

🗂 Requirements

Section Header

• Small chart-trend-up icon (muted gray).
• Heading: Market Stats in font-semibold.

Stats List

• Total Volume (24h): $1.2M
• Total Liquidity: $8.4M
• Active Pairs: 12
• XLM Price: $0.095 (in green text-green-500)

Layout:

• Label aligned left, value aligned right.
• Use monospace or tabular-nums for values to ensure clean alignment.

---

🎨 Design & Styling

• White card background, rounded-xl, soft shadow.
• Padding: p-4 (mobile) / p-6 (desktop).
• Label text: text-gray-500 text-sm.
• Values: text-gray-900 font-medium.
• Positive price change (XLM Price) in text-green-500.

---

⚙️ Functionality

• Accept props for volume, liquidity, pairs, and xlmPrice to allow dynamic updates.
• Optionally include a loading skeleton state for async data fetching.

---

📱 Responsiveness

• Mobile: full width.
• Desktop: fixed width or flex item in a grid.

---

♿ Accessibility

• Use aria-label="Market statistics" on container.
• Ensure color contrast passes WCAG AA.
• Icon is decorative (aria-hidden="true").

---

✅ Acceptance Criteria

• Matches the provided design visually.
• Displays all four stats with correct alignment and styling.
• Fully responsive and accessible.
• Supports dynamic values without breaking layout.

---

🔗 Reference

Figma design

[Benjtalkshow]

Hi @aguilar1x
Can i take this task? Kindly assign

[Sendi0011]

I will really love to work on this.
ETA: 10 hours

Recommended by OnlyDust for outstanding experience and quality contributions.

[Stealth-cloud-droid]

I would like to work on this issue.
I will also use my knowledge to solve the issue
Recommended by OnlyDust for high-quality contributions.