[explorer] Render example nft (MystenLabs#1695)

ColinkaMir · May 2, 2022 · 63c4674 · 63c4674
1 parent 319c095
commit 63c4674
Show file tree

Hide file tree

Showing 10 changed files with 311 additions and 25 deletions.
diff --git a/explorer/client/src/components/ownedobjects/OwnedObjects.tsx b/explorer/client/src/components/ownedobjects/OwnedObjects.tsx
@@ -5,6 +5,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { DefaultRpcClient as rpc } from '../../utils/api/SuiRpcClient';
+import { parseImageURL } from '../../utils/objectUtils';
 import { navigateWithUnknown } from '../../utils/searchUtil';
 import { findDataFromID } from '../../utils/static/searchUtil';
 import { trimStdLibPrefix, processDisplayValue } from '../../utils/stringUtils';
@@ -54,7 +55,9 @@ function OwnedObjectAPI({ objects }: { objects: string[] }) {
                         id: id,
                         Type: objType,
                         Version: version,
-                        display: processDisplayValue(data.contents?.display),
+                        display: parseImageURL(data)
+                            ? processDisplayValue(parseImageURL(data))
+                            : undefined,
                     }))
                 );
                 setIsLoaded(true);
@@ -88,7 +91,15 @@ function OwnedObjectView({ results }: { results: resultType }) {
                         <div className={styles.previewimage}>
                             <DisplayBox
                                 display={entryObj.display}
-                                tag="imageURL"
+                                // TODO: clean this logic
+                                tag={
+                                    typeof entryObj.display === 'object' &&
+                                    'category' in entryObj.display &&
+                                    entryObj.display['category'] ===
+                                        'moveScript'
+                                        ? 'moveScript'
+                                        : 'imageURL'
+                                }
                             />
                         </div>
                     )}

diff --git a/explorer/client/src/pages/object-result/ObjectLoaded.tsx b/explorer/client/src/pages/object-result/ObjectLoaded.tsx
@@ -8,6 +8,7 @@ import Longtext from '../../components/longtext/Longtext';
 import OwnedObjects from '../../components/ownedobjects/OwnedObjects';
 import theme from '../../styles/theme.module.css';
 import { type AddressOwner } from '../../utils/api/SuiRpcClient';
+import { parseImageURL } from '../../utils/objectUtils';
 import {
     asciiFromNumberBytes,
     trimStdLibPrefix,
@@ -105,7 +106,7 @@ function ObjectLoaded({ data }: { data: DataType }) {
     type SuiIdBytes = { bytes: number[] };
 
     function handleSpecialDemoNameArrays(data: {
-        name?: SuiIdBytes | string;
+        name?: string;
         player_name?: SuiIdBytes | string;
         monster_name?: SuiIdBytes | string;
         farm_name?: SuiIdBytes | string;
@@ -128,9 +129,10 @@ function ObjectLoaded({ data }: { data: DataType }) {
             delete data.farm_name;
             return ascii;
         } else if ('name' in data) {
-            bytesObj = data.name as SuiIdBytes;
-            return asciiFromNumberBytes(bytesObj.bytes);
-        } else bytesObj = { bytes: [] };
+            return data['name'] as string;
+        } else {
+            bytesObj = { bytes: [] };
+        }
 
         return asciiFromNumberBytes(bytesObj.bytes);
     }
@@ -175,6 +177,7 @@ function ObjectLoaded({ data }: { data: DataType }) {
                 ? toHexString(data.data.tx_digest as number[])
                 : data.data.tx_digest,
         owner: processOwner(data.owner),
+        url: parseImageURL(data.data),
     };
 
     //TO DO remove when have distinct name field under Description
@@ -205,29 +208,24 @@ function ObjectLoaded({ data }: { data: DataType }) {
     const properties = Object.entries(viewedData.data?.contents)
         //TO DO: remove when have distinct 'name' field in Description
         .filter(([key, _]) => !/name/i.test(key))
-        .filter(([_, value]) => checkIsPropertyType(value))
-        // TODO: 'display' is a object property added during demo, replace with metadata ptr?
-        .filter(([key, _]) => key !== 'display');
+        .filter(([_, value]) => checkIsPropertyType(value));
 
     return (
         <>
             <div className={styles.resultbox}>
-                {viewedData.data?.contents?.display && (
+                {viewedData.url !== '' && (
                     <div className={styles.display}>
-                        <DisplayBox
-                            display={viewedData.data.contents.display}
-                            tag="imageURL"
-                        />
+                        <DisplayBox display={viewedData.url} tag="imageURL" />
                     </div>
                 )}
                 <div
                     className={`${styles.textbox} ${
-                        data?.data.contents.display
+                        viewedData.url
                             ? styles.accommodate
                             : styles.noaccommodate
                     }`}
                 >
-                    {data.name && <h1>{data.name}</h1>} {' '}
+                    {data.name && <h1>{data.name}</h1>}{' '}
                     {typeof nameKeyValue[0] === 'string' && (
                         <h1>{nameKeyValue}</h1>
                     )}

diff --git a/explorer/client/src/utils/api/DefaultRpcClient.ts b/explorer/client/src/utils/api/DefaultRpcClient.ts
@@ -11,7 +11,7 @@ export type AddressOwner = { AddressOwner: AddressBytes };
 export type AnyVec = { vec: any[] };
 export type JsonBytes = { bytes: number[] };
 
-const useLocal = true;
+const useLocal = false;
 const LOCAL = 'http://127.0.0.1:5001';
 const DEVNET = 'http://34.105.36.61:9000';
 

diff --git a/explorer/client/src/utils/objectUtils.ts b/explorer/client/src/utils/objectUtils.ts
@@ -0,0 +1,13 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+export function parseImageURL(data: any): string {
+    if (data?.contents?.url?.fields) {
+        return data.contents.url.fields['url'];
+    }
+    // TODO: Remove Legacy format
+    if (data?.contents?.display) {
+        return data.contents.display;
+    }
+    return '';
+}
diff --git a/explorer/client/src/utils/stringUtils.ts b/explorer/client/src/utils/stringUtils.ts
@@ -19,10 +19,21 @@ export function hexToAscii(hex: string) {
 export const trimStdLibPrefix = (str: string): string =>
     str.replace(/^0x2::/, '');
 
-export const processDisplayValue = (display: { bytes: number[] } | string) =>
-    typeof display === 'object' && 'bytes' in display
-        ? asciiFromNumberBytes(display.bytes)
-        : display;
+export const processDisplayValue = (display: { bytes: number[] } | string) => {
+    const url =
+        typeof display === 'object' && 'bytes' in display
+            ? asciiFromNumberBytes(display.bytes)
+            : display;
+    return typeof url === 'string' ? transformURL(url) : url;
+};
+
+function transformURL(url: string) {
+    const found = url.match(/^ipfs:\/\/(.*)/);
+    if (!found) {
+        return url;
+    }
+    return `https://ipfs.io/ipfs/${found[1]}`;
+}
 
 /* Currently unused but potentially useful:
  *

diff --git a/sdk/typescript/src/index.guard.ts b/sdk/typescript/src/index.guard.ts
@@ -387,8 +387,7 @@ export function isExecutionStatus(obj: any, _argumentName?: string): obj is Exec
             (obj.Failure !== null &&
                 typeof obj.Failure === "object" ||
                 typeof obj.Failure === "function") &&
-            isGasCostSummary(obj.Failure.gas_cost) as boolean &&
-            isTransactionResponse(obj.Failure.error) as boolean)
+            isGasCostSummary(obj.Failure.gas_cost) as boolean)
     )
 }
 

diff --git a/sdk/typescript/src/types/transactions.ts b/sdk/typescript/src/types/transactions.ts
@@ -47,7 +47,7 @@ export type GasCostSummary = {
 
 export type ExecutionStatus =
   | { Success: { gas_cost: GasCostSummary } }
-  | { Failure: { gas_cost: GasCostSummary; error: string } };
+  | { Failure: { gas_cost: GasCostSummary; error: any } };
 
 // TODO: change the tuple to struct from the server end
 export type OwnedObjectRef = [RawObjectRef, ObjectOwner];