feat: add fallback display if no amountInUSD and add protocol fee

[aimensahnoun]

Protocol fee addition

Fallback Fix (Toolip was relying only in amountInUsd which is not available in all cases)

TL;DR

Added support for protocol fees and improved fee display formatting in the invoice payment route component.

What changed?

• Added a new fee type protocol to the feeBreakdown type definition
• Enhanced the fee display logic in the payment route component to:
  • Show "Protocol Fee" label for fees of type protocol
  • Improve currency display formatting based on the fee's currency and amount
  • Handle cases where amountInUSD is not available by falling back to the native currency amount
  • Format ETH values appropriately when they exceed 1e12 (converting from wei to ETH)

How to test?

1. Navigate to an invoice detail page with various fee types
2. Verify that protocol fees are correctly labeled as "Protocol Fee"
3. Check that fee amounts display correctly:
   • USD amounts should show with 6 decimal places
   • ETH amounts should show with 6 decimal places
   • Other currencies should show with 4 decimal places
   • Large ETH values (in wei) should be properly converted to ETH

Why make this change?

This change improves the user experience by providing more accurate fee labeling and better formatting of fee amounts. It also adds support for protocol fees, which are a distinct fee type that needs to be properly represented in the UI.

Summary by CodeRabbit

• New Features
  • Added support for Protocol Fee type in invoice fee breakdown display.
  • Enhanced fee amount rendering with intelligent formatting based on currency type, including special handling for ETH values and improved data presentation.

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

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Adds "protocol" as a supported fee type and updates the payment-route component to label it and change fee amount rendering logic (USD-first, currency-aware formatting) plus an ethers utils import for precise amount formatting.

Changes

Cohort / File(s)	Summary
Type Definitions src/lib/types/index.ts	Expanded PaymentRoute.feeBreakdown.type union to include "protocol" alongside "gas", "crosschain", and "platform".
Payment Route Component src/app/(dashboard)/invoices/[ID]/_components/payment-route.tsx	Imported ethers utilities; mapped "protocol" to "Protocol Fee"; updated amount rendering: prefer fee.amountInUSD formatted as USD with 6 decimals; otherwise use fee.amount + fee.currency with rules — if amount contains a decimal point render 6 decimals with currency code; if currency is ETH render full ETH units using ETH denomination (no fixed decimals); else render 4 decimals with currency code; fallback to "N/A".

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 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 summarizes the two main changes: adding fallback display for missing amountInUSD and introducing protocol fee support.

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

✨ Finishing touches

• 📝 Generate docstrings

---

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 02a3cff and f469154.

📒 Files selected for processing (2)

• src/app/(dashboard)/invoices/[ID]/_components/payment-route.tsx
• src/lib/types/index.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• src/lib/types/index.ts

🧰 Additional context used

📓 Path-based instructions (1)

**/*

⚙️ CodeRabbit configuration file

**/*: - Only comment on issues that would block merging — ignore minor or stylistic concerns.

• Restrict feedback to errors, security risks, or functionality-breaking problems.
• Do not post comments on code style, formatting, or non-critical improvements.
• Keep reviews short: flag only issues that make the PR unsafe to merge.
• Limit review comments to 3–5 items maximum, unless additional blockers exist.
• Group similar issues into a single comment instead of posting multiple notes.
• Skip repetition — if a pattern repeats, mention it once at a summary level only.
• Do not add general suggestions; focus strictly on merge-blocking concerns.
• If there are no critical problems, respond with minimal approval (e.g., 'Looks good'). Do not add additional review.
• Avoid line-by-line commentary unless it highlights a critical bug or security hole.
• Highlight only issues that could cause runtime errors, data loss, or severe maintainability issues.
• Ignore minor optimization opportunities — focus solely on correctness and safety.
• Provide a top-level summary of critical blockers rather than detailed per-line notes.
• Comment only when the issue must be resolved before merge — otherwise, remain silent.
• When in doubt, err on the side of fewer comments — brevity and blocking issues only.
• Avoid posting any refactoring issues

Files:

• src/app/(dashboard)/invoices/[ID]/_components/payment-route.tsx

🧠 Learnings (5)

📓 Common learnings

Learnt from: MantisClone
Repo: RequestNetwork/easy-invoice PR: 0
File: :0-0
Timestamp: 2025-10-13T19:12:34.359Z
Learning: In `src/server/routers/ecommerce.ts`, the `create` procedure for client IDs should use `?? undefined` for `feePercentage` and `feeAddress` when calling the external API, because the backend create endpoint uses `.optional()` and rejects `null`. However, the `edit` procedure should use `?? null` for these fields because the backend update endpoint uses `.nullable().optional()`, which allows `null` values to support explicitly unsetting fees.

📚 Learning: 2025-10-13T19:12:34.359Z

Learnt from: MantisClone
Repo: RequestNetwork/easy-invoice PR: 0
File: :0-0
Timestamp: 2025-10-13T19:12:34.359Z
Learning: In `src/server/routers/ecommerce.ts`, the `create` procedure for client IDs should use `?? undefined` for `feePercentage` and `feeAddress` when calling the external API, because the backend create endpoint uses `.optional()` and rejects `null`. However, the `edit` procedure should use `?? null` for these fields because the backend update endpoint uses `.nullable().optional()`, which allows `null` values to support explicitly unsetting fees.

Applied to files:

• src/app/(dashboard)/invoices/[ID]/_components/payment-route.tsx

📚 Learning: 2025-10-22T08:44:20.491Z

Learnt from: bassgeta
Repo: RequestNetwork/easy-invoice PR: 164
File: src/app/(dashboard)/s/[id]/_components/subscription-plan-preview.tsx:66-75
Timestamp: 2025-10-22T08:44:20.491Z
Learning: In the EasyInvoice codebase, amounts are normalized to 18 decimals internally for all calculations. The pattern is: parse user-facing amounts with 18 decimals using utils.parseUnits(), perform calculations with ethers BigNumber, and format back with 18 decimals using utils.formatUnits(). This normalization strategy avoids floating-point arithmetic issues and maintains consistency across different token types.

Applied to files:

• src/app/(dashboard)/invoices/[ID]/_components/payment-route.tsx

📚 Learning: 2025-10-28T12:17:14.899Z

Learnt from: bassgeta
Repo: RequestNetwork/easy-invoice PR: 168
File: src/components/payment-widget/README.md:29-31
Timestamp: 2025-10-28T12:17:14.899Z
Learning: The payment-widget component in src/components/payment-widget/ is an external component installed via ShadCN from the Request Network registry (https://ui.request.network). Its README and documentation should not be modified as it's maintained externally.

Applied to files:

• src/app/(dashboard)/invoices/[ID]/_components/payment-route.tsx

📚 Learning: 2025-08-08T09:52:43.700Z

Learnt from: bassgeta
Repo: RequestNetwork/easy-invoice PR: 117
File: src/app/not-found.tsx:29-67
Timestamp: 2025-08-08T09:52:43.700Z
Learning: Repository: RequestNetwork/easy-invoice
Context: src/app/not-found.tsx (Next.js, TypeScript/React)
Learning: It is acceptable (by current product decision) for the NotFound page to display links to /invoices/create and /subscription-plans even though these routes are auth-gated. Rationale: prevent the 404 from feeling empty; most users are authenticated. No lock icons or conditional rendering required for now; can be revisited later as an enhancement.

Applied to files:

• src/app/(dashboard)/invoices/[ID]/_components/payment-route.tsx

⏰ 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/app/(dashboard)/invoices/[ID]/_components/payment-route.tsx (2)

93-95: LGTM!

Clean extension of the fee type conditional to support the new "protocol" type.

---

100-112: Potential runtime crash if fee.amount is missing or not a string.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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

[aimensahnoun]

• feat: add fallback display if no amountInUSD and add protocol fee #191 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[greptile-apps]

Greptile Summary

This PR adds support for protocol fees and implements fallback display logic when USD amounts are unavailable.

Key Changes:

• Added protocol as a new fee type in the feeBreakdown type definition
• Enhanced fee display to show "Protocol Fee" label for protocol-type fees
• Implemented fallback logic to display native currency amounts when amountInUSD is not available
• Added wei-to-ETH conversion for large ETH amounts (>1e12)

Issues Found:

• Type definition mismatch: amountInUSD is marked as required but treated as optional in the code
• Potential NaN display: Missing validation before converting amountInUSD to number could show "NaN USD"
• Unreliable wei detection: The heuristic amount > 1e12 is arbitrary and could misidentify large ETH amounts

Confidence Score: 2/5

• This PR has logical errors that could cause runtime display bugs in production.
• The type mismatch between definition and usage, combined with the missing validation for NaN values, creates a real risk of broken UI displays. The wei detection logic is also unreliable and could produce incorrect conversions.
• Pay close attention to src/app/(dashboard)/invoices/[ID]/_components/payment-route.tsx for the NaN display bug and wei conversion logic.

Important Files Changed

Filename	Overview
src/lib/types/index.ts	Added protocol fee type to feeBreakdown union. Type mismatch: amountInUSD should be optional to match usage.
src/app/(dashboard)/invoices/[ID]/_components/payment-route.tsx	Added protocol fee label and fallback display logic for missing amountInUSD. Contains potential NaN display bug and unreliable wei detection heuristic.

Sequence Diagram

sequenceDiagram
    participant User
    participant PaymentRoute as Payment Route Component
    participant FeeBreakdown as Fee Breakdown Data
    
    User->>PaymentRoute: View invoice payment options
    PaymentRoute->>FeeBreakdown: Check feeBreakdown array
    
    alt feeBreakdown exists
        loop For each fee
            FeeBreakdown->>PaymentRoute: Get fee.type
            
            alt type is "protocol"
                PaymentRoute->>PaymentRoute: Display "Protocol Fee"
            else type is "gas"
                PaymentRoute->>PaymentRoute: Display "Gas Fee"
            else type is "crosschain"
                PaymentRoute->>PaymentRoute: Display "Crosschain Fee"
            else type is "platform"
                PaymentRoute->>PaymentRoute: Display "Platform Fee"
            end
            
            FeeBreakdown->>PaymentRoute: Check amountInUSD
            
            alt amountInUSD exists
                PaymentRoute->>PaymentRoute: Format as USD (6 decimals)
            else amountInUSD is null/undefined
                FeeBreakdown->>PaymentRoute: Get fee.amount & fee.currency
                
                alt currency is ETH and amount > 1e12
                    PaymentRoute->>PaymentRoute: Convert wei to ETH (divide by 1e18)
                    PaymentRoute->>PaymentRoute: Display as ETH (6 decimals)
                else currency is ETH
                    PaymentRoute->>PaymentRoute: Display as ETH (6 decimals)
                else other currency
                    PaymentRoute->>PaymentRoute: Display in native currency (4 decimals)
                end
            end
            
            PaymentRoute->>User: Show formatted fee
        end
    end
    
    PaymentRoute->>User: Display complete fee breakdown tooltip

Loading

[greptile-apps]

Additional Comments (1)

1. src/lib/types/index.ts, line 20 (link)

   syntax: amountInUSD should be optional since the fallback logic in payment-route.tsx:99 checks for null/undefined.

_{2 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[aimensahnoun]

Merge activity

• Jan 14, 1:41 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Jan 14, 1:41 PM UTC: @aimensahnoun merged this pull request with Graphite.