[Frontend] DeFiInterface Component – Pools Tab #12
Description
🎯 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 | Poolswith 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
