feat(chainflip): lending pool detail page revamp with rate history charts

[twblack88]

Description

Revamp of the Chainflip Lending Pool detail page with improved layout, styling, and interactive rate history charts.

Changes:

• Redesigned Pool.tsx with improved layout, component structure, and visual polish
• Added RateChart — a new lightweight-charts-based histogram component for displaying percentage rates (reusable, lives in src/components/SimpleChart/)
• Added BorrowRateChart and SupplyRateChart components that wire pool-specific rate history data into RateChart
• Added lpServiceApi.ts — a thin GraphQL client for Chainflip's LP service API to fetch rate history
• Updated chainflipLending react-query hooks to support rate history queries
• Updated DashboardSidebar with minor layout adjustments
• Added CSP entry for lp-service.chainflip.io
• Added i18n strings for new UI copy

why draft?

• we need to make sure that we can hit a reliable endpoint for rate history, evenutally other data schemas too. poking around on the chainflip site we found lp-service.chainflip.io/graphql and if we ask nicely we can have.

Issue (if applicable)

closes #

Risk

Low — UI-only changes isolated to the Chainflip Lending Pool detail page. No on-chain transactions, no wallet interactions, no state management changes.

What protocols, transaction types, wallets or contract interactions might be affected by this PR?

None. Read-only UI displaying data from Chainflip's LP service GraphQL API.

Testing

Engineering

1. Navigate to the Chainflip Lending pool detail page
2. Verify the revamped layout renders correctly in both light and dark mode
3. Verify the Supply Rate and Borrow Rate history charts render with bar histogram data
4. Hover over chart bars to confirm crosshair tooltip shows the correct rate percentage and timestamp
5. Verify the chart time-range selector (interval switcher) updates the displayed data

Operations

• 🏁 My feature is behind a flag and doesn't require operations testing (yet)

Screenshots (if applicable)

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5cbda9bb-a6bf-4954-9bb2-cade7e7178a0

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/chainflip-lending-pool-detail-revamp

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}