[Frontend] DeFiInterface Component – Pools Tab

[aguilar1x]

🎯 Objective

Implement the Pools tab inside the DeFiInterface dashboard component, providing an entry point to view Soroswap pool analytics.

---

🏗 Component Structure

apps/webapp/components/dashboard/defi-interface.tsx

• Reuse the same parent container and tab control.
• Active tab: Pools (Swap and Liquidity inactive).

---

🗂 Requirements

Header & Tabs

• Title: DeFi Interface
• Subtitle: Connect your wallet to start trading
• Segmented tabs: Swap | Liquidity | Pools with Pools selected.

Pools Panel (empty state)

• Centered analytics icon (bars) in muted gray.

• Heading: Pool Analytics

• Description: View detailed analytics for all Soroswap liquidity pools

• Action button: View on Soroswap

  • Subtle outlined style, small/medium size, left-aligned Soroswap/external-link icon.
  • Opens external analytics page in a new tab (target="_blank" rel="noopener noreferrer").

Layout & Responsiveness

• Card container with white background, rounded-2xl, soft shadow, generous vertical padding.
• Content vertically and horizontally centered; scales well on mobile.

Accessibility

• Tabs are keyboard-navigable with an ARIA-selected state.
• Button has descriptive aria-label="Open Soroswap pool analytics" and visible focus ring.
• Icon marked decorative (aria-hidden="true").

Design & Tokens

• Match spacing, radii, and typography from other tabs.
• Muted grayscale for icon/description; heading in strong contrast.
• Button: border, rounded-md, hover background tint.

---

✅ Acceptance Criteria

• Pools tab matches the provided layout (icon, heading, description, button).
• Tabs switch views correctly; Pools shows the analytics CTA.
• Responsive and accessible; no TypeScript or console warnings.

---

🔗 Reference

Figma design

[Benjtalkshow]

@aguilar1x
I can handle this task, Kindly assign. Thanks

[Villarley]

Hey @aguilar1x I have huge expertise making these interfaces, I would deliver a pr within 24 hrs.

Recommended by OnlyDust for high-quality and dependable 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.