feat: integrate cross-chain payment into EasyInvoice

src/app/api/webhook/route.ts

@@ -1,4 +1,6 @@
 import crypto from "node:crypto";
+import { getInvoiceCount } from "@/lib/invoice";
+import { generateInvoiceNumber } from "@/lib/invoice/client";
 import { db } from "@/server/db";
 import { requestTable } from "@/server/db/schema";
 import { eq } from "drizzle-orm";
@@ -91,9 +93,14 @@ export async function POST(req: Request) {
           const newDueDate = new Date(now);
           newDueDate.setDate(now.getDate() + daysDifference);
 
+          const invoiceCount = await getInvoiceCount(originalRequest.userId);
+
+          const invoiceNumber = generateInvoiceNumber(invoiceCount);
+
           await tx.insert(requestTable).values({
             id: ulid(),
             ...requestWithoutId,
+            invoiceNumber,
             issuedDate: now.toISOString(),
             dueDate: newDueDate.toISOString(),
             paymentReference: paymentReference,

src/app/invoices/[ID]/page.tsx

@@ -168,10 +168,10 @@ export default async function PaymentPage({
                           {item.quantity}
                         </td>
                         <td className="py-3 text-right text-sm">
-                          {item.price.toFixed(2)}
+                          {item.price.toString()}
                         </td>
                         <td className="py-3 text-right text-sm">
-                          {(item.quantity * item.price).toFixed(2)}
+                          {(item.quantity * item.price).toString()}
                         </td>
                       </tr>
                     ))}
@@ -184,14 +184,14 @@ export default async function PaymentPage({
                     <div className="flex justify-between py-2">
                       <span className="text-sm text-neutral-600">Subtotal</span>
                       <span className="text-sm">
-                        {Number(invoice.amount).toFixed(2)}
+                        {Number(invoice.amount).toString()}
                       </span>
                     </div>
                     <div className="flex justify-between py-2 border-t border-neutral-200">
                       <span className="text-sm font-medium">Total</span>
                       <div>
                         <div className="text-sm text-right font-medium">
-                          {Number(invoice.amount).toFixed(2)}
+                          {Number(invoice.amount).toString()}
                         </div>
                         <div className="text-xs text-neutral-500">
                           {formatCurrencyLabel(invoice.invoiceCurrency)}

src/components/app-kit.tsx

@@ -1,7 +1,14 @@
 "use client";
 
 import { Ethers5Adapter } from "@reown/appkit-adapter-ethers5";
-import { sepolia } from "@reown/appkit/networks";
+import {
+  arbitrum,
+  base,
+  mainnet,
+  optimism,
+  polygon,
+  sepolia,
+} from "@reown/appkit/networks";
 import { createAppKit } from "@reown/appkit/react";
 
 const metadata = {
@@ -20,7 +27,7 @@ if (!projectId) {
 createAppKit({
   adapters: [new Ethers5Adapter()],
   metadata,
-  networks: [sepolia],
+  networks: [sepolia, base, mainnet, arbitrum, optimism, polygon],
   projectId,
   features: {
     analytics: false,

src/components/invoice-form.tsx

@@ -15,13 +15,16 @@ import { Textarea } from "@/components/ui/textarea";
 import {
   INVOICE_CURRENCIES,
   type InvoiceCurrency,
+  MAINNET_CURRENCIES,
+  type MainnetCurrency,
   formatCurrencyLabel,
   getPaymentCurrenciesForInvoice,
 } from "@/lib/currencies";
 import type { InvoiceFormValues } from "@/lib/schemas/invoice";
-import { Plus, Trash2 } from "lucide-react";
+import { Plus, Terminal, Trash2 } from "lucide-react";
 import type { UseFormReturn } from "react-hook-form";
 import { useFieldArray } from "react-hook-form";
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
 
 type RecurringFrequency = "DAILY" | "WEEKLY" | "MONTHLY" | "YEARLY";
 
@@ -223,6 +226,8 @@ export function InvoiceForm({
                   valueAsNumber: true,
                 })}
                 type="number"
+                step="any"
+                min="0"
                 placeholder="Price"
               />
               {form.formState.errors.items?.[index]?.price && (
@@ -294,6 +299,33 @@ export function InvoiceForm({
           </p>
         )}
       </div>
+      {MAINNET_CURRENCIES.includes(
+        form.watch("invoiceCurrency") as MainnetCurrency,
+      ) && (
+        <div className="space-y-2">
+          <Alert variant="warning">
+            <Terminal className="h-4 w-4" />
+            <AlertTitle>
+              Warning: You are creating an invoice with real funds
+            </AlertTitle>
+            <AlertDescription className="space-y-2">
+              <p>
+                You've selected{" "}
+                <span className="font-bold">
+                  {formatCurrencyLabel(form.watch("invoiceCurrency"))}
+                </span>
+                , which operates on a mainnet blockchain and uses real
+                cryptocurrency.
+              </p>
+              <p>
+                EasyInvoice is a demonstration app only, designed to showcase
+                Request Network API functionality. Do not use for real
+                invoicing.
+              </p>
+            </AlertDescription>
+          </Alert>
+        </div>
+      )}
 
       {/* Only show payment currency selector for USD invoices */}
       {form.watch("invoiceCurrency") === "USD" && (

src/components/invoice-preview.tsx

@@ -128,10 +128,10 @@ export function InvoicePreview({ data }: InvoicePreviewProps) {
                   </td>
                   <td className="py-3 text-right text-sm">{item.quantity}</td>
                   <td className="py-3 text-right text-sm">
-                    {(item.price || 0).toFixed(2)}
+                    {(item.price || 0).toString()}
                   </td>
                   <td className="py-3 text-right text-sm">
-                    {((item.quantity || 0) * (item.price || 0)).toFixed(2)}
+                    {((item.quantity || 0) * (item.price || 0)).toString()}
                   </td>
                 </tr>
               ))}
@@ -143,13 +143,13 @@ export function InvoicePreview({ data }: InvoicePreviewProps) {
             <div className="w-48">
               <div className="flex justify-between py-2">
                 <span className="text-sm text-neutral-600">Subtotal</span>
-                <span className="text-sm">{calculateTotal().toFixed(2)}</span>
+                <span className="text-sm">{calculateTotal().toString()}</span>
               </div>
               <div className="flex justify-between py-2 border-t border-neutral-200">
                 <span className="text-sm font-medium">Total</span>
                 <div>
                   <div className="text-sm text-right font-medium">
-                    {calculateTotal().toFixed(2)}
+                    {calculateTotal().toString()}
                   </div>
                   <div className="text-xs text-neutral-500">
                     {formatCurrencyLabel(data.invoiceCurrency || "USD")}

src/components/payment-route.tsx

@@ -0,0 +1,117 @@
+import type { PaymentRoute as PaymentRouteType } from "@/lib/types";
+import { ArrowRight, Globe, Zap } from "lucide-react";
+import Image from "next/image";
+
+interface RouteTypeInfo {
+  type: "direct" | "same-chain-erc20" | "cross-chain";
+  label: string;
+  description: string;
+}
+
+interface PaymentRouteProps {
+  route: PaymentRouteType;
+  isSelected: boolean;
+  onClick?: () => void;
+  variant?: "default" | "selected";
+  routeType?: RouteTypeInfo;
+}
+
+export function PaymentRoute({
+  route,
+  isSelected,
+  onClick,
+  variant = "default",
+  routeType,
+}: PaymentRouteProps) {
+  const isDirectPayment =
+    routeType?.type === "direct" || route.id === "REQUEST_NETWORK_PAYMENT";
+  const isGasFreePayment = routeType?.type === "same-chain-erc20";
+
+  const nativeToken = route.chain === "POLYGON" ? "POL" : "ETH";
+
+  // Get the appropriate badge color and icon based on route type
+  const getBadgeStyles = () => {
+    if (isDirectPayment) {
+      return {
+        bgColor: "bg-blue-100",
+        textColor: "text-blue-700",
+        icon: <ArrowRight className="w-3 h-3 mr-1" />,
+      };
+    }
+
+    if (isGasFreePayment) {
+      return {
+        bgColor: "bg-green-100",
+        textColor: "text-green-700",
+        icon: <Zap className="w-3 h-3 mr-1" />,
+      };
+    }
+
+    return {
+      bgColor: "bg-purple-100",
+      textColor: "text-purple-700",
+      icon: <Globe className="w-3 h-3 mr-1" />,
+    };
+  };
+
+  const { bgColor, textColor, icon } = getBadgeStyles();
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`w-full p-4 border rounded-lg transition-colors ${
+        variant === "selected"
+          ? "border-2 border-black bg-zinc-50"
+          : isSelected
+            ? "bg-zinc-50 border-black"
+            : "bg-white hover:border-zinc-400"
+      }`}
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-3">
+          <div className="w-8 h-8 relative flex items-center justify-center">
+            <Image
+              src={`/${route.chain.toLowerCase()}-logo.png`}
+              alt={`${route.chain} logo`}
+              width={32}
+              height={32}
+              className="object-contain"
+            />
+          </div>
+          <div className="text-left">
+            <div className="font-medium flex items-center gap-2">
+              <span>
+                {route.chain} {route.token}
+              </span>
+              <span
+                className={`text-xs ${bgColor} ${textColor} px-2 py-0.5 rounded-full flex items-center`}
+              >
+                {icon}
+                {routeType?.label ||
+                  (isDirectPayment ? "Direct Payment" : "via Paygrid")}
+              </span>
+            </div>
+            <div className="text-sm text-zinc-600">
+              {routeType?.description || `via ${route.token}`}
+            </div>
+          </div>
+        </div>
+        <div className="text-right">
+          <div className="font-medium">
+            {route.fee === 0 ? (
+              "No fee"
+            ) : (
+              <span className="text-amber-700">
+                {route.fee} {isDirectPayment ? nativeToken : route.token} fee
+              </span>
+            )}
+          </div>
+          <div className="text-sm text-zinc-600">
+            {typeof route.speed === "number" ? `~${route.speed}s` : "Fast"}
+          </div>
+        </div>
+      </div>
+    </button>
+  );
+}