Show proper array of JSON objects

stellar · Dec 2, 2024 · df50e5f · df50e5f
1 parent bece2f5
commit df50e5f
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 10 deletions.
diff --git a/src/app/(sidebar)/xdr/view/page.tsx b/src/app/(sidebar)/xdr/view/page.tsx
@@ -33,6 +33,7 @@ import { delayedAction } from "@/helpers/delayedAction";
 import { getNetworkHeaders } from "@/helpers/getNetworkHeaders";
 import { useIsXdrInit } from "@/hooks/useIsXdrInit";
 import { useStore } from "@/store/useStore";
+import { AnyObject } from "@/types/types";
 
 export default function ViewXdr() {
   const { xdr, network } = useStore();
@@ -178,6 +179,42 @@ export default function ViewXdr() {
     return null;
   };
 
+  const renderJsonContent = ({
+    jsonArray,
+    xdr,
+  }: {
+    jsonArray: AnyObject[];
+    xdr: string;
+  }) => {
+    if (jsonArray.length > 1) {
+      return (
+        <div className="PrettyJson PrettyJson__array">
+          <div className="PrettyJson__inline">
+            <span className="PrettyJson__bracket">[</span>
+            <span className="PrettyJson__expandSize">{`${jsonArray.length} items`}</span>
+          </div>
+          {jsonArray.map((j, index) => (
+            <>
+              <PrettyJsonTransaction
+                // Using index here because we can't get something unique from the JSON
+                key={`pretty-json-${index}`}
+                json={j}
+                xdr={xdr}
+              />
+            </>
+          ))}
+          <span className="PrettyJson__bracket">]</span>
+        </div>
+      );
+    }
+
+    if (jsonArray.length === 1) {
+      return <PrettyJsonTransaction json={jsonArray[0]} xdr={xdr} />;
+    }
+
+    return null;
+  };
+
   return (
     <Box gap="md">
       <PageCard heading="View XDR">
@@ -262,14 +299,10 @@ export default function ViewXdr() {
                   className="PageBody__content PageBody__scrollable"
                   data-testid="view-xdr-render-json"
                 >
-                  {xdrJsonDecoded?.jsonArray?.map((j, index) => (
-                    <PrettyJsonTransaction
-                      // Using index here because we can't get something unique from the JSON
-                      key={`pretty-json-${index}`}
-                      json={j}
-                      xdr={xdr.blob}
-                    />
-                  ))}
+                  {renderJsonContent({
+                    jsonArray: xdrJsonDecoded.jsonArray,
+                    xdr: xdr.blob,
+                  })}
                 </div>
 
                 <Box gap="md" direction="row" justify="end">

diff --git a/src/components/PrettyJson/index.tsx b/src/components/PrettyJson/index.tsx
@@ -290,7 +290,7 @@ export const PrettyJson = ({
     <div className="PrettyJson">
       <Bracket char="{" />
       {render(json)}
-      <Bracket char="}" />
+      <Bracket char="}" isEnd />
     </div>
   );
 };
@@ -334,12 +334,16 @@ const Bracket = ({
   char,
   children,
   isCollapsed,
+  isEnd,
 }: {
   char: Char;
   children?: React.ReactNode;
   isCollapsed?: boolean;
+  isEnd?: boolean;
 }) => (
-  <span className="PrettyJson__bracket">
+  <span
+    className={`PrettyJson__bracket${isEnd ? " PrettyJson__bracket--end" : ""}`}
+  >
     {char}
     {children}
     {isCollapsed ? `...${getClosingChar(char)}` : null}

diff --git a/src/components/PrettyJson/styles.scss b/src/components/PrettyJson/styles.scss
@@ -44,6 +44,18 @@
     position: relative;
   }
 
+  &__array {
+    & > .PrettyJson {
+      padding-left: pxToRem(16px);
+
+      & > .PrettyJson__bracket--end {
+        &::after {
+          content: ",";
+        }
+      }
+    }
+  }
+
   &--click {
     cursor: pointer;
   }