From 58f13f0a63f9091a87f2cfd77bd5711ded2c8919 Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Fri, 30 May 2025 15:07:36 +0400
Subject: [PATCH 01/18] feat: Add Direct Payment page and component for instant
 payouts

---
 src/app/{direct-payment => payouts}/page.tsx          | 11 +++++------
 .../{direct-payment.tsx => direct-payout.tsx}         |  4 ++--
 src/components/header.tsx                             |  4 ++--
 3 files changed, 9 insertions(+), 10 deletions(-)
 rename src/app/{direct-payment => payouts}/page.tsx (78%)
 rename src/components/{direct-payment.tsx => direct-payout.tsx} (99%)

diff --git a/src/app/direct-payment/page.tsx b/src/app/payouts/page.tsx
similarity index 78%
rename from src/app/direct-payment/page.tsx
rename to src/app/payouts/page.tsx
index ba4ea16b..402b1f51 100644
--- a/src/app/direct-payment/page.tsx
+++ b/src/app/payouts/page.tsx
@@ -1,5 +1,5 @@
 import { BackgroundWrapper } from "@/components/background-wrapper";
-import { DirectPayment } from "@/components/direct-payment";
+import { DirectPayment } from "@/components/direct-payout";
 import { Footer } from "@/components/footer";
 import { Header } from "@/components/header";
 import { getCurrentSession } from "@/server/auth";
@@ -7,8 +7,9 @@ import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 
 export const metadata: Metadata = {
-  title: "Direct Payment | Easy Invoice",
-  description: "Send payments directly without creating a request first",
+  title: "Payouts | Easy Invoice",
+  description:
+    "Make a single or batch payouts without having to create a request first",
 };
 
 export default async function DirectPaymentPage() {
@@ -26,9 +27,7 @@ export default async function DirectPaymentPage() {
     >
       <Header user={user} />
       <main className="flex-grow flex flex-col max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 z-10">
-        <h1 className="mb-2 text-4xl font-bold tracking-tight">
-          Direct Payment
-        </h1>
+        <h1 className="mb-2 text-4xl font-bold tracking-tight">Payouts</h1>
         <p className="mb-8 text-lg text-muted-foreground">
           Send payments quickly without having to create a request first.
         </p>
diff --git a/src/components/direct-payment.tsx b/src/components/direct-payout.tsx
similarity index 99%
rename from src/components/direct-payment.tsx
rename to src/components/direct-payout.tsx
index bc277ec3..9db9784b 100644
--- a/src/components/direct-payment.tsx
+++ b/src/components/direct-payout.tsx
@@ -190,10 +190,10 @@ export function DirectPayment() {
         <CardHeader className="bg-zinc-50 rounded-t-lg border-b border-zinc-200/80">
           <CardTitle className="flex items-center gap-2">
             <CreditCard className="h-5 w-5" />
-            Direct Payment
+            Direct Payout
           </CardTitle>
           <CardDescription>
-            Send payments instantly without creating a request first
+            Make a single payout instantly without creating a request first
           </CardDescription>
         </CardHeader>
 
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 89cc4737..6252dbfd 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -36,10 +36,10 @@ export function Header({ user }: { user?: User | undefined }) {
                 Dashboard
               </Link>
               <Link
-                href="/direct-payment"
+                href="/payouts"
                 className="text-zinc-900 hover:text-zinc-600 transition-colors"
               >
-                Direct Payment
+                Payouts
               </Link>
               <Link
                 href="/invoice-me"

From 0712bfe1bbf4567d5ce543b9635e0ac3bada795c Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Fri, 30 May 2025 15:18:27 +0400
Subject: [PATCH 02/18] feat: Introduce PayoutTabs component for managing
 single and batch payouts

---
 src/app/payouts/page.tsx        |  4 ++--
 src/components/batch-payout.tsx |  3 +++
 src/components/payout-tabs.tsx  | 27 +++++++++++++++++++++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 src/components/batch-payout.tsx
 create mode 100644 src/components/payout-tabs.tsx

diff --git a/src/app/payouts/page.tsx b/src/app/payouts/page.tsx
index 402b1f51..dffd7d44 100644
--- a/src/app/payouts/page.tsx
+++ b/src/app/payouts/page.tsx
@@ -1,7 +1,7 @@
 import { BackgroundWrapper } from "@/components/background-wrapper";
-import { DirectPayment } from "@/components/direct-payout";
 import { Footer } from "@/components/footer";
 import { Header } from "@/components/header";
+import { PayoutTabs } from "@/components/payout-tabs";
 import { getCurrentSession } from "@/server/auth";
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";
@@ -32,7 +32,7 @@ export default async function DirectPaymentPage() {
           Send payments quickly without having to create a request first.
         </p>
 
-        <DirectPayment />
+        <PayoutTabs />
       </main>
       <Footer />
     </BackgroundWrapper>
diff --git a/src/components/batch-payout.tsx b/src/components/batch-payout.tsx
new file mode 100644
index 00000000..03df00ab
--- /dev/null
+++ b/src/components/batch-payout.tsx
@@ -0,0 +1,3 @@
+export function BatchPayout() {
+  return <div>Batch Payout</div>;
+}
diff --git a/src/components/payout-tabs.tsx b/src/components/payout-tabs.tsx
new file mode 100644
index 00000000..b2f379c2
--- /dev/null
+++ b/src/components/payout-tabs.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { BatchPayout } from "@/components/batch-payout";
+import { DirectPayment } from "@/components/direct-payout";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useState } from "react";
+
+export function PayoutTabs() {
+  const [activeTab, setActiveTab] = useState("single");
+
+  return (
+    <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+      <TabsList className="grid w-full grid-cols-2 mb-8">
+        <TabsTrigger value="single">Single Payout</TabsTrigger>
+        <TabsTrigger value="batch">Batch Payout</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="single">
+        <DirectPayment />
+      </TabsContent>
+
+      <TabsContent value="batch">
+        <BatchPayout />
+      </TabsContent>
+    </Tabs>
+  );
+}

From 95a14af1d08305815e0710257f53d6c1c6c7a5da Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Fri, 30 May 2025 15:37:39 +0400
Subject: [PATCH 03/18] refactor: Replace INVOICE_CURRENCIES with
 EXTENDED_INVOICE_CURRENCIES and update related logic in invoice form

---
 src/components/invoice-form.tsx |  4 ++--
 src/lib/constants/currencies.ts | 22 +++++++++++++++-------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/invoice-form.tsx b/src/components/invoice-form.tsx
index 6906c61a..39b900e1 100644
--- a/src/components/invoice-form.tsx
+++ b/src/components/invoice-form.tsx
@@ -21,7 +21,7 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 import { PaymentDetailsStatus as PaymentDetailsStatusEnum } from "@/lib/constants/bank-account";
 import {
-  INVOICE_CURRENCIES,
+  EXTENDED_INVOICE_CURRENCIES,
   type InvoiceCurrency,
   MAINNET_CURRENCIES,
   type MainnetCurrency,
@@ -831,7 +831,7 @@ export function InvoiceForm({
               <SelectValue placeholder="Select invoice currency" />
             </SelectTrigger>
             <SelectContent>
-              {INVOICE_CURRENCIES.map((currency) => (
+              {EXTENDED_INVOICE_CURRENCIES.map((currency) => (
                 <SelectItem key={currency} value={currency}>
                   {formatCurrencyLabel(currency)}
                   {currency === "fUSDC-sepolia" && (
diff --git a/src/lib/constants/currencies.ts b/src/lib/constants/currencies.ts
index 3b355354..0bcdd744 100644
--- a/src/lib/constants/currencies.ts
+++ b/src/lib/constants/currencies.ts
@@ -24,31 +24,39 @@ export const INVOICE_CURRENCIES = [
   "FAU-sepolia",
   "fUSDC-sepolia",
   "fUSDT-sepolia",
-  ...MAINNET_CURRENCIES,
 ] as const;
-export type InvoiceCurrency = (typeof INVOICE_CURRENCIES)[number];
 
-export const PAYMENT_CURRENCIES: Partial<{
-  [K in InvoiceCurrency]: readonly string[];
-}> = {
+export const PAYMENT_CURRENCIES = {
   USD: ["ETH-sepolia-sepolia", "FAU-sepolia"] as const,
   "ETH-sepolia-sepolia": ["ETH-sepolia-sepolia"] as const,
   "FAU-sepolia": ["FAU-sepolia"] as const,
   "fUSDC-sepolia": ["fUSDC-sepolia"] as const,
   "fUSDT-sepolia": ["fUSDT-sepolia"] as const,
+};
+
+export const EXTENDED_INVOICE_CURRENCIES = [
+  ...INVOICE_CURRENCIES,
+  ...MAINNET_CURRENCIES,
+] as const;
+export type InvoiceCurrency = (typeof EXTENDED_INVOICE_CURRENCIES)[number];
+
+export const EXTENDED_PAYMENT_CURRENCIES: Partial<{
+  [K in InvoiceCurrency]: readonly string[];
+}> = {
+  ...PAYMENT_CURRENCIES,
   ...Object.fromEntries(
     MAINNET_CURRENCIES.map((currency) => [currency, [currency]]),
   ),
 } as const;
 
 export type PaymentCurrency = NonNullable<
-  (typeof PAYMENT_CURRENCIES)[InvoiceCurrency]
+  (typeof EXTENDED_PAYMENT_CURRENCIES)[InvoiceCurrency]
 >[number];
 
 export function getPaymentCurrenciesForInvoice(
   invoiceCurrency: InvoiceCurrency,
 ): PaymentCurrency[] {
-  return [...(PAYMENT_CURRENCIES[invoiceCurrency] || [])];
+  return [...(EXTENDED_PAYMENT_CURRENCIES[invoiceCurrency] || [])];
 }
 
 export function formatCurrencyLabel(currency: string): string {

From 3f002851b4921bee3365dabf5ddf9838781087ef Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Fri, 30 May 2025 15:42:25 +0400
Subject: [PATCH 04/18] refactor: Update currency types to use
 ExtendedInvoiceCurrency and adjust invoice schema accordingly

---
 src/components/invoice-form.tsx | 4 ++--
 src/lib/constants/currencies.ts | 8 ++++++--
 src/lib/schemas/invoice.ts      | 4 ++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/invoice-form.tsx b/src/components/invoice-form.tsx
index 39b900e1..98768c7c 100644
--- a/src/components/invoice-form.tsx
+++ b/src/components/invoice-form.tsx
@@ -22,7 +22,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { PaymentDetailsStatus as PaymentDetailsStatusEnum } from "@/lib/constants/bank-account";
 import {
   EXTENDED_INVOICE_CURRENCIES,
-  type InvoiceCurrency,
+  type ExtendedInvoiceCurrency,
   MAINNET_CURRENCIES,
   type MainnetCurrency,
   formatCurrencyLabel,
@@ -818,7 +818,7 @@ export function InvoiceForm({
           <Label htmlFor="invoiceCurrency">Invoice Currency</Label>
           <Select
             onValueChange={(value) => {
-              const currency = value as InvoiceCurrency;
+              const currency = value as ExtendedInvoiceCurrency;
               form.setValue("invoiceCurrency", currency);
               // If not USD, set payment currency to same as invoice currency
               if (currency !== "USD") {
diff --git a/src/lib/constants/currencies.ts b/src/lib/constants/currencies.ts
index 0bcdd744..f7b6bdd0 100644
--- a/src/lib/constants/currencies.ts
+++ b/src/lib/constants/currencies.ts
@@ -38,10 +38,14 @@ export const EXTENDED_INVOICE_CURRENCIES = [
   ...INVOICE_CURRENCIES,
   ...MAINNET_CURRENCIES,
 ] as const;
-export type InvoiceCurrency = (typeof EXTENDED_INVOICE_CURRENCIES)[number];
+
+export type InvoiceCurrency = (typeof INVOICE_CURRENCIES)[number];
+
+export type ExtendedInvoiceCurrency =
+  (typeof EXTENDED_INVOICE_CURRENCIES)[number];
 
 export const EXTENDED_PAYMENT_CURRENCIES: Partial<{
-  [K in InvoiceCurrency]: readonly string[];
+  [K in ExtendedInvoiceCurrency]: readonly string[];
 }> = {
   ...PAYMENT_CURRENCIES,
   ...Object.fromEntries(
diff --git a/src/lib/schemas/invoice.ts b/src/lib/schemas/invoice.ts
index 069a8313..0bce91f1 100644
--- a/src/lib/schemas/invoice.ts
+++ b/src/lib/schemas/invoice.ts
@@ -1,4 +1,4 @@
-import { INVOICE_CURRENCIES } from "@/lib/constants/currencies";
+import { EXTENDED_INVOICE_CURRENCIES } from "@/lib/constants/currencies";
 import { isEthereumAddress } from "validator";
 import { z } from "zod";
 
@@ -21,7 +21,7 @@ export const invoiceFormSchema = z
       )
       .min(1, "At least one item is required"),
     notes: z.string().optional(),
-    invoiceCurrency: z.enum(INVOICE_CURRENCIES, {
+    invoiceCurrency: z.enum(EXTENDED_INVOICE_CURRENCIES, {
       required_error: "Please select an invoice currency",
     }),
     paymentCurrency: z.string().min(1, "Payment currency is required"),

From 37bfd7c9d4f84b939e9c4030477d3ff78bc9e86e Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Fri, 30 May 2025 15:49:30 +0400
Subject: [PATCH 05/18] feat: Implement Batch Payout component for processing
 multiple payments with currency selection and validation

---
 package-lock.json               |  80 +++++
 package.json                    |   1 +
 src/components/batch-payout.tsx | 540 +++++++++++++++++++++++++++++++-
 src/components/ui/separator.tsx |  31 ++
 src/lib/schemas/payment.ts      |   6 +
 5 files changed, 657 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/separator.tsx

diff --git a/package-lock.json b/package-lock.json
index 2440a5e4..c13c6570 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@radix-ui/react-dropdown-menu": "^2.1.2",
         "@radix-ui/react-label": "^2.1.2",
         "@radix-ui/react-select": "^2.1.2",
+        "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.1.2",
         "@radix-ui/react-tabs": "^1.1.3",
         "@reown/appkit": "^1.6.8",
@@ -2831,6 +2832,85 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
+      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
diff --git a/package.json b/package.json
index 494f18f4..dfa75553 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.3",
     "@reown/appkit": "^1.6.8",
diff --git a/src/components/batch-payout.tsx b/src/components/batch-payout.tsx
index 03df00ab..20c8559c 100644
--- a/src/components/batch-payout.tsx
+++ b/src/components/batch-payout.tsx
@@ -1,3 +1,541 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  useAppKit,
+  useAppKitAccount,
+  useAppKitProvider,
+} from "@reown/appkit/react";
+import { ethers } from "ethers";
+import {
+  ArrowRight,
+  CheckCircle,
+  Copy,
+  CreditCard,
+  Loader2,
+  LogOut,
+  Plus,
+  Send,
+  Trash2,
+  Wallet,
+  X,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { toast } from "sonner";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  INVOICE_CURRENCIES,
+  type InvoiceCurrency,
+  type PaymentCurrency,
+  formatCurrencyLabel,
+  getPaymentCurrenciesForInvoice,
+} from "@/lib/constants/currencies";
+import {
+  type BatchPaymentFormValues,
+  batchPaymentFormSchema,
+} from "@/lib/schemas/payment";
+
 export function BatchPayout() {
-  return <div>Batch Payout</div>;
+  // const { mutateAsync: pay } = api.payment.batchPay.useMutation();
+
+  const [paymentStatus, setPaymentStatus] = useState<
+    "idle" | "processing" | "success" | "error"
+  >("idle");
+  const [currentStep, setCurrentStep] = useState<1 | 2>(1);
+  const [isAppKitReady, setIsAppKitReady] = useState(false);
+
+  const form = useForm<BatchPaymentFormValues>({
+    resolver: zodResolver(batchPaymentFormSchema),
+    defaultValues: {
+      payments: [
+        {
+          payee: "",
+          amount: 0,
+          invoiceCurrency: "USD",
+          paymentCurrency: "ETH-sepolia-sepolia",
+        },
+      ],
+    },
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "payments",
+  });
+
+  const { open } = useAppKit();
+  const { isConnected, address } = useAppKitAccount();
+  const { walletProvider } = useAppKitProvider("eip155");
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsAppKitReady(true);
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  useEffect(() => {
+    if (isConnected) {
+      setCurrentStep(2);
+    } else {
+      setCurrentStep(1);
+    }
+  }, [isConnected]);
+
+  const handleInvoiceCurrencyChange = (value: string, index: number) => {
+    const newInvoiceCurrency = value as InvoiceCurrency;
+    form.setValue(`payments.${index}.invoiceCurrency`, newInvoiceCurrency);
+
+    if (newInvoiceCurrency !== "USD") {
+      form.setValue(`payments.${index}.paymentCurrency`, newInvoiceCurrency);
+    } else {
+      const validPaymentCurrencies =
+        getPaymentCurrenciesForInvoice(newInvoiceCurrency);
+      form.setValue(
+        `payments.${index}.paymentCurrency`,
+        validPaymentCurrencies[0],
+      );
+    }
+  };
+
+  const addPayment = () => {
+    append({
+      payee: "",
+      amount: 0,
+      invoiceCurrency: "USD",
+      paymentCurrency: "ETH-sepolia-sepolia",
+    });
+  };
+
+  const removePayment = (index: number) => {
+    if (fields.length > 1) {
+      remove(index);
+    }
+  };
+
+  const duplicatePayment = (index: number) => {
+    const payment = form.getValues(`payments.${index}`);
+    append({ ...payment, payee: "" });
+  };
+
+  const getValidPaymentsCount = () => {
+    const payments = form.getValues("payments");
+    return payments.filter((payment) => payment.payee && payment.amount > 0)
+      .length;
+  };
+
+  const onSubmit = async (data: BatchPaymentFormValues) => {
+    if (!isConnected) {
+      toast.error("Please connect your wallet first");
+      return;
+    }
+
+    setPaymentStatus("processing");
+
+    try {
+      const ethersProvider = new ethers.providers.Web3Provider(
+        walletProvider as ethers.providers.ExternalProvider,
+      );
+
+      const _signer = await ethersProvider.getSigner();
+
+      toast.info("Initiating batch payment...");
+
+      // Simulate batch payment processing
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+
+      toast.success("Batch payment successful", {
+        description: `Successfully processed ${data.payments.length} payments`,
+      });
+
+      setPaymentStatus("success");
+
+      // Reset form after successful payment
+      setTimeout(() => {
+        form.reset({
+          payments: [
+            {
+              payee: "",
+              amount: 0,
+              invoiceCurrency: "USD",
+              paymentCurrency: "ETH-sepolia-sepolia",
+            },
+          ],
+        });
+        setPaymentStatus("idle");
+      }, 3000);
+    } catch (error) {
+      console.error("Batch payment error:", error);
+      toast.error("Batch payment failed", {
+        description:
+          "There was an error processing your payments. Please try again.",
+      });
+      setPaymentStatus("error");
+    }
+  };
+
+  return (
+    <div className="flex justify-center mx-auto w-full max-w-4xl">
+      <Card className="w-full shadow-lg border-zinc-200/80">
+        <CardHeader className="bg-zinc-50 rounded-t-lg border-b border-zinc-200/80">
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="flex items-center gap-2">
+                <CreditCard className="h-5 w-5" />
+                Batch Payout
+              </CardTitle>
+              <CardDescription>
+                Create and send multiple payments efficiently in a single batch
+              </CardDescription>
+            </div>
+            <Badge variant="secondary" className="text-sm">
+              {getValidPaymentsCount()} of {fields.length} ready
+            </Badge>
+          </div>
+        </CardHeader>
+
+        {!isAppKitReady ? (
+          <CardContent className="py-16">
+            <div className="flex flex-col items-center justify-center space-y-4">
+              <Loader2 className="h-10 w-10 animate-spin text-zinc-400" />
+              <p className="text-zinc-500">Initializing payment system...</p>
+            </div>
+          </CardContent>
+        ) : (
+          <>
+            <CardContent className="pt-6 pb-2 space-y-6">
+              {/* Payment steps indicator */}
+              <div className="flex justify-center mb-6">
+                <div className="flex items-center space-x-4">
+                  <div
+                    className={`flex items-center ${currentStep >= 1 ? "text-black" : "text-zinc-300"}`}
+                  >
+                    <div
+                      className={`w-8 h-8 rounded-full border-2 flex items-center justify-center ${
+                        currentStep >= 1
+                          ? "border-black bg-zinc-50"
+                          : "border-zinc-300"
+                      }`}
+                    >
+                      <Wallet className="w-4 h-4" />
+                    </div>
+                    <span className="ml-2 font-medium">Connect Wallet</span>
+                  </div>
+
+                  <div
+                    className={`w-16 h-0.5 ${currentStep >= 2 ? "bg-black" : "bg-zinc-300"}`}
+                  />
+
+                  <div
+                    className={`flex items-center ${currentStep >= 2 ? "text-black" : "text-zinc-300"}`}
+                  >
+                    <div
+                      className={`w-8 h-8 rounded-full border-2 flex items-center justify-center ${
+                        currentStep >= 2
+                          ? "border-black bg-zinc-50"
+                          : "border-zinc-300"
+                      }`}
+                    >
+                      <Send className="w-4 h-4" />
+                    </div>
+                    <span className="ml-2 font-medium">Send Payments</span>
+                  </div>
+                </div>
+              </div>
+
+              {currentStep === 1 ? (
+                <div className="flex flex-col items-center justify-center py-10 space-y-4">
+                  <p className="text-zinc-600 text-center max-w-md">
+                    Connect your wallet to send batch payments to multiple
+                    addresses
+                  </p>
+                  <Button onClick={() => open()} size="lg" className="mt-2">
+                    <Wallet className="mr-2 h-4 w-4" />
+                    Connect Wallet
+                  </Button>
+                </div>
+              ) : (
+                <form
+                  onSubmit={form.handleSubmit(onSubmit)}
+                  className="space-y-6"
+                >
+                  {/* Payment forms */}
+                  <div className="space-y-4">
+                    {fields.map((field, index) => {
+                      const invoiceCurrency = form.watch(
+                        `payments.${index}.invoiceCurrency`,
+                      ) as InvoiceCurrency;
+                      const showPaymentCurrencySelect =
+                        invoiceCurrency === "USD";
+
+                      return (
+                        <Card key={field.id} className="border-zinc-200">
+                          <CardHeader className="pb-4">
+                            <div className="flex items-center justify-between">
+                              <CardTitle className="text-base">
+                                Payment #{index + 1}
+                              </CardTitle>
+                              <div className="flex items-center gap-2">
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="sm"
+                                  onClick={() => duplicatePayment(index)}
+                                  className="text-zinc-500 hover:text-zinc-700"
+                                >
+                                  <Copy className="h-4 w-4" />
+                                </Button>
+                                {fields.length > 1 && (
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={() => removePayment(index)}
+                                    className="text-red-500 hover:text-red-700 hover:bg-red-50"
+                                  >
+                                    <Trash2 className="h-4 w-4" />
+                                  </Button>
+                                )}
+                              </div>
+                            </div>
+                          </CardHeader>
+                          <CardContent className="space-y-4">
+                            <div
+                              className={`grid ${showPaymentCurrencySelect ? "grid-cols-2" : "grid-cols-1"} gap-4`}
+                            >
+                              <div className="space-y-2">
+                                <Label htmlFor={`invoiceCurrency-${index}`}>
+                                  Invoice Currency
+                                </Label>
+                                <Select
+                                  value={invoiceCurrency}
+                                  onValueChange={(value) =>
+                                    handleInvoiceCurrencyChange(value, index)
+                                  }
+                                  disabled={paymentStatus === "processing"}
+                                >
+                                  <SelectTrigger
+                                    id={`invoiceCurrency-${index}`}
+                                  >
+                                    <SelectValue placeholder="Select currency" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {INVOICE_CURRENCIES.map((currency) => (
+                                      <SelectItem
+                                        key={currency}
+                                        value={currency}
+                                      >
+                                        {formatCurrencyLabel(currency)}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+
+                              {showPaymentCurrencySelect && (
+                                <div className="space-y-2">
+                                  <Label htmlFor={`paymentCurrency-${index}`}>
+                                    Payment Currency
+                                  </Label>
+                                  <Select
+                                    value={form.watch(
+                                      `payments.${index}.paymentCurrency`,
+                                    )}
+                                    onValueChange={(value) =>
+                                      form.setValue(
+                                        `payments.${index}.paymentCurrency`,
+                                        value as PaymentCurrency,
+                                      )
+                                    }
+                                    disabled={paymentStatus === "processing"}
+                                  >
+                                    <SelectTrigger
+                                      id={`paymentCurrency-${index}`}
+                                    >
+                                      <SelectValue placeholder="Select payment currency" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                      {getPaymentCurrenciesForInvoice(
+                                        invoiceCurrency,
+                                      ).map((currency) => (
+                                        <SelectItem
+                                          key={currency}
+                                          value={currency}
+                                        >
+                                          {formatCurrencyLabel(currency)}
+                                        </SelectItem>
+                                      ))}
+                                    </SelectContent>
+                                  </Select>
+                                </div>
+                              )}
+                            </div>
+
+                            <div className="grid grid-cols-2 gap-4">
+                              <div className="space-y-2">
+                                <Label htmlFor={`amount-${index}`}>
+                                  Amount
+                                </Label>
+                                <Input
+                                  id={`amount-${index}`}
+                                  type="number"
+                                  placeholder="0.00"
+                                  {...form.register(
+                                    `payments.${index}.amount`,
+                                    {
+                                      valueAsNumber: true,
+                                    },
+                                  )}
+                                  disabled={paymentStatus === "processing"}
+                                />
+                              </div>
+
+                              <div className="space-y-2">
+                                <Label htmlFor={`payee-${index}`}>
+                                  Recipient Address
+                                </Label>
+                                <Input
+                                  id={`payee-${index}`}
+                                  placeholder="0x..."
+                                  {...form.register(`payments.${index}.payee`)}
+                                  disabled={paymentStatus === "processing"}
+                                  className="font-mono"
+                                />
+                              </div>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      );
+                    })}
+                  </div>
+
+                  {/* Add payment button */}
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={addPayment}
+                    className="w-full border-dashed border-2 border-zinc-300 text-zinc-600 hover:border-zinc-400 hover:text-zinc-700"
+                    disabled={paymentStatus === "processing"}
+                  >
+                    <Plus className="h-4 w-4 mr-2" />
+                    Add Another Payment
+                  </Button>
+
+                  {/* Batch summary */}
+                  {fields.length > 1 && (
+                    <Card className="bg-zinc-50 border-zinc-200">
+                      <CardContent className="p-4">
+                        <h3 className="font-medium text-zinc-900 mb-3">
+                          Batch Summary
+                        </h3>
+                        <div className="space-y-2 text-sm">
+                          <div className="flex justify-between">
+                            <span className="text-zinc-600">
+                              Total Payments:
+                            </span>
+                            <span className="font-medium">{fields.length}</span>
+                          </div>
+                          <div className="flex justify-between">
+                            <span className="text-zinc-600">
+                              Ready to Process:
+                            </span>
+                            <span className="font-medium">
+                              {getValidPaymentsCount()}
+                            </span>
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  )}
+
+                  {/* Security notice */}
+                  <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
+                    <h3 className="font-semibold text-green-800 mb-1 text-sm">
+                      Secure Batch Transaction
+                    </h3>
+                    <p className="text-xs text-green-700">
+                      This batch payment is secured using Request Network. All
+                      transactions will be processed safely and transparently on
+                      the blockchain.
+                    </p>
+                  </div>
+
+                  <CardFooter className="flex justify-between items-center pt-2 pb-0 px-0">
+                    <button
+                      type="button"
+                      onClick={() => open()}
+                      className="flex items-center text-sm text-zinc-500 hover:text-zinc-800 transition-colors"
+                    >
+                      <span className="font-mono mr-2">
+                        {address?.substring(0, 6)}...
+                        {address?.substring(address?.length - 4)}
+                      </span>
+                      <LogOut className="h-3 w-3" />
+                    </button>
+                    <Button
+                      type="submit"
+                      className="relative"
+                      disabled={
+                        paymentStatus === "processing" ||
+                        getValidPaymentsCount() === 0
+                      }
+                    >
+                      {paymentStatus === "processing" ? (
+                        <>
+                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                          Processing Batch...
+                        </>
+                      ) : paymentStatus === "success" ? (
+                        <>
+                          <CheckCircle className="mr-2 h-4 w-4" />
+                          Batch Sent
+                        </>
+                      ) : paymentStatus === "error" ? (
+                        <>
+                          <X className="mr-2 h-4 w-4" />
+                          Try Again
+                        </>
+                      ) : (
+                        <>
+                          <ArrowRight className="mr-2 h-4 w-4" />
+                          Send Batch Payment ({getValidPaymentsCount()})
+                        </>
+                      )}
+                    </Button>
+                  </CardFooter>
+                </form>
+              )}
+            </CardContent>
+
+            {currentStep === 2 && !form.formState.isSubmitSuccessful && (
+              <CardFooter className="pt-2 pb-6">
+                {/* Empty footer for spacing when form is displayed */}
+              </CardFooter>
+            )}
+          </>
+        )}
+      </Card>
+    </div>
+  );
 }
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 00000000..3cc446d2
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/src/lib/schemas/payment.ts b/src/lib/schemas/payment.ts
index d1868198..e1cb9416 100644
--- a/src/lib/schemas/payment.ts
+++ b/src/lib/schemas/payment.ts
@@ -15,3 +15,9 @@ export const paymentFormSchema = z.object({
 });
 
 export type PaymentFormValues = z.infer<typeof paymentFormSchema>;
+
+export const batchPaymentFormSchema = z.object({
+  payments: z.array(paymentFormSchema),
+});
+
+export type BatchPaymentFormValues = z.infer<typeof batchPaymentFormSchema>;

From 388f6dec198441265f6c3435fc6d6395c7df0dd0 Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Fri, 30 May 2025 16:35:33 +0400
Subject: [PATCH 06/18] feat: Add batch payment functionality to BatchPayout
 component with transaction handling and approval logic

---
 src/components/batch-payout.tsx | 49 ++++++++++++++++++++++++++++-----
 src/server/routers/payment.ts   | 36 ++++++++++++++++++++++--
 2 files changed, 76 insertions(+), 9 deletions(-)

diff --git a/src/components/batch-payout.tsx b/src/components/batch-payout.tsx
index 20c8559c..81477520 100644
--- a/src/components/batch-payout.tsx
+++ b/src/components/batch-payout.tsx
@@ -54,9 +54,10 @@ import {
   type BatchPaymentFormValues,
   batchPaymentFormSchema,
 } from "@/lib/schemas/payment";
+import { api } from "@/trpc/react";
 
 export function BatchPayout() {
-  // const { mutateAsync: pay } = api.payment.batchPay.useMutation();
+  const { mutateAsync: batchPay } = api.payment.batchPay.useMutation();
 
   const [paymentStatus, setPaymentStatus] = useState<
     "idle" | "processing" | "success" | "error"
@@ -158,12 +159,46 @@ export function BatchPayout() {
         walletProvider as ethers.providers.ExternalProvider,
       );
 
-      const _signer = await ethersProvider.getSigner();
+      const signer = await ethersProvider.getSigner();
 
       toast.info("Initiating batch payment...");
 
-      // Simulate batch payment processing
-      await new Promise((resolve) => setTimeout(resolve, 2000));
+      const batchPaymentData = await batchPay({
+        ...data,
+        payer: address,
+      });
+
+      toast.info("Initiating payment...");
+
+      const isApprovalNeeded =
+        batchPaymentData.ERC20ApprovalTransactions.length > 0;
+
+      if (isApprovalNeeded) {
+        toast.info("Approval required", {
+          description: "Please approve the transaction in your wallet",
+        });
+
+        for (const approvalTransaction of batchPaymentData.ERC20ApprovalTransactions) {
+          const tx = await signer.sendTransaction(approvalTransaction as any);
+          await tx.wait();
+        }
+      }
+
+      if (batchPaymentData.ERC20BatchPaymentTransaction) {
+        toast.info("Sending ERC20 batch payment...");
+        const tx = await signer.sendTransaction(
+          batchPaymentData.ERC20BatchPaymentTransaction as any,
+        );
+        await tx.wait();
+      }
+
+      if (batchPaymentData.ETHBatchPaymentTransaction) {
+        toast.info("Sending ETH batch payment...");
+        const tx = await signer.sendTransaction(
+          batchPaymentData.ETHBatchPaymentTransaction as any,
+        );
+        await tx.wait();
+      }
 
       toast.success("Batch payment successful", {
         description: `Successfully processed ${data.payments.length} payments`,
@@ -186,10 +221,10 @@ export function BatchPayout() {
         setPaymentStatus("idle");
       }, 3000);
     } catch (error) {
-      console.error("Batch payment error:", error);
-      toast.error("Batch payment failed", {
+      console.error("Payment error:", error);
+      toast.error("Payment failed", {
         description:
-          "There was an error processing your payments. Please try again.",
+          "There was an error processing your payment. Please try again.",
       });
       setPaymentStatus("error");
     }
diff --git a/src/server/routers/payment.ts b/src/server/routers/payment.ts
index e2bcbf30..69f22d66 100644
--- a/src/server/routers/payment.ts
+++ b/src/server/routers/payment.ts
@@ -1,6 +1,10 @@
 import { apiClient } from "@/lib/axios";
-import { paymentFormSchema } from "@/lib/schemas/payment";
+import {
+  batchPaymentFormSchema,
+  paymentFormSchema,
+} from "@/lib/schemas/payment";
 import { TRPCError } from "@trpc/server";
+import { z } from "zod";
 import { protectedProcedure, router } from "../trpc";
 
 export const paymentRouter = router({
@@ -16,7 +20,7 @@ export const paymentRouter = router({
         });
       }
 
-      const response = await apiClient.post("v2/pay", {
+      const response = await apiClient.post("v2/payouts", {
         amount: input.amount.toString(),
         payee: input.payee,
         invoiceCurrency: input.invoiceCurrency,
@@ -32,4 +36,32 @@ export const paymentRouter = router({
 
       return response.data;
     }),
+  batchPay: protectedProcedure
+    .input(
+      batchPaymentFormSchema.extend({
+        payer: z.string().optional(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const { user } = ctx;
+
+      if (!user) {
+        throw new TRPCError({
+          code: "UNAUTHORIZED",
+          message: "You must be logged in to pay",
+        });
+      }
+
+      const reponse = await apiClient.post("v2/payouts/batch", {
+        requests: input.payments.map((payment) => ({
+          amount: payment.amount.toString(),
+          payee: payment.payee,
+          invoiceCurrency: payment.invoiceCurrency,
+          paymentCurrency: payment.paymentCurrency,
+        })),
+        payer: input.payer,
+      });
+
+      return reponse.data;
+    }),
 });

From 774b817dd7751d8760b4fa50bea995991604ae3e Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Fri, 30 May 2025 17:00:55 +0400
Subject: [PATCH 07/18] feat: Enhance BatchPayout component with table layout
 for payments, validation limits, and summary statistics

---
 src/components/batch-payout.tsx  | 362 ++++++++++++++++++-------------
 src/components/direct-payout.tsx |   2 +
 2 files changed, 219 insertions(+), 145 deletions(-)

diff --git a/src/components/batch-payout.tsx b/src/components/batch-payout.tsx
index 81477520..989fc1f1 100644
--- a/src/components/batch-payout.tsx
+++ b/src/components/batch-payout.tsx
@@ -35,7 +35,6 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
@@ -43,6 +42,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import {
   INVOICE_CURRENCIES,
   type InvoiceCurrency,
@@ -56,6 +63,8 @@ import {
 } from "@/lib/schemas/payment";
 import { api } from "@/trpc/react";
 
+const MAX_PAYMENTS = 10;
+
 export function BatchPayout() {
   const { mutateAsync: batchPay } = api.payment.batchPay.useMutation();
 
@@ -121,12 +130,14 @@ export function BatchPayout() {
   };
 
   const addPayment = () => {
-    append({
-      payee: "",
-      amount: 0,
-      invoiceCurrency: "USD",
-      paymentCurrency: "ETH-sepolia-sepolia",
-    });
+    if (fields.length < MAX_PAYMENTS) {
+      append({
+        payee: "",
+        amount: 0,
+        invoiceCurrency: "USD",
+        paymentCurrency: "ETH-sepolia-sepolia",
+      });
+    }
   };
 
   const removePayment = (index: number) => {
@@ -136,16 +147,40 @@ export function BatchPayout() {
   };
 
   const duplicatePayment = (index: number) => {
-    const payment = form.getValues(`payments.${index}`);
-    append({ ...payment, payee: "" });
+    if (fields.length < MAX_PAYMENTS) {
+      const payment = form.getValues(`payments.${index}`);
+      append({ ...payment, payee: "" });
+    }
   };
 
   const getValidPaymentsCount = () => {
-    const payments = form.getValues("payments");
+    const payments = form.watch("payments");
     return payments.filter((payment) => payment.payee && payment.amount > 0)
       .length;
   };
 
+  const getUniqueAddressesCount = () => {
+    const payments = form.watch("payments");
+    const uniqueAddresses = new Set(
+      payments
+        .filter((payment) => payment.payee)
+        .map((payment) => payment.payee.toLowerCase()),
+    );
+    return uniqueAddresses.size;
+  };
+
+  const getTotalsByCurrency = () => {
+    const payments = form.watch("payments");
+    const totals: Record<string, number> = {};
+    for (const payment of payments) {
+      if (payment.amount > 0) {
+        const currency = payment.invoiceCurrency;
+        totals[currency] = (totals[currency] || 0) + payment.amount;
+      }
+    }
+    return totals;
+  };
+
   const onSubmit = async (data: BatchPaymentFormValues) => {
     if (!isConnected) {
       toast.error("Please connect your wallet first");
@@ -184,21 +219,11 @@ export function BatchPayout() {
         }
       }
 
-      if (batchPaymentData.ERC20BatchPaymentTransaction) {
-        toast.info("Sending ERC20 batch payment...");
-        const tx = await signer.sendTransaction(
-          batchPaymentData.ERC20BatchPaymentTransaction as any,
-        );
-        await tx.wait();
-      }
-
-      if (batchPaymentData.ETHBatchPaymentTransaction) {
-        toast.info("Sending ETH batch payment...");
-        const tx = await signer.sendTransaction(
-          batchPaymentData.ETHBatchPaymentTransaction as any,
-        );
-        await tx.wait();
-      }
+      toast.info("Sending batch payment...");
+      const tx = await signer.sendTransaction(
+        batchPaymentData.batchPaymentTransaction as any,
+      );
+      await tx.wait();
 
       toast.success("Batch payment successful", {
         description: `Successfully processed ${data.payments.length} payments`,
@@ -230,8 +255,10 @@ export function BatchPayout() {
     }
   };
 
+  const totalsByCurrency = getTotalsByCurrency();
+
   return (
-    <div className="flex justify-center mx-auto w-full max-w-4xl">
+    <div className="flex justify-center mx-auto w-full max-w-6xl">
       <Card className="w-full shadow-lg border-zinc-200/80">
         <CardHeader className="bg-zinc-50 rounded-t-lg border-b border-zinc-200/80">
           <div className="flex items-center justify-between">
@@ -244,9 +271,14 @@ export function BatchPayout() {
                 Create and send multiple payments efficiently in a single batch
               </CardDescription>
             </div>
-            <Badge variant="secondary" className="text-sm">
-              {getValidPaymentsCount()} of {fields.length} ready
-            </Badge>
+            <div className="flex items-center gap-3">
+              <Badge variant="secondary" className="text-sm">
+                {getValidPaymentsCount()} of {fields.length} ready
+              </Badge>
+              <Badge variant="outline" className="text-sm">
+                {fields.length}/{MAX_PAYMENTS} payments
+              </Badge>
+            </div>
           </div>
         </CardHeader>
 
@@ -315,54 +347,68 @@ export function BatchPayout() {
                   onSubmit={form.handleSubmit(onSubmit)}
                   className="space-y-6"
                 >
-                  {/* Payment forms */}
-                  <div className="space-y-4">
-                    {fields.map((field, index) => {
-                      const invoiceCurrency = form.watch(
-                        `payments.${index}.invoiceCurrency`,
-                      ) as InvoiceCurrency;
-                      const showPaymentCurrencySelect =
-                        invoiceCurrency === "USD";
-
-                      return (
-                        <Card key={field.id} className="border-zinc-200">
-                          <CardHeader className="pb-4">
-                            <div className="flex items-center justify-between">
-                              <CardTitle className="text-base">
-                                Payment #{index + 1}
-                              </CardTitle>
-                              <div className="flex items-center gap-2">
-                                <Button
-                                  type="button"
-                                  variant="ghost"
-                                  size="sm"
-                                  onClick={() => duplicatePayment(index)}
-                                  className="text-zinc-500 hover:text-zinc-700"
-                                >
-                                  <Copy className="h-4 w-4" />
-                                </Button>
-                                {fields.length > 1 && (
-                                  <Button
-                                    type="button"
-                                    variant="ghost"
-                                    size="sm"
-                                    onClick={() => removePayment(index)}
-                                    className="text-red-500 hover:text-red-700 hover:bg-red-50"
-                                  >
-                                    <Trash2 className="h-4 w-4" />
-                                  </Button>
-                                )}
-                              </div>
-                            </div>
-                          </CardHeader>
-                          <CardContent className="space-y-4">
-                            <div
-                              className={`grid ${showPaymentCurrencySelect ? "grid-cols-2" : "grid-cols-1"} gap-4`}
+                  {/* Excel-like table */}
+                  <div className="border rounded-lg overflow-hidden">
+                    <Table>
+                      <TableHeader>
+                        <TableRow className="bg-zinc-50">
+                          <TableHead className="w-12 text-center">#</TableHead>
+                          <TableHead className="min-w-[300px]">
+                            Recipient Address
+                          </TableHead>
+                          <TableHead className="w-32">Amount</TableHead>
+                          <TableHead className="w-40">
+                            Invoice Currency
+                          </TableHead>
+                          <TableHead className="w-40">
+                            Payment Currency
+                          </TableHead>
+                          <TableHead className="w-20 text-center">
+                            Actions
+                          </TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {fields.map((field, index) => {
+                          const invoiceCurrency = form.watch(
+                            `payments.${index}.invoiceCurrency`,
+                          ) as InvoiceCurrency;
+                          const showPaymentCurrencySelect =
+                            invoiceCurrency === "USD";
+
+                          return (
+                            <TableRow
+                              key={field.id}
+                              className="hover:bg-zinc-50/50"
                             >
-                              <div className="space-y-2">
-                                <Label htmlFor={`invoiceCurrency-${index}`}>
-                                  Invoice Currency
-                                </Label>
+                              <TableCell className="text-center text-sm text-zinc-500 font-medium">
+                                {index + 1}
+                              </TableCell>
+                              <TableCell>
+                                <Input
+                                  placeholder="0x..."
+                                  {...form.register(`payments.${index}.payee`)}
+                                  disabled={paymentStatus === "processing"}
+                                  className="font-mono text-sm border-0 shadow-none focus-visible:ring-1 focus-visible:ring-zinc-300"
+                                />
+                              </TableCell>
+                              <TableCell>
+                                <Input
+                                  type="number"
+                                  placeholder="0.00"
+                                  step="any"
+                                  min="0"
+                                  {...form.register(
+                                    `payments.${index}.amount`,
+                                    {
+                                      valueAsNumber: true,
+                                    },
+                                  )}
+                                  disabled={paymentStatus === "processing"}
+                                  className="text-sm border-0 shadow-none focus-visible:ring-1 focus-visible:ring-zinc-300"
+                                />
+                              </TableCell>
+                              <TableCell>
                                 <Select
                                   value={invoiceCurrency}
                                   onValueChange={(value) =>
@@ -370,10 +416,8 @@ export function BatchPayout() {
                                   }
                                   disabled={paymentStatus === "processing"}
                                 >
-                                  <SelectTrigger
-                                    id={`invoiceCurrency-${index}`}
-                                  >
-                                    <SelectValue placeholder="Select currency" />
+                                  <SelectTrigger className="text-sm border-0 shadow-none focus:ring-1 focus:ring-zinc-300">
+                                    <SelectValue />
                                   </SelectTrigger>
                                   <SelectContent>
                                     {INVOICE_CURRENCIES.map((currency) => (
@@ -386,13 +430,9 @@ export function BatchPayout() {
                                     ))}
                                   </SelectContent>
                                 </Select>
-                              </div>
-
-                              {showPaymentCurrencySelect && (
-                                <div className="space-y-2">
-                                  <Label htmlFor={`paymentCurrency-${index}`}>
-                                    Payment Currency
-                                  </Label>
+                              </TableCell>
+                              <TableCell>
+                                {showPaymentCurrencySelect ? (
                                   <Select
                                     value={form.watch(
                                       `payments.${index}.paymentCurrency`,
@@ -405,10 +445,8 @@ export function BatchPayout() {
                                     }
                                     disabled={paymentStatus === "processing"}
                                   >
-                                    <SelectTrigger
-                                      id={`paymentCurrency-${index}`}
-                                    >
-                                      <SelectValue placeholder="Select payment currency" />
+                                    <SelectTrigger className="text-sm border-0 shadow-none focus:ring-1 focus:ring-zinc-300">
+                                      <SelectValue />
                                     </SelectTrigger>
                                     <SelectContent>
                                       {getPaymentCurrenciesForInvoice(
@@ -423,46 +461,42 @@ export function BatchPayout() {
                                       ))}
                                     </SelectContent>
                                   </Select>
-                                </div>
-                              )}
-                            </div>
-
-                            <div className="grid grid-cols-2 gap-4">
-                              <div className="space-y-2">
-                                <Label htmlFor={`amount-${index}`}>
-                                  Amount
-                                </Label>
-                                <Input
-                                  id={`amount-${index}`}
-                                  type="number"
-                                  placeholder="0.00"
-                                  {...form.register(
-                                    `payments.${index}.amount`,
-                                    {
-                                      valueAsNumber: true,
-                                    },
+                                ) : (
+                                  <div className="text-sm text-zinc-500 px-3 py-2">
+                                    {formatCurrencyLabel(invoiceCurrency)}
+                                  </div>
+                                )}
+                              </TableCell>
+                              <TableCell>
+                                <div className="flex items-center justify-center gap-1">
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={() => duplicatePayment(index)}
+                                    disabled={fields.length >= MAX_PAYMENTS}
+                                    className="h-8 w-8 p-0 text-zinc-500 hover:text-zinc-700"
+                                  >
+                                    <Copy className="h-3 w-3" />
+                                  </Button>
+                                  {fields.length > 1 && (
+                                    <Button
+                                      type="button"
+                                      variant="ghost"
+                                      size="sm"
+                                      onClick={() => removePayment(index)}
+                                      className="h-8 w-8 p-0 text-red-500 hover:text-red-700 hover:bg-red-50"
+                                    >
+                                      <Trash2 className="h-3 w-3" />
+                                    </Button>
                                   )}
-                                  disabled={paymentStatus === "processing"}
-                                />
-                              </div>
-
-                              <div className="space-y-2">
-                                <Label htmlFor={`payee-${index}`}>
-                                  Recipient Address
-                                </Label>
-                                <Input
-                                  id={`payee-${index}`}
-                                  placeholder="0x..."
-                                  {...form.register(`payments.${index}.payee`)}
-                                  disabled={paymentStatus === "processing"}
-                                  className="font-mono"
-                                />
-                              </div>
-                            </div>
-                          </CardContent>
-                        </Card>
-                      );
-                    })}
+                                </div>
+                              </TableCell>
+                            </TableRow>
+                          );
+                        })}
+                      </TableBody>
+                    </Table>
                   </div>
 
                   {/* Add payment button */}
@@ -470,25 +504,26 @@ export function BatchPayout() {
                     type="button"
                     variant="outline"
                     onClick={addPayment}
+                    disabled={
+                      fields.length >= MAX_PAYMENTS ||
+                      paymentStatus === "processing"
+                    }
                     className="w-full border-dashed border-2 border-zinc-300 text-zinc-600 hover:border-zinc-400 hover:text-zinc-700"
-                    disabled={paymentStatus === "processing"}
                   >
                     <Plus className="h-4 w-4 mr-2" />
-                    Add Another Payment
+                    Add Payment Row ({fields.length}/{MAX_PAYMENTS})
                   </Button>
 
-                  {/* Batch summary */}
-                  {fields.length > 1 && (
-                    <Card className="bg-zinc-50 border-zinc-200">
-                      <CardContent className="p-4">
-                        <h3 className="font-medium text-zinc-900 mb-3">
-                          Batch Summary
-                        </h3>
+                  {/* Enhanced Summary */}
+                  <Card className="bg-zinc-50 border-zinc-200">
+                    <CardContent className="p-4">
+                      <h3 className="font-medium text-zinc-900 mb-3">
+                        Batch Summary
+                      </h3>
+                      <div className="grid grid-cols-2 gap-6">
                         <div className="space-y-2 text-sm">
                           <div className="flex justify-between">
-                            <span className="text-zinc-600">
-                              Total Payments:
-                            </span>
+                            <span className="text-zinc-600">Total Items:</span>
                             <span className="font-medium">{fields.length}</span>
                           </div>
                           <div className="flex justify-between">
@@ -499,10 +534,47 @@ export function BatchPayout() {
                               {getValidPaymentsCount()}
                             </span>
                           </div>
+                          <div className="flex justify-between">
+                            <span className="text-zinc-600">
+                              Unique Addresses:
+                            </span>
+                            <span className="font-medium">
+                              {getUniqueAddressesCount()}
+                            </span>
+                          </div>
+                        </div>
+                        <div className="space-y-2 text-sm">
+                          <div className="font-medium text-zinc-900 mb-2">
+                            Totals by Currency:
+                          </div>
+                          {Object.keys(totalsByCurrency).length > 0 ? (
+                            Object.entries(totalsByCurrency).map(
+                              ([currency, total]) => (
+                                <div
+                                  key={currency}
+                                  className="flex justify-between"
+                                >
+                                  <span className="text-zinc-600">
+                                    {formatCurrencyLabel(currency)}:
+                                  </span>
+                                  <span className="font-medium">
+                                    {total.toLocaleString(undefined, {
+                                      minimumFractionDigits: 2,
+                                      maximumFractionDigits: 6,
+                                    })}
+                                  </span>
+                                </div>
+                              ),
+                            )
+                          ) : (
+                            <div className="text-zinc-500 italic">
+                              No amounts entered
+                            </div>
+                          )}
                         </div>
-                      </CardContent>
-                    </Card>
-                  )}
+                      </div>
+                    </CardContent>
+                  </Card>
 
                   {/* Security notice */}
                   <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
diff --git a/src/components/direct-payout.tsx b/src/components/direct-payout.tsx
index 9db9784b..243785fa 100644
--- a/src/components/direct-payout.tsx
+++ b/src/components/direct-payout.tsx
@@ -346,6 +346,8 @@ export function DirectPayment() {
                         id="amount"
                         type="number"
                         placeholder="0.00"
+                        step="any"
+                        min="0"
                         {...form.register("amount", {
                           valueAsNumber: true,
                         })}

From 534b0e9d50f7254914adc6d1cbdf959a7d54199d Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Tue, 3 Jun 2025 16:44:36 +0400
Subject: [PATCH 08/18] feat: Introduce DashboardView component for enhanced
 invoice management and selection

---
 src/app/dashboard/page.tsx        | 18 +--------
 src/components/dashboard-view.tsx | 55 +++++++++++++++++++++++++++
 src/components/invoice-table.tsx  | 63 ++++++++++++++++++++++++++++++-
 3 files changed, 118 insertions(+), 18 deletions(-)
 create mode 100644 src/components/dashboard-view.tsx

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index c3afde65..f318e731 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -1,12 +1,10 @@
 import { BackgroundWrapper } from "@/components/background-wrapper";
+import { DashboardView } from "@/components/dashboard-view";
 import { Footer } from "@/components/footer";
 import { Header } from "@/components/header";
-import { InvoiceTable } from "@/components/invoice-table";
 import { getCurrentSession } from "@/server/auth";
 import { api } from "@/trpc/server";
-import { PlusCircle } from "lucide-react";
 import type { Metadata } from "next";
-import Link from "next/link";
 import { redirect } from "next/navigation";
 
 export const metadata: Metadata = {
@@ -31,19 +29,7 @@ export default async function DashboardPage() {
     >
       <Header user={user} />
       <main className="flex-grow flex flex-col max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 z-10">
-        <div className="flex justify-between items-center mb-8">
-          <h1 className="text-4xl font-bold tracking-tight">Dashboard</h1>
-
-          <Link
-            href="/invoices/create"
-            className="bg-black hover:bg-zinc-800 text-white transition-colors px-4 py-2 rounded-md flex items-center"
-          >
-            <PlusCircle className="mr-2 h-4 w-4" />
-            Create Invoice
-          </Link>
-        </div>
-
-        <InvoiceTable initialInvoices={invoices} />
+        <DashboardView invoices={invoices} />
       </main>
       <Footer />
     </BackgroundWrapper>
diff --git a/src/components/dashboard-view.tsx b/src/components/dashboard-view.tsx
new file mode 100644
index 00000000..b42f1ede
--- /dev/null
+++ b/src/components/dashboard-view.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import type { Request } from "@/server/db/schema";
+import { CreditCard, PlusCircle } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { InvoiceTable } from "./invoice-table";
+import { Button } from "./ui/button";
+
+interface DashboardViewProps {
+  invoices: {
+    issuedByMe: { invoices: Request[]; total: number; outstanding: number };
+    issuedToMe: { invoices: Request[]; total: number; outstanding: number };
+  };
+}
+
+export function DashboardView({ invoices }: DashboardViewProps) {
+  const [selectedInvoices, setSelectedInvoices] = useState<Request[]>([]);
+  const [lastSelectedNetwork, setLastSelectedNetwork] = useState<string | null>(
+    null,
+  );
+
+  return (
+    <>
+      <div className="flex justify-between items-center mb-8">
+        <h1 className="text-4xl font-bold tracking-tight">Dashboard</h1>
+        <div className="flex items-center gap-2 ">
+          {selectedInvoices.length > 0 && (
+            <Button
+              variant="outline"
+              className="px-4 py-2 rounded-md flex items-center"
+            >
+              <CreditCard className="mr-2 h-4 w-4" />
+              Pay {selectedInvoices.length} invoices
+            </Button>
+          )}
+          <Link
+            href="/invoices/create"
+            className="bg-black hover:bg-zinc-800 text-white transition-colors px-4 py-2 rounded-md flex items-center"
+          >
+            <PlusCircle className="mr-2 h-4 w-4" />
+            Create Invoice
+          </Link>
+        </div>
+      </div>
+      <InvoiceTable
+        initialInvoices={invoices}
+        setSelectedInvoices={setSelectedInvoices}
+        selectedInvoices={selectedInvoices}
+        lastSelectedNetwork={lastSelectedNetwork}
+        setLastSelectedNetwork={setLastSelectedNetwork}
+      />
+    </>
+  );
+}
diff --git a/src/components/invoice-table.tsx b/src/components/invoice-table.tsx
index 4c279b79..6bba728b 100644
--- a/src/components/invoice-table.tsx
+++ b/src/components/invoice-table.tsx
@@ -2,6 +2,7 @@
 
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Table,
   TableBody,
@@ -10,6 +11,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { formatCurrencyLabel } from "@/lib/constants/currencies";
 import {
@@ -45,6 +47,10 @@ interface InvoiceTableProps {
     issuedByMe: InvoiceType;
     issuedToMe: InvoiceType;
   };
+  setSelectedInvoices: (invoices: Request[]) => void;
+  selectedInvoices: Request[];
+  lastSelectedNetwork: string | null;
+  setLastSelectedNetwork: (network: string | null) => void;
 }
 
 interface StatCardProps {
@@ -69,7 +75,13 @@ const StatCard = ({ title, value, icon }: StatCardProps) => (
   </Card>
 );
 
-export function InvoiceTable({ initialInvoices }: InvoiceTableProps) {
+export function InvoiceTable({
+  initialInvoices,
+  setSelectedInvoices,
+  selectedInvoices,
+  lastSelectedNetwork,
+  setLastSelectedNetwork,
+}: InvoiceTableProps) {
   const [receivablePage, setReceivablePage] = useState(1);
   const [payablePage, setPayablePage] = useState(1);
   const [activeTab, setActiveTab] = useState("sent");
@@ -170,6 +182,10 @@ export function InvoiceTable({ initialInvoices }: InvoiceTableProps) {
                           key={invoice.id}
                           invoice={invoice}
                           activeTab="sent"
+                          setSelectedInvoices={setSelectedInvoices}
+                          selectedInvoices={selectedInvoices}
+                          lastSelectedNetwork={lastSelectedNetwork}
+                          setLastSelectedNetwork={setLastSelectedNetwork}
                         />
                       ))
                   )}
@@ -211,6 +227,10 @@ export function InvoiceTable({ initialInvoices }: InvoiceTableProps) {
                           key={invoice.id}
                           invoice={invoice}
                           activeTab="received"
+                          setSelectedInvoices={setSelectedInvoices}
+                          selectedInvoices={selectedInvoices}
+                          lastSelectedNetwork={lastSelectedNetwork}
+                          setLastSelectedNetwork={setLastSelectedNetwork}
                         />
                       ))
                   )}
@@ -235,7 +255,18 @@ export function InvoiceTable({ initialInvoices }: InvoiceTableProps) {
 const InvoiceRow = ({
   invoice,
   activeTab,
-}: { invoice: Request; activeTab: "sent" | "received" }) => {
+  setSelectedInvoices,
+  selectedInvoices,
+  lastSelectedNetwork,
+  setLastSelectedNetwork,
+}: {
+  invoice: Request;
+  activeTab: "sent" | "received";
+  setSelectedInvoices: (invoices: Request[]) => void;
+  selectedInvoices: Request[];
+  lastSelectedNetwork: string | null;
+  setLastSelectedNetwork: (network: string) => void;
+}) => {
   const utils = api.useUtils();
   const dueDate = new Date(invoice.dueDate);
   const isOverdue = invoice.status === "pending" && isPast(dueDate);
@@ -260,8 +291,35 @@ const InvoiceRow = ({
     }
   };
 
+  const handleSelectInvoice = (isChecked: boolean) => {
+    if (isChecked) {
+      const invoiceNetwork = invoice.paymentCurrency.split("-")[1];
+      if (lastSelectedNetwork && invoiceNetwork !== lastSelectedNetwork) {
+        toast.error(
+          "You can only select invoices from the same network as the last selected invoice",
+        );
+        return false;
+      }
+      setSelectedInvoices([...selectedInvoices, invoice]);
+      setLastSelectedNetwork(invoiceNetwork);
+    } else {
+      setSelectedInvoices(selectedInvoices.filter((i) => i.id !== invoice.id));
+      if (selectedInvoices.length === 1) {
+        setLastSelectedNetwork(null);
+      }
+    }
+
+    return true;
+  };
+
   return (
     <TableRow className="hover:bg-zinc-50/50">
+      <TableCell>
+        <Checkbox
+          onCheckedChange={handleSelectInvoice}
+          checked={selectedInvoices.some((i) => i.id === invoice.id)}
+        />
+      </TableCell>
       <TableCell className="font-medium">
         <div className="flex flex-col">
           <span>{invoice.invoiceNumber}</span>
@@ -344,6 +402,7 @@ const InvoiceRow = ({
 // Update the table headers based on tab
 const TableColumns = ({ type }: { type: "sent" | "received" }) => (
   <TableRow className="hover:bg-transparent border-none">
+    <TableHead className="text-zinc-500 font-medium w-[1%]">Select</TableHead>
     <TableHead className="text-zinc-500 font-medium">Invoice #</TableHead>
     <TableHead className="text-zinc-500 font-medium">
       {type === "sent" ? "Client" : "From"}

From 16be0559e484054db05b0855452f964ef2779821 Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Tue, 3 Jun 2025 16:57:05 +0400
Subject: [PATCH 09/18] feat: Implement batch payment handling logic in
 BatchPayout and DashboardView components

---
 src/components/batch-payout.tsx   | 29 +++------------
 src/components/dashboard-view.tsx | 60 +++++++++++++++++++++++++++++++
 src/lib/invoice/batch-payment.ts  | 38 ++++++++++++++++++++
 src/server/routers/payment.ts     | 19 ++++++----
 4 files changed, 115 insertions(+), 31 deletions(-)
 create mode 100644 src/lib/invoice/batch-payment.ts

diff --git a/src/components/batch-payout.tsx b/src/components/batch-payout.tsx
index 989fc1f1..db35f152 100644
--- a/src/components/batch-payout.tsx
+++ b/src/components/batch-payout.tsx
@@ -57,6 +57,7 @@ import {
   formatCurrencyLabel,
   getPaymentCurrenciesForInvoice,
 } from "@/lib/constants/currencies";
+import { handleBatchPayment } from "@/lib/invoice/batch-payment";
 import {
   type BatchPaymentFormValues,
   batchPaymentFormSchema,
@@ -203,30 +204,10 @@ export function BatchPayout() {
         payer: address,
       });
 
-      toast.info("Initiating payment...");
-
-      const isApprovalNeeded =
-        batchPaymentData.ERC20ApprovalTransactions.length > 0;
-
-      if (isApprovalNeeded) {
-        toast.info("Approval required", {
-          description: "Please approve the transaction in your wallet",
-        });
-
-        for (const approvalTransaction of batchPaymentData.ERC20ApprovalTransactions) {
-          const tx = await signer.sendTransaction(approvalTransaction as any);
-          await tx.wait();
-        }
-      }
-
-      toast.info("Sending batch payment...");
-      const tx = await signer.sendTransaction(
-        batchPaymentData.batchPaymentTransaction as any,
-      );
-      await tx.wait();
-
-      toast.success("Batch payment successful", {
-        description: `Successfully processed ${data.payments.length} payments`,
+      await handleBatchPayment({
+        signer,
+        batchPaymentData,
+        invoicesCount: data.payments.length,
       });
 
       setPaymentStatus("success");
diff --git a/src/components/dashboard-view.tsx b/src/components/dashboard-view.tsx
index b42f1ede..909287f0 100644
--- a/src/components/dashboard-view.tsx
+++ b/src/components/dashboard-view.tsx
@@ -1,9 +1,18 @@
 "use client";
 
+import { handleBatchPayment } from "@/lib/invoice/batch-payment";
 import type { Request } from "@/server/db/schema";
+import { api } from "@/trpc/react";
+import {
+  useAppKit,
+  useAppKitAccount,
+  useAppKitProvider,
+} from "@reown/appkit/react";
+import { ethers } from "ethers";
 import { CreditCard, PlusCircle } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
+import { toast } from "sonner";
 import { InvoiceTable } from "./invoice-table";
 import { Button } from "./ui/button";
 
@@ -15,10 +24,59 @@ interface DashboardViewProps {
 }
 
 export function DashboardView({ invoices }: DashboardViewProps) {
+  const { mutateAsync: batchPay } = api.payment.batchPay.useMutation();
+
   const [selectedInvoices, setSelectedInvoices] = useState<Request[]>([]);
   const [lastSelectedNetwork, setLastSelectedNetwork] = useState<string | null>(
     null,
   );
+  const [isPayingInvoices, setIsPayingInvoices] = useState(false);
+
+  const { open } = useAppKit();
+  const { isConnected, address } = useAppKitAccount();
+  const { walletProvider } = useAppKitProvider("eip155");
+
+  const handleBatchPayInvoices = async () => {
+    setIsPayingInvoices(true);
+
+    if (!isConnected) {
+      open();
+      return setIsPayingInvoices(false);
+    }
+
+    try {
+      const ethersProvider = new ethers.providers.Web3Provider(
+        walletProvider as ethers.providers.ExternalProvider,
+      );
+
+      const signer = await ethersProvider.getSigner();
+
+      toast.info("Initiating batch payment...");
+
+      const requestIds = selectedInvoices.map((invoice) => invoice.requestId);
+
+      const batchPaymentData = await batchPay({
+        requestIds,
+        payer: address,
+      });
+
+      await handleBatchPayment({
+        signer,
+        batchPaymentData,
+        invoicesCount: selectedInvoices.length,
+      });
+
+      setSelectedInvoices([]);
+      setLastSelectedNetwork(null);
+    } catch (_err) {
+      toast.error("Payment failed", {
+        description:
+          "There was an error processing your payment. Please try again.",
+      });
+    } finally {
+      setIsPayingInvoices(false);
+    }
+  };
 
   return (
     <>
@@ -29,6 +87,8 @@ export function DashboardView({ invoices }: DashboardViewProps) {
             <Button
               variant="outline"
               className="px-4 py-2 rounded-md flex items-center"
+              onClick={handleBatchPayInvoices}
+              disabled={isPayingInvoices}
             >
               <CreditCard className="mr-2 h-4 w-4" />
               Pay {selectedInvoices.length} invoices
diff --git a/src/lib/invoice/batch-payment.ts b/src/lib/invoice/batch-payment.ts
new file mode 100644
index 00000000..67c2b8ab
--- /dev/null
+++ b/src/lib/invoice/batch-payment.ts
@@ -0,0 +1,38 @@
+import type { ethers } from "ethers";
+import { toast } from "sonner";
+
+export const handleBatchPayment = async ({
+  signer,
+  batchPaymentData,
+  invoicesCount,
+}: {
+  signer: ethers.Signer;
+  batchPaymentData: any;
+  invoicesCount: number;
+}) => {
+  toast.info("Initiating payment...");
+
+  const isApprovalNeeded =
+    batchPaymentData.ERC20ApprovalTransactions.length > 0;
+
+  if (isApprovalNeeded) {
+    toast.info("Approval required", {
+      description: "Please approve the transaction in your wallet",
+    });
+
+    for (const approvalTransaction of batchPaymentData.ERC20ApprovalTransactions) {
+      const tx = await signer.sendTransaction(approvalTransaction as any);
+      await tx.wait();
+    }
+  }
+
+  toast.info("Sending batch payment...");
+  const tx = await signer.sendTransaction(
+    batchPaymentData.batchPaymentTransaction as any,
+  );
+  await tx.wait();
+
+  toast.success("Batch payment successful", {
+    description: `Successfully processed ${invoicesCount} payments`,
+  });
+};
diff --git a/src/server/routers/payment.ts b/src/server/routers/payment.ts
index 69f22d66..8c861ab4 100644
--- a/src/server/routers/payment.ts
+++ b/src/server/routers/payment.ts
@@ -38,7 +38,9 @@ export const paymentRouter = router({
     }),
   batchPay: protectedProcedure
     .input(
-      batchPaymentFormSchema.extend({
+      z.object({
+        payments: batchPaymentFormSchema.shape.payments.optional(),
+        requestIds: z.array(z.string()).optional(),
         payer: z.string().optional(),
       }),
     )
@@ -53,12 +55,15 @@ export const paymentRouter = router({
       }
 
       const reponse = await apiClient.post("v2/payouts/batch", {
-        requests: input.payments.map((payment) => ({
-          amount: payment.amount.toString(),
-          payee: payment.payee,
-          invoiceCurrency: payment.invoiceCurrency,
-          paymentCurrency: payment.paymentCurrency,
-        })),
+        requests: input.payments
+          ? input.payments.map((payment) => ({
+              amount: payment.amount.toString(),
+              payee: payment.payee,
+              invoiceCurrency: payment.invoiceCurrency,
+              paymentCurrency: payment.paymentCurrency,
+            }))
+          : undefined,
+        requestIds: input.requestIds,
         payer: input.payer,
       });
 

From 732591613e989a70e5d38c56ecba465c48167ff9 Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Tue, 3 Jun 2025 17:04:02 +0400
Subject: [PATCH 10/18] fix: Update setLastSelectedNetwork type to accept null
 value in InvoiceRow component

---
 src/components/invoice-table.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/invoice-table.tsx b/src/components/invoice-table.tsx
index 6bba728b..172f2937 100644
--- a/src/components/invoice-table.tsx
+++ b/src/components/invoice-table.tsx
@@ -265,7 +265,7 @@ const InvoiceRow = ({
   setSelectedInvoices: (invoices: Request[]) => void;
   selectedInvoices: Request[];
   lastSelectedNetwork: string | null;
-  setLastSelectedNetwork: (network: string) => void;
+  setLastSelectedNetwork: (network: string | null) => void;
 }) => {
   const utils = api.useUtils();
   const dueDate = new Date(invoice.dueDate);

From fa57139d2ae70df412ee1e5c8dd0558835792506 Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Wed, 4 Jun 2025 12:15:13 +0400
Subject: [PATCH 11/18] feat: Add loading indicator and update button text in
 DashboardView; prevent selection of paid invoices in InvoiceRow

---
 src/components/dashboard-view.tsx | 14 +++++++++++---
 src/components/invoice-table.tsx  |  6 ++++++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/dashboard-view.tsx b/src/components/dashboard-view.tsx
index 909287f0..e8c50b92 100644
--- a/src/components/dashboard-view.tsx
+++ b/src/components/dashboard-view.tsx
@@ -9,7 +9,7 @@ import {
   useAppKitProvider,
 } from "@reown/appkit/react";
 import { ethers } from "ethers";
-import { CreditCard, PlusCircle } from "lucide-react";
+import { CreditCard, Loader2, PlusCircle } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -90,8 +90,16 @@ export function DashboardView({ invoices }: DashboardViewProps) {
               onClick={handleBatchPayInvoices}
               disabled={isPayingInvoices}
             >
-              <CreditCard className="mr-2 h-4 w-4" />
-              Pay {selectedInvoices.length} invoices
+              {isPayingInvoices ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <CreditCard className="mr-2 h-4 w-4" />
+              )}
+              {isPayingInvoices
+                ? "Paying..."
+                : `Pay ${selectedInvoices.length} ${
+                    selectedInvoices.length === 1 ? "Invoice" : "Invoices"
+                  }`}
             </Button>
           )}
           <Link
diff --git a/src/components/invoice-table.tsx b/src/components/invoice-table.tsx
index 172f2937..84b9097d 100644
--- a/src/components/invoice-table.tsx
+++ b/src/components/invoice-table.tsx
@@ -300,6 +300,12 @@ const InvoiceRow = ({
         );
         return false;
       }
+
+      if (invoice.status === "paid") {
+        toast.error("You can't select a paid invoice");
+        return false;
+      }
+
       setSelectedInvoices([...selectedInvoices, invoice]);
       setLastSelectedNetwork(invoiceNetwork);
     } else {

From e7b9980f7ab43b15831cc6fa80d3fdcf191866af Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Wed, 4 Jun 2025 14:56:02 +0400
Subject: [PATCH 12/18] refactor: streamline batch payment handling in
 BatchPayout and DashboardView components

- Introduced a new `handleBatchPayment` function to encapsulate batch payment logic, improving code reusability and readability.
- Updated `BatchPayout` and `DashboardView` components to utilize the new function, enhancing error handling and user feedback through toast notifications.
- Removed redundant code and improved state management during payment processing.
---
 src/components/batch-payout.tsx   | 150 ++++++----------------------
 src/components/dashboard-view.tsx |  31 +++---
 src/lib/invoice/batch-payment.ts  | 161 ++++++++++++++++++++++++++----
 3 files changed, 187 insertions(+), 155 deletions(-)

diff --git a/src/components/batch-payout.tsx b/src/components/batch-payout.tsx
index 567480bd..be6d2ccc 100644
--- a/src/components/batch-payout.tsx
+++ b/src/components/batch-payout.tsx
@@ -55,6 +55,7 @@ import {
   formatCurrencyLabel,
   getPaymentCurrenciesForPayout,
 } from "@/lib/constants/currencies";
+import { handleBatchPayment } from "@/lib/invoice/batch-payment";
 import {
   type BatchPaymentFormValues,
   batchPaymentFormSchema,
@@ -187,8 +188,6 @@ export function BatchPayout() {
       return;
     }
 
-    setPaymentStatus("processing");
-
     if (!walletProvider) {
       toast.error("Please connect your wallet first");
       return;
@@ -196,134 +195,43 @@ export function BatchPayout() {
 
     try {
       const ethersProvider = new ethers.providers.Web3Provider(walletProvider);
-
       const signer = await ethersProvider.getSigner();
 
-      toast.info("Initiating batch payment...");
-
       const batchPaymentData = await batchPay({
         ...data,
         payer: address,
       });
 
-      toast.info("Initiating payment...");
-
-      const isApprovalNeeded =
-        batchPaymentData.ERC20ApprovalTransactions.length > 0;
-
-      if (isApprovalNeeded) {
-        toast.info("Approval required", {
-          description: "Please approve the transaction in your wallet",
-        });
-
-        for (const approvalTransaction of batchPaymentData.ERC20ApprovalTransactions) {
-          try {
-            const tx = await signer.sendTransaction(approvalTransaction);
-            await tx.wait();
-          } catch (approvalError: any) {
-            if (approvalError?.code === 4001) {
-              toast.error("Approval rejected", {
-                description: "You rejected the token approval in your wallet.",
-              });
-              setPaymentStatus("error");
-              return;
-            }
-            throw approvalError; // Re-throw to be caught by main error handler
-          }
-        }
-      }
-
-      toast.info("Sending batch payment...");
-
-      try {
-        const tx = await signer.sendTransaction(
-          batchPaymentData.batchPaymentTransaction,
-        );
-        await tx.wait();
-
-        toast.success("Batch payment successful", {
-          description: `Successfully processed ${data.payouts.length} payments`,
-        });
-
-        setPaymentStatus("success");
-
-        form.reset({
-          payouts: [
-            {
-              payee: "",
-              amount: 0,
-              invoiceCurrency: "USD",
-              paymentCurrency: "ETH-sepolia-sepolia",
-            },
-          ],
-        });
-        setPaymentStatus("idle");
-      } catch (txError: any) {
-        if (txError?.code === 4001) {
-          toast.error("Transaction rejected", {
-            description: "You rejected the batch payment in your wallet.",
+      const result = await handleBatchPayment({
+        signer,
+        batchPaymentData,
+        onSuccess: () => {
+          toast.success("Batch payment successful", {
+            description: `Successfully processed ${data.payouts.length} payments`,
           });
-        } else {
-          throw txError; // Re-throw to be caught by main error handler
-        }
-        setPaymentStatus("error");
-      }
-    } catch (error: any) {
-      console.error("Payment error:", error);
-
-      if (
-        error?.code === "INSUFFICIENT_FUNDS" ||
-        error?.message?.toLowerCase().includes("insufficient funds") ||
-        (error?.code === "SERVER_ERROR" && error?.error?.code === -32000)
-      ) {
-        toast.error("Insufficient funds", {
-          description:
-            "You do not have enough funds to complete this batch payment.",
-        });
-      } else if (
-        error?.message?.toLowerCase().includes("network") ||
-        error?.code === "NETWORK_ERROR" ||
-        error?.code === "NETWORK_ERROR" ||
-        (error?.event === "error" && error?.type === "network")
-      ) {
-        toast.error("Network error", {
-          description:
-            "Network error. Please check your connection and try again.",
-        });
-      } else if (error?.reason) {
-        toast.error("Transaction failed", {
-          description: `Smart contract error: ${error.reason}`,
-        });
-      } else {
-        let errorMessage =
-          "There was an error processing your batch payment. Please try again.";
-
-        if (error && typeof error === "object") {
-          if (
-            "data" in error &&
-            error.data &&
-            typeof error.data === "object" &&
-            "message" in error.data
-          ) {
-            errorMessage = error.data.message || errorMessage;
-          } else if ("message" in error) {
-            errorMessage = error.message || errorMessage;
-          } else if ("response" in error && error.response?.data?.message) {
-            errorMessage = error.response.data.message;
-          } else if (
-            "error" in error &&
-            typeof error.error === "object" &&
-            error.error &&
-            "message" in error.error
-          ) {
-            errorMessage = error.error.message;
-          }
-        }
-
-        toast.error("Batch payment failed", {
-          description: errorMessage,
-        });
+          form.reset({
+            payouts: [
+              {
+                payee: "",
+                amount: 0,
+                invoiceCurrency: "USD",
+                paymentCurrency: "ETH-sepolia-sepolia",
+              },
+            ],
+          });
+          setPaymentStatus("idle");
+        },
+        onError: () => {
+          setPaymentStatus("error");
+        },
+        onStatusChange: setPaymentStatus,
+      });
+
+      if (!result.success) {
+        console.error("Batch payment failed:", result.error);
       }
+    } catch (error) {
+      console.error("Failed to initiate batch payment:", error);
       setPaymentStatus("error");
     }
   };
diff --git a/src/components/dashboard-view.tsx b/src/components/dashboard-view.tsx
index e8c50b92..ac1f5ce5 100644
--- a/src/components/dashboard-view.tsx
+++ b/src/components/dashboard-view.tsx
@@ -51,8 +51,6 @@ export function DashboardView({ invoices }: DashboardViewProps) {
 
       const signer = await ethersProvider.getSigner();
 
-      toast.info("Initiating batch payment...");
-
       const requestIds = selectedInvoices.map((invoice) => invoice.requestId);
 
       const batchPaymentData = await batchPay({
@@ -60,20 +58,29 @@ export function DashboardView({ invoices }: DashboardViewProps) {
         payer: address,
       });
 
-      await handleBatchPayment({
+      const result = await handleBatchPayment({
         signer,
         batchPaymentData,
-        invoicesCount: selectedInvoices.length,
+        onSuccess: () => {
+          toast.success("Batch payment successful", {
+            description: `Successfully processed ${selectedInvoices.length} invoices`,
+          });
+          setSelectedInvoices([]);
+          setLastSelectedNetwork(null);
+        },
+        onError: () => {
+          setIsPayingInvoices(false);
+        },
+        onStatusChange: (status) => {
+          setIsPayingInvoices(status === "processing");
+        },
       });
 
-      setSelectedInvoices([]);
-      setLastSelectedNetwork(null);
-    } catch (_err) {
-      toast.error("Payment failed", {
-        description:
-          "There was an error processing your payment. Please try again.",
-      });
-    } finally {
+      if (!result.success) {
+        console.error("Batch payment failed:", result.error);
+      }
+    } catch (error) {
+      console.error("Failed to initiate batch payment:", error);
       setIsPayingInvoices(false);
     }
   };
diff --git a/src/lib/invoice/batch-payment.ts b/src/lib/invoice/batch-payment.ts
index 67c2b8ab..89894794 100644
--- a/src/lib/invoice/batch-payment.ts
+++ b/src/lib/invoice/batch-payment.ts
@@ -1,38 +1,155 @@
 import type { ethers } from "ethers";
 import { toast } from "sonner";
 
+interface BatchPaymentResult {
+  success: boolean;
+  error?: string;
+}
+
+export interface BatchPaymentData {
+  ERC20ApprovalTransactions: any[];
+  batchPaymentTransaction: any;
+}
+
 export const handleBatchPayment = async ({
   signer,
   batchPaymentData,
-  invoicesCount,
+  onSuccess,
+  onError,
+  onStatusChange,
 }: {
   signer: ethers.Signer;
-  batchPaymentData: any;
-  invoicesCount: number;
-}) => {
-  toast.info("Initiating payment...");
+  batchPaymentData: BatchPaymentData;
+  onSuccess?: () => void;
+  onError?: () => void;
+  onStatusChange?: (
+    status: "processing" | "success" | "error" | "idle",
+  ) => void;
+}): Promise<BatchPaymentResult> => {
+  try {
+    onStatusChange?.("processing");
+    toast.info("Initiating payment...");
 
-  const isApprovalNeeded =
-    batchPaymentData.ERC20ApprovalTransactions.length > 0;
+    const isApprovalNeeded =
+      batchPaymentData.ERC20ApprovalTransactions.length > 0;
 
-  if (isApprovalNeeded) {
-    toast.info("Approval required", {
-      description: "Please approve the transaction in your wallet",
-    });
+    if (isApprovalNeeded) {
+      toast.info("Approval required", {
+        description: "Please approve the transaction in your wallet",
+      });
+
+      for (const approvalTransaction of batchPaymentData.ERC20ApprovalTransactions) {
+        try {
+          const tx = await signer.sendTransaction(approvalTransaction);
+          await tx.wait();
+        } catch (approvalError: any) {
+          if (approvalError?.code === 4001) {
+            toast.error("Approval rejected", {
+              description: "You rejected the token approval in your wallet.",
+            });
+            onStatusChange?.("error");
+            onError?.();
+            return { success: false, error: "approval_rejected" };
+          }
+          throw approvalError;
+        }
+      }
+    }
 
-    for (const approvalTransaction of batchPaymentData.ERC20ApprovalTransactions) {
-      const tx = await signer.sendTransaction(approvalTransaction as any);
+    toast.info("Sending batch payment...");
+
+    try {
+      const tx = await signer.sendTransaction(
+        batchPaymentData.batchPaymentTransaction,
+      );
       await tx.wait();
+
+      onStatusChange?.("success");
+      onSuccess?.();
+
+      return { success: true };
+    } catch (txError: any) {
+      if (txError?.code === 4001) {
+        toast.error("Transaction rejected", {
+          description: "You rejected the batch payment in your wallet.",
+        });
+        onStatusChange?.("error");
+        onError?.();
+        return { success: false, error: "transaction_rejected" };
+      }
+      throw txError;
+    }
+  } catch (error: any) {
+    console.error("Payment error:", error);
+
+    if (
+      error?.code === "INSUFFICIENT_FUNDS" ||
+      error?.message?.toLowerCase().includes("insufficient funds") ||
+      (error?.code === "SERVER_ERROR" && error?.error?.code === -32000)
+    ) {
+      toast.error("Insufficient funds", {
+        description:
+          "You do not have enough funds to complete this batch payment.",
+      });
+      onStatusChange?.("error");
+      onError?.();
+      return { success: false, error: "insufficient_funds" };
+    }
+
+    if (
+      error?.message?.toLowerCase().includes("network") ||
+      error?.code === "NETWORK_ERROR" ||
+      (error?.event === "error" && error?.type === "network")
+    ) {
+      toast.error("Network error", {
+        description:
+          "Network error. Please check your connection and try again.",
+      });
+      onStatusChange?.("error");
+      onError?.();
+      return { success: false, error: "network_error" };
+    }
+
+    if (error?.reason) {
+      toast.error("Transaction failed", {
+        description: `Smart contract error: ${error.reason}`,
+      });
+      onStatusChange?.("error");
+      onError?.();
+      return { success: false, error: "contract_error" };
     }
-  }
 
-  toast.info("Sending batch payment...");
-  const tx = await signer.sendTransaction(
-    batchPaymentData.batchPaymentTransaction as any,
-  );
-  await tx.wait();
+    let errorMessage =
+      "There was an error processing your batch payment. Please try again.";
 
-  toast.success("Batch payment successful", {
-    description: `Successfully processed ${invoicesCount} payments`,
-  });
+    if (error && typeof error === "object") {
+      if (
+        "data" in error &&
+        error.data &&
+        typeof error.data === "object" &&
+        "message" in error.data
+      ) {
+        errorMessage = error.data.message || errorMessage;
+      } else if ("message" in error) {
+        errorMessage = error.message || errorMessage;
+      } else if ("response" in error && error.response?.data?.message) {
+        errorMessage = error.response.data.message;
+      } else if (
+        "error" in error &&
+        typeof error.error === "object" &&
+        error.error &&
+        "message" in error.error
+      ) {
+        errorMessage = error.error.message;
+      }
+    }
+
+    toast.error("Batch payment failed", {
+      description: errorMessage,
+    });
+
+    onStatusChange?.("error");
+    onError?.();
+    return { success: false, error: "unknown_error" };
+  }
 };

From 1855a340ed6f348a2774551880c4b878fef8b8d9 Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Wed, 4 Jun 2025 14:57:30 +0400
Subject: [PATCH 13/18] refactor: replace extended invoice currency references
 with standard invoice currencies

- Updated the invoice form and schema to use `INVOICE_CURRENCIES` instead of `EXTENDED_INVOICE_CURRENCIES`, ensuring consistency across the application.
- Adjusted type definitions for invoice currency to reflect the change, improving type safety and clarity.
---
 src/components/invoice-form.tsx | 8 ++++----
 src/lib/schemas/invoice.ts      | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/invoice-form.tsx b/src/components/invoice-form.tsx
index 5eecbed8..040c40e0 100644
--- a/src/components/invoice-form.tsx
+++ b/src/components/invoice-form.tsx
@@ -21,8 +21,8 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 import { PaymentDetailsStatus as PaymentDetailsStatusEnum } from "@/lib/constants/bank-account";
 import {
-  EXTENDED_INVOICE_CURRENCIES,
-  type ExtendedInvoiceCurrency,
+  INVOICE_CURRENCIES,
+  type InvoiceCurrency,
   MAINNET_CURRENCIES,
   type MainnetCurrency,
   formatCurrencyLabel,
@@ -839,7 +839,7 @@ export function InvoiceForm({
           <Label htmlFor="invoiceCurrency">Invoice Currency</Label>
           <Select
             onValueChange={(value) => {
-              const currency = value as ExtendedInvoiceCurrency;
+              const currency = value as InvoiceCurrency;
               form.setValue("invoiceCurrency", currency);
               // If not USD, set payment currency to same as invoice currency
               if (currency !== "USD") {
@@ -852,7 +852,7 @@ export function InvoiceForm({
               <SelectValue placeholder="Select invoice currency" />
             </SelectTrigger>
             <SelectContent>
-              {EXTENDED_INVOICE_CURRENCIES.map((currency) => (
+              {INVOICE_CURRENCIES.map((currency) => (
                 <SelectItem key={currency} value={currency}>
                   {formatCurrencyLabel(currency)}
                   {currency === "fUSDC-sepolia" && (
diff --git a/src/lib/schemas/invoice.ts b/src/lib/schemas/invoice.ts
index 0bce91f1..069a8313 100644
--- a/src/lib/schemas/invoice.ts
+++ b/src/lib/schemas/invoice.ts
@@ -1,4 +1,4 @@
-import { EXTENDED_INVOICE_CURRENCIES } from "@/lib/constants/currencies";
+import { INVOICE_CURRENCIES } from "@/lib/constants/currencies";
 import { isEthereumAddress } from "validator";
 import { z } from "zod";
 
@@ -21,7 +21,7 @@ export const invoiceFormSchema = z
       )
       .min(1, "At least one item is required"),
     notes: z.string().optional(),
-    invoiceCurrency: z.enum(EXTENDED_INVOICE_CURRENCIES, {
+    invoiceCurrency: z.enum(INVOICE_CURRENCIES, {
       required_error: "Please select an invoice currency",
     }),
     paymentCurrency: z.string().min(1, "Payment currency is required"),

From 395ed008bbf1a40bec681de0fb9f25a84d50316e Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Wed, 4 Jun 2025 15:54:39 +0400
Subject: [PATCH 14/18] feat: enhance network switching functionality in
 DashboardView component

- Integrated `useAppKitNetwork` to manage network switching during batch payments.
- Added logic to switch networks based on the last selected network, improving user experience with toast notifications for network changes.
- Updated constants in `chains.ts` to support new network mappings.
---
 src/components/dashboard-view.tsx | 22 ++++++++++++++++++++++
 src/lib/constants/chains.ts       | 10 ++++++++++
 2 files changed, 32 insertions(+)

diff --git a/src/components/dashboard-view.tsx b/src/components/dashboard-view.tsx
index ac1f5ce5..1c4731e9 100644
--- a/src/components/dashboard-view.tsx
+++ b/src/components/dashboard-view.tsx
@@ -1,11 +1,13 @@
 "use client";
 
+import { ID_TO_APPKIT_NETWORK, NETWORK_TO_ID } from "@/lib/constants/chains";
 import { handleBatchPayment } from "@/lib/invoice/batch-payment";
 import type { Request } from "@/server/db/schema";
 import { api } from "@/trpc/react";
 import {
   useAppKit,
   useAppKitAccount,
+  useAppKitNetwork,
   useAppKitProvider,
 } from "@reown/appkit/react";
 import { ethers } from "ethers";
@@ -35,6 +37,7 @@ export function DashboardView({ invoices }: DashboardViewProps) {
   const { open } = useAppKit();
   const { isConnected, address } = useAppKitAccount();
   const { walletProvider } = useAppKitProvider("eip155");
+  const { chainId, switchNetwork } = useAppKitNetwork();
 
   const handleBatchPayInvoices = async () => {
     setIsPayingInvoices(true);
@@ -44,6 +47,25 @@ export function DashboardView({ invoices }: DashboardViewProps) {
       return setIsPayingInvoices(false);
     }
 
+    const targetChain =
+      NETWORK_TO_ID[lastSelectedNetwork as keyof typeof NETWORK_TO_ID];
+
+    if (targetChain !== chainId) {
+      const targetAppkitNetwork =
+        ID_TO_APPKIT_NETWORK[targetChain as keyof typeof ID_TO_APPKIT_NETWORK];
+
+      toast("Switching to network", {
+        description: `Switching to ${targetAppkitNetwork.name} network`,
+      });
+
+      try {
+        await switchNetwork(targetAppkitNetwork);
+      } catch (_) {
+        toast("Error switching network");
+        return;
+      }
+    }
+
     try {
       const ethersProvider = new ethers.providers.Web3Provider(
         walletProvider as ethers.providers.ExternalProvider,
diff --git a/src/lib/constants/chains.ts b/src/lib/constants/chains.ts
index b36a4f19..664b0bbd 100644
--- a/src/lib/constants/chains.ts
+++ b/src/lib/constants/chains.ts
@@ -16,6 +16,16 @@ export const CHAIN_TO_ID = {
   POLYGON: 137,
 };
 
+export const NETWORK_TO_ID = {
+  matic: 137,
+  base: 8453,
+  "arbitrum-one": 42161,
+  arbitrum: 42161,
+  optimism: 10,
+  mainnet: 1,
+  sepolia: 11155111,
+};
+
 export const ID_TO_APPKIT_NETWORK = {
   [sepolia.id]: sepolia,
   [base.id]: base,

From ca82d802a8857c42c4652857bc74009db4475454 Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Wed, 4 Jun 2025 15:57:00 +0400
Subject: [PATCH 15/18] refactor: enhance type definitions for batch payment
 handling

- Updated `BatchPaymentData` interface to use `providers.TransactionRequest` for improved type safety.
- Added validation to the `batchPay` input schema to ensure either `payouts` or `requestIds` is provided, enhancing input integrity.
---
 src/lib/invoice/batch-payment.ts |  6 +++---
 src/server/routers/payment.ts    | 14 +++++++++-----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/lib/invoice/batch-payment.ts b/src/lib/invoice/batch-payment.ts
index 89894794..978dc729 100644
--- a/src/lib/invoice/batch-payment.ts
+++ b/src/lib/invoice/batch-payment.ts
@@ -1,4 +1,4 @@
-import type { ethers } from "ethers";
+import type { ethers, providers } from "ethers";
 import { toast } from "sonner";
 
 interface BatchPaymentResult {
@@ -7,8 +7,8 @@ interface BatchPaymentResult {
 }
 
 export interface BatchPaymentData {
-  ERC20ApprovalTransactions: any[];
-  batchPaymentTransaction: any;
+  ERC20ApprovalTransactions: providers.TransactionRequest[];
+  batchPaymentTransaction: providers.TransactionRequest;
 }
 
 export const handleBatchPayment = async ({
diff --git a/src/server/routers/payment.ts b/src/server/routers/payment.ts
index 23b2f3fa..56eace4e 100644
--- a/src/server/routers/payment.ts
+++ b/src/server/routers/payment.ts
@@ -38,11 +38,15 @@ export const paymentRouter = router({
     }),
   batchPay: protectedProcedure
     .input(
-      z.object({
-        payouts: batchPaymentFormSchema.shape.payouts.optional(),
-        requestIds: z.array(z.string()).optional(),
-        payer: z.string().optional(),
-      }),
+      z
+        .object({
+          payouts: batchPaymentFormSchema.shape.payouts.optional(),
+          requestIds: z.array(z.string()).optional(),
+          payer: z.string().optional(),
+        })
+        .refine((data) => data.payouts || data.requestIds, {
+          message: "Either payouts or requestIds must be provided",
+        }),
     )
     .mutation(async ({ ctx, input }) => {
       const { user } = ctx;

From 63a8034c6437a8b150e1b816bee4f74477167d93 Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Thu, 5 Jun 2025 09:24:27 +0400
Subject: [PATCH 16/18] refactor: improve batch payout calculations and
 streamline payment handling

- Updated `duplicatePayment` function to remove unnecessary payee reset.
- Enhanced `getUniquePayeesCount` to handle payee addresses in a case-insensitive manner.
- Modified `getTotalsByCurrency` to return human-readable totals instead of BigNumber, improving display clarity.
- Simplified signer retrieval in `BatchPayout`, `DirectPayment`, and `PaymentSection` components for consistency.
---
 src/components/batch-payout.tsx    | 25 +++++++++++++++++--------
 src/components/direct-payout.tsx   |  2 +-
 src/components/payment-section.tsx |  2 +-
 src/server/routers/invoice.ts      |  2 +-
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/batch-payout.tsx b/src/components/batch-payout.tsx
index be6d2ccc..7f996655 100644
--- a/src/components/batch-payout.tsx
+++ b/src/components/batch-payout.tsx
@@ -147,7 +147,7 @@ export function BatchPayout() {
   const duplicatePayment = (index: number) => {
     if (fields.length < MAX_PAYMENTS) {
       const payout = form.getValues(`payouts.${index}`);
-      append({ ...payout, payee: "" });
+      append({ ...payout });
     }
   };
 
@@ -161,7 +161,7 @@ export function BatchPayout() {
     const uniqueAddresses = new Set(
       payouts
         .filter((payout) => payout.payee)
-        .map((payout) => ethers.utils.getAddress(payout.payee)),
+        .map((payout) => payout.payee.toLowerCase()),
     );
     return uniqueAddresses.size;
   };
@@ -169,17 +169,27 @@ export function BatchPayout() {
   const getTotalsByCurrency = () => {
     const payouts = form.watch("payouts");
     const totals: Record<string, ethers.BigNumber> = {};
+
     for (const payout of payouts) {
       if (payout.amount > 0) {
         const currency = payout.invoiceCurrency;
-        // Convert amount to BigNumber with 18 decimals of precision
+
         const amount = ethers.utils.parseUnits(payout.amount.toString(), 18);
         totals[currency] = (totals[currency] || ethers.BigNumber.from(0)).add(
           amount,
         );
       }
     }
-    return totals;
+
+    const humanReadableTotals: Record<string, string> = {};
+    for (const [currency, bigNumberTotal] of Object.entries(totals)) {
+      humanReadableTotals[currency] = ethers.utils.formatUnits(
+        bigNumberTotal,
+        18,
+      );
+    }
+
+    return humanReadableTotals;
   };
 
   const onSubmit = async (data: BatchPaymentFormValues) => {
@@ -195,7 +205,8 @@ export function BatchPayout() {
 
     try {
       const ethersProvider = new ethers.providers.Web3Provider(walletProvider);
-      const signer = await ethersProvider.getSigner();
+
+      const signer = ethersProvider.getSigner();
 
       const batchPaymentData = await batchPay({
         ...data,
@@ -534,9 +545,7 @@ export function BatchPayout() {
                                   <span className="text-zinc-600">
                                     {formatCurrencyLabel(currency)}:
                                   </span>
-                                  <span className="font-medium">
-                                    {ethers.utils.formatUnits(total, 18)}
-                                  </span>
+                                  <span className="font-medium">{total}</span>
                                 </div>
                               ),
                             )
diff --git a/src/components/direct-payout.tsx b/src/components/direct-payout.tsx
index 0350a6d9..a87db7b1 100644
--- a/src/components/direct-payout.tsx
+++ b/src/components/direct-payout.tsx
@@ -120,7 +120,7 @@ export function DirectPayment() {
         walletProvider as ethers.providers.ExternalProvider,
       );
 
-      const signer = await ethersProvider.getSigner();
+      const signer = ethersProvider.getSigner();
 
       toast.info("Initiating payment...");
 
diff --git a/src/components/payment-section.tsx b/src/components/payment-section.tsx
index 27f73eab..7b701fd2 100644
--- a/src/components/payment-section.tsx
+++ b/src/components/payment-section.tsx
@@ -317,7 +317,7 @@ export function PaymentSection({ invoice }: PaymentSectionProps) {
       walletProvider as ethers.providers.ExternalProvider,
     );
 
-    const signer = await ethersProvider.getSigner();
+    const signer = ethersProvider.getSigner();
 
     try {
       const paymentData = await payRequest({
diff --git a/src/server/routers/invoice.ts b/src/server/routers/invoice.ts
index e575e133..ecd4e1fb 100644
--- a/src/server/routers/invoice.ts
+++ b/src/server/routers/invoice.ts
@@ -401,7 +401,7 @@ export const invoiceRouter = router({
       const { paymentIntent, payload } = input;
 
       const response = await apiClient.post(
-        `/v2/request/${paymentIntent}/send`,
+        `/v2/request/payment-intents/${paymentIntent}`,
         payload,
       );
 

From af3e3e582db58454d3332077a55bd47317c1607a Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Thu, 5 Jun 2025 09:25:21 +0400
Subject: [PATCH 17/18] fix: handle network selection errors in DashboardView
 component

- Added validation to check for a selected network before proceeding with batch payments.
- Implemented error handling to notify users when no network is selected, improving user experience.
- Updated network switching logic to ensure proper state management during payment processing.
---
 src/components/dashboard-view.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/dashboard-view.tsx b/src/components/dashboard-view.tsx
index 1c4731e9..fed46111 100644
--- a/src/components/dashboard-view.tsx
+++ b/src/components/dashboard-view.tsx
@@ -47,6 +47,12 @@ export function DashboardView({ invoices }: DashboardViewProps) {
       return setIsPayingInvoices(false);
     }
 
+    if (!lastSelectedNetwork) {
+      toast.error("No network selected for batch payment");
+      setIsPayingInvoices(false);
+      return;
+    }
+
     const targetChain =
       NETWORK_TO_ID[lastSelectedNetwork as keyof typeof NETWORK_TO_ID];
 
@@ -59,9 +65,10 @@ export function DashboardView({ invoices }: DashboardViewProps) {
       });
 
       try {
-        await switchNetwork(targetAppkitNetwork);
+        switchNetwork(targetAppkitNetwork);
       } catch (_) {
         toast("Error switching network");
+        setIsPayingInvoices(false);
         return;
       }
     }

From 8207c3610d6d43e5af24b4b0084109efe5a032de Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Thu, 5 Jun 2025 09:26:18 +0400
Subject: [PATCH 18/18] refactor: streamline error handling in batch payment
 process

- Removed toast notifications for various error states during batch payment processing to simplify user feedback.
- Enhanced the error handling logic to focus on status changes without displaying redundant messages, improving code clarity and maintainability.
---
 src/lib/invoice/batch-payment.ts | 29 -----------------------------
 1 file changed, 29 deletions(-)

diff --git a/src/lib/invoice/batch-payment.ts b/src/lib/invoice/batch-payment.ts
index 978dc729..d8e6fb60 100644
--- a/src/lib/invoice/batch-payment.ts
+++ b/src/lib/invoice/batch-payment.ts
@@ -1,5 +1,4 @@
 import type { ethers, providers } from "ethers";
-import { toast } from "sonner";
 
 interface BatchPaymentResult {
   success: boolean;
@@ -28,25 +27,17 @@ export const handleBatchPayment = async ({
 }): Promise<BatchPaymentResult> => {
   try {
     onStatusChange?.("processing");
-    toast.info("Initiating payment...");
 
     const isApprovalNeeded =
       batchPaymentData.ERC20ApprovalTransactions.length > 0;
 
     if (isApprovalNeeded) {
-      toast.info("Approval required", {
-        description: "Please approve the transaction in your wallet",
-      });
-
       for (const approvalTransaction of batchPaymentData.ERC20ApprovalTransactions) {
         try {
           const tx = await signer.sendTransaction(approvalTransaction);
           await tx.wait();
         } catch (approvalError: any) {
           if (approvalError?.code === 4001) {
-            toast.error("Approval rejected", {
-              description: "You rejected the token approval in your wallet.",
-            });
             onStatusChange?.("error");
             onError?.();
             return { success: false, error: "approval_rejected" };
@@ -56,8 +47,6 @@ export const handleBatchPayment = async ({
       }
     }
 
-    toast.info("Sending batch payment...");
-
     try {
       const tx = await signer.sendTransaction(
         batchPaymentData.batchPaymentTransaction,
@@ -70,9 +59,6 @@ export const handleBatchPayment = async ({
       return { success: true };
     } catch (txError: any) {
       if (txError?.code === 4001) {
-        toast.error("Transaction rejected", {
-          description: "You rejected the batch payment in your wallet.",
-        });
         onStatusChange?.("error");
         onError?.();
         return { success: false, error: "transaction_rejected" };
@@ -87,10 +73,6 @@ export const handleBatchPayment = async ({
       error?.message?.toLowerCase().includes("insufficient funds") ||
       (error?.code === "SERVER_ERROR" && error?.error?.code === -32000)
     ) {
-      toast.error("Insufficient funds", {
-        description:
-          "You do not have enough funds to complete this batch payment.",
-      });
       onStatusChange?.("error");
       onError?.();
       return { success: false, error: "insufficient_funds" };
@@ -101,19 +83,12 @@ export const handleBatchPayment = async ({
       error?.code === "NETWORK_ERROR" ||
       (error?.event === "error" && error?.type === "network")
     ) {
-      toast.error("Network error", {
-        description:
-          "Network error. Please check your connection and try again.",
-      });
       onStatusChange?.("error");
       onError?.();
       return { success: false, error: "network_error" };
     }
 
     if (error?.reason) {
-      toast.error("Transaction failed", {
-        description: `Smart contract error: ${error.reason}`,
-      });
       onStatusChange?.("error");
       onError?.();
       return { success: false, error: "contract_error" };
@@ -144,10 +119,6 @@ export const handleBatchPayment = async ({
       }
     }
 
-    toast.error("Batch payment failed", {
-      description: errorMessage,
-    });
-
     onStatusChange?.("error");
     onError?.();
     return { success: false, error: "unknown_error" };