From c54a4396cbd315117de552406a784a78783faf23 Mon Sep 17 00:00:00 2001 From: vinay kharayat Date: Sat, 7 Oct 2023 19:16:50 +0530 Subject: [PATCH] Some fixes related to setting chain and table data --- src/app/components/eventTable.tsx | 34 ++++---- src/app/components/form.tsx | 133 ++++++++++++++++++------------ src/app/interfaces/IUniswap.tsx | 9 ++ src/app/page.tsx | 21 ++++- src/app/providers/config.ts | 12 --- src/app/providers/config.ts.bk | 15 ++++ 6 files changed, 139 insertions(+), 85 deletions(-) create mode 100644 src/app/interfaces/IUniswap.tsx delete mode 100644 src/app/providers/config.ts create mode 100644 src/app/providers/config.ts.bk diff --git a/src/app/components/eventTable.tsx b/src/app/components/eventTable.tsx index 9afd8be..3c43e25 100644 --- a/src/app/components/eventTable.tsx +++ b/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 (
@@ -34,20 +31,21 @@ export default function EventTable({ updateTableData }) { - {tableData.map((row) => ( - - - - - - - - - ))} + {updateTableData && + updateTableData.map((row: IUniswap) => ( + + + + + + + + + ))}
{row.poolAddress}{row.amountTokenA}{row.amountTokenB}{row.blockNumber}{row.eventName}{row.transactionHash}
{row.poolAddress}{row.amountTokenA}{row.amountTokenB}{row.blockNumber}{row.eventName}{row.transactionHash}
diff --git a/src/app/components/form.tsx b/src/app/components/form.tsx index b9a72ee..65ee80d 100644 --- a/src/app/components/form.tsx +++ b/src/app/components/form.tsx @@ -1,40 +1,51 @@ -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(""); + const [tokenB, setTokenB] = useState( "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("Mint"); + const [networkType, setNetworkType] = useState("mainnet"); + const [uniswapFactoryAddress, setUniswapFactoryAddress] = useState( + "0x1F98431c8aD98523631AE4a59f267346ea31F984" + ); + 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 [chainId, setChainId] = useState(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) { @@ -42,21 +53,39 @@ export default function Form({ memoizedUpdateTableData }) { 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"), @@ -64,37 +93,24 @@ export default function Form({ memoizedUpdateTableData }) { 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 (
-
-
-
+
-
+
+ + +