LSP28 Grid Data Key Addition

components/DataKeysTable/DataKeysTable.tsx

@@ -63,7 +63,6 @@ const DataKeysTable: React.FC<Props> = ({
           const dataKeys = schemaToLoad.map((schema) => schema.key);
 
           const result = await getDataBatch(address, dataKeys, web3);
-
           result.map((_, i) => {
             dataResult.push({
               key: dataKeys[i],

components/DataKeysTable/ProfileSchema.json

@@ -20,6 +20,13 @@
     "valueType": "bytes",
     "valueContent": "VerifiableURI"
   },
+  {
+    "name": "LSP28TheGrid",
+    "key": "0x724141d9918ce69e6b8afcf53a91748466086ba2c74b94cab43c649ae2ac23ff",
+    "keyType": "Singleton",
+    "valueType": "bytes",
+    "valueContent": "VerifiableURI"
+  },
   {
     "name": "LSP5ReceivedAssets[]",
     "key": "0x6460ee3c0aac563ccbf76d6e1d07bada78e3a9514e6382b736ed3f478ab7b90b",

components/DataKeysTable/schemas.ts

@@ -6,6 +6,7 @@ export enum SchemaName {
   'AddressPermissions[]' = 'AddressPermissions[]',
   'LSP10Vaults[]' = 'LSP10Vaults[]',
   'LSP12IssuedAssets[]' = 'LSP12IssuedAssets[]',
+  'LSP28TheGrid' = 'LSP28TheGrid',
 }
 
 export const SCHEMA_DOCS_LINKS: { [key in SchemaName]: string } = {
@@ -23,4 +24,5 @@ export const SCHEMA_DOCS_LINKS: { [key in SchemaName]: string } = {
     'https://docs.lukso.tech/standards/universal-profile/lsp10-received-vaults',
   'LSP12IssuedAssets[]':
     'https://docs.lukso.tech/standards/universal-profile/lsp12-issued-assets',
+  LSP28TheGrid: 'https://docs.lukso.tech/standards/standard-detection', // TODO: update with correct link
 };

components/ValueTypeDecoder/ValueTypeDecoder.tsx

@@ -139,6 +139,14 @@ const ValueTypeDecoder: React.FC<Props> = ({
       erc725JSONSchema.valueContent === 'VerifiableURI' ||
       erc725JSONSchema.valueContent === 'JSONURL'
     ) {
+      if (
+        !decodedDataOneKey ||
+        !decodedDataOneKey[0] ||
+        !decodedDataOneKey[0].value
+      ) {
+        return <span className="help">No data found for this key.</span>;
+      }
+
       return (
         <>
           <pre>{JSON.stringify(decodedDataOneKey[0].value, null, 4)}</pre>
@@ -147,21 +155,22 @@ const ValueTypeDecoder: React.FC<Props> = ({
             URL:
             <code className="ml-2">{decodedDataOneKey[0].value.url}</code>
           </span>
-          {decodedDataOneKey[0].value.url.indexOf('ipfs://') !== -1 && (
-            <>
-              <a
-                className="has-text-link button is-small is-light is-info"
-                target="_blank"
-                rel="noreferrer"
-                href={`${LUKSO_IPFS_BASE_URL}/${decodedDataOneKey[0].value.url.replace(
-                  'ipfs://',
-                  '',
-                )}`}
-              >
-                Retrieve IPFS File ↗️
-              </a>
-            </>
-          )}
+          {decodedDataOneKey[0].value.url &&
+            decodedDataOneKey[0].value.url.indexOf('ipfs://') !== -1 && (
+              <>
+                <a
+                  className="has-text-link button is-small is-light is-info"
+                  target="_blank"
+                  rel="noreferrer"
+                  href={`${LUKSO_IPFS_BASE_URL}/${decodedDataOneKey[0].value.url.replace(
+                    'ipfs://',
+                    '',
+                  )}`}
+                >
+                  Retrieve IPFS File ↗️
+                </a>
+              </>
+            )}
         </>
       );
     }

pages/data-fetcher.tsx

@@ -29,6 +29,10 @@ import { NetworkContext } from '@/contexts/NetworksContext';
 import { useRouter } from 'next/router';
 import { isValidTuple } from '@erc725/erc725.js/build/main/src/lib/decodeData';
 
+// using local variable for LSP28TheGrid key for now
+const LSP28_THE_GRID_KEY =
+  '0x724141d9918ce69e6b8afcf53a91748466086ba2c74b94cab43c649ae2ac23ff';
+
 const dataKeyList = [
   ...LSP1DataKeys.map((key) => ({ name: key.name, key: key.key, icon: '📢' })),
   ...LSP3DataKeys.map((key) => ({ name: key.name, key: key.key, icon: '👤' })),
@@ -40,6 +44,7 @@ const dataKeyList = [
   ...LSP10DataKeys.map((key) => ({ name: key.name, key: key.key, icon: '🔒' })),
   ...LSP12DataKeys.map((key) => ({ name: key.name, key: key.key, icon: '🖼️' })),
   ...LSP17DataKeys.map((key) => ({ name: key.name, key: key.key, icon: '💎' })),
+  { name: 'LSP28TheGrid', key: LSP28_THE_GRID_KEY, icon: '🌐' },
 ];
 
 const GetData: NextPage = () => {
@@ -73,6 +78,13 @@ const GetData: NextPage = () => {
     ...LSP10DataKeys,
     ...LSP12DataKeys,
     ...LSP17DataKeys,
+    {
+      name: 'LSP28TheGrid',
+      key: LSP28_THE_GRID_KEY,
+      keyType: 'Singleton',
+      valueType: 'bytes',
+      valueContent: 'VerifiableURI',
+    },
   ];
 
   useEffect(() => {
@@ -164,12 +176,21 @@ const GetData: NextPage = () => {
       setData(data);
 
       const foundSchema = getSchema(dataKey) as ERC725JSONSchema;
-
-      if (!foundSchema) {
+      if (!foundSchema && dataKey !== LSP28_THE_GRID_KEY) {
+        return;
+      }
+      let keyName, valueType, valueContent;
+
+      if (foundSchema) {
+        ({ name: keyName, valueType, valueContent } = foundSchema);
+      } else if (dataKey === LSP28_THE_GRID_KEY) {
+        keyName = 'LSP28TheGrid';
+        valueType = 'bytes';
+        valueContent = 'VerifiableURI';
+      } else {
+        console.error('Unknown schema');
         return;
       }
-
-      const { name: keyName, valueType, valueContent } = foundSchema;
 
       let decodedValue;
 
@@ -189,12 +210,10 @@ const GetData: NextPage = () => {
           },
         ]);
       }
-
       const decodedResult =
         valueContent == 'VerifiableURI' || isValidTuple(valueType, valueContent)
           ? JSON.stringify(decodedValue[0].value, null, 4)
           : decodedValue[0].value;
-
       setDecodedData(decodedResult);
     }
   };