Skip to content

Add health score columns + preview UX compaction#450

Merged
antoncoding merged 3 commits intomasterfrom
feat/health-score-borrower-previews
Mar 12, 2026
Merged

Add health score columns + preview UX compaction#450
antoncoding merged 3 commits intomasterfrom
feat/health-score-borrower-previews

Conversation

@starksama
Copy link
Copy Markdown
Collaborator

@starksama starksama commented Mar 12, 2026

What this PR does

This PR introduces a normalized Health Score metric and improves preview readability/layout across borrow flows.

1) Health Score support (2-decimal display)

  • Adds shared health-score helpers based on:
    • Health Score = LLTV / LTV
  • UI interpretation:
    • > 1.00 safer
    • = 1.00 liquidation boundary
    • < 1.00 liquidatable / high risk
  • Health Score is shown with fixed 2 decimal places.

2) Market Detail → Top Borrowers

  • Adds Health Score column.
  • Adds Health Score toggle in borrower table settings.
  • Keeps filter and settings controls separate and aligned side-by-side.

3) User Morpho Blue Borrow Positions table

  • Adds Health Score column.
  • Adds settings button + settings modal for column visibility.
  • Persists new visibility preference in positions preferences store.

4) Borrow/Repay/Leverage/Deleverage preview UX

  • Summary order is now:
    1. Collateral
    2. Debt (Loan)
    3. Health Score
  • Moves refresh action to header-right via shared preview section header pattern.
  • Reworks value-delta rendering to a compact preview indicator pattern to prevent line-wrap/alignment breakage.

Validation

  • pnpm typecheck
  • pnpm lint:check ✅ (existing non-blocking Biome INTERNAL warning may still appear in unrelated file)

Notes

  • This PR focuses on feature + UX integration and shared-helper consistency.
  • Any remaining unrelated lint/config noise is pre-existing and not introduced by this change.

Summary by CodeRabbit

  • New Features

    • Added Health Score column to borrower and position tables, displaying distance to liquidation threshold with customizable visibility
    • Introduced table column settings modal for managing column visibility preferences
    • Added refresh button for position preview values
  • UI Improvements

    • Enhanced position preview displays with improved visual formatting and detailed tooltips
    • Reorganized refresh controls with dedicated header component
    • Added table settings icon for easier access to column configuration

@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented Mar 12, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
monarch Ready Ready Preview, Comment Mar 12, 2026 0:42am

Request Review

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Mar 12, 2026

Warning

Rate limit exceeded

@starksama has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 14 minutes and 25 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 021a2a56-3405-4cda-b535-a8e85010cad1

📥 Commits

Reviewing files that changed from the base of the PR and between 494f0c4 and 8845dae.

📒 Files selected for processing (1)
  • src/modals/borrow/components/borrow-position-risk-card.tsx
📝 Walkthrough

Walkthrough

This PR adds a health score column to borrower and borrowed position tables, introduces column visibility configuration via a new settings modal, and refactors refresh UI controls into a dedicated header component. Health score computation and formatting utilities are added to support the new column.

Changes

Cohort / File(s) Summary
Health Score Column Visibility – Borrower Table
src/features/market-detail/components/borrower-table-column-visibility.ts
Adds healthScore: boolean field to BorrowerTableColumnVisibility type; extends column labels, descriptions, and default visibility configuration.
Health Score Column Visibility – Borrowed Table
src/features/positions/components/borrowed-table-column-visibility.ts
New module defining BorrowedTableColumnVisibility type with healthScore field and corresponding labels, descriptions, and defaults.
Settings Modals
src/features/market-detail/components/borrower-table-settings-modal.tsx, src/features/positions/components/borrowed-table-settings-modal.tsx
Borrower modal refactored to inline label rendering; new borrowed modal component for toggling column visibility with IconSwitch controls.
Health Score Utilities
src/modals/borrow/components/helpers.ts
Adds computeHealthScoreFromLtv() and formatHealthScore() functions for calculating and formatting health scores from LTV metrics.
Borrower Table
src/features/market-detail/components/borrowers-table.tsx
Integrates health score computation and rendering; adds conditional Health Score column based on visibility toggle; updates column span for empty state.
Borrowed Table
src/features/positions/components/borrowed-morpho-blue-table.tsx
Adds GearIcon settings button, modal state, health score column conditional rendering, integrates usePositionsPreferences for column visibility persistence, adjusts row colspan.
Position Row Detail
src/features/positions/components/borrowed-morpho-blue-row-detail.tsx
Minor formatting adjustments: single-line destructuring and inlined liquidation tooltip construction; no logic changes.
Borrow Position Risk Card
src/modals/borrow/components/borrow-position-risk-card.tsx
Removes onRefresh/isRefreshing props; refactors to PreviewIndicator pattern for collateral, debt, health score, and LTV displays; adds health score preview logic; updates tooltip and layout structure.
Preview Section Header
src/modals/borrow/components/preview-section-header.tsx
New component for section headers with optional refresh button; used to replace inline refresh logic in AddCollateralAndBorrow, WithdrawCollateralAndRepay, and leverage modals.
Borrow and Leverage Modals
src/modals/borrow/components/add-collateral-and-borrow.tsx, src/modals/borrow/components/withdraw-collateral-and-repay.tsx, src/modals/leverage/components/add-collateral-and-leverage.tsx, src/modals/leverage/components/remove-collateral-and-deleverage.tsx
Integrate PreviewSectionHeader for refresh UI; remove onRefresh/isRefreshing delegation from BorrowPositionRiskCard.
Positions Preferences Store
src/stores/usePositionsPreferences.ts
Adds borrowedTableColumnVisibility state and setter; implements store version migration (v1 → v2) with fallback defaults for column visibility.

Sequence Diagram

sequenceDiagram
    participant User
    participant BorrowedMorphoBlueTable
    participant BorrowedTableSettingsModal
    participant usePositionsPreferences
    participant BorrowedMorphoBlueTable as Table Render

    User->>BorrowedMorphoBlueTable: Click gear icon
    BorrowedMorphoBlueTable->>BorrowedTableSettingsModal: Open modal
    BorrowedTableSettingsModal->>usePositionsPreferences: Read borrowedTableColumnVisibility
    usePositionsPreferences-->>BorrowedTableSettingsModal: Return current visibility state
    BorrowedTableSettingsModal->>User: Display column toggles (healthScore, etc.)
    User->>BorrowedTableSettingsModal: Toggle healthScore visibility
    BorrowedTableSettingsModal->>usePositionsPreferences: Call setBorrowedTableColumnVisibility
    usePositionsPreferences->>usePositionsPreferences: Update state & persist to localStorage
    usePositionsPreferences-->>BorrowedMorphoBlueTable: Notify subscriber
    BorrowedMorphoBlueTable->>Table Render: Re-render with updated visibility
    Table Render-->>User: Show/hide Health Score column
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • #444 – Modifies borrowed position components with LTV and health-score rendering updates
  • #412 – Adds Health Score column to borrowed positions table with related visibility controls
  • #261 – Introduces the positions preferences store schema that this PR extends with borrowed table column visibility

Suggested labels

feature request, ui

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main changes: adding health score columns and refactoring preview UI layout.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/health-score-borrower-previews

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

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

@coderabbitai coderabbitai Bot added feature request Specific feature ready to be implemented ui User interface labels Mar 12, 2026
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
src/modals/borrow/components/withdraw-collateral-and-repay.tsx (1)

138-145: try-catch won't catch async errors here.

onSuccess (handleRefreshAll) uses Promise.allSettled which never rejects, so this is harmless. But the try-catch gives false confidence it's handling errors from the refresh operations. Consider removing it or making the callback async if error handling is actually desired.

Option: simplify if no error handling needed
 const handleRefresh = useCallback(() => {
-  if (!onSuccess) return;
-  try {
-    onSuccess();
-  } catch (error) {
-    console.error('Failed to refresh data:', error);
-  }
+  onSuccess?.();
 }, [onSuccess]);
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/modals/borrow/components/withdraw-collateral-and-repay.tsx` around lines
138 - 145, The try-catch in handleRefresh gives false confidence because
onSuccess (the handleRefreshAll implementation) is async and uses
Promise.allSettled, so synchronous try-catch won't capture async errors; either
remove the try-catch entirely if you don't need error handling, or make
handleRefresh async and await onSuccess() and then handle rejections (or inspect
Promise.allSettled results) to log errors; locate the handler named
handleRefresh and the async refresh function onSuccess/handleRefreshAll to apply
the change.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/modals/borrow/components/withdraw-collateral-and-repay.tsx`:
- Around line 138-145: The try-catch in handleRefresh gives false confidence
because onSuccess (the handleRefreshAll implementation) is async and uses
Promise.allSettled, so synchronous try-catch won't capture async errors; either
remove the try-catch entirely if you don't need error handling, or make
handleRefresh async and await onSuccess() and then handle rejections (or inspect
Promise.allSettled results) to log errors; locate the handler named
handleRefresh and the async refresh function onSuccess/handleRefreshAll to apply
the change.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 859d1a70-208a-4a15-b33b-e571c001d13a

📥 Commits

Reviewing files that changed from the base of the PR and between 773106d and 494f0c4.

📒 Files selected for processing (15)
  • src/features/market-detail/components/borrower-table-column-visibility.ts
  • src/features/market-detail/components/borrower-table-settings-modal.tsx
  • src/features/market-detail/components/borrowers-table.tsx
  • src/features/positions/components/borrowed-morpho-blue-row-detail.tsx
  • src/features/positions/components/borrowed-morpho-blue-table.tsx
  • src/features/positions/components/borrowed-table-column-visibility.ts
  • src/features/positions/components/borrowed-table-settings-modal.tsx
  • src/modals/borrow/components/add-collateral-and-borrow.tsx
  • src/modals/borrow/components/borrow-position-risk-card.tsx
  • src/modals/borrow/components/helpers.ts
  • src/modals/borrow/components/preview-section-header.tsx
  • src/modals/borrow/components/withdraw-collateral-and-repay.tsx
  • src/modals/leverage/components/add-collateral-and-leverage.tsx
  • src/modals/leverage/components/remove-collateral-and-deleverage.tsx
  • src/stores/usePositionsPreferences.ts

@antoncoding antoncoding merged commit 5d5d5a6 into master Mar 12, 2026
4 checks passed
@antoncoding antoncoding deleted the feat/health-score-borrower-previews branch March 12, 2026 12:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature request Specific feature ready to be implemented ui User interface

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants