Some fixes related to setting chain and table data

src/app/components/eventTable.tsx

@@ -1,13 +1,10 @@
 import { useEffect, useState } from "react";
+import IUniswap from "../interfaces/IUniswap";
 
 export default function EventTable({ updateTableData }) {
-  const [tableData, setTableData] = useState([]);
-
   useEffect(() => {
     console.log("updateTableData", updateTableData);
-    setTableData(updateTableData);
   }, [updateTableData]);
-
   return (
     <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
       <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
@@ -34,20 +31,21 @@ export default function EventTable({ updateTableData }) {
           </tr>
         </thead>
         <tbody>
-          {tableData.map((row) => (
-            <tr
-              id="log-row"
-              key={row.id}
-              className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
-            >
-              <td className="px-6 py-4">{row.poolAddress}</td>
-              <td className="px-6 py-4">{row.amountTokenA}</td>
-              <td className="px-6 py-4">{row.amountTokenB}</td>
-              <td className="px-6 py-4">{row.blockNumber}</td>
-              <td className="px-6 py-4">{row.eventName}</td>
-              <td className="px-6 py-4">{row.transactionHash}</td>
-            </tr>
-          ))}
+          {updateTableData &&
+            updateTableData.map((row: IUniswap) => (
+              <tr
+                id="log-row"
+                key={row.id}
+                className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
+              >
+                <td className="px-6 py-4">{row.poolAddress}</td>
+                <td className="px-6 py-4">{row.amountTokenA}</td>
+                <td className="px-6 py-4">{row.amountTokenB}</td>
+                <td className="px-6 py-4">{row.blockNumber}</td>
+                <td className="px-6 py-4">{row.eventName}</td>
+                <td className="px-6 py-4">{row.transactionHash}</td>
+              </tr>
+            ))}
         </tbody>
       </table>
 

src/app/components/form.tsx

@@ -1,100 +1,116 @@
-import { useEffect, useState } from "react";
-import { useContractEvent, useContractRead } from "wagmi";
+import { FormEvent, FormEventHandler, useEffect, useState } from "react";
+import { mainnet, sepolia, useContractEvent, useContractRead } from "wagmi";
 import getAbi from "../utils/getAbi";
 import { setTimeout } from "timers";
-import { formatEther, parseEther } from "viem";
+import { formatEther } from "viem";
 
 export default function Form({ memoizedUpdateTableData }) {
-  const [tokenA, setTokenA] = useState("");
-  const [tokenB, setTokenB] = useState(
+  const [tokenA, setTokenA] = useState<string>("");
+  const [tokenB, setTokenB] = useState<string>(
     "0xfFf9976782d46CC05630D1f6eBAb18b2324d6B14"
   ); //Set default to WETH of mainnet
-  const [event, setEvent] = useState("Mint");
-  const [networkType, setNetworkType] = useState("mainnet");
-  const [uniswapFactoryAbi, setUniswapFactoryAbi] = useState([]);
-  const [poolFee, setPoolFee] = useState("3000");
-  const [poolAddress, setPoolAddress]: any = useState();
-  const [poolAbi, setPoolAbi] = useState([]);
-  const [buttonText, setButtonText] = useState("Start Listening");
-  const [isDisabled, setIsDisabled] = useState(false);
-
-  const UNISWAP_FACTORY: string =
-    process.env.NEXT_PUBLIC_UNISWAP_FACTORY ??
-    "0x1F98431c8aD98523631AE4a59f267346ea31F984";
+  const [event, setEvent] = useState<string>("Mint");
+  const [networkType, setNetworkType] = useState<string>("mainnet");
+  const [uniswapFactoryAddress, setUniswapFactoryAddress] = useState<string>(
+    "0x1F98431c8aD98523631AE4a59f267346ea31F984"
+  );
+  const [uniswapFactoryAbi, setUniswapFactoryAbi] = useState<Object[]>([]);
+  const [poolFee, setPoolFee] = useState<number>(3000);
+  const [poolAddress, setPoolAddress]: any = useState<string>();
+  const [poolAbi, setPoolAbi] = useState<Object[]>([]);
+  const [buttonText, setButtonText] = useState<string>("Start Listening");
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
+  const [chainId, setChainId] = useState<number>(mainnet.id);
 
   const getPoolFunc = useContractRead({
-    address: UNISWAP_FACTORY,
+    address: uniswapFactoryAddress,
     abi: uniswapFactoryAbi,
     functionName: "getPool",
     args: [tokenA, tokenB, poolFee],
+    chainId: chainId,
+    onSuccess(data) {
+      console.log("poolAddress", data);
+      setPoolAddress(data);
+    },
+    onError(error) {
+      console.log("Error", error);
+    },
   });
 
   useEffect(() => {
-    if (!getPoolFunc.isLoading && getPoolFunc.data) {
-      console.log("poolAddress", getPoolFunc.data);
-      setPoolAddress(getPoolFunc.data);
-    }
-  }, [getPoolFunc.isLoading, uniswapFactoryAbi]);
+    console.log("uniswapFactoryAbi", uniswapFactoryAbi);
+    console.log("uniswapFactoryAddress", uniswapFactoryAddress);
+    console.log("tokenA", tokenA);
+    console.log("tokenB", tokenB);
+    console.log("poolFee", poolFee);
+    console.log("chainId", chainId);
+    getPoolFunc.refetch();
+  }, [uniswapFactoryAbi]);
 
   useEffect(() => {
     if (poolAddress) {
       const timer = setTimeout(() => {
         getAbi(poolAddress, networkType).then((value) => {
           setPoolAbi(value);
           console.log("poolAbi", value);
+          console.log("eventype", event);
           setButtonText("Listening started...");
         });
       }, 5000); // Wait for 5 seconds.
       return () => clearTimeout(timer); // Clear the timeout when the component unmounts.
     }
-  }, [poolAddress, networkType]);
+  }, [poolAddress]);
+
+  useEffect(() => {
+    switch (networkType) {
+      case "sepolia":
+        setUniswapFactoryAddress("0x0227628f3F023bb0B980b67D528571c95c6DaC1c");
+        setChainId(sepolia.id);
+        break;
+      case "mainnet":
+        setUniswapFactoryAddress("0x1F98431c8aD98523631AE4a59f267346ea31F984");
+        setChainId(mainnet.id);
+        break;
+      default:
+        setUniswapFactoryAddress("0x1F98431c8aD98523631AE4a59f267346ea31F984");
+        setChainId(mainnet.id);
+    }
+    // getPoolFunc.refetch();
+  }, [networkType]);
 
   useContractEvent({
     address: poolAddress,
     abi: poolAbi,
     eventName: event,
     listener(log) {
-      console.log(formatEther(log[0].args.amount0, "wei"));
-      console.log(BigInt(log[0].blockNumber).toString());
+      console.log("Event:", log);
       const data = {
+        id: log[0].logIndex,
         poolAddress: log[0].address,
         amountTokenA: formatEther(log[0].args.amount0, "wei"),
         amountTokenB: formatEther(log[0].args.amount1, "wei"),
         blockNumber: BigInt(log[0].blockNumber).toString(),
         eventName: log[0].eventName,
         transactionHash: log[0].transactionHash,
       };
-      console.log("data", data);
       memoizedUpdateTableData(data);
     },
   });
 
-  useEffect(() => {
-    console.log("refetching...");
-    getPoolFunc.refetch();
-  }, [uniswapFactoryAbi]);
-
-  const handleFormSubmit = async (e) => {
+  const handleFormSubmit = async (e: FormEvent) => {
     e.preventDefault();
     setButtonText("Processing...");
     setIsDisabled(true);
-    const factoryAbi = await getAbi(UNISWAP_FACTORY, networkType);
+    const factoryAbi = await getAbi(uniswapFactoryAddress, networkType);
     setUniswapFactoryAbi(factoryAbi);
-    // await getPoolFunc.refetch();
-    // if (poolAddress) {
-    //   await new Promise((resolve) => setTimeout(resolve, 5000)); // Wait for 5 seconds.
-    //   const poolAbi = await getAbi(poolAddress, networkType);
-    //   setPoolAbi(poolAbi);
-    //   console.log("poolAbi", poolAbi);
-    // }
   };
 
   return (
     <form onSubmit={handleFormSubmit} className="form-control">
       <div className="flex">
         <div className="mx-2">
-          <label class="label mt-4">
-            <span class="label-text">Token A</span>
+          <label className="label mt-4">
+            <span className="label-text">Token A</span>
           </label>
           <input
             className="input"
@@ -106,8 +122,9 @@ export default function Form({ memoizedUpdateTableData }) {
           />
         </div>
         <div>
-          <label class="label mt-4">
-            <span class="label-text">Token B</span>
+          <label className="label mt-4">
+            <span className="label-text">Token B</span>
+            <span className="label-text">Default: WETH</span>
           </label>
           <input
             className="input"
@@ -120,10 +137,10 @@ export default function Form({ memoizedUpdateTableData }) {
         </div>
       </div>
 
-      <div className="grid grid-cols-2">
+      <div className="grid grid-cols-3">
         <div className="mx-2">
-          <label class="label mt-4">
-            <span class="label-text">Ethereum</span>
+          <label className="label mt-4">
+            <span className="label-text">Ethereum</span>
           </label>
           <select
             className="select w-full"
@@ -137,21 +154,35 @@ export default function Form({ memoizedUpdateTableData }) {
           </select>
         </div>
         <div className="mx-2">
-          <label class="label mt-4">
-            <span class="label-text">Pool Fees</span>
+          <label className="label mt-4">
+            <span className="label-text">Pool Fees</span>
           </label>
           <select
             className="select w-full"
             value={poolFee}
             onChange={(e) => {
-              setPoolFee(e.target.value);
+              setPoolFee(parseInt(e.target.value));
             }}
           >
             <option value={500}>0.05</option>
             <option value={3000}>0.3</option>
             <option value={10000}>1</option>
           </select>
         </div>
+        <div className="mx-2">
+          <label className="label mt-4">
+            <span className="label-text">Event</span>
+          </label>
+          <select
+            className="select w-full"
+            value={event}
+            onChange={(e) => {
+              setEvent(e.target.value);
+            }}
+          >
+            <option value={"Mint"}>Add Liquidity</option>
+          </select>
+        </div>
       </div>
       <button
         className="mx-2 my-4 btn btn-lg btn-outline"

src/app/interfaces/IUniswap.tsx

@@ -0,0 +1,9 @@
+export default interface IUniswap {
+  id: number;
+  poolAddress: string;
+  amountTokenA: string;
+  amountTokenB: string;
+  blockNumber: string;
+  eventName: string;
+  transactionHash: string;
+}

src/app/page.tsx

@@ -1,16 +1,29 @@
 "use client";
-import { WagmiConfig } from "wagmi";
+import { WagmiConfig, sepolia } from "wagmi";
 import Form from "./components/form";
-import config from "./providers/config";
+// import config from "./providers/config";
 import EventTable from "./components/eventTable";
 import { useMemo, useState } from "react";
 import Navigation from "./components/navigation";
+import { configureChains, createConfig, mainnet } from "wagmi";
+import { publicProvider } from "wagmi/providers/public";
 
 export default function Home() {
-  const [data, setData] = useState([]);
+  const [data, setData] = useState<Object[]>([]);
+
+  const { chains, publicClient, webSocketPublicClient } = configureChains(
+    [mainnet, sepolia],
+    [publicProvider()]
+  );
+
+  const config = createConfig({
+    autoConnect: true,
+    publicClient,
+    webSocketPublicClient,
+  });
 
   const memoizedUpdateTableData = useMemo(() => {
-    return (newData) => {
+    return (newData: Object) => {
       setData([...data, newData]);
     };
   }, [data]);

src/app/providers/config.ts.bk

@@ -0,0 +1,15 @@
+import { configureChains, createConfig, mainnet, sepolia } from "wagmi";
+import { publicProvider } from "wagmi/providers/public";
+
+const { publicClient, webSocketPublicClient } = configureChains(
+  [sepolia, mainnet],
+  [publicProvider()]
+);
+
+const config = createConfig({
+  autoConnect: true,
+  publicClient,
+  webSocketPublicClient,
+});
+
+export default config;