feat: enhance market data display by adding percentMultiplier and upd…

[Artem1211]

…ating discount formatting across components

Summary by CodeRabbit

• Refactor
  • Updated discount calculation and display logic across market and position views to use a new percentage-based formatting approach. Discount values are now computed dynamically using a multiplier across multiple components for consistent presentation.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The useMarketDataForDisplay hook's return type is refactored to expose percentMultiplier: number and return raw numeric discount: number | undefined instead of a pre-formatted discount: string. Formatting responsibility shifts from the hook to four consumer components, each now importing and applying makeFormatPercentWithPrecision locally.

Changes

Cohort / File(s)	Summary
Hook Return Type Refactoring packages/app/src/entities/token/hooks/use-market-data-for-display.ts	Modified return type to include percentMultiplier: number and `discount: number
Consumer Components packages/app/src/features/liquidity-flow/components/lend-first-position-modal/lend-first-position-modal.tsx, packages/app/src/features/liquidity-flow/components/lend-increase-modal/lend-increase-modal.tsx, packages/app/src/widgets/market-section/components/market-card/market-card.tsx, packages/app/src/widgets/position-section/components/position-cell/position-cell.tsx	Each component now imports makeFormatPercentWithPrecision, extracts percentMultiplier from the hook, creates a local formatter, and applies it to compute discount displays using percentMultiplier - discount logic.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Hook signature change: Verify the return type accurately reflects percentMultiplier and discount types across all consumer callsites.
• Formatter consistency: Ensure all four consumers correctly instantiate makeFormatPercentWithPrecision(percentMultiplier) and apply formatting consistently.
• Discount computation: Confirm the percentMultiplier - discount calculation is applied correctly in each context, particularly handling undefined discount cases.
• UI impact: Validate that the new numeric formatting produces equivalent or improved user-facing output compared to the previous string-based formatting.

Suggested reviewers

• artur-abliazimov

Poem

🐰 The hook sheds its burden, now lighter and lean,
📊 Raw percentages flow to each UI scene,
✨ Four components embrace their formatter friends,
💫 Where calculation and display perfectly blend!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Title check	❓ Inconclusive	The title is truncated and incomplete, ending with 'and upd…'. While it references the main change (percentMultiplier and updating), the incomplete truncation makes it unclear what the full intended message is.	Provide the complete pull request title without truncation to properly evaluate if it clearly summarizes the changes (e.g., 'feat: enhance market data display by adding percentMultiplier and updating discount formatting').

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-wallet

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

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.}

[coderabbitai]

Actionable comments posted: 1

♻️ Duplicate comments (2)

packages/app/src/features/liquidity-flow/components/lend-first-position-modal/lend-first-position-modal.tsx (1)

11-11: LGTM: Discount formatting is correct and consistent.

The discount formatting logic matches the pattern used in other components. The formatter creation is duplicated across files (already flagged in position-cell.tsx), but the implementation here is correct.

Also applies to: 32-38, 51-54

packages/app/src/features/liquidity-flow/components/lend-increase-modal/lend-increase-modal.tsx (1)

11-11: LGTM: Discount formatting is correct and consistent.

The discount formatting logic correctly uses percentMultiplier - discount and handles the undefined case. The formatter creation is duplicated across files (already flagged in position-cell.tsx), but the implementation here is correct.

Also applies to: 89-89, 121-123

🧹 Nitpick comments (1)

packages/app/src/widgets/position-section/components/position-cell/position-cell.tsx (1)

15-15: Consider returning the formatter from the hook to reduce duplication.

The same pattern of importing makeFormatPercentWithPrecision and creating a local formatPercentage formatter is duplicated across four components (position-cell.tsx, lend-first-position-modal.tsx, lend-increase-modal.tsx, and market-card.tsx). Consider having useMarketDataForDisplay return a pre-configured formatPercentage function to eliminate this duplication.

For example, in use-market-data-for-display.ts:

 export function useMarketDataForDisplay(token: TokenContracts): {
   borrowInterestRate: string;
   lendInterestRate: string;
   totalSupplied: number;
   totalBorrowed: number;
   reserved: number;
   availableToBorrow: number;
   percentMultiplier: number;
   discount: number | undefined;
+  formatPercentage: (value?: number | bigint) => string;
 } {
   const { percentMultiplier, borrowInterestRate, lendInterestRate, contractMultiplier } =
     usePoolData(token.address);
   const marketData = useMarketData();
   const { discount } = marketData?.[token.address] ?? {};

   const { availableToBorrow, reserved, totalBorrowed, totalSupplied } = useAvailableToBorrow(token);

   const formatInterestRate = makeFormatPercentWithPrecision(contractMultiplier);
+  const formatPercentage = makeFormatPercentWithPrecision(percentMultiplier);

   return {
     discount,
     borrowInterestRate: formatInterestRate(borrowInterestRate?.toNumber()),
     lendInterestRate: formatInterestRate(lendInterestRate?.toNumber()),
     totalSupplied,
     totalBorrowed,
     reserved,
     availableToBorrow,
     percentMultiplier,
+    formatPercentage,
   };
 }

Then remove the local formatter creation from all consuming components.

Also applies to: 38-41

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 711df11 and ecc9304.

📒 Files selected for processing (5)

• packages/app/src/entities/token/hooks/use-market-data-for-display.ts (2 hunks)
• packages/app/src/features/liquidity-flow/components/lend-first-position-modal/lend-first-position-modal.tsx (3 hunks)
• packages/app/src/features/liquidity-flow/components/lend-increase-modal/lend-increase-modal.tsx (3 hunks)
• packages/app/src/widgets/market-section/components/market-card/market-card.tsx (3 hunks)
• packages/app/src/widgets/position-section/components/position-cell/position-cell.tsx (3 hunks)

🧰 Additional context used

🧬 Code graph analysis (3)

packages/app/src/widgets/position-section/components/position-cell/position-cell.tsx (4)

packages/app/src/entities/token/hooks/use-market-data-for-display.ts (1)

• useMarketDataForDisplay (7-36)

packages/app/src/shared/stellar/constants/tokens.ts (1)

• tokenContracts (46-56)

packages/app/src/entities/token/context/hooks.ts (1)

• useTokenCache (4-4)

packages/app/src/entities/token/utils/make-format-percent-with-precision.ts (1)

• makeFormatPercentWithPrecision (3-6)

packages/app/src/features/liquidity-flow/components/lend-increase-modal/lend-increase-modal.tsx (1)

packages/app/src/entities/token/utils/make-format-percent-with-precision.ts (1)

• makeFormatPercentWithPrecision (3-6)

packages/app/src/features/liquidity-flow/components/lend-first-position-modal/lend-first-position-modal.tsx (3)

packages/app/src/features/liquidity-flow/hooks/use-token-info.ts (1)

• useTokenInfo (8-42)

packages/app/src/entities/token/utils/make-format-percent-with-precision.ts (1)

• makeFormatPercentWithPrecision (3-6)

packages/app/src/shared/components/info-row/info-row.tsx (1)

• InfoRow (11-27)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: test-build-image (landing)
• GitHub Check: test-build-image (app)

🔇 Additional comments (2)

packages/app/src/widgets/position-section/components/position-cell/position-cell.tsx (1)

70-70: LGTM: Discount calculation and formatting are correct.

The formula percentMultiplier - discount correctly computes the discount percentage, and the ternary operator properly handles the undefined case. The formatter will display '...' when discount is unavailable.

packages/app/src/entities/token/hooks/use-market-data-for-display.ts (1)

14-15: Verified: percentMultiplier is always a positive constant and safe from division by zero.

The usePoolData hook always returns percentMultiplier set to PERCENT_PRECISION (10000), which is a constant positive number. The type is non-optional (number), and there are no conditional paths that could make it undefined or zero. The divisor in makeFormatPercentWithPrecision is therefore always safe.