diff --git a/.changeset/odd-windows-work.md b/.changeset/odd-windows-work.md new file mode 100644 index 000000000..21582bb01 --- /dev/null +++ b/.changeset/odd-windows-work.md @@ -0,0 +1,5 @@ +--- +"create-eth": patch +--- + +Add generateStaticParams to blockexplorer address and txHash page diff --git a/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx b/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx new file mode 100644 index 000000000..848f2e99f --- /dev/null +++ b/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx @@ -0,0 +1,148 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { useRouter } from "next/navigation"; +import { Hash, Transaction, TransactionReceipt, formatEther, formatUnits } from "viem"; +import { hardhat } from "viem/chains"; +import { usePublicClient } from "wagmi"; +import { Address } from "~~/components/scaffold-eth"; +import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork"; +import { decodeTransactionData, getFunctionDetails } from "~~/utils/scaffold-eth"; +import { replacer } from "~~/utils/scaffold-eth/common"; + +const TransactionComp = ({ txHash }: { txHash: Hash }) => { + const client = usePublicClient({ chainId: hardhat.id }); + const router = useRouter(); + const [transaction, setTransaction] = useState(); + const [receipt, setReceipt] = useState(); + const [functionCalled, setFunctionCalled] = useState(); + + const { targetNetwork } = useTargetNetwork(); + + useEffect(() => { + if (txHash && client) { + const fetchTransaction = async () => { + const tx = await client.getTransaction({ hash: txHash }); + const receipt = await client.getTransactionReceipt({ hash: txHash }); + + const transactionWithDecodedData = decodeTransactionData(tx); + setTransaction(transactionWithDecodedData); + setReceipt(receipt); + + const functionCalled = transactionWithDecodedData.input.substring(0, 10); + setFunctionCalled(functionCalled); + }; + + fetchTransaction(); + } + }, [client, txHash]); + + return ( +
+ + {transaction ? ( +
+

Transaction Details

{" "} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Transaction Hash: + {transaction.hash}
+ Block Number: + {Number(transaction.blockNumber)}
+ From: + +
+
+ To: + + {!receipt?.contractAddress ? ( + transaction.to &&
+ ) : ( + + Contract Creation: +
+ + )} +
+ Value: + + {formatEther(transaction.value)} {targetNetwork.nativeCurrency.symbol} +
+ Function called: + +
+ {functionCalled === "0x" ? ( + "This transaction did not call any function." + ) : ( + <> + {getFunctionDetails(transaction)} + {functionCalled} + + )} +
+
+ Gas Price: + {formatUnits(transaction.gasPrice || 0n, 9)} Gwei
+ Data: + +