#117 [UIUX] #127 - Liquidity Heatmap

[fahatadam]

Summary

Implements a Liquidity Heatmap overlay on market outcome buttons, giving traders instant visual depth perception of where liquidity is concentrated — blue for YES-side, orange for NO-side — without needing to read raw numbers. Overlays are CSS-only and non-blocking (pointer-events: none).

Related Issue

Closes #117

Type of Change

• Bug fix
• New feature
• Refactor
• Documentation update
• Other (describe):

Changes Made

• backend/src/routes/markets.js — Updated GET /api/markets and GET /api/markets/:id to calculate and return a pool_depth object (e.g. { "0": 1500, "1": 300 }) by aggregating bets per outcome
• frontend/src/components/LiquidityHeatmap.tsx (new) — Reusable React component rendering a CSS div overlay with opacity mapped to pool depth percentage; blue for YES (index 0), orange for NO (index 1); depth-to-opacity mapping is inline-commented
• frontend/src/components/MarketCard.tsx — Integrated behind outcome buttons with pointer-events-none
• frontend/src/components/mobile/TradeDrawer.tsx — Integrated behind outcome buttons with pointer-events-none
• frontend/src/components/tests/LiquidityHeatmap.test.tsx (new) — Unit tests for blue/orange color logic and edge cases (empty pool, single bettor, 100% one-sided)
• README.md — Added API Data Format (Pool Depth) section documenting the expected pool_depth response shape

Testing

• Unit tests added for LiquidityHeatmap covering blue/orange assignment, empty pool (opacity = 0), single bettor (opacity = max), and pointer-events-none enforcement
• Manually verified that the import paths resolve correctly between components/ and components/mobile/
• Logic verified: opacity formula is (outcomePool / totalPool) * 0.4, capped at 40% for readability

Checklist

• My code follows the project's style guidelines
• I have performed a self-review of my code
• I have commented complex logic where necessary (depth-to-opacity mapping inline comments)
• I have updated documentation if needed (README.md pool depth format section)
• My changes don't introduce new warnings or errors

[drips-wave]

Hey @fahatadam! 👋 It looks like this PR isn't linked to any issue.

If this PR is for one of the issues assigned to you as part of a Wave, please link it to ensure your contribution is tracked properly. You can do this by adding a keyword to the PR description (e.g., Closes #123), or by clicking a button below:

Issue	Title
#117	[UIUX] #127 - Liquidity Heatmap	Link to this issue

ℹ️ Learn more about linking PRs to issues

[Hahfyeex]

@fahatadam where is the design figma link or screenshot?