Fetch different data keys for Digital Assets (#91)

* feat: add schemas to fetch LSP4 + LSP8 metadata * feat: improve decoding for numbers * refactor: don't display raw value in decode value field
lukso-network · Feb 13, 2024 · 142a16e · 142a16e
1 parent c81e677
commit 142a16e
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 10 deletions.
diff --git a/components/DataKeysTable/AssetSchema.json b/components/DataKeysTable/AssetSchema.json
@@ -0,0 +1,44 @@
+[
+  {
+    "name": "SupportedStandards:LSP4DigitalAsset",
+    "key": "0xeafec4d89fa9619884b60000a4d96624a38f7ac2d8d9a604ecf07c12c77e480c",
+    "keyType": "Mapping",
+    "valueType": "bytes4",
+    "valueContent": "0xa4d96624"
+  },
+  {
+    "name": "LSP4TokenName",
+    "key": "0xdeba1e292f8ba88238e10ab3c7f88bd4be4fac56cad5194b6ecceaf653468af1",
+    "keyType": "Singleton",
+    "valueType": "string",
+    "valueContent": "String"
+  },
+  {
+    "name": "LSP4TokenSymbol",
+    "key": "0x2f0a68ab07768e01943a599e73362a0e17a63a72e94dd2e384d2c1d4db932756",
+    "keyType": "Singleton",
+    "valueType": "string",
+    "valueContent": "String"
+  },
+  {
+    "name": "LSP4TokenType",
+    "key": "0xe0261fa95db2eb3b5439bd033cda66d56b96f92f243a8228fd87550ed7bdfdb3",
+    "keyType": "Singleton",
+    "valueType": "uint256",
+    "valueContent": "Number"
+  },
+  {
+    "name": "LSP4Metadata",
+    "key": "0x9afb95cacc9f95858ec44aa8c3b685511002e30ae54415823f406128b85b238e",
+    "keyType": "Singleton",
+    "valueType": "bytes",
+    "valueContent": "VerifiableURI"
+  },
+  {
+    "name": "LSP4Creators[]",
+    "key": "0x114bd03b3a46d48759680d81ebb2b414fda7d030a7105a851867accf1c2352e7",
+    "keyType": "Array",
+    "valueType": "address",
+    "valueContent": "Address"
+  }
+]
diff --git a/components/DataKeysTable/DataKeysTable.tsx b/components/DataKeysTable/DataKeysTable.tsx
@@ -4,7 +4,10 @@ import { ERC725JSONSchema } from '@erc725/erc725.js';
 import AddressButtons from '../AddressButtons';
 import ValueTypeDecoder from '../ValueTypeDecoder';
 
-import Schema from './Schema.json';
+import ProfileSchema from './ProfileSchema.json';
+import AssetSchema from './AssetSchema.json';
+import LSP8Schema from './LSP8Schema.json';
+
 import { SCHEMA_DOCS_LINKS, SchemaName } from './schemas';
 
 import { getDataBatch } from '../../utils/web3';
@@ -14,9 +17,16 @@ import useWeb3 from '../../hooks/useWeb3';
 interface Props {
   address: string;
   isErc725Y: boolean;
+  isAsset: boolean;
+  isLSP8: boolean;
 }
 
-const DataKeysTable: React.FC<Props> = ({ address, isErc725Y }) => {
+const DataKeysTable: React.FC<Props> = ({
+  address,
+  isErc725Y,
+  isAsset,
+  isLSP8,
+}) => {
   const [data, setData] = useState<
     {
       key: string;
@@ -41,15 +51,24 @@ const DataKeysTable: React.FC<Props> = ({ address, isErc725Y }) => {
 
       try {
         if (isErc725Y) {
-          const dataKeys = Schema.map((schema) => schema.key);
+          let schemaToLoad = ProfileSchema;
+
+          if (isAsset) {
+            schemaToLoad = AssetSchema;
+
+            if (isLSP8) {
+              schemaToLoad = schemaToLoad.concat(LSP8Schema);
+            }
+          }
+          const dataKeys = schemaToLoad.map((schema) => schema.key);
 
           const result = await getDataBatch(address, dataKeys, web3);
 
           result.map((_, i) => {
             dataResult.push({
               key: dataKeys[i],
               value: result[i],
-              schema: Schema[i] as ERC725JSONSchema,
+              schema: schemaToLoad[i] as ERC725JSONSchema,
             });
           });
         }
@@ -61,7 +80,7 @@ const DataKeysTable: React.FC<Props> = ({ address, isErc725Y }) => {
     };
 
     fetch();
-  }, [address, web3, isErc725Y]);
+  }, [address, web3, isErc725Y, isAsset, isLSP8]);
 
   if (!web3) return <p>error: could not load provider</p>;
 
@@ -111,13 +130,13 @@ const DataKeysTable: React.FC<Props> = ({ address, isErc725Y }) => {
                 </li>
                 <li>
                   <strong>Decoded value: </strong>
-                  <div className="my-3 mr-3">
+                  <span className="my-3 mr-3">
                     <ValueTypeDecoder
                       address={address}
                       erc725JSONSchema={data.schema}
                       value={data.value}
                     />
-                  </div>
+                  </span>
                 </li>
                 {data.schema.keyType === 'MappingWithGrouping' && (
                   <li>

diff --git a/components/DataKeysTable/LSP8Schema.json b/components/DataKeysTable/LSP8Schema.json
@@ -0,0 +1,16 @@
+[
+  {
+    "name": "LSP8TokenIdFormat",
+    "key": "0xf675e9361af1c1664c1868cfa3eb97672d6b1a513aa5b81dec34c9ee330e818d",
+    "keyType": "Singleton",
+    "valueType": "uint256",
+    "valueContent": "Number"
+  },
+  {
+    "name": "LSP8TokenMetadataBaseURI",
+    "key": "0x1a7628600c3bac7101f53697f48df381ddc36b9015e7d7c9c5633d1252aa2843",
+    "keyType": "Singleton",
+    "valueType": "bytes",
+    "valueContent": "VerifiableURI"
+  }
+]
diff --git a/components/DataKeysTable/Schema.json → components/DataKeysTable/ProfileSchema.json b/components/DataKeysTable/Schema.json → components/DataKeysTable/ProfileSchema.json
diff --git a/components/ValueTypeDecoder/ValueTypeDecoder.tsx b/components/ValueTypeDecoder/ValueTypeDecoder.tsx
@@ -63,7 +63,10 @@ const ValueTypeDecoder: React.FC<Props> = ({
   }, [address, web3]);
 
   try {
-    if (typeof decodedDataOneKey[0].value === 'string') {
+    if (
+      typeof decodedDataOneKey[0].value === 'string' ||
+      typeof decodedDataOneKey[0].value === 'number'
+    ) {
       if (erc725JSONSchema.valueContent === 'Address') {
         return (
           <>
@@ -74,7 +77,13 @@ const ValueTypeDecoder: React.FC<Props> = ({
         );
       }
 
-      return <code>{value}</code>;
+      return (
+        <>
+          <span className="tag is-medium is-info is-light">
+            {decodedDataOneKey[0].value}
+          </span>
+        </>
+      );
     }
 
     if (

diff --git a/pages/inspector.tsx b/pages/inspector.tsx
@@ -375,7 +375,12 @@ const Home: NextPage = () => {
                 </>
                 {isErc725X && <UPOwner UPAddress={address} />}
                 <h3 className="title is-3">Data Keys</h3>
-                <DataKeysTable address={address} isErc725Y={isErc725Y} />
+                <DataKeysTable
+                  address={address}
+                  isErc725Y={isErc725Y}
+                  isAsset={isLSP7DigitalAsset || isLSP8IdentifiableDigitalAsset}
+                  isLSP8={isLSP8IdentifiableDigitalAsset}
+                />
               </>
             )}
         </div>