From 2c9240111ae11e6727d3581453fba2b866f4b4a0 Mon Sep 17 00:00:00 2001
From: Karolis Ramanauskas <hello@karolisram.com>
Date: Tue, 8 Oct 2024 13:42:28 +0300
Subject: [PATCH] fix(explorer): display nested inputs (#3266)

Co-authored-by: Kevin Ingersoll <kingersoll@gmail.com>
---
 .changeset/hip-rings-rule.md                                 | 5 +++++
 .../worlds/[worldAddress]/observe/TransactionTableRow.tsx    | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/hip-rings-rule.md

diff --git a/.changeset/hip-rings-rule.md b/.changeset/hip-rings-rule.md
new file mode 100644
index 0000000000..abb7e73306
--- /dev/null
+++ b/.changeset/hip-rings-rule.md
@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Fixed inputs display in the transactions table row.
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionTableRow.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionTableRow.tsx
index 4bf58d0676..1784f8f69d 100644
--- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionTableRow.tsx
+++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionTableRow.tsx
@@ -86,7 +86,9 @@ export function TransactionTableRow({ row }: { row: Row<WatchedTransaction> }) {
                       {data.functionData?.args?.map((arg, idx) => (
                         <div key={idx} className="flex">
                           <span className="flex-shrink-0 text-xs text-white/60">arg {idx + 1}:</span>
-                          <span className="ml-2 text-xs">{String(arg)}</span>
+                          <span className="ml-2 whitespace-pre-wrap text-xs">
+                            {typeof arg === "object" && arg !== null ? JSON.stringify(arg, null, 2) : String(arg)}
+                          </span>
                         </div>
                       ))}
                     </div>