Merge pull request #1306 from shinzoxD/feature/confirmmodal-fee-breakdown-663

feat: add gross/fee/net fee breakdown to ConfirmModal

Author: 1nonlypiece

components/features/lending/components/ConfirmModal.test.tsx

@@ -340,22 +340,33 @@ describe("ConfirmModal withdraw variant", () => {
   });
 });
 
-describe("ConfirmModal protocol fee display", () => {
-  it("matches calculateProtocolFee output for the same market, action, and amount", async () => {
+function formatModalAmount(amount: number, asset: string): string {
+  return `${amount.toLocaleString(undefined, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 4,
+  })} ${asset}`;
+}
+
+describe("ConfirmModal protocol fee breakdown", () => {
+  it("shows gross, fee, and net matching calculateProtocolFee for lend/borrow/repay", async () => {
     const { calculateProtocolFee } = await import("@/lib/fee-calculator");
-    const user = userEvent.setup();
-    const testCases: Array<{ asset: string; type: "lend" | "borrow" | "repay"; amount: number }> = [
+    const testCases: Array<{
+      asset: string;
+      type: "lend" | "borrow" | "repay";
+      amount: number;
+    }> = [
       { asset: "XLM", type: "lend", amount: 1000 },
       { asset: "USDC", type: "borrow", amount: 500 },
       { asset: "XLM", type: "repay", amount: 200 },
     ];
 
     for (const testCase of testCases) {
-      const expectedFeeResult = calculateProtocolFee(testCase.asset, testCase.type, testCase.amount);
-      const formattedFee = `${expectedFeeResult.feeAmount.toLocaleString(undefined, {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 4,
-      })} ${testCase.asset}`;
+      const expectedFeeResult = calculateProtocolFee(
+        testCase.asset,
+        testCase.type,
+        testCase.amount,
+      );
+      const net = Math.max(0, testCase.amount - expectedFeeResult.feeAmount);
 
       const { unmount } = render(
         <ConfirmModal
@@ -373,11 +384,125 @@ describe("ConfirmModal protocol fee display", () => {
       );
 
       const dialog = screen.getByRole("dialog");
-      expect(within(dialog).getByText("Protocol Fee")).toBeInTheDocument();
-      expect(within(dialog).getByText(formattedFee)).toBeInTheDocument();
+      const breakdown = within(dialog).getByTestId("fee-breakdown");
+      expect(breakdown).toHaveAttribute("aria-label", "Fee breakdown");
+
+      expect(within(breakdown).getByText("Gross Amount")).toBeInTheDocument();
+      expect(
+        within(breakdown).getByText(
+          formatModalAmount(testCase.amount, testCase.asset),
+        ),
+      ).toBeInTheDocument();
+
+      expect(within(breakdown).getByText(/Protocol Fee/)).toBeInTheDocument();
+      expect(
+        within(breakdown).getByText(
+          formatModalAmount(expectedFeeResult.feeAmount, testCase.asset),
+        ),
+      ).toBeInTheDocument();
+
+      expect(within(breakdown).getByText("Net Amount")).toBeInTheDocument();
+      expect(
+        within(breakdown).getByText(formatModalAmount(net, testCase.asset)),
+      ).toBeInTheDocument();
 
       unmount();
     }
   });
+
+  it("recomputes the breakdown when the amount changes", async () => {
+    const { calculateProtocolFee } = await import("@/lib/fee-calculator");
+    const baseProps = {
+      isOpen: true,
+      onClose: vi.fn(),
+      onConfirm: vi.fn(),
+      calculation: { dailyEarnings: 0.1, totalEarnings: 10 },
+      type: "lend" as const,
+    };
+
+    const { rerender } = render(
+      <ConfirmModal
+        {...baseProps}
+        data={{ asset: "XLM", amount: 1000, interestRate: 5 }}
+      />,
+    );
+
+    const fee1000 = calculateProtocolFee("XLM", "lend", 1000);
+    expect(
+      screen.getByText(formatModalAmount(fee1000.feeAmount, "XLM")),
+    ).toBeInTheDocument();
+
+    rerender(
+      <ConfirmModal
+        {...baseProps}
+        data={{ asset: "XLM", amount: 250, interestRate: 5 }}
+      />,
+    );
+
+    const fee250 = calculateProtocolFee("XLM", "lend", 250);
+    const breakdown = screen.getByTestId("fee-breakdown");
+    expect(
+      within(breakdown).getByText(formatModalAmount(fee250.feeAmount, "XLM")),
+    ).toBeInTheDocument();
+    expect(
+      within(breakdown).getByText(formatModalAmount(250, "XLM")),
+    ).toBeInTheDocument();
+    expect(
+      within(breakdown).getByText(
+        formatModalAmount(Math.max(0, 250 - fee250.feeAmount), "XLM"),
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("shows a zero fee and zero net for a zero amount", () => {
+    render(
+      <ConfirmModal
+        isOpen={true}
+        onClose={vi.fn()}
+        onConfirm={vi.fn()}
+        data={{ asset: "XLM", amount: 0, interestRate: 5 }}
+        calculation={null}
+        type="lend"
+      />,
+    );
+
+    const breakdown = screen.getByTestId("fee-breakdown");
+    // Gross, fee, and net all format as 0.00 XLM — three rows.
+    const zeros = within(breakdown).getAllByText(formatModalAmount(0, "XLM"));
+    expect(zeros.length).toBeGreaterThanOrEqual(3);
+  });
+
+  it("omits the fee breakdown for withdraw (no fee schedule)", () => {
+    render(
+      <ConfirmModal
+        isOpen={true}
+        onClose={vi.fn()}
+        onConfirm={vi.fn()}
+        data={{ asset: "XLM", amount: 100, interestRate: 0 }}
+        calculation={null}
+        type="withdraw"
+      />,
+    );
+
+    expect(screen.queryByTestId("fee-breakdown")).not.toBeInTheDocument();
+  });
+
+  it("omits the fee breakdown for an unknown market instead of blocking confirm", () => {
+    render(
+      <ConfirmModal
+        isOpen={true}
+        onClose={vi.fn()}
+        onConfirm={vi.fn()}
+        data={{ asset: "UNKNOWN", amount: 100, interestRate: 5 }}
+        calculation={null}
+        type="lend"
+      />,
+    );
+
+    expect(screen.queryByTestId("fee-breakdown")).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /confirm/i }),
+    ).toBeInTheDocument();
+  });
 });
 

components/features/lending/components/ConfirmModal.tsx

@@ -296,22 +296,55 @@ export default function ConfirmModal({
               )}
 
               {(() => {
+                // Withdraw has no protocol fee schedule in fee-calculator.
                 if (type === "withdraw") return null;
                 try {
                   const feeResult = calculateProtocolFee(
                     data.asset,
                     type,
                     data.amount,
                   );
+                  const gross = data.amount;
+                  const fee = feeResult.feeAmount;
+                  // Net is the amount that actually settles after the protocol cut.
+                  // Zero-amount actions short-circuit to zero fee inside the calculator.
+                  const net = Math.max(0, gross - fee);
                   return (
-                    <div className="flex justify-between">
-                      <span className="text-gray-600">Protocol Fee</span>
-                      <span className="font-medium">
-                        {formatCurrency(feeResult.feeAmount, data.asset)}
-                      </span>
+                    <div
+                      className="space-y-2 border-t pt-3"
+                      data-testid="fee-breakdown"
+                      aria-label="Fee breakdown"
+                    >
+                      <div className="flex justify-between">
+                        <span className="text-gray-600">Gross Amount</span>
+                        <span className="font-medium">
+                          {formatCurrency(gross, data.asset)}
+                        </span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span className="text-gray-600">
+                          Protocol Fee
+                          {feeResult.feeBps > 0 ? (
+                            <span className="text-gray-400">
+                              {" "}
+                              ({feeResult.feeBps} bps)
+                            </span>
+                          ) : null}
+                        </span>
+                        <span className="font-medium">
+                          {formatCurrency(fee, data.asset)}
+                        </span>
+                      </div>
+                      <div className="flex justify-between border-t pt-2">
+                        <span className="font-medium">Net Amount</span>
+                        <span className="font-semibold text-gray-900">
+                          {formatCurrency(net, data.asset)}
+                        </span>
+                      </div>
                     </div>
                   );
                 } catch {
+                  // Unknown market / action — omit the breakdown rather than block confirm.
                   return null;
                 }
               })()}

docs/confirm-modal-fees.md

@@ -0,0 +1,53 @@
+# ConfirmModal fee breakdown
+
+How the pre-submit confirmation dialog surfaces protocol fees.
+
+Source: [`components/features/lending/components/ConfirmModal.tsx`](../components/features/lending/components/ConfirmModal.tsx)
+
+Fee math: [`lib/fee-calculator.ts`](../lib/fee-calculator.ts)
+
+Tests: [`ConfirmModal.test.tsx`](../components/features/lending/components/ConfirmModal.test.tsx)
+
+## What the user sees
+
+For `lend`, `borrow`, and `repay` actions the dialog shows a **Fee breakdown**
+block (after the amount/duration rows):
+
+| Row            | Value                                      |
+| -------------- | ------------------------------------------ |
+| Gross Amount   | `data.amount`                              |
+| Protocol Fee   | `calculateProtocolFee(...).feeAmount` (+ bps) |
+| Net Amount     | `max(0, gross - fee)`                      |
+
+`withdraw` has no entry in the fee schedule, so the block is omitted.
+
+## How the fee is computed
+
+```ts
+const { feeAmount, feeBps } = calculateProtocolFee(marketId, action, amount);
+```
+
+- `marketId` is the asset symbol (looked up case-insensitively in the registry).
+- `action` is `lend` | `borrow` | `repay`.
+- Fee = `max(amount * bps / 10000, minFeeAmount)`, except **zero amount → zero fee**.
+- Negative amounts throw; the modal catches and hides the breakdown rather than
+  blocking confirm.
+
+## Rounding / display
+
+Amounts go through the modal's local `formatCurrency` helper (2–4 fractional
+digits + asset symbol). The calculator returns a raw JS number; display rounding
+is presentation-only and does not change the fee math.
+
+## Recompute on change
+
+The breakdown is derived during render from `data.amount`, `data.asset`, and
+`type`. Changing any of those props (e.g. the user edits the form behind the
+modal) recomputes gross/fee/net on the next render — there is no cached fee
+state inside the modal.
+
+## Unknown market fallback
+
+If `calculateProtocolFee` throws (unknown market id), the breakdown is omitted
+and the rest of the confirm flow still works. Operators should register the
+market in `lib/registry.ts` before enabling the action in production.