[explorer] Display Transactions for Object ID (MystenLabs#2485)

Co-authored-by: Chris Li <[email protected]>
dmitryartuh · Jun 16, 2022 · a388f68 · a388f68
1 parent e4f8c53
commit a388f68
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 83 deletions.
diff --git a/explorer/client/src/__tests__/e2e.test.ts b/explorer/client/src/__tests__/e2e.test.ts
@@ -403,15 +403,24 @@ describe('End-to-end Tests', () => {
         });
     });
     describe('Transactions for ID', () => {
-        it('are displayed deduplicated from and to', async () => {
+        const txResults =
+            'TxIdTxTypeStatusAddressesDa4vHc9IwbvOYblE8LnrVsqXwryt2Kmms+xnJ7Zx5E4=Transfer\u2714From:senderAddressTo:receiv...dressGHTP9gcFmF5KTspnz3KxXjvSH8Bx0jv68KFhdqfpdK8=Transfer\u2716From:senderAddressTo:receiv...dressXHTP9gcFmF5KTspnz3KxXjvSH8Bx0jv68KFhdqfpdK8=Transfer\u2714From:senderAddressTo:receiv...dress';
+
+        it('are displayed deduplicated from and to address', async () => {
             const address = 'ownsAllAddress';
             await page.goto(`${BASE_URL}/addresses/${address}`);
             const fromResults = await cssInteract(page)
                 .with('#tx')
                 .get.textContent();
-            expect(fromResults.replace(/\s/g, '')).toBe(
-                'TxIdTxTypeStatusAddressesDa4vHc9IwbvOYblE8LnrVsqXwryt2Kmms+xnJ7Zx5E4=Transfer\u2714From:senderAddressTo:receiv...dressGHTP9gcFmF5KTspnz3KxXjvSH8Bx0jv68KFhdqfpdK8=Transfer\u2716From:senderAddressTo:receiv...dressXHTP9gcFmF5KTspnz3KxXjvSH8Bx0jv68KFhdqfpdK8=Transfer\u2714From:senderAddressTo:receiv...dress'
-            );
+            expect(fromResults.replace(/\s/g, '')).toBe(txResults);
+        });
+        it('are displayed deduplicated for input and mutated object', async () => {
+            const address = 'CollectionObject';
+            await page.goto(`${BASE_URL}/addresses/${address}`);
+            const fromResults = await cssInteract(page)
+                .with('#tx')
+                .get.textContent();
+            expect(fromResults.replace(/\s/g, '')).toBe(txResults);
         });
     });
 });
diff --git a/explorer/client/src/components/transactions-for-id/TxForID.module.css b/explorer/client/src/components/transactions-for-id/TxForID.module.css
@@ -1,27 +1,31 @@
+.txresults {
+    @apply font-mono ml-[1vw] w-[100%];
+}
+
 .txheader {
-    @apply hidden bg-offblack text-offwhite py-2;
+    @apply hidden bg-offblack text-offwhite py-2 md:grid md:grid-cols-12;
 }
 
-.txheader,
 .txrow {
-    @apply md:flex;
+    @apply md:grid md:grid-cols-12;
 }
 
 .txheader > div,
 .txrow > div {
-    @apply md:ml-[2vw];
+    @apply break-all mx-[0.5vw];
 }
 
 .txid {
-    @apply md:w-[35vw];
+    @apply col-span-5;
 }
 
-.txtype {
-    @apply md:w-[10vw];
+.txadd {
+    @apply col-span-3;
 }
 
+.txtype,
 .txstatus {
-    @apply md:w-[5vw];
+    @apply col-span-2;
 }
 
 .txadd a {

diff --git a/explorer/client/src/components/transactions-for-id/TxForID.tsx b/explorer/client/src/components/transactions-for-id/TxForID.tsx
@@ -37,76 +37,82 @@ type TxnData = {
     To?: string;
 };
 
+type categoryType = 'address' | 'object';
+
 const getTx = async (
     id: string,
     network: string,
-    category: 'address'
-): Promise<GetTxnDigestsResponse> => rpc(network).getTransactionsForAddress(id);
+    category: categoryType
+): Promise<GetTxnDigestsResponse> =>
+    category === 'address'
+        ? rpc(network).getTransactionsForAddress(id)
+        : rpc(network).getTransactionsForObject(id);
 
 function TxForIDView({ showData }: { showData: TxnData[] | undefined }) {
     if (!showData || showData.length === 0) return <></>;
 
     return (
-        <>
-            <div>
-                <div>Transactions</div>
-                <div id="tx">
-                    <div className={styles.txheader}>
-                        <div className={styles.txid}>TxId</div>
-                        <div className={styles.txtype}>TxType</div>
-                        <div className={styles.txstatus}>Status</div>
-                        <div className={styles.txadd}>Addresses</div>
-                    </div>
+        <div id="tx" className={styles.txresults}>
+            <div className={styles.txheader}>
+                <div className={styles.txid}>TxId</div>
+                <div className={styles.txtype}>TxType</div>
+                <div className={styles.txstatus}>Status</div>
+                <div className={styles.txadd}>Addresses</div>
+            </div>
 
-                    {showData.map((x, index) => (
-                        <div key={`txid-${index}`} className={styles.txrow}>
-                            <div className={styles.txid}>
-                                <Longtext
-                                    text={x.txId}
-                                    category="transactions"
-                                    isLink={true}
-                                />
-                            </div>
-                            <div className={styles.txtype}>{x.kind}</div>
-                            <div
-                                className={cl(
-                                    styles.txstatus,
-                                    styles[x.status.toLowerCase()]
-                                )}
+            {showData.map((x, index) => (
+                <div key={`txid-${index}`} className={styles.txrow}>
+                    <div className={styles.txid}>
+                        <Longtext
+                            text={x.txId}
+                            category="transactions"
+                            isLink={true}
+                        />
+                    </div>
+                    <div className={styles.txtype}>{x.kind}</div>
+                    <div
+                        className={cl(
+                            styles.txstatus,
+                            styles[x.status.toLowerCase()]
+                        )}
+                    >
+                        {x.status === 'success' ? '\u2714' : '\u2716'}
+                    </div>
+                    <div className={styles.txadd}>
+                        <div>
+                            From:
+                            <Link
+                                className={styles.txlink}
+                                to={'addresses/' + x.From}
                             >
-                                {x.status === 'success' ? '\u2714' : '\u2716'}
-                            </div>
-                            <div className={styles.txadd}>
-                                <div>
-                                    From:
-                                    <Link
-                                        className={styles.txlink}
-                                        to={'addresses/' + x.From}
-                                    >
-                                        {truncate(x.From, 14, '...')}
-                                    </Link>
-                                </div>
-                                {x.To && (
-                                    <div>
-                                        To :
-                                        <Link
-                                            className={styles.txlink}
-                                            to={'addresses/' + x.To}
-                                        >
-                                            {truncate(x.To, 14, '...')}
-                                        </Link>
-                                    </div>
-                                )}
-                            </div>
+                                {truncate(x.From, 14, '...')}
+                            </Link>
                         </div>
-                    ))}
+                        {x.To && (
+                            <div>
+                                To :
+                                <Link
+                                    className={styles.txlink}
+                                    to={'addresses/' + x.To}
+                                >
+                                    {truncate(x.To, 14, '...')}
+                                </Link>
+                            </div>
+                        )}
+                    </div>
                 </div>
-            </div>
-        </>
+            ))}
+        </div>
     );
 }
 
-function TxForIDStatic({ id, category }: { id: string; category: 'address' }) {
+function TxForIDStatic({
+    id,
+    category,
+}: {
+    id: string;
+    category: categoryType;
+}) {
     const data = deduplicate(
         findTxfromID(id)?.data as [number, string][] | undefined
     )
@@ -116,7 +122,7 @@ function TxForIDStatic({ id, category }: { id: string; category: 'address' }) {
     return <TxForIDView showData={data} />;
 }
 
-function TxForIDAPI({ id, category }: { id: string; category: 'address' }) {
+function TxForIDAPI({ id, category }: { id: string; category: categoryType }) {
     const [showData, setData] =
         useState<{ data?: TxnData[]; loadState: string }>(DATATYPE_DEFAULT);
     const [network] = useContext(NetworkContext);
@@ -173,7 +179,7 @@ export default function TxForID({
     category,
 }: {
     id: string;
-    category: 'address';
+    category: categoryType;
 }) {
     return IS_STATIC_ENV ? (
         <TxForIDStatic id={id} category={category} />

diff --git a/explorer/client/src/pages/address-result/AddressResult.tsx b/explorer/client/src/pages/address-result/AddressResult.tsx
@@ -45,7 +45,10 @@ function AddressResult() {
                         {<OwnedObjects id={addressID} byAddress={true} />}
                     </div>
                 </div>
-                <TxForID id={addressID} category="address" />
+                <div>
+                    <div>Transactions</div>
+                    <TxForID id={addressID} category="address" />
+                </div>
             </div>
         );
     } else {

diff --git a/explorer/client/src/pages/object-result/ObjectLoaded.tsx b/explorer/client/src/pages/object-result/ObjectLoaded.tsx
@@ -6,6 +6,7 @@ import { useEffect, useState, useCallback } from 'react';
 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 theme from '../../styles/theme.module.css';
 import { type AddressOwner } from '../../utils/api/DefaultRpcClient';
 import { parseImageURL } from '../../utils/objectUtils';
@@ -22,12 +23,19 @@ function ObjectLoaded({ data }: { data: DataType }) {
     const [showDescription, setShowDescription] = useState(true);
     const [showProperties, setShowProperties] = useState(false);
     const [showConnectedEntities, setShowConnectedEntities] = useState(false);
+    const [showTx, setShowTx] = useState(true);
 
     useEffect(() => {
         setShowDescription(true);
         setShowProperties(true);
         setShowConnectedEntities(true);
-    }, [setShowDescription, setShowProperties, setShowConnectedEntities]);
+        setShowTx(true);
+    }, [
+        setShowDescription,
+        setShowProperties,
+        setShowConnectedEntities,
+        setShowTx,
+    ]);
 
     const clickSetShowDescription = useCallback(
         () => setShowDescription(!showDescription),
@@ -41,6 +49,7 @@ function ObjectLoaded({ data }: { data: DataType }) {
         () => setShowConnectedEntities(!showConnectedEntities),
         [showConnectedEntities]
     );
+    const clickSetShowTx = useCallback(() => setShowTx(!showTx), [showTx]);
     const prepLabel = (label: string) => label.split('_').join(' ');
     const checkIsPropertyType = (value: any) =>
         ['number', 'string'].includes(typeof value);
@@ -243,7 +252,6 @@ function ObjectLoaded({ data }: { data: DataType }) {
                                     </div>
                                 </div>
                             )}
-
                             <div>
                                 <div>Version</div>
                                 <div>{data.version}</div>
@@ -380,6 +388,13 @@ function ObjectLoaded({ data }: { data: DataType }) {
                         data.objType !== 'Move Package' && (
                             <OwnedObjects id={data.id} byAddress={false} />
                         )}
+                    <h2
+                        className={styles.clickableheader}
+                        onClick={clickSetShowTx}
+                    >
+                        Transactions {showTx ? '' : '+'}
+                    </h2>
+                    {showTx && <TxForID id={data.id} category="object" />}
                 </div>
             </div>
         </>

diff --git a/explorer/client/src/utils/static/tx_for_id.json b/explorer/client/src/utils/static/tx_for_id.json
@@ -11,6 +11,18 @@
                 [3, "GHTP9gcFmF5KTspnz3KxXjvSH8Bx0jv68KFhdqfpdK8="],
                 [4, "XHTP9gcFmF5KTspnz3KxXjvSH8Bx0jv68KFhdqfpdK8="]
             ]
+        },
+        {
+            "id": "CollectionObject",
+            "data": [
+                [0, "Da4vHc9IwbvOYblE8LnrVsqXwryt2Kmms+xnJ7Zx5E4="],
+                [1, "Da4vHc9IwbvOYblE8LnrVsqXwryt2Kmms+xnJ7Zx5E4="],
+                [0, "GHTP9gcFmF5KTspnz3KxXjvSH8Bx0jv68KFhdqfpdK8="],
+                [1, "GHTP9gcFmF5KTspnz3KxXjvSH8Bx0jv68KFhdqfpdK8="],
+                [2, "Da4vHc9IwbvOYblE8LnrVsqXwryt2Kmms+xnJ7Zx5E4="],
+                [3, "GHTP9gcFmF5KTspnz3KxXjvSH8Bx0jv68KFhdqfpdK8="],
+                [4, "XHTP9gcFmF5KTspnz3KxXjvSH8Bx0jv68KFhdqfpdK8="]
+            ]
         }
     ]
 }