[explorer] Improves display of Modules in the 'Publish' Transaction R…

…esults (MystenLabs#2586)

* refactor existing tx results

* gets code to display properly

* resolves key error

* adds grey border to code

* restores links

* refactors

explorer/client/src/pages/object-result/ObjectLoaded.tsx

@@ -7,6 +7,7 @@ import DisplayBox from '../../components/displaybox/DisplayBox';
 import Longtext from '../../components/longtext/Longtext';
 import OwnedObjects from '../../components/ownedobjects/OwnedObjects';
 import TxForID from '../../components/transactions-for-id/TxForID';
+import codestyle from '../../styles/bytecode.module.css';
 import theme from '../../styles/theme.module.css';
 import { type AddressOwner } from '../../utils/api/DefaultRpcClient';
 import { parseImageURL } from '../../utils/objectUtils';
@@ -377,7 +378,9 @@ function ObjectLoaded({ data }: { data: DataType }) {
                                     {properties.map(([key, value], index) => (
                                         <div key={`property-${index}`}>
                                             <div>{prepLabel(key)}</div>
-                                            <div>{value}</div>
+                                            <div className={codestyle.code}>
+                                                {value}
+                                            </div>
                                         </div>
                                     ))}
                                 </div>

explorer/client/src/pages/object-result/ObjectResult.module.css

@@ -89,6 +89,5 @@ div.bytecodebox > div > div:first-child {
 }
 
 div.bytecodebox > div > div:nth-child(2) {
-    @apply overflow-auto h-[30vh] w-[65vw] 
-  border-solid border-stone-300 mt-[2vh] mb-[5vh] p-2 whitespace-pre text-sm;
+    @apply w-[65vw] h-[30vh] mt-[2vh] mb-[5vh];
 }

explorer/client/src/pages/transaction-result/TransactionView.tsx

@@ -14,6 +14,7 @@ import {
 import cl from 'classnames';
 
 import Longtext from '../../components/longtext/Longtext';
+import codestyle from '../../styles/bytecode.module.css';
 import { type DataType } from './TransactionResultType';
 
 import type {
@@ -197,6 +198,46 @@ function formatByTransactionKind(
     }
 }
 
+function ItemView({ itm, text }: { itm: any; text: string }) {
+    switch (true) {
+        case itm.label === 'Modules':
+            return <div className={codestyle.code}>{itm.value}</div>;
+        case itm.link:
+            return (
+                <Longtext
+                    text={text}
+                    category={itm.category ? itm.category : 'unknown'}
+                    isLink={true}
+                />
+            );
+        default:
+            return <>{text}</>;
+    }
+}
+
+function SubListView({ itm, list }: { itm: any; list: any }) {
+    return (
+        <div>
+            {list.map((sublist: string, l: number) => (
+                <div className={styles.sublist} key={l}>
+                    <div className={styles.sublist}>
+                        {itm.subLabel ? (
+                            <div className={styles.sublistlabel}>
+                                {itm.subLabel[l]}:
+                            </div>
+                        ) : (
+                            ''
+                        )}
+                        <div className={styles.sublistvalue}>
+                            <ItemView itm={itm} text={sublist} />
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}
+
 function TransactionView({ txdata }: { txdata: DataType }) {
     return (
         <>
@@ -231,120 +272,33 @@ function TransactionView({ txdata }: { txdata: DataType }) {
                                         {itm.list ? (
                                             <ul className={styles.listitems}>
                                                 {itm.value.map(
-                                                    (list: any, n: number) =>
-                                                        itm.sublist ? (
-                                                            <li
-                                                                className={
-                                                                    styles.list
-                                                                }
-                                                                key={n}
-                                                            >
-                                                                <div>
-                                                                    {list.map(
-                                                                        (
-                                                                            sublist: string,
-                                                                            l: number
-                                                                        ) => (
-                                                                            <div
-                                                                                className={
-                                                                                    styles.sublist
-                                                                                }
-                                                                                key={
-                                                                                    l
-                                                                                }
-                                                                            >
-                                                                                <div
-                                                                                    className={
-                                                                                        styles.sublist
-                                                                                    }
-                                                                                >
-                                                                                    {itm.subLabel ? (
-                                                                                        <div
-                                                                                            className={
-                                                                                                styles.sublistlabel
-                                                                                            }
-                                                                                        >
-                                                                                            {
-                                                                                                itm
-                                                                                                    .subLabel[
-                                                                                                    l
-                                                                                                ]
-                                                                                            }
-
-                                                                                            :
-                                                                                        </div>
-                                                                                    ) : (
-                                                                                        ''
-                                                                                    )}
-                                                                                    <div
-                                                                                        className={
-                                                                                            styles.sublistvalue
-                                                                                        }
-                                                                                    >
-                                                                                        {itm.link ? (
-                                                                                            <Longtext
-                                                                                                text={
-                                                                                                    sublist
-                                                                                                }
-                                                                                                category={
-                                                                                                    itm.category
-                                                                                                        ? itm.category
-                                                                                                        : 'unknown'
-                                                                                                }
-                                                                                                isLink={
-                                                                                                    true
-                                                                                                }
-                                                                                            />
-                                                                                        ) : (
-                                                                                            sublist
-                                                                                        )}
-                                                                                    </div>
-                                                                                </div>
-                                                                            </div>
-                                                                        )
-                                                                    )}
-                                                                </div>
-                                                            </li>
-                                                        ) : (
-                                                            <li
-                                                                className={
-                                                                    styles.list
-                                                                }
-                                                                key={n}
-                                                            >
-                                                                {itm.link ? (
-                                                                    <Longtext
-                                                                        text={
-                                                                            list
-                                                                        }
-                                                                        category={
-                                                                            itm.category
-                                                                                ? itm.category
-                                                                                : 'unknown'
-                                                                        }
-                                                                        isLink={
-                                                                            true
-                                                                        }
-                                                                    />
-                                                                ) : (
-                                                                    list
-                                                                )}
-                                                            </li>
-                                                        )
+                                                    (list: any, n: number) => (
+                                                        <li
+                                                            className={
+                                                                styles.list
+                                                            }
+                                                            key={n}
+                                                        >
+                                                            {itm.sublist ? (
+                                                                <SubListView
+                                                                    itm={itm}
+                                                                    list={list}
+                                                                />
+                                                            ) : (
+                                                                <ItemView
+                                                                    itm={itm}
+                                                                    text={list}
+                                                                />
+                                                            )}
+                                                        </li>
+                                                    )
                                                 )}
                                             </ul>
-                                        ) : itm.link ? (
-                                            <Longtext
+                                        ) : (
+                                            <ItemView
+                                                itm={itm}
                                                 text={itm.value}
-                                                category={
-                                                    itm.category
-                                                        ? itm.category
-                                                        : 'unknown'
-                                                }
-                                                isLink={true}
                                             />
-                                        ) : (
-                                            itm.value
                                         )}
                                     </div>
                                 </div>

explorer/client/src/styles/bytecode.module.css

@@ -0,0 +1,3 @@
+div.code {
+    @apply overflow-auto border-solid border-stone-300 p-2 whitespace-pre text-sm h-[30vh];
+}