fix: bugs

package.json

@@ -31,7 +31,7 @@
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.3",
-    "@radix-ui/react-tooltip": "^1.2.7",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@reown/appkit": "^1.6.8",
     "@reown/appkit-adapter-ethers5": "^1.6.8",
     "@tanstack/react-query": "^4.36.1",

src/components/batch-payout.tsx

@@ -49,13 +49,16 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table/table";
+
 import {
   PAYOUT_CURRENCIES,
   type PayoutCurrency,
   formatCurrencyLabel,
   getPaymentCurrenciesForPayout,
 } from "@/lib/constants/currencies";
 import { handleBatchPayment } from "@/lib/helpers/batch-payment";
+
+import { useSwitchNetwork } from "@/lib/hooks/use-switch-network";
 import { payoutSchema } from "@/lib/schemas/payment";
 import { api } from "@/trpc/react";
 import { z } from "zod";
@@ -74,6 +77,7 @@ export type BatchPaymentFormValues = z.infer<typeof batchPaymentFormSchema>;
 
 export function BatchPayout() {
   const { mutateAsync: batchPay } = api.payment.batchPay.useMutation();
+  const { switchToPaymentNetwork } = useSwitchNetwork();
 
   const [paymentStatus, setPaymentStatus] = useState<
     "idle" | "processing" | "success" | "error"
@@ -211,6 +215,8 @@ export function BatchPayout() {
       return;
     }
 
+    switchToPaymentNetwork(data.payouts[0].paymentCurrency);
+
     try {
       const ethersProvider = new ethers.providers.Web3Provider(walletProvider);
 

src/components/create-recurring-payment/blocks/create-recurring-payment-form.tsx

@@ -20,11 +20,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+
 import {
   RECURRING_PAYMENT_CURRENCIES,
   formatCurrencyLabel,
 } from "@/lib/constants/currencies";
+
 import { useCreateRecurringPayment } from "@/lib/hooks/use-create-recurring-payment";
+import { useSwitchNetwork } from "@/lib/hooks/use-switch-network";
 import { paymentApiSchema } from "@/lib/schemas/payment";
 import { RecurrenceFrequency } from "@/server/db/schema";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -51,6 +54,8 @@ type RecurringPaymentFormValues = z.infer<typeof recurringPaymentFormSchema>;
 export function CreateRecurringPaymentForm() {
   const router = useRouter();
 
+  const { switchToPaymentNetwork } = useSwitchNetwork();
+
   const { address, isConnected } = useAppKitAccount();
   const { open } = useAppKit();
   const { walletProvider } = useAppKitProvider("eip155");
@@ -91,6 +96,8 @@ export function CreateRecurringPaymentForm() {
       return;
     }
 
+    switchToPaymentNetwork(data.invoiceCurrency);
+
     const recurringPaymentCurrency = data.invoiceCurrency;
     const recurringPaymentBody = {
       payee: data.payee,

src/components/dashboard/invoices-received.tsx

@@ -10,18 +10,18 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table/table";
-import { ID_TO_APPKIT_NETWORK, NETWORK_TO_ID } from "@/lib/constants/chains";
+import { NETWORK_TO_ID } from "@/lib/constants/chains";
 import { handleBatchPayment } from "@/lib/helpers/batch-payment";
 import {
   calculateTotalsByCurrency,
   formatCurrencyTotals,
 } from "@/lib/helpers/currency";
+import { useSwitchNetwork } from "@/lib/hooks/use-switch-network";
 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";
@@ -73,7 +73,7 @@ export const InvoicesReceived = ({
   const { open } = useAppKit();
   const { isConnected, address } = useAppKitAccount();
   const { walletProvider } = useAppKitProvider("eip155");
-  const { chainId, switchNetwork } = useAppKitNetwork();
+  const { switchToChainId } = useSwitchNetwork();
 
   const { data: invoices } = api.invoice.getAllIssuedToMe.useQuery(undefined, {
     initialData: initialReceivedInvoices,
@@ -134,27 +134,12 @@ export const InvoicesReceived = ({
       return;
     }
 
-    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];
+    try {
+      const targetChainId =
+        NETWORK_TO_ID[lastSelectedNetwork as keyof typeof NETWORK_TO_ID];
 
-      toast("Switching to network", {
-        description: `Switching to ${targetAppkitNetwork.name} network`,
-      });
+      switchToChainId(targetChainId);
 
-      try {
-        switchNetwork(targetAppkitNetwork);
-      } catch (_) {
-        toast("Error switching network");
-        setIsPayingInvoices(false);
-        return;
-      }
-    }
-
-    try {
       const ethersProvider = new ethers.providers.Web3Provider(
         walletProvider as ethers.providers.ExternalProvider,
       );

src/components/direct-payout.tsx

@@ -38,12 +38,15 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+
 import {
   PAYOUT_CURRENCIES,
   type PayoutCurrency,
   formatCurrencyLabel,
   getPaymentCurrenciesForPayout,
 } from "@/lib/constants/currencies";
+
+import { useSwitchNetwork } from "@/lib/hooks/use-switch-network";
 import { paymentApiSchema } from "@/lib/schemas/payment";
 import { api } from "@/trpc/react";
 import type { z } from "zod";
@@ -57,6 +60,7 @@ export type DirectPaymentFormValues = z.infer<typeof directPaymentFormSchema>;
 
 export function DirectPayment() {
   const { mutateAsync: pay } = api.payment.pay.useMutation();
+  const { switchToPaymentNetwork } = useSwitchNetwork();
 
   const [paymentStatus, setPaymentStatus] = useState<
     "idle" | "processing" | "success" | "error"
@@ -118,6 +122,7 @@ export function DirectPayment() {
       return;
     }
 
+    switchToPaymentNetwork(data.paymentCurrency);
     setPaymentStatus("processing");
 
     try {

src/components/invoice-creator.tsx

@@ -37,37 +37,22 @@ export function InvoiceCreator({
   const router = useRouter();
   const isInvoiceMe = !!recipientDetails?.userId;
   const utils = api.useUtils();
-  const { mutate: createInvoice, isLoading } = isInvoiceMe
-    ? api.invoice.createFromInvoiceMe.useMutation({
-        onSuccess: () => {
-          toast.success("Invoice created successfully", {
-            description: "You can safely close this page now",
-          });
-        },
-        onError: (error) => {
-          toast.error("Failed to create invoice", {
-            description:
-              error instanceof Error
-                ? error.message
-                : "An unexpected error occurred",
-          });
-        },
-      })
-    : api.invoice.create.useMutation({
-        onSuccess: async () => {
-          toast.success("Invoice created successfully");
-          await utils.invoice.getAll.invalidate();
-          router.push("/dashboard");
-        },
-        onError: (error) => {
-          toast.error("Failed to create invoice", {
-            description:
-              error instanceof Error
-                ? error.message
-                : "An unexpected error occurred",
-          });
-        },
-      });
+  const { mutateAsync: createInvoice, isLoading } =
+    api.invoice.create.useMutation({
+      onSuccess: async () => {
+        toast.success("Invoice created successfully");
+        await utils.invoice.getAll.invalidate();
+        router.push("/dashboard");
+      },
+      onError: (error) => {
+        toast.error("Failed to create invoice", {
+          description:
+            error instanceof Error
+              ? error.message
+              : "An unexpected error occurred",
+        });
+      },
+    });
 
   const form = useForm<InvoiceFormValues>({
     resolver: zodResolver(invoiceFormSchema),

src/components/payment-section.tsx

@@ -15,13 +15,13 @@ import { api } from "@/trpc/react";
 import {
   useAppKit,
   useAppKitAccount,
-  useAppKitNetwork,
   useAppKitProvider,
   useDisconnect,
 } from "@reown/appkit/react";
 import { ethers } from "ethers";
 import { AlertCircle, CheckCircle, Clock, Loader2, Wallet } from "lucide-react";
 
+import { useSwitchNetwork } from "@/lib/hooks/use-switch-network";
 import {
   getPaymentSectionStatusClass,
   getStatusDisplayText,
@@ -106,8 +106,8 @@ export function PaymentSection({ serverInvoice }: PaymentSectionProps) {
   const { open } = useAppKit();
   const { disconnect } = useDisconnect();
   const { isConnected, address } = useAppKitAccount();
+  const { chainId, switchToChainId } = useSwitchNetwork();
   const { walletProvider } = useAppKitProvider("eip155");
-  const { chainId, switchNetwork } = useAppKitNetwork();
   const [showRoutes, setShowRoutes] = useState(false);
   const [selectedRoute, setSelectedRoute] = useState<PaymentRouteType | null>(
     null,
@@ -336,12 +336,7 @@ export function PaymentSection({ serverInvoice }: PaymentSectionProps) {
         description: `Switching to ${targetAppkitNetwork.name} network`,
       });
 
-      try {
-        await switchNetwork(targetAppkitNetwork);
-      } catch (_) {
-        toast("Error switching network");
-        return;
-      }
+      switchToChainId(targetChain);
     }
 
     const ethersProvider = new ethers.providers.Web3Provider(

src/components/subscription-plans/blocks/create-subscription-plan.tsx

@@ -37,6 +37,7 @@ import { Plus } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import { getAddress } from "viem";
 import type { z } from "zod";
 
 const subscriptionPlanFormSchema = subscriptionPlanApiSchema.omit({
@@ -84,7 +85,7 @@ export function CreateSubscriptionPlan({
 
   useEffect(() => {
     if (address) {
-      form.setValue("payee", address);
+      form.setValue("payee", getAddress(address));
     }
   }, [address, form]);
 

src/lib/helpers/chain.ts

@@ -0,0 +1,10 @@
+import { ID_TO_APPKIT_NETWORK, NETWORK_TO_ID } from "../constants/chains";
+
+export const getChainFromPaymentCurrency = (paymentCurrency: string) => {
+  const parts = paymentCurrency.split("-");
+  const paymentNetwork = parts.length > 1 ? parts.at(-1) : "sepolia";
+  const targetChain =
+    NETWORK_TO_ID[paymentNetwork as keyof typeof NETWORK_TO_ID];
+
+  return ID_TO_APPKIT_NETWORK[targetChain as keyof typeof ID_TO_APPKIT_NETWORK];
+};