usemutation

Author: kumaryash90

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/cross-chain/data-table.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/components/ui/table";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
 import {
   type ColumnDef,
   flexRender,
@@ -95,8 +96,30 @@ export function DataTable({
     "Successfully deployed contract",
     "Failed to deploy contract",
   );
-  const [isAddingRow, setIsAddingRow] = useState(false);
-  const [addRowError, setAddRowError] = useState<string | null>(null);
+
+  const addRowMutation = useMutation({
+    mutationFn: async (chain: { chainId: number; name: string }) => {
+      const code = await eth_getCode(
+        getRpcClient({
+          client: getThirdwebClient(),
+          // eslint-disable-next-line no-restricted-syntax
+          chain: defineChain(chain.chainId),
+        }),
+        { address: coreContract.address },
+      );
+
+      const newRow: CrossChain = {
+        id: chain.chainId,
+        network: chain.name,
+        chainId: chain.chainId,
+        status: code?.length > 2 ? "DEPLOYED" : "NOT_DEPLOYED",
+      };
+
+      if (!customChainData.some((row) => row.chainId === chain.chainId)) {
+        setCustomChainData((prevData) => [...prevData, newRow]);
+      }
+    },
+  });
 
   const [customChainData, setCustomChainData] = useState<CrossChain[]>(() => {
     try {
@@ -290,43 +313,6 @@ export function DataTable({
     }
   };
 
-  const handleAddRow = async (chain: { chainId: number; name: string }) => {
-    const existingChain = customChainData.find(
-      (row) => row.chainId === chain.chainId,
-    );
-    if (existingChain) {
-      return;
-    }
-
-    setIsAddingRow(true);
-
-    try {
-      const code = await eth_getCode(
-        getRpcClient({
-          client: getThirdwebClient(),
-          // eslint-disable-next-line no-restricted-syntax
-          chain: defineChain(chain.chainId),
-        }),
-        { address: coreContract.address },
-      );
-
-      const newRow: CrossChain = {
-        id: chain.chainId,
-        network: chain.name,
-        chainId: chain.chainId,
-        status: code?.length > 2 ? "DEPLOYED" : "NOT_DEPLOYED",
-      };
-
-      if (!customChainData.some((row) => row.chainId === chain.chainId)) {
-        setCustomChainData((prevData) => [...prevData, newRow]);
-      }
-    } catch {
-      setAddRowError("Error while adding the selected chain!");
-    } finally {
-      setIsAddingRow(false);
-    }
-  };
-
   return (
     <Form {...form}>
       <form>
@@ -378,20 +364,22 @@ export function DataTable({
           </TableContainer>
         </div>
 
-        {isAddingRow && !addRowError && (
+        {addRowMutation.isPending && (
           <div className="my-4 animate-pulse text-center text-blue-500">
             Processing...
           </div>
         )}
 
-        {addRowError && (
-          <div className="my-4 text-center text-red-500">{addRowError}</div>
+        {addRowMutation.isError && (
+          <div className="my-4 text-center text-red-500">
+            Error while adding selected chain!
+          </div>
         )}
 
         <div className="mt-4">
           <SingleNetworkSelector
-            onAddRow={handleAddRow}
-            isAddingRow={isAddingRow}
+            onAddRow={addRowMutation.mutate}
+            isAddingRow={addRowMutation.isPending}
             className="w-full"
           />
         </div>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/cross-chain/single-network-selector.tsx

@@ -7,7 +7,7 @@ import { useCallback, useMemo } from "react";
 type Option = { label: string; value: string };
 
 export function SingleNetworkSelector(props: {
-  onAddRow: (chain: { chainId: number; name: string }) => Promise<void>;
+  onAddRow: (chain: { chainId: number; name: string }) => void;
   isAddingRow: boolean;
   className?: string;
 }) {
@@ -65,14 +65,14 @@ export function SingleNetworkSelector(props: {
   const handleChange = async (chainId: string) => {
     const chain = idToChain.get(Number(chainId));
     if (chain) {
-      await props.onAddRow({ chainId: chain.chainId, name: chain.name });
+      props.onAddRow({ chainId: chain.chainId, name: chain.name });
     }
   };
 
   return (
     <SelectWithSearch
       searchPlaceholder="Search by Name or Chain ID"
-      value={undefined} // Reset the search field after selection
+      value={undefined}
       options={options}
       onValueChange={handleChange}
       placeholder={