[explorer] Render the Object View with the new data model (MystenLabs…

…#1669)

* [explorer] Integrate with new RPC server

* Use new SDK

* Fix search

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

@@ -6,9 +6,13 @@ import { useLocation, useParams } from 'react-router-dom';
 
 import ErrorResult from '../../components/error-result/ErrorResult';
 import theme from '../../styles/theme.module.css';
-import { DefaultRpcClient as rpc } from '../../utils/api/SuiRpcClient';
+import { DefaultRpcClient as rpc } from '../../utils/api/DefaultRpcClient';
 import ObjectLoaded from './ObjectLoaded';
-import { type DataType } from './ObjectResultType';
+import {
+    instanceOfDataType,
+    translate,
+    type DataType,
+} from './ObjectResultType';
 
 const DATATYPE_DEFAULT: DataType = {
     id: '',
@@ -24,10 +28,6 @@ const DATATYPE_DEFAULT: DataType = {
     loadState: 'pending',
 };
 
-function instanceOfDataType(object: any): object is DataType {
-    return object && ['id', 'version', 'objType'].every((x) => x in object);
-}
-
 const Fail = ({ objID }: { objID: string | undefined }): JSX.Element => {
     return (
         <ErrorResult
@@ -43,7 +43,7 @@ const ObjectResultAPI = ({ objID }: { objID: string }): JSX.Element => {
         rpc.getObjectInfo(objID as string)
             .then((objState) => {
                 setObjectState({
-                    ...(objState as DataType),
+                    ...(translate(objState) as DataType),
                     loadState: 'loaded',
                 });
             })
@@ -75,7 +75,12 @@ const ObjectResultStatic = ({ objID }: { objID: string }): JSX.Element => {
     if (instanceOfDataType(data)) {
         return <ObjectLoaded data={data} />;
     } else {
-        return <Fail objID={objID} />;
+        try {
+            return <ObjectLoaded data={translate(data)} />;
+        } catch (err) {
+            console.error("Couldn't parse data", err);
+            return <Fail objID={objID} />;
+        }
     }
 };
 

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

@@ -3,6 +3,14 @@
 
 import { type AddressOwner } from '../../utils/api/SuiRpcClient';
 
+import type {
+    GetObjectInfoResponse,
+    ObjectExistsInfo,
+    ObjectNotExistsInfo,
+    ObjectOwner,
+    ObjectRef,
+} from 'sui.js';
+
 export type DataType = {
     id: string;
     category?: string;
@@ -23,3 +31,62 @@ export type DataType = {
     };
     loadState?: string;
 };
+
+export function instanceOfDataType(object: any): object is DataType {
+    return object && ['id', 'version', 'objType'].every((x) => x in object);
+}
+
+/**
+ * Translate the SDK response to the existing data format
+ * TODO: We should redesign the rendering logic and data model
+ * to make this more extensible and customizable for different Move types
+ */
+export function translate(o: GetObjectInfoResponse): DataType {
+    const { status, details } = o;
+    switch (status) {
+        case 'Exists': {
+            const {
+                objectRef: { objectId, version },
+                object: { contents, owner, tx_digest },
+            } = details as ObjectExistsInfo;
+
+            return {
+                id: objectId,
+                version: version.toString(),
+                objType: contents['type'],
+                owner: parseOwner(owner),
+                data: {
+                    contents: contents.fields,
+                    tx_digest,
+                },
+            };
+        }
+        case 'NotExists': {
+            const { objectId } = details as ObjectNotExistsInfo;
+            // TODO: implement this
+            throw new Error(`Implement me: Object ${objectId} does not exist`);
+        }
+        case 'Deleted': {
+            const { objectId } = details as ObjectRef;
+            // TODO: implement this
+            throw new Error(
+                `Implement me: Object ${objectId} has been deleted`
+            );
+        }
+        default: {
+            throw new Error(`Unexpected status ${status} for object ${o}`);
+        }
+    }
+}
+
+function parseOwner(owner: ObjectOwner): string {
+    let result = '';
+    if (typeof owner === 'string') {
+        result = owner;
+    } else if ('AddressOwner' in owner) {
+        result = owner['AddressOwner'];
+    } else {
+        result = owner['ObjectOwner'];
+    }
+    return `SingleOwner(k#${result})`;
+}

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

@@ -1,14 +1,15 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { DefaultRpcClient as rpc } from './SuiRpcClient';
+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 = rpc.getAddressObjects(input).then((data) => {
+    const addrPromise = legacyAPI.getAddressObjects(input).then((data) => {
         if (data.length <= 0) throw new Error('No objects for Address');
 
         return {
@@ -17,7 +18,6 @@ export const navigateWithUnknown = async (
         };
     });
 
-    // TODO:(Chirs) replace this after we can fetch `getObjectInfo` with the SDK
     const objInfoPromise = rpc.getObjectInfo(input).then((data) => ({
         category: 'objects',
         data: data,

explorer/client/src/utils/static/mock_data.json

@@ -588,6 +588,49 @@
                     }
                 }
             }
+        },
+
+        {
+            "id": "37196de8502e6d80e6a31fba1a5d6986cc018805",
+            "category": "object",
+            "status": "Exists",
+            "details": {
+                "objectRef": {
+                    "objectId": "37196de8502e6d80e6a31fba1a5d6986cc018805",
+                    "version": 0,
+                    "digest": "uP1J4ntsoN5bzSVEV+StOrzYNUXPFQ4hQVdLowPDYuM="
+                },
+                "objectType": "moveObject",
+                "object": {
+                    "contents": {
+                        "fields": {
+                            "id": {
+                                "fields": {
+                                    "id": {
+                                        "fields": {
+                                            "id": {
+                                                "fields": {
+                                                    "bytes": "37196de8502e6d80e6a31fba1a5d6986cc018805"
+                                                },
+                                                "type": "0x2::ID::ID"
+                                            }
+                                        },
+                                        "type": "0x2::ID::UniqueID"
+                                    },
+                                    "version": 0
+                                },
+                                "type": "0x2::ID::VersionedID"
+                            },
+                            "value": 100000
+                        },
+                        "type": "0x2::Coin::Coin<0x2::SUI::SUI>"
+                    },
+                    "owner": {
+                        "AddressOwner": "3997c1099d2961e09c2a302d8e3644d6ce1237ce"
+                    },
+                    "tx_digest": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="
+                }
+            }
         }
     ]
 }