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

Author: rodrigopavezi

package-lock.json

@@ -7,8 +7,8 @@
     --foreground: 0 0% 3.9%;
     --card: 0 0% 100%;
     --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
     --primary: 0 0% 9%;
     --primary-foreground: 0 0% 98%;
     --secondary: 0 0% 96.1%;
@@ -34,8 +34,8 @@
     --foreground: 0 0% 98%;
     --card: 0 0% 3.9%;
     --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
     --primary: 0 0% 98%;
     --primary-foreground: 0 0% 9%;
     --secondary: 0 0% 14.9%;

src/app/globals.css

@@ -3,12 +3,12 @@ import { Footer } from "@/components/footer";
 import { Header } from "@/components/header";
 import { InvoiceCreator } from "@/components/invoice-creator";
 import { getInvoiceCount } from "@/lib/helpers/invoice";
+import { api } from "@/trpc/server";
 import { ArrowLeft } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound, redirect } from "next/navigation";
 import { getInvoiceMeLink } from "./helpers";
-import { api } from "@/trpc/server";
 
 export const metadata: Metadata = {
   title: "Invoice Me | EasyInvoice",

src/app/i/[id]/page.tsx

@@ -95,7 +95,10 @@ export const InvoiceRow = ({ invoice, type, children }: InvoiceRowProps) => {
             {invoice?.recurrence?.startDate && (
               <span className="text-xs text-muted-foreground">
                 from{" "}
-                {format(new Date(invoice?.recurrence?.startDate), "do MMM yyyy")}
+                {format(
+                  new Date(invoice?.recurrence?.startDate),
+                  "do MMM yyyy",
+                )}
               </span>
             )}
           </div>

src/components/dashboard/blocks/invoice-row.tsx

@@ -1,5 +1,6 @@
+import { Tooltip } from "@/components/ui/tooltip";
 import type { PaymentRoute as PaymentRouteType } from "@/lib/types";
-import { ArrowRight, Globe, Zap } from "lucide-react";
+import { ArrowRight, Globe, Info, Zap } from "lucide-react";
 import Image from "next/image";
 
 interface RouteTypeInfo {
@@ -26,16 +27,13 @@ export function PaymentRoute({
   onClick,
   variant = "default",
   routeType,
-  platformFee,
 }: PaymentRouteProps) {
   const isDirectPayment =
     routeType?.type === "direct" ||
     (route.id === "REQUEST_NETWORK_PAYMENT" && !route.isCryptoToFiat);
   const isGasFreePayment = routeType?.type === "same-chain-erc20";
   const isCryptoToFiat = routeType?.type === "crypto-to-fiat";
 
-  const nativeToken = route.chain === "POLYGON" ? "POL" : "ETH";
-
   // Get the appropriate badge color and icon based on route type
   const getBadgeStyles = () => {
     if (isCryptoToFiat) {
@@ -71,6 +69,40 @@ export function PaymentRoute({
 
   const { bgColor, textColor, icon } = getBadgeStyles();
 
+  // Format fee breakdown for tooltip
+  const formatFeeBreakdown = () => {
+    if (!route.feeBreakdown || route.feeBreakdown.length === 0) {
+      return null;
+    }
+
+    return (
+      <div className="space-y-2 max-w-xs">
+        <div className="font-medium text-popover-foreground">Fee Breakdown</div>
+        {route.feeBreakdown.map((fee) => (
+          <div
+            key={`${fee.type}-${fee.provider}-${fee.stage}`}
+            className="flex justify-between items-start text-xs"
+          >
+            <div className="flex-1">
+              <div className="capitalize font-medium">
+                {fee.type === "gas"
+                  ? "Gas Fee"
+                  : fee.type === "crosschain"
+                    ? "Crosschain Fee"
+                    : "Platform Fee"}
+              </div>
+            </div>
+            <div className="text-right ml-2">
+              <div className="font-medium">
+                {Number(fee.amountInUSD).toFixed(6)} USD
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
   return (
     <button
       type="button"
@@ -117,21 +149,31 @@ export function PaymentRoute({
             {route.fee === 0 ? (
               "No fee"
             ) : (
-              <span className="text-amber-700">
-                {route.fee} {isDirectPayment ? nativeToken : route.token} fee
-              </span>
+              <div className="flex items-center gap-1 justify-end">
+                <span className="text-amber-700">
+                  {Number(route?.feeInUSD)?.toFixed(6)} USD fee
+                </span>
+                {route.feeBreakdown && route.feeBreakdown.length > 0 && (
+                  <Tooltip
+                    tooltipTrigger={
+                      <button
+                        type="button"
+                        aria-label="Show fee breakdown"
+                        className="text-zinc-400 hover:text-zinc-600 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-zinc-400 rounded"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <Info className="w-3 h-3" aria-hidden="true" />
+                      </button>
+                    }
+                    tooltipContent={formatFeeBreakdown()}
+                  />
+                )}
+              </div>
             )}
           </div>
           <div className="text-sm text-muted-foreground">
             {typeof route.speed === "number" ? `~${route.speed}s` : "Fast"}
           </div>
-          {platformFee?.percentage && platformFee?.percentage > 0 && (
-            <div className="text-sm text-muted-foreground mt-1">
-              <span className="text-purple-600">
-                {platformFee?.percentage}% {route.token} platform fee
-              </span>
-            </div>
-          )}
         </div>
       </div>
     </button>

src/components/payment-route.tsx

@@ -147,7 +147,9 @@ export function ViewRecurringPayments({
 
           <CardContent className="py-16">
             <div className="flex flex-col items-center justify-center space-y-4">
-              <p className="text-muted-foreground">No recurring payouts found</p>
+              <p className="text-muted-foreground">
+                No recurring payouts found
+              </p>
               <p className="text-muted-foreground text-sm">
                 Your recurring payouts will appear here
               </p>

src/components/view-recurring-payments/view-recurring-payments.tsx

@@ -5,12 +5,25 @@ import type { inferRouterOutputs } from "@trpc/server";
 export interface PaymentRoute {
   id: string;
   fee: number;
+  feeInUSD: number;
   speed: number | "FAST";
   price_impact: number;
   chain: string;
   token: string;
   isCryptoToFiat?: boolean;
   platformFee?: number;
+  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;
+  }[];
 }
 
 export type SubscriptionWithDetails = RecurringPayment & {