Update explorer to v1 of app-data (#552)

* Update explorer to v1 of app-data * Go back to ethers v5 and use the latest app-data * Handle legacy IPFS data
cowprotocol · Jul 18, 2023 · 2ec40ea · 2ec40ea
1 parent ce607b0
commit 2ec40ea
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
   "author": "",
   "dependencies": {
     "@apollo/client": "^3.1.5",
-    "@cowprotocol/app-data": "v0.1.0",
+    "@cowprotocol/app-data": "v1.0.0-rc.4",
     "@cowprotocol/contracts": "1.3.1",
     "@cowprotocol/cow-sdk": "^2.2.1",
     "@fortawesome/fontawesome-svg-core": "^6.1.2",

diff --git a/src/apps/explorer/pages/AppData/EncodePage.tsx b/src/apps/explorer/pages/AppData/EncodePage.tsx
@@ -137,7 +137,7 @@ const EncodePage: React.FC<EncodeProps> = ({ tabData, setTabData, handleTabChang
   const onSubmit = useCallback(async ({ formData }: FormProps): Promise<void> => {
     setIsLoading(true)
     try {
-      const hashInfo = await metadataApiSDK.calculateAppDataHash(handleFormatData(formData))
+      const hashInfo = await metadataApiSDK.appDataToCid(handleFormatData(formData))
       setIpfsHashInfo(hashInfo)
     } catch (e) {
       setError(e.message)
@@ -159,7 +159,7 @@ const EncodePage: React.FC<EncodeProps> = ({ tabData, setTabData, handleTabChang
       if (!ipfsHashInfo) return
       setIsLoading(true)
       try {
-        await metadataApiSDK.uploadMetadataDocToIpfs(handleFormatData(appDataForm), formData)
+        await metadataApiSDK.uploadMetadataDocToIpfsLegacy(handleFormatData(appDataForm), formData)
         setIsDocUploaded(true)
       } catch (e) {
         if (INVALID_IPFS_CREDENTIALS.includes(e.message)) {
@@ -240,8 +240,8 @@ const EncodePage: React.FC<EncodeProps> = ({ tabData, setTabData, handleTabChang
                 </p>
                 <RowWithCopyButton
                   className="appData-hash"
-                  textToCopy={ipfsHashInfo.appDataHash}
-                  contentsToDisplay={ipfsHashInfo.appDataHash}
+                  textToCopy={ipfsHashInfo.appDataHex}
+                  contentsToDisplay={ipfsHashInfo.appDataHex}
                 />
                 <p className="disclaimer">Note: Don’t forget to upload this file to IPFS!</p>
               </>
@@ -313,10 +313,10 @@ const EncodePage: React.FC<EncodeProps> = ({ tabData, setTabData, handleTabChang
           <>
             <RowWithCopyButton
               className="appData-hash"
-              textToCopy={`${DEFAULT_IPFS_READ_URI}/${ipfsHashInfo?.cidV0}`}
+              textToCopy={`${DEFAULT_IPFS_READ_URI}/${ipfsHashInfo?.cid}`}
               contentsToDisplay={
-                <a href={`${DEFAULT_IPFS_READ_URI}/${ipfsHashInfo?.cidV0}`} target="_blank" rel="noopener noreferrer">
-                  {ipfsHashInfo?.cidV0}
+                <a href={`${DEFAULT_IPFS_READ_URI}/${ipfsHashInfo?.cid}`} target="_blank" rel="noopener noreferrer">
+                  {ipfsHashInfo?.cid}
                 </a>
               }
             />

diff --git a/src/apps/explorer/pages/AppData/config.tsx b/src/apps/explorer/pages/AppData/config.tsx
@@ -1,8 +1,9 @@
 import React, { RefObject } from 'react'
 import Form, { AjvError, FieldProps, FormValidation } from '@rjsf/core'
-import { LATEST_APP_DATA_VERSION, getAppDataSchema } from '@cowprotocol/app-data'
+import { LATEST_APP_DATA_VERSION } from '@cowprotocol/app-data'
 import { JSONSchema7 } from 'json-schema'
 import { HelpTooltip } from 'components/Tooltip'
+import { metadataApiSDK } from 'cowSdk'
 
 const ERROR_MESSAGES = {
   REQUIRED: 'Required field.',
@@ -24,7 +25,7 @@ export const INVALID_IPFS_CREDENTIALS = [
 export type FormProps = Record<string, any>
 
 export const getSchema = async (): Promise<JSONSchema7> => {
-  const latestSchema = (await getAppDataSchema(LATEST_APP_DATA_VERSION)) as JSONSchema7
+  const latestSchema = (await metadataApiSDK.getAppDataSchema(LATEST_APP_DATA_VERSION)) as JSONSchema7
   deleteAllPropertiesByName(latestSchema, 'examples')
   deleteAllPropertiesByName(latestSchema, '$id')
   return formatSchema(latestSchema)

diff --git a/src/components/AppData/DecodeAppData.tsx b/src/components/AppData/DecodeAppData.tsx
@@ -5,7 +5,7 @@ import { RowWithCopyButton } from 'components/common/RowWithCopyButton'
 import { Notification } from 'components/Notification'
 import Spinner from 'components/common/Spinner'
 import { DEFAULT_IPFS_READ_URI, IPFS_INVALID_APP_IDS } from 'const'
-import { getCidHashFromAppData, getDecodedAppData } from 'hooks/useAppData'
+import { appDataHexToCid, fetchDocFromAppDataHex } from 'hooks/useAppData'
 import useSafeState from 'hooks/useSafeState'
 
 type Props = {
@@ -16,6 +16,7 @@ type Props = {
 
 async function _getDecodedAppData(
   appData: string,
+  isLegacyAppDataHex: boolean,
   fullAppData?: string,
 ): Promise<{ decodedAppData?: void | AnyAppDataDocVersion; isError: boolean }> {
   // If the full appData is available, we try to parse it as JSON
@@ -32,7 +33,7 @@ async function _getDecodedAppData(
     return { isError: true }
   }
 
-  const decodedAppData = await getDecodedAppData(appData.toString())
+  const decodedAppData = await fetchDocFromAppDataHex(appData.toString(), isLegacyAppDataHex)
   return { isError: false, decodedAppData }
 }
 
@@ -45,18 +46,21 @@ const DecodeAppData = (props: Props): JSX.Element => {
 
   const [showDecodedAppData, setShowDecodedAppData] = useSafeState<boolean>(showExpanded)
 
+  // Old AppData use a different way to derive the CID (we know is old if fullAppData is not available)
+  const isLegacyAppDataHex = fullAppData === undefined
+
   useEffect(() => {
     const fetchIPFS = async (): Promise<void> => {
       try {
-        const decodedAppDataHex = await getCidHashFromAppData(appData.toString())
-        setIpfsUri(`${DEFAULT_IPFS_READ_URI}/${decodedAppDataHex}`)
+        const cid = await appDataHexToCid(appData.toString(), isLegacyAppDataHex)
+        setIpfsUri(`${DEFAULT_IPFS_READ_URI}/${cid}`)
       } catch {
         setAppDataError(true)
       }
     }
 
     fetchIPFS()
-  }, [appData, setAppDataError, setIpfsUri])
+  }, [appData, setAppDataError, setIpfsUri, isLegacyAppDataHex])
 
   const handleDecodedAppData = useCallback(
     async (isOpen?: boolean): Promise<void> => {
@@ -67,7 +71,7 @@ const DecodeAppData = (props: Props): JSX.Element => {
 
       setAppDataLoading(true)
       try {
-        const { isError, decodedAppData } = await _getDecodedAppData(appData, fullAppData)
+        const { isError, decodedAppData } = await _getDecodedAppData(appData, isLegacyAppDataHex, fullAppData)
         if (isError) {
           setAppDataError(true)
         } else {
@@ -89,6 +93,7 @@ const DecodeAppData = (props: Props): JSX.Element => {
       setDecodedAppData,
       setShowDecodedAppData,
       showDecodedAppData,
+      isLegacyAppDataHex,
     ],
   )
 

diff --git a/src/hooks/useAppData.ts b/src/hooks/useAppData.ts
@@ -6,6 +6,7 @@ import { DEFAULT_IPFS_READ_URI } from 'const'
 
 export const useAppData = (
   appDataHash: string,
+  isLegacyAppDataHex: boolean,
 ): { isLoading: boolean; appDataDoc: AnyAppDataDocVersion | void | undefined } => {
   const network = useNetworkId() || undefined
   const [isLoading, setLoading] = useState<boolean>(false)
@@ -14,7 +15,7 @@ export const useAppData = (
     async function getAppDataDoc(): Promise<void> {
       setLoading(true)
       try {
-        const decodedAppData = await getDecodedAppData(appDataHash)
+        const decodedAppData = await fetchDocFromAppDataHex(appDataHash, isLegacyAppDataHex)
         setAppDataDoc(decodedAppData)
       } catch (e) {
         const msg = `Failed to fetch appData document`
@@ -25,15 +26,20 @@ export const useAppData = (
       }
     }
     getAppDataDoc()
-  }, [appDataHash, network])
+  }, [appDataHash, network, isLegacyAppDataHex])
 
   return { isLoading, appDataDoc }
 }
 
-export const getDecodedAppData = (appDataHash: string): Promise<void | AnyAppDataDocVersion> => {
-  return metadataApiSDK.decodeAppData(appDataHash, DEFAULT_IPFS_READ_URI)
+export const fetchDocFromAppDataHex = (
+  appDataHex: string,
+  isLegacyAppDataHex: boolean,
+): Promise<void | AnyAppDataDocVersion> => {
+  const method = isLegacyAppDataHex ? 'fetchDocFromAppDataHexLegacy' : 'fetchDocFromAppDataHex'
+  return metadataApiSDK[method](appDataHex, DEFAULT_IPFS_READ_URI)
 }
 
-export const getCidHashFromAppData = (appDataHash: string): Promise<string | void> => {
-  return metadataApiSDK.appDataHexToCid(appDataHash)
+export const appDataHexToCid = (appDataHash: string, isLegacyAppDataHex: boolean): Promise<string | void> => {
+  const method = isLegacyAppDataHex ? 'appDataHexToCidLegacy' : 'appDataHexToCid'
+  return metadataApiSDK[method](appDataHash)
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1369,14 +1369,15 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
-"@cowprotocol/app-data@v0.1.0":
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/@cowprotocol/app-data/-/app-data-0.1.0.tgz#99a5ac52dcb21044fa11b81cb5a90db2c544e4a6"
-  integrity sha512-E7Fk0LjtCp/TCyEtcudJpY+RqCfdPjlDIkqsLjjGeNd6TeRlZGmZhYXZGT1E4QV75PiMHufdd3WMkTwd7Aufdw==
+"@cowprotocol/app-data@v1.0.0-rc.4":
+  version "1.0.0-rc.4"
+  resolved "https://registry.yarnpkg.com/@cowprotocol/app-data/-/app-data-1.0.0-rc.4.tgz#89badc9c30add23aaeed1dc942d0398e6e874833"
+  integrity sha512-lKvuvJu9tnJ41nJr9DgFMUOWofX4gCRhcDpGM+jPYqWv1UY+2CjJSkKxVbrFDS5OKjeHfDLv1Mf0XIMqmNYbkQ==
   dependencies:
     ajv "^8.11.0"
     cross-fetch "^3.1.5"
     ipfs-only-hash "^4.0.0"
+    json-stringify-deterministic "^1.0.8"
     multiformats "^9.6.4"
 
 "@cowprotocol/[email protected]":
@@ -5155,7 +5156,7 @@ address@^1.1.2:
 [email protected]:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.0.0.tgz#e21df10ad6c2053295bcbb8dab40b09dbea87e4d"
-  integrity sha1-4h3xCtbCBTKVvLuNq0Cwnb6ofk0=
+  integrity sha512-H7wUZRn8WpTq9jocdxQ2c8x2sKo9ZVmzfRE13GiNJXfp7NcKYEdvl3vspKjXox6RIG2VtaRe4JFvxG4rqp2Zuw==
 
 aes-js@^3.1.1:
   version "3.1.2"
@@ -13263,6 +13264,11 @@ json-stable-stringify@^1.0.1:
   dependencies:
     jsonify "~0.0.0"
 
+json-stringify-deterministic@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/json-stringify-deterministic/-/json-stringify-deterministic-1.0.8.tgz#675eaf26f18ebac0197c5e4d2d4dcc2ab3750948"
+  integrity sha512-rkJID3qeigo3VCrEcxX1333fTBBxW89YrdYcZexMnL/WdB8u0zctyG63e/DpahRJyrWCDhh7IQhiR7u2XEDQ4Q==
+
 json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"