LSP2 Encoder: Exchange JSONURL with VerifiableURI (#105)

* fix JSONURL styling * add VerifiableURI * fix JSONURL encoding input * exchange JSONURL with VerifiableURI
lukso-network · May 3, 2024 · 6f01941 · 6f01941
1 parent 42f1185
commit 6f01941
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 48 deletions.
diff --git a/components/Lsp2Coder/Lsp2Coder.tsx b/components/Lsp2Coder/Lsp2Coder.tsx
@@ -1,10 +1,10 @@
 import schemas from './utils/schemas';
 import valueContents from './utils/valueContents';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo, useCallback } from 'react';
 import { ERC725 } from '@erc725/erc725.js';
 import errorsDict from './utils/errorsDict';
 
-interface IJSONURLEncode {
+interface IVerifiableURIEncode {
   verification: {
     method: string;
     data: string;
@@ -16,9 +16,11 @@ interface IJSONURLEncode {
 const Lsp2Coder: React.FC = () => {
   const [valueContent, setValueContent] = useState<string>('String');
   const [encodedValue, setEncodedValue] = useState<string>('');
-  const [decodedValue, setDecodedValue] = useState<string | IJSONURLEncode>('');
-  const [jsonUrlDecodedValue, setJsonUrlDecodedValue] =
-    useState<IJSONURLEncode>({
+  const [decodedValue, setDecodedValue] = useState<
+    string | IVerifiableURIEncode
+  >('');
+  const [verifiableUriDecodedValue, setverifiableUriDecodedValue] =
+    useState<IVerifiableURIEncode>({
       verification: {
         method: '',
         data: '',
@@ -30,41 +32,43 @@ const Lsp2Coder: React.FC = () => {
   const [decodingError, setDecodingError] = useState<boolean>(false);
   const [errorMessage, setErrorMessage] = useState<string>('');
 
-  const erc725 = new ERC725(schemas);
+  const erc725 = useMemo(() => {
+    return new ERC725(schemas);
+  }, []);
 
   const renderEncoderFields = () => {
-    if (valueContent === 'JSONURL') {
+    if (valueContent === 'VerifiableURI') {
       return (
         <div className="field mt-2">
           <div className="label">Encoded value</div>
           <div className="control">
             <div className="columns">
-              <div className="is-half">
+              <div className="column is-half">
                 <textarea
-                  className="textarea"
+                  className="textarea is-fullwidth"
                   placeholder="hash"
-                  value={jsonUrlDecodedValue.verification.data}
+                  value={verifiableUriDecodedValue.verification.data}
                   rows={6}
                   onChange={(e) => {
-                    setJsonUrlDecodedValue({
-                      ...jsonUrlDecodedValue,
+                    setverifiableUriDecodedValue({
+                      ...verifiableUriDecodedValue,
                       verification: {
-                        ...jsonUrlDecodedValue.verification,
-                        method: e.target.value,
+                        ...verifiableUriDecodedValue.verification,
+                        data: e.target.value,
                       },
                     });
                   }}
                 />
               </div>
-              <div className="is-half">
+              <div className="column is-half">
                 <textarea
-                  className="textarea"
+                  className="textarea is-fullwidth"
                   placeholder="url"
-                  value={jsonUrlDecodedValue.url}
+                  value={verifiableUriDecodedValue.url}
                   rows={6}
                   onChange={(e) => {
-                    setJsonUrlDecodedValue({
-                      ...jsonUrlDecodedValue,
+                    setverifiableUriDecodedValue({
+                      ...verifiableUriDecodedValue,
                       url: e.target.value,
                     });
                   }}
@@ -113,34 +117,40 @@ const Lsp2Coder: React.FC = () => {
     setEncodingError(false);
   };
 
+  const encode = useCallback(
+    (val: string | IVerifiableURIEncode) => {
+      resetErrors();
+      try {
+        setDecodedValue(val);
+        const encoded = erc725.encodeData([
+          { keyName: valueContent, value: val },
+        ]);
+        encoded.values[0] === '0x'
+          ? setEncodedValue('')
+          : setEncodedValue(encoded.values[0]);
+      } catch (error) {
+        setEncodingError(true);
+        setEncodedValue('');
+      }
+    },
+    [erc725, valueContent],
+  );
+
   useEffect(() => {
-    if (jsonUrlDecodedValue.verification.data && jsonUrlDecodedValue.url) {
-      encode(jsonUrlDecodedValue);
+    if (
+      verifiableUriDecodedValue.verification.data &&
+      verifiableUriDecodedValue.url
+    ) {
+      encode(verifiableUriDecodedValue);
     }
-  }, [jsonUrlDecodedValue]);
+  }, [verifiableUriDecodedValue, encode]);
 
   useEffect(() => {
     if (encodingError) {
       const message = `${decodedValue} ${errorsDict[valueContent]}`;
       setErrorMessage(message);
     }
-  }, [decodedValue, encodingError]);
-
-  const encode = (val: string | IJSONURLEncode) => {
-    resetErrors();
-    try {
-      setDecodedValue(val);
-      const encoded = erc725.encodeData([
-        { keyName: valueContent, value: val },
-      ]);
-      encoded.values[0] === '0x'
-        ? setEncodedValue('')
-        : setEncodedValue(encoded.values[0]);
-    } catch (error) {
-      setEncodingError(true);
-      setEncodedValue('');
-    }
-  };
+  }, [decodedValue, encodingError, valueContent]);
 
   const decode = (val: string) => {
     resetErrors();
@@ -149,15 +159,15 @@ const Lsp2Coder: React.FC = () => {
       const decoded = erc725.decodeData([
         { keyName: valueContent, value: val },
       ]);
-      valueContent != 'JSONURL'
+      valueContent != 'VerifiableURI'
         ? setDecodedValue(decoded[0].value)
-        : setJsonUrlDecodedValue({
+        : setverifiableUriDecodedValue({
             url: decoded[0].value.url,
             verification: decoded[0].value.verification,
           });
     } catch (error) {
       setDecodedValue('');
-      setJsonUrlDecodedValue({
+      setverifiableUriDecodedValue({
         url: '',
         verification: {
           method: 'keccak256(utf8)',
@@ -172,7 +182,7 @@ const Lsp2Coder: React.FC = () => {
   const resetValues = () => {
     setDecodedValue('');
     setEncodedValue('');
-    setJsonUrlDecodedValue({
+    setverifiableUriDecodedValue({
       url: '',
       verification: {
         method: 'keccak256(utf8)',

diff --git a/components/Lsp2Coder/utils/schemas.ts b/components/Lsp2Coder/utils/schemas.ts
@@ -93,11 +93,11 @@ const schemas: ERC725JSONSchema[] = [
     valueContent: 'URL',
   },
   {
-    name: 'JSONURL',
-    key: '0x2782700556cb782590d66cc4e1a7158dd2ac8459c70d8bcc62ef1009246381f1',
+    name: 'VerifiableURI',
+    key: '0xf151b34e13f85596eba0554fc00d3919b0052a6522221c372ebc9ed85e4ca3e9',
     keyType: 'Singleton',
     valueType: 'bytes',
-    valueContent: 'JSONURL',
+    valueContent: 'VerifiableURI',
   },
   {
     name: 'Boolean',

diff --git a/components/Lsp2Coder/utils/valueContents.ts b/components/Lsp2Coder/utils/valueContents.ts
@@ -3,7 +3,7 @@ const valueContents = [
   'String',
   'Address',
   'Number',
-  // 'BytesN', //will use bytes for the momment
+  // 'BytesN', will use bytes for the momment
   'Bytes',
   'Bytes4',
   'Bytes8',
@@ -13,9 +13,10 @@ const valueContents = [
   'BitArray',
   'URL',
   // 'AssetURL', not used anymore
-  'JSONURL',
+  // 'JSONURL', deprecated
   // 'Markdown',
   // 'Literal',
+  'VerifiableURI',
 ];
 
 export default valueContents;