[txHash].tsx page UI improvements (#414)

scaffold-eth · Jul 13, 2023 · 12303f8 · 12303f8
1 parent f454542
commit 12303f8
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/packages/nextjs/hooks/scaffold-eth/useFetchBlocks.ts b/packages/nextjs/hooks/scaffold-eth/useFetchBlocks.ts
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 import { Block, Transaction, TransactionReceipt } from "viem";
 import { usePublicClient } from "wagmi";
 import { hardhat } from "wagmi/chains";
+import { decodeTransactionData } from "~~/utils/scaffold-eth";
 
 const BLOCKS_PER_PAGE = 20;
 
@@ -41,6 +42,10 @@ export const useFetchBlocks = () => {
       });
       const fetchedBlocks = await Promise.all(blocksWithTransactions);
 
+      fetchedBlocks.forEach(block => {
+        block.transactions.forEach(tx => decodeTransactionData(tx as Transaction));
+      });
+
       const txReceipts = await Promise.all(
         fetchedBlocks.flatMap(block =>
           block.transactions.map(async tx => {
@@ -74,6 +79,8 @@ export const useFetchBlocks = () => {
           if (currentPage === 0) {
             setBlocks(prevBlocks => [newBlock, ...prevBlocks.slice(0, BLOCKS_PER_PAGE - 1)]);
 
+            newBlock.transactions.forEach(tx => decodeTransactionData(tx as Transaction));
+
             const receipts = await Promise.all(
               newBlock.transactions.map(async tx => {
                 try {

diff --git a/packages/nextjs/pages/blockexplorer/transaction/[txHash].tsx b/packages/nextjs/pages/blockexplorer/transaction/[txHash].tsx
@@ -42,7 +42,7 @@ const TransactionPage: NextPage = () => {
         Back
       </button>
       {transaction ? (
-        <div className="overflow-x-auto">
+        <div>
           <h2 className="text-3xl font-bold mb-4 text-center text-primary-content">Transaction Details</h2>{" "}
           <table className="table w-full shadow-lg">
             <tbody>
@@ -94,14 +94,16 @@ const TransactionPage: NextPage = () => {
                   <strong>Function called:</strong>
                 </td>
                 <td>
-                  {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 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>
@@ -115,7 +117,7 @@ const TransactionPage: NextPage = () => {
                   <strong>Data:</strong>
                 </td>
                 <td className="form-control">
-                  <textarea readOnly value={transaction.input} className="p-0 textarea-primary bg-inherit" />
+                  <textarea readOnly value={transaction.input} className="p-0 textarea-primary bg-inherit h-[150px]" />
                 </td>
               </tr>
             </tbody>

diff --git a/packages/nextjs/utils/scaffold-eth/decodeTxData.ts b/packages/nextjs/utils/scaffold-eth/decodeTxData.ts
@@ -51,7 +51,7 @@ export const getFunctionDetails = (transaction: TransactionType) => {
     transaction.functionArgs
   ) {
     const details = transaction.functionArgNames.map(
-      (name, i) => `${transaction.functionArgTypes?.[i] || ""} ${name} = ${transaction.functionArgs?.[i] || ""}`,
+      (name, i) => `${transaction.functionArgTypes?.[i] || ""} ${name} = ${transaction.functionArgs?.[i] ?? ""}`,
     );
     return `${transaction.functionName}(${details.join(", ")})`;
   }