feat: add fee breakdown tooltip to payment route component #150

rodrigopavezi · 2025-09-24T13:55:45Z

Fixes #146

Summary by CodeRabbit

New Features
- Fees now display as USD amounts alongside original values for clearer cost context.
- Added an info icon that opens a tooltip with a detailed fee breakdown (gas, cross‑chain, platform, provider) when available.
- Tooltip activation is isolated from row selection to prevent accidental navigation.
Changes
- Platform fee is no longer shown as a separate inline label; fee details are surfaced via the tooltip instead.

coderabbitai · 2025-09-24T13:55:53Z

Warning

Rate limit exceeded

@rodrigopavezi has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 4 minutes and 47 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.

📥 Commits

Reviewing files that changed from the base of the PR and between 38c2521 and 2219327.

⛔ Files ignored due to path filters (1)

package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (2)

src/app/globals.css (2 hunks)
src/components/payment-route.tsx (3 hunks)

Walkthrough

Adds feeInUSD and optional feeBreakdown to the PaymentRoute type and updates the PaymentRoute component to show fee in USD with an optional Info tooltip showing a formatted fee breakdown (tooltip click stops propagation). platformFee prop/display removed.

Changes

Cohort / File(s)	Summary
UI: Fee display & tooltip `src/components/payment-route.tsx`	Replaced inline/platform fee text with USD `feeInUSD` display; imported internal `Tooltip` and `Info` icon; added `formatFeeBreakdown` helper; conditionally renders `Tooltip` when `route.feeBreakdown` exists; tooltip trigger calls `stopPropagation`; removed `platformFee` usage and `nativeToken` calc.
Types: PaymentRoute extension `src/lib/types/index.ts`	Added `feeInUSD: number` and optional `feeBreakdown?: { type: "gas" \| "crosschain" \| "platform"; stage: "sending" \| "overall"; provider: string; amount: string; amountInUSD: string; amountInGwei?: string \| null; currency: string; network: string; rateProvider?: string; receiverAddress?: string; }[]` to `PaymentRoute`.
Minor: formatting / import reorder `src/app/i/[id]/page.tsx`, `src/components/dashboard/blocks/invoice-row.tsx`, `src/components/view-recurring-payments/view-recurring-payments.tsx`	Non-functional changes: import reorder in `page.tsx`, JSX formatting adjustments in invoice and recurring payments components (no behavior change).

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant UI as PaymentRoute
  participant TT as Tooltip

  User->>UI: View route row
  UI->>UI: Read route.feeInUSD and route.feeBreakdown
  alt feeBreakdown present
    UI->>TT: Render Tooltip (Info icon) with formatted breakdown
    User->>TT: Click Info icon
    note right of UI #f8f3d4: click handler calls stopPropagation
    TT-->>User: Show breakdown content
  else no feeBreakdown
    UI-->>User: Show USD fee only
  end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

feat: integrate cross-chain payment into EasyInvoice #42 — Touches PaymentRoute UI and types; overlaps on fee display and related types.
feat: add platform fee support to payment routes and sections #77 — Previously introduced a platformFee prop/UI; this PR removes that prop and replaces platform-fee display with feeBreakdown handling.

Suggested reviewers

MantisClone
aimensahnoun

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes Check	⚠️ Warning	The pull request includes unrelated formatting-only changes in invoice-row.tsx and view-recurring-payments.tsx as well as an import reordering in page.tsx that do not pertain to the fee breakdown tooltip feature.	Please remove or separate the formatting and import-only changes into a different commit or pull request so that this pull request focuses solely on the fee breakdown tooltip implementation.
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.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly and concisely describes the primary change of adding a fee breakdown tooltip to the payment route component, matching the main feature implemented in the pull request and making its purpose immediately apparent to team members.
Linked Issues Check	✅ Passed	The pull request directly implements the objective of issue #146 by adding the feeBreakdown data structure, rendering a tooltip with a structured USD fee breakdown before payment, and updating the PaymentRouteProps accordingly to display fees in USD as required.

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

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (2)

src/components/payment-route.tsx (1)
75-108: Improve key uniqueness and prep for i18n; optional memoization.

Keys can collide if two items share type/provider/stage. Append index.

Consider externalizing "Fee Breakdown", "Gas Fee", "Bridge Fee", "Platform Fee" for i18n.

Optionally memoize the JSX to avoid recompute on each render.

Apply this minimal key fix:
-        {route.feeBreakdown.map((fee) => (
+        {route.feeBreakdown.map((fee, i) => (
           <div
-            key={`${fee.type}-${fee.provider}-${fee.stage}`}
+            key={`${fee.type}-${fee.provider}-${fee.stage}-${i}`}
             className="flex justify-between items-start text-xs"
           >
src/lib/types/index.ts (1)
12-23: Extract FeeBreakdownItem type and reuse for clarity and reuse.

Keeps PaymentRoute concise and improves ergonomics across the codebase.

Apply this change within the interface:
-  feeBreakdown?: {
-    type: "gas" | "crosschain" | "platform";
-    stage: "sending" | "overall";
-    provider: string;
-    amount: string;
-    amountFormatted: string;
-    amountInGwei?: string | null;
-    currency: string;
-    network: string;
-    rateProvider?: string;
-    receiverAddress?: string;
-  }[];
+  feeBreakdown?: FeeBreakdownItem[];
And add this type near the top of the file:
export type FeeBreakdownItem = {
  type: "gas" | "crosschain" | "platform";
  stage: "sending" | "overall";
  provider: string;
  amount: string;
  amountFormatted: string;
  amountInGwei?: string | null;
  currency: string;
  network: string;
  rateProvider?: string;
  receiverAddress?: string;
};

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e18bbf9 and 5231649.

📒 Files selected for processing (2)

src/components/payment-route.tsx (3 hunks)
src/lib/types/index.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/components/payment-route.tsx (1)

src/components/ui/tooltip.tsx (1)

Tooltip (11-26)

⏰ 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). (1)

GitHub Check: Build

🔇 Additional comments (2)

src/components/payment-route.tsx (2)

1-1: Tooltip import looks good.

Matches the Radix-based Tooltip API used in the codebase.

3-3: Info icon import is appropriate.

Icon is used as a discrete tooltip trigger.

src/components/payment-route.tsx

… route component

bassgeta

Looking good 😎

…t route component

… for clarity

rodrigopavezi · 2025-09-27T03:52:55Z

…ayment route component

rodrigopavezi · 2025-09-29T21:12:36Z

… native currency

…ute component

rodrigopavezi · 2025-09-30T14:35:28Z

…ext color in payment route component

bassgeta

Looking good, nice and simple 💯
🚢 before I merge that big ecommerce chonker PR and potentially cause conflicts 😅

feat: add fee breakdown tooltip to payment route component

5231649

rodrigopavezi self-assigned this Sep 24, 2025

coderabbitai bot reviewed Sep 24, 2025

View reviewed changes

src/components/payment-route.tsx Show resolved Hide resolved

fix: enhance accessibility of fee breakdown tooltip button in payment…

bec9b2e

… route component

rodrigopavezi requested review from MantisClone, bassgeta and aimensahnoun September 24, 2025 15:49

bassgeta approved these changes Sep 25, 2025

View reviewed changes

rodrigopavezi added 3 commits September 25, 2025 13:46

fix: update fee label from "Bridge Fee" to "Crosschain Fee" in paymen…

b7f77fe

…t route component

fix: rename amountFormatted to amountInUSD in payment route component…

e407c9e

… for clarity

fix: remove platform fee display from payment route component

7967aee

fix: update fee display to use 'amount' instead of 'amountInUSD' in p…

308e5f6

…ayment route component

rodrigopavezi added 4 commits September 30, 2025 15:57

fix: update payment route component to display fees in USD instead of…

57f15a0

… native currency

fix: format fee amounts to two decimal places in payment route component

f5a748d

fix: update fee display precision to six decimal places in payment ro…

6e218a9

…ute component

Merge branch 'main' into feat/fees-breakdown

38c2521

fix: update popover color variables in CSS and adjust fee breakdown t…

2219327

…ext color in payment route component

bassgeta approved these changes Oct 6, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add fee breakdown tooltip to payment route component #150

feat: add fee breakdown tooltip to payment route component #150

Uh oh!

rodrigopavezi commented Sep 24, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Sep 24, 2025 •

edited

Loading

Rate limit exceeded

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

bassgeta left a comment

Uh oh!

rodrigopavezi commented Sep 27, 2025

Uh oh!

rodrigopavezi commented Sep 29, 2025

Uh oh!

rodrigopavezi commented Sep 30, 2025

Uh oh!

bassgeta left a comment

Uh oh!

Uh oh!

feat: add fee breakdown tooltip to payment route component #150

Are you sure you want to change the base?

feat: add fee breakdown tooltip to payment route component #150

Uh oh!

Conversation

rodrigopavezi commented Sep 24, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Sep 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bassgeta left a comment

Choose a reason for hiding this comment

Uh oh!

rodrigopavezi commented Sep 27, 2025

Uh oh!

rodrigopavezi commented Sep 29, 2025

Uh oh!

rodrigopavezi commented Sep 30, 2025

Uh oh!

bassgeta left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rodrigopavezi commented Sep 24, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Sep 24, 2025 •

edited

Loading