Display nested struct and vec fields (MystenLabs#2740)

Visiok09 · Jul 1, 2022 · 3347181 · 3347181
1 parent 8c99cf8
commit 3347181
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 0 deletions.
diff --git a/explorer/client/package.json b/explorer/client/package.json
@@ -37,6 +37,7 @@
         "react-router-dom": "^6.2.1",
         "vanilla-cookieconsent": "^2.8.0",
         "web-vitals": "^2.1.4",
+        "react-json-view": "^1.21.3",
         "bn.js": "^5.2.0"
     },
     "scripts": {

diff --git a/explorer/client/src/pages/object-result/ObjectLoaded.tsx b/explorer/client/src/pages/object-result/ObjectLoaded.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useEffect, useState, useCallback } from 'react';
+import ReactJson from 'react-json-view';
 
 import DisplayBox from '../../components/displaybox/DisplayBox';
 import Longtext from '../../components/longtext/Longtext';
@@ -83,6 +84,15 @@ function ObjectLoaded({ data }: { data: DataType }) {
     const isPublisherGenesis =
         data.objType === 'Move Package' && data?.publisherAddress === 'Genesis';
 
+    const structProperties = Object.entries(viewedData.data?.contents)
+        .filter(([_, value]) => typeof value == 'object')
+        .filter(([key, _]) => key !== 'id');
+
+    let structPropertiesDisplay: any[] = [];
+    if (structProperties.length > 0) {
+        structPropertiesDisplay = Object.values(structProperties);
+    }
+
     return (
         <>
             <div className={styles.resultbox}>
@@ -255,6 +265,25 @@ function ObjectLoaded({ data }: { data: DataType }) {
                         </>
                     )}
                     {}
+                    {structProperties.length > 0 &&
+                        structPropertiesDisplay.map((itm, index) => (
+                            <div key={index}>
+                                <div className={styles.propertybox}>
+                                    <div>
+                                        <p>{itm[0]}</p>
+                                    </div>
+                                </div>
+                                <div className={styles.jsondata}>
+                                    <div>
+                                        <ReactJson
+                                            src={itm[1]}
+                                            collapsed={2}
+                                            name={false}
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
                     {data.objType !== 'Move Package' ? (
                         <h2
                             className={styles.clickableheader}

diff --git a/explorer/client/src/pages/object-result/ObjectResult.module.css b/explorer/client/src/pages/object-result/ObjectResult.module.css
@@ -91,3 +91,9 @@ div.bytecodebox > div > div:first-child {
 div.bytecodebox > div > div:nth-child(2) {
     @apply w-[65vw] h-[30vh] mt-[2vh] mb-[5vh];
 }
+
+div.jsondata {
+    @apply border-solid border-stone-300 mb-[5vh] p-5 bg-white whitespace-pre text-lg font-mono;
+
+    overflow-x: scroll;
+}