From cbcb7c57252def3bd7c6a07e1f8cef359f8d914b Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Tue, 23 Apr 2024 22:40:36 +0530
Subject: [PATCH 1/6] add generateStaticParam to blockexplorer [txHash] and
 [address]

---
 .../blockexplorer/address/[address]/page.tsx  |   4 +
 .../transaction/[txHash]/page.tsx             | 150 +-----------------
 .../_components/TransactionComp.tsx           | 148 +++++++++++++++++
 packages/nextjs/next.config.js                |   1 +
 4 files changed, 160 insertions(+), 143 deletions(-)
 create mode 100644 packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx

diff --git a/packages/nextjs/app/blockexplorer/address/[address]/page.tsx b/packages/nextjs/app/blockexplorer/address/[address]/page.tsx
index dda48baf2..7e5567513 100644
--- a/packages/nextjs/app/blockexplorer/address/[address]/page.tsx
+++ b/packages/nextjs/app/blockexplorer/address/[address]/page.tsx
@@ -76,6 +76,10 @@ const getContractData = async (address: string) => {
   return { bytecode, assembly };
 };
 
+export function generateStaticParams() {
+  return [{ address: "0x0000000000000000000000000000000000000000" }];
+}
+
 const AddressPage = async ({ params }: PageProps) => {
   const address = params?.address as string;
   const contractData: { bytecode: string; assembly: string } | null = await getContractData(address);
diff --git a/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx b/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx
index f3e0431df..6f55ed3f3 100644
--- a/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx
+++ b/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx
@@ -1,153 +1,17 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
+import TransactionComp from "../_components/TransactionComp";
 import type { NextPage } from "next";
-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";
+import { Hash } from "viem";
 
 type PageProps = {
   params: { txHash?: Hash };
 };
+
+export function generateStaticParams() {
+  return [{ txHash: "0x0000000000000000000000000000000000000000" }];
+}
 const TransactionPage: NextPage<PageProps> = ({ params }: PageProps) => {
-  const client = usePublicClient({ chainId: hardhat.id });
   const txHash = params?.txHash as Hash;
-  const router = useRouter();
-  const [transaction, setTransaction] = useState<Transaction>();
-  const [receipt, setReceipt] = useState<TransactionReceipt>();
-  const [functionCalled, setFunctionCalled] = useState<string>();
-
-  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 (
-    <div className="container mx-auto mt-10 mb-20 px-10 md:px-0">
-      <button className="btn btn-sm btn-primary" onClick={() => router.back()}>
-        Back
-      </button>
-      {transaction ? (
-        <div className="overflow-x-auto">
-          <h2 className="text-3xl font-bold mb-4 text-center text-primary-content">Transaction Details</h2>{" "}
-          <table className="table rounded-lg bg-base-100 w-full shadow-lg md:table-lg table-md">
-            <tbody>
-              <tr>
-                <td>
-                  <strong>Transaction Hash:</strong>
-                </td>
-                <td>{transaction.hash}</td>
-              </tr>
-              <tr>
-                <td>
-                  <strong>Block Number:</strong>
-                </td>
-                <td>{Number(transaction.blockNumber)}</td>
-              </tr>
-              <tr>
-                <td>
-                  <strong>From:</strong>
-                </td>
-                <td>
-                  <Address address={transaction.from} format="long" />
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <strong>To:</strong>
-                </td>
-                <td>
-                  {!receipt?.contractAddress ? (
-                    transaction.to && <Address address={transaction.to} format="long" />
-                  ) : (
-                    <span>
-                      Contract Creation:
-                      <Address address={receipt.contractAddress} format="long" />
-                    </span>
-                  )}
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <strong>Value:</strong>
-                </td>
-                <td>
-                  {formatEther(transaction.value)} {targetNetwork.nativeCurrency.symbol}
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <strong>Function called:</strong>
-                </td>
-                <td>
-                  <div className="w-full md:max-w-[600px] lg:max-w-[800px] overflow-x-auto whitespace-nowrap">
-                    {functionCalled === "0x" ? (
-                      "This transaction did not call any function."
-                    ) : (
-                      <>
-                        <span className="mr-2">{getFunctionDetails(transaction)}</span>
-                        <span className="badge badge-primary font-bold">{functionCalled}</span>
-                      </>
-                    )}
-                  </div>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <strong>Gas Price:</strong>
-                </td>
-                <td>{formatUnits(transaction.gasPrice || 0n, 9)} Gwei</td>
-              </tr>
-              <tr>
-                <td>
-                  <strong>Data:</strong>
-                </td>
-                <td className="form-control">
-                  <textarea readOnly value={transaction.input} className="p-0 textarea-primary bg-inherit h-[150px]" />
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <strong>Logs:</strong>
-                </td>
-                <td>
-                  <ul>
-                    {receipt?.logs?.map((log, i) => (
-                      <li key={i}>
-                        <strong>Log {i} topics:</strong> {JSON.stringify(log.topics, replacer, 2)}
-                      </li>
-                    ))}
-                  </ul>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      ) : (
-        <p className="text-2xl text-base-content">Loading...</p>
-      )}
-    </div>
-  );
+  return <TransactionComp txHash={txHash} />;
 };
 
 export default TransactionPage;
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<Transaction>();
+  const [receipt, setReceipt] = useState<TransactionReceipt>();
+  const [functionCalled, setFunctionCalled] = useState<string>();
+
+  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 (
+    <div className="container mx-auto mt-10 mb-20 px-10 md:px-0">
+      <button className="btn btn-sm btn-primary" onClick={() => router.back()}>
+        Back
+      </button>
+      {transaction ? (
+        <div className="overflow-x-auto">
+          <h2 className="text-3xl font-bold mb-4 text-center text-primary-content">Transaction Details</h2>{" "}
+          <table className="table rounded-lg bg-base-100 w-full shadow-lg md:table-lg table-md">
+            <tbody>
+              <tr>
+                <td>
+                  <strong>Transaction Hash:</strong>
+                </td>
+                <td>{transaction.hash}</td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Block Number:</strong>
+                </td>
+                <td>{Number(transaction.blockNumber)}</td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>From:</strong>
+                </td>
+                <td>
+                  <Address address={transaction.from} format="long" />
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>To:</strong>
+                </td>
+                <td>
+                  {!receipt?.contractAddress ? (
+                    transaction.to && <Address address={transaction.to} format="long" />
+                  ) : (
+                    <span>
+                      Contract Creation:
+                      <Address address={receipt.contractAddress} format="long" />
+                    </span>
+                  )}
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Value:</strong>
+                </td>
+                <td>
+                  {formatEther(transaction.value)} {targetNetwork.nativeCurrency.symbol}
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Function called:</strong>
+                </td>
+                <td>
+                  <div className="w-full md:max-w-[600px] lg:max-w-[800px] overflow-x-auto whitespace-nowrap">
+                    {functionCalled === "0x" ? (
+                      "This transaction did not call any function."
+                    ) : (
+                      <>
+                        <span className="mr-2">{getFunctionDetails(transaction)}</span>
+                        <span className="badge badge-primary font-bold">{functionCalled}</span>
+                      </>
+                    )}
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Gas Price:</strong>
+                </td>
+                <td>{formatUnits(transaction.gasPrice || 0n, 9)} Gwei</td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Data:</strong>
+                </td>
+                <td className="form-control">
+                  <textarea readOnly value={transaction.input} className="p-0 textarea-primary bg-inherit h-[150px]" />
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Logs:</strong>
+                </td>
+                <td>
+                  <ul>
+                    {receipt?.logs?.map((log, i) => (
+                      <li key={i}>
+                        <strong>Log {i} topics:</strong> {JSON.stringify(log.topics, replacer, 2)}
+                      </li>
+                    ))}
+                  </ul>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <p className="text-2xl text-base-content">Loading...</p>
+      )}
+    </div>
+  );
+};
+
+export default TransactionComp;
diff --git a/packages/nextjs/next.config.js b/packages/nextjs/next.config.js
index d76586913..e454b147c 100644
--- a/packages/nextjs/next.config.js
+++ b/packages/nextjs/next.config.js
@@ -14,6 +14,7 @@ const nextConfig = {
     config.externals.push("pino-pretty", "lokijs", "encoding");
     return config;
   },
+  output: "export",
 };
 
 module.exports = nextConfig;

From c4d95c125583b14c53076fc6b3dd60fdeb4eb31c Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Tue, 23 Apr 2024 23:02:21 +0530
Subject: [PATCH 2/6] add zero address check for both pages

---
 packages/nextjs/app/blockexplorer/address/[address]/page.tsx    | 2 ++
 packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx | 2 ++
 packages/nextjs/next.config.js                                  | 1 -
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/nextjs/app/blockexplorer/address/[address]/page.tsx b/packages/nextjs/app/blockexplorer/address/[address]/page.tsx
index 7e5567513..587f7459a 100644
--- a/packages/nextjs/app/blockexplorer/address/[address]/page.tsx
+++ b/packages/nextjs/app/blockexplorer/address/[address]/page.tsx
@@ -82,6 +82,8 @@ export function generateStaticParams() {
 
 const AddressPage = async ({ params }: PageProps) => {
   const address = params?.address as string;
+  if (address === "0x0000000000000000000000000000000000000000") return null;
+
   const contractData: { bytecode: string; assembly: string } | null = await getContractData(address);
   return <AddressComponent address={address} contractData={contractData} />;
 };
diff --git a/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx b/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx
index 6f55ed3f3..4871b0a21 100644
--- a/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx
+++ b/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx
@@ -11,6 +11,8 @@ export function generateStaticParams() {
 }
 const TransactionPage: NextPage<PageProps> = ({ params }: PageProps) => {
   const txHash = params?.txHash as Hash;
+
+  if (txHash === "0x0000000000000000000000000000000000000000") return null;
   return <TransactionComp txHash={txHash} />;
 };
 
diff --git a/packages/nextjs/next.config.js b/packages/nextjs/next.config.js
index e454b147c..d76586913 100644
--- a/packages/nextjs/next.config.js
+++ b/packages/nextjs/next.config.js
@@ -14,7 +14,6 @@ const nextConfig = {
     config.externals.push("pino-pretty", "lokijs", "encoding");
     return config;
   },
-  output: "export",
 };
 
 module.exports = nextConfig;

From 4ec2903d0784d44da5efc9a717a25c3bb8df4b69 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Wed, 24 Apr 2024 11:10:33 +0530
Subject: [PATCH 3/6] add comment in generateStaticParams

---
 packages/nextjs/app/blockexplorer/address/[address]/page.tsx    | 1 +
 packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/nextjs/app/blockexplorer/address/[address]/page.tsx b/packages/nextjs/app/blockexplorer/address/[address]/page.tsx
index 587f7459a..57bf4ead9 100644
--- a/packages/nextjs/app/blockexplorer/address/[address]/page.tsx
+++ b/packages/nextjs/app/blockexplorer/address/[address]/page.tsx
@@ -77,6 +77,7 @@ const getContractData = async (address: string) => {
 };
 
 export function generateStaticParams() {
+  // An workaround to enable static exports in Next.js
   return [{ address: "0x0000000000000000000000000000000000000000" }];
 }
 
diff --git a/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx b/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx
index 4871b0a21..cd4bfa249 100644
--- a/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx
+++ b/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx
@@ -7,6 +7,7 @@ type PageProps = {
 };
 
 export function generateStaticParams() {
+  // An workaround to enable static exports in Next.js
   return [{ txHash: "0x0000000000000000000000000000000000000000" }];
 }
 const TransactionPage: NextPage<PageProps> = ({ params }: PageProps) => {

From 68fa07f269ca858d074e8cfce72397935216f44d Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Wed, 24 Apr 2024 11:15:10 +0530
Subject: [PATCH 4/6] add next:serve in root package.json

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 3e026f114..678ba343c 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "next:format": "yarn workspace @se-2/nextjs format",
     "next:check-types": "yarn workspace @se-2/nextjs check-types",
     "next:build": "yarn workspace @se-2/nextjs build",
+    "next:serve": "yarn workspace @se-2/nextjs serve",
     "postinstall": "husky install",
     "precommit": "lint-staged",
     "vercel": "yarn workspace @se-2/nextjs vercel",

From 2ca8b344a485c69812ec78f5bd95e6e601c10875 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Wed, 24 Apr 2024 23:24:29 +0530
Subject: [PATCH 5/6] add isZeroAddress util

---
 packages/nextjs/utils/scaffold-eth/common.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/nextjs/utils/scaffold-eth/common.ts b/packages/nextjs/utils/scaffold-eth/common.ts
index 22d031a3d..967167b6d 100644
--- a/packages/nextjs/utils/scaffold-eth/common.ts
+++ b/packages/nextjs/utils/scaffold-eth/common.ts
@@ -1,3 +1,7 @@
 // To be used in JSON.stringify when a field might be bigint
 // https://wagmi.sh/react/faq#bigint-serialization
 export const replacer = (_key: string, value: unknown) => (typeof value === "bigint" ? value.toString() : value);
+
+export const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
+
+export const isZeroAddress = (address: string) => address === ZERO_ADDRESS;

From aeb45c92500c6dc58f506c297dbf76b86c7e3b4e Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Wed, 24 Apr 2024 23:29:33 +0530
Subject: [PATCH 6/6] use isZeroAddress util and minor tweak to comment

---
 .../nextjs/app/blockexplorer/address/[address]/page.tsx     | 6 ++++--
 .../nextjs/app/blockexplorer/transaction/[txHash]/page.tsx  | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/nextjs/app/blockexplorer/address/[address]/page.tsx b/packages/nextjs/app/blockexplorer/address/[address]/page.tsx
index 57bf4ead9..85a30d049 100644
--- a/packages/nextjs/app/blockexplorer/address/[address]/page.tsx
+++ b/packages/nextjs/app/blockexplorer/address/[address]/page.tsx
@@ -3,6 +3,7 @@ import path from "path";
 import { hardhat } from "viem/chains";
 import { AddressComponent } from "~~/app/blockexplorer/_components/AddressComponent";
 import deployedContracts from "~~/contracts/deployedContracts";
+import { isZeroAddress } from "~~/utils/scaffold-eth/common";
 import { GenericContractsDeclaration } from "~~/utils/scaffold-eth/contract";
 
 type PageProps = {
@@ -77,13 +78,14 @@ const getContractData = async (address: string) => {
 };
 
 export function generateStaticParams() {
-  // An workaround to enable static exports in Next.js
+  // An workaround to enable static exports in Next.js, generating single dummy page.
   return [{ address: "0x0000000000000000000000000000000000000000" }];
 }
 
 const AddressPage = async ({ params }: PageProps) => {
   const address = params?.address as string;
-  if (address === "0x0000000000000000000000000000000000000000") return null;
+
+  if (isZeroAddress(address)) return null;
 
   const contractData: { bytecode: string; assembly: string } | null = await getContractData(address);
   return <AddressComponent address={address} contractData={contractData} />;
diff --git a/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx b/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx
index cd4bfa249..3a49def6e 100644
--- a/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx
+++ b/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx
@@ -1,19 +1,21 @@
 import TransactionComp from "../_components/TransactionComp";
 import type { NextPage } from "next";
 import { Hash } from "viem";
+import { isZeroAddress } from "~~/utils/scaffold-eth/common";
 
 type PageProps = {
   params: { txHash?: Hash };
 };
 
 export function generateStaticParams() {
-  // An workaround to enable static exports in Next.js
+  // An workaround to enable static exports in Next.js, generating single dummy page.
   return [{ txHash: "0x0000000000000000000000000000000000000000" }];
 }
 const TransactionPage: NextPage<PageProps> = ({ params }: PageProps) => {
   const txHash = params?.txHash as Hash;
 
-  if (txHash === "0x0000000000000000000000000000000000000000") return null;
+  if (isZeroAddress(txHash)) return null;
+
   return <TransactionComp txHash={txHash} />;
 };