[explorer] Updates Owned Objects to match RPC Model (MystenLabs#1678)

Co-authored-by: Chris Li <666lcz@gmail.com>

explorer/client/src/components/ownedobjects/OwnedObjects.tsx

@@ -3,29 +3,33 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { getObjectExistsResponse } from 'sui.js';
 
-import { DefaultRpcClient as rpc } from '../../utils/api/SuiRpcClient';
+import { DefaultRpcClient as rpc } from '../../utils/api/DefaultRpcClient';
 import { parseImageURL } from '../../utils/objectUtils';
 import { navigateWithUnknown } from '../../utils/searchUtil';
-import { findDataFromID } from '../../utils/static/searchUtil';
-import { trimStdLibPrefix, processDisplayValue } from '../../utils/stringUtils';
+import {
+    findDataFromID,
+    findOwnedObjectsfromID,
+} from '../../utils/static/searchUtil';
+import { processDisplayValue, trimStdLibPrefix } from '../../utils/stringUtils';
 import DisplayBox from '../displaybox/DisplayBox';
 
+import type { ObjectRef } from 'sui.js';
+
 import styles from './OwnedObjects.module.css';
 
 type resultType = {
     id: string;
     Type: string;
-    Version: string;
+    Version?: string;
     display?: string;
 }[];
 
 const DATATYPE_DEFAULT: resultType = [
     {
         id: '',
         Type: '',
-        Version: '',
-        display: '',
     },
 ];
 
@@ -51,14 +55,22 @@ function OwnedObjectAPI({ objects }: { objects: string[] }) {
         Promise.all(objects.map((objID) => rpc.getObjectInfo(objID))).then(
             (results) => {
                 setResults(
-                    results.map(({ id, objType, version, data }) => ({
-                        id: id,
-                        Type: objType,
-                        Version: version,
-                        display: parseImageURL(data)
-                            ? processDisplayValue(parseImageURL(data))
-                            : undefined,
-                    }))
+                    results
+                        .filter(({ status }) => status === 'Exists')
+                        .map(
+                            (resp) => {
+                                const info = getObjectExistsResponse(resp)!;
+                                const url = parseImageURL(info.object);
+                                return {
+                                    id: info.objectRef.objectId,
+                                    Type: info.object.contents.type,
+                                    display: url
+                                        ? processDisplayValue(url)
+                                        : undefined,
+                                };
+                            }
+                            //TO DO - add back display and version
+                        )
                 );
                 setIsLoaded(true);
             }
@@ -139,7 +151,38 @@ function OwnedObjectView({ results }: { results: resultType }) {
     );
 }
 
-function OwnedObject({ objects }: { objects: string[] }) {
+function GetObjectsStatic({ id }: { id: string }) {
+    const objects = findOwnedObjectsfromID(id);
+
+    if (objects !== undefined) {
+        return (
+            <OwnedObjectSection
+                objects={objects.map(({ objectId }) => objectId)}
+            />
+        );
+    }
+
+    return <div />;
+}
+
+function GetObjectsAPI({ id }: { id: string }) {
+    const [objects, setObjects] = useState<ObjectRef[]>([]);
+    useEffect(() => {
+        rpc.getOwnedObjectRefs(id).then((objects) => setObjects(objects));
+    }, [id]);
+    return (
+        <OwnedObjectSection objects={objects.map(({ objectId }) => objectId)} />
+    );
+}
+function OwnedObject({ id }: { id: string }) {
+    if (process.env.REACT_APP_DATA === 'static') {
+        return <GetObjectsStatic id={id} />;
+    } else {
+        return <GetObjectsAPI id={id} />;
+    }
+}
+
+function OwnedObjectSection({ objects }: { objects: string[] }) {
     const [pageIndex, setPageIndex] = useState(0);
 
     const ITEMS_PER_PAGE = 12;

explorer/client/src/pages/address-result/AddressResult.tsx

@@ -1,14 +1,12 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useEffect, useState } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import ErrorResult from '../../components/error-result/ErrorResult';
 import Longtext from '../../components/longtext/Longtext';
 import OwnedObjects from '../../components/ownedobjects/OwnedObjects';
 import theme from '../../styles/theme.module.css';
-import { DefaultRpcClient as rpc } from '../../utils/api/SuiRpcClient';
 
 type DataType = {
     id: string;
@@ -24,124 +22,30 @@ function instanceOfDataType(object: any): object is DataType {
     return object !== undefined && ['id', 'objects'].every((x) => x in object);
 }
 
-function instanceOfResponseType(input: any): input is ResponseType {
-    return input && input.length > 0 && input[0].objectId;
-}
+function AddressResult() {
+    const { id: addressID } = useParams();
 
-function Loaded({ data }: { data: DataType }) {
-    return (
-        <div className={theme.textresults} id="textResults">
-            <div>
-                <div>Address ID</div>
-                <div id="addressID">
-                    <Longtext
-                        text={data.id}
-                        category="addresses"
-                        isLink={false}
-                    />
-                </div>
-            </div>
-            <div>
-                <div>Owned Objects</div>
+    if (addressID !== undefined) {
+        return (
+            <div className={theme.textresults} id="textResults">
                 <div>
-                    {
-                        <OwnedObjects
-                            objects={data.objects.map(
-                                ({ objectId }) => objectId
-                            )}
+                    <div>Address ID</div>
+                    <div id="addressID">
+                        <Longtext
+                            text={addressID}
+                            category="addresses"
+                            isLink={false}
                         />
-                    }
+                    </div>
+                </div>
+                <div>
+                    <div>Owned Objects</div>
+                    <div>{<OwnedObjects id={addressID} />}</div>
                 </div>
             </div>
-        </div>
-    );
-}
-
-function Pending() {
-    return <div className={theme.pending}>Please wait for results to load</div>;
-}
-
-function Fail({ id }: { id: string | undefined }) {
-    return (
-        <ErrorResult
-            id={id}
-            errorMsg="No objects were found for the queried address value"
-        />
-    );
-}
-
-function AddressResultStatic({ addressID }: { addressID: string | undefined }) {
-    const { findDataFromID } = require('../../utils/static/searchUtil');
-    const data = findDataFromID(addressID, undefined);
-
-    if (instanceOfDataType(data) && instanceOfResponseType(data.objects)) {
-        return <Loaded data={data} />;
-    } else {
-        return <Fail id={addressID} />;
-    }
-}
-
-function AddressResultAPI({ addressID }: { addressID: string | undefined }) {
-    const defaultData = (addressID: string | undefined) => ({
-        id: addressID,
-        objects: [{}],
-        loadState: 'pending',
-    });
-    const [data, setData] = useState(defaultData(addressID));
-
-    useEffect(() => {
-        if (addressID === undefined) return;
-
-        rpc.getAddressObjects(addressID as string)
-            .then((json) => {
-                setData({
-                    id: addressID,
-                    objects: json,
-                    loadState: 'loaded',
-                });
-            })
-            .catch((error) => {
-                console.log(error);
-                setData({ ...defaultData(addressID), loadState: 'fail' });
-            });
-    }, [addressID]);
-
-    if (
-        instanceOfDataType(data) &&
-        instanceOfResponseType(data.objects) &&
-        data.loadState === 'loaded'
-    ) {
-        return <Loaded data={data} />;
-    }
-
-    if (data.loadState === 'pending') {
-        return <Pending />;
-    }
-
-    return <Fail id={addressID} />;
-}
-
-function AddressResult() {
-    const { id: addressID } = useParams();
-    const { state } = useLocation();
-
-    if (instanceOfResponseType(state)) {
-        const stringid = addressID === undefined ? '' : addressID;
-        return (
-            <Loaded
-                data={{
-                    id: stringid,
-                    objects: state,
-                    loadState: 'loaded',
-                }}
-            />
         );
-    }
-
-    if (process.env.REACT_APP_DATA !== 'static') {
-        return <AddressResultAPI addressID={addressID} />;
     } else {
-        return <AddressResultStatic addressID={addressID} />;
+        return <ErrorResult id={addressID} errorMsg={'Something went wrong'} />;
     }
 }
 

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

@@ -364,7 +364,7 @@ function ObjectLoaded({ data }: { data: DataType }) {
                                                 key={`ConnectedEntity-${index1}`}
                                             >
                                                 <div>{prepLabel(key)}</div>
-                                                <OwnedObjects objects={value} />
+                                                <OwnedObjects id={data.id} />
                                             </div>
                                         )
                                     )}

explorer/client/src/utils/api/searchUtil.ts

@@ -2,22 +2,19 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { DefaultRpcClient as rpc } from './DefaultRpcClient';
-import { DefaultRpcClient as legacyAPI } from './SuiRpcClient';
 
 export const navigateWithUnknown = async (
     input: string,
     navigate: Function
 ) => {
-    // TODO - replace multi-request search with backend function when ready
-    const addrPromise = legacyAPI.getAddressObjects(input).then((data) => {
+    const addrPromise = rpc.getOwnedObjectRefs(input).then((data) => {
         if (data.length <= 0) throw new Error('No objects for Address');
 
         return {
             category: 'addresses',
             data: data,
         };
     });
-
     const objInfoPromise = rpc.getObjectInfo(input).then((data) => ({
         category: 'objects',
         data: data,