[Frontend] TopPools Component – Dashboard

[aguilar1x]

🎯 Objective

Build the TopPools component to display the top-performing Soroswap liquidity pools in the dashboard.

---

🏗 Component Structure

apps/webapp/components/dashboard/top-pools.tsx

---

🗂 Requirements

Section Header

• Fire/flame icon (muted gray).
• Heading: Top Pools in font-semibold.

Pool List Items

Each pool entry should display:

• Pool Name: e.g., XLM/USDC, AQUA/XLM, yXLM/XLM
• TVL: Displayed below the name, prefixed with TVL:.
• APY Percentage: Right-aligned in green text-green-500.

Layout:

• Flex container with pool name & TVL on the left, APY percentage on the right.
• Rounded card items with subtle background color change on hover.

---

🎨 Design & Styling

• White card background, rounded-xl, soft shadow.
• Padding: p-4 (mobile) / p-6 (desktop).
• Pool name: text-gray-900 font-medium.
• TVL text: text-gray-500 text-sm.
• APY: text-green-500 font-medium.

---

⚙️ Functionality

• Accept props: pools array with objects { name, tvl, apy } for dynamic rendering.
• Allow clickable rows if future navigation to pool detail is required (optional).

---

📱 Responsiveness

• Mobile: full width list with stacked items.
• Desktop: fixed width or grid layout.

---

♿ Accessibility

• aria-label="Top liquidity pools" on container.
• Ensure readable APY percentages for screen readers.

---

✅ Acceptance Criteria

• Displays all pools from provided data with correct name, TVL, and APY.
• Matches design spacing, typography, and icon usage.
• Fully responsive.
• Supports dynamic props without breaking.

---

🔗 Reference

Figma design

[Benjtalkshow]

Hi @aguilar1x
Kindly assign this task to me. Thanks

[SudiptaPaul-31]

May I be assigned to this task I would love to work on this issue

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.