Handle appData errors (#566)

* Handle appData errors * Add missing dots * Fix error loading the validator * Delete console log * Update yarn lock
cowprotocol · Jul 25, 2023 · fc07fe3 · fc07fe3
1 parent 487bc2a
commit fc07fe3
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 24 deletions.
diff --git a/getWebpackConfig.js b/getWebpackConfig.js
@@ -158,9 +158,6 @@ function getWebpackConfig({ apps = [], config = {}, envVars = {}, defineVars = {
   assert(templatePath, '"templatePath" missing in config')
   assert(logoPath, '"logoPath" missing in config')
 
-  // Log the apps
-  console.log('apps', apps)
-
   // Generate one entry point per app
   const entryPoints = apps.reduce((acc, app) => {
     const { name } = app

diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
   "author": "",
   "dependencies": {
     "@apollo/client": "^3.1.5",
-    "@cowprotocol/app-data": "^1.0.1",
+    "@cowprotocol/app-data": "^1.0.2",
     "@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
@@ -24,15 +24,16 @@ type EncodeProps = {
   setTabData: React.Dispatch<React.SetStateAction<TabData>>
   handleTabChange: (tabId: number) => void
 }
-type FullAppData = { fullAppData: string; fullAppDataPrettified: string }
+type FullAppData = { fullAppData: string; fullAppDataPrettified: string; isValidAppData: boolean }
 
 const EncodePage: React.FC<EncodeProps> = ({ tabData, setTabData /* handleTabChange */ }) => {
   const { encode } = tabData
   const [schema, setSchema] = useState<JSONSchema7>(encode.options.schema ?? {})
   const [appDataForm, setAppDataForm] = useState(encode.formData)
-  const [{ fullAppData, fullAppDataPrettified }, setFullAppData] = useState<FullAppData>({
+  const [{ fullAppData, fullAppDataPrettified, isValidAppData }, setFullAppData] = useState<FullAppData>({
     fullAppData: '',
     fullAppDataPrettified: '',
+    isValidAppData: false,
   })
   const [disabledAppData, setDisabledAppData] = useState<boolean>(encode.options.disabledAppData ?? true)
   const [disabledIPFS /* setDisabledIPFS*/] = useState<boolean>(encode.options.disabledIPFS ?? true)
@@ -113,7 +114,10 @@ const EncodePage: React.FC<EncodeProps> = ({ tabData, setTabData /* handleTabCha
       })
       // Update CID
       .then(setIpfsHashInfo)
-      .catch((e) => setError(e.message))
+      .catch((e) => {
+        console.error('Error updating the IPFS Hash info (CID, hex)', e)
+        setError(e.message)
+      })
       .finally(() => {
         setIsLoading(false)
         toggleInvalid({ appData: true })
@@ -236,11 +240,8 @@ const EncodePage: React.FC<EncodeProps> = ({ tabData, setTabData /* handleTabCha
             <p>
               This is the generated and <strong>prettified</strong> file based on the input you provided on the form.
             </p>
-            <p>This content is for illustration porpouses, see below </p>
-            <RowWithCopyButton
-              textToCopy={fullAppDataPrettified}
-              contentsToDisplay={<pre className="json-formatter">{fullAppDataPrettified}</pre>}
-            />
+            <p>This content is for illustration porpouses, see below.</p>
+            <JsonContent content={fullAppDataPrettified} isError={!isValidAppData} />
             {fullAppData && (
               <>
                 <h2>ℹ️ AppData string</h2>
@@ -253,9 +254,9 @@ const EncodePage: React.FC<EncodeProps> = ({ tabData, setTabData /* handleTabCha
                   <a href="https://www.npmjs.com/package/json-stringify-deterministic" target="_blank" rel="noreferrer">
                     deterministic JSON formatter
                   </a>{' '}
-                  , this way the same content yields always the same <strong>AppData hex</strong>
+                  , this way the same content yields always the same <strong>AppData hex</strong>.
                 </p>
-                <RowWithCopyButton className="appData-hash" textToCopy={fullAppData} contentsToDisplay={fullAppData} />
+                <JsonContent content={fullAppData} isError={!isValidAppData} />
                 <p className="disclaimer">Note: Don’t forget to upload this file to IPFS!</p>
               </>
             )}
@@ -286,9 +287,9 @@ const EncodePage: React.FC<EncodeProps> = ({ tabData, setTabData /* handleTabCha
                   This is the{' '}
                   <a href="https://docs.ipfs.tech/concepts/content-addressing/" target="_blank" rel="noreferrer">
                     IPFS CID
-                  </a>{' '}
+                  </a>
+                  .
                 </p>
-                )
                 <p>
                   This CID is derived from the <strong>AppData hex</strong> (
                   <a
@@ -301,11 +302,12 @@ const EncodePage: React.FC<EncodeProps> = ({ tabData, setTabData /* handleTabCha
                   ). You can see how this <strong>AppData hex</strong> is encoded, using the{' '}
                   <a href={'https://cid.ipfs.tech/#' + ipfsHashInfo.cid} target="_blank" rel="noreferrer">
                     CID Inspector
-                  </a>{' '}
+                  </a>
+                  .
                 </p>
                 <p>
                   What this means is that you can derived the IPFS CID from on-chain CoW Orders, and download the JSON
-                  from IPFS network to see the meta-information of that order
+                  from IPFS network to see the meta-information of that order.
                 </p>
                 <RowWithCopyButton
                   className="appData-hash"
@@ -406,6 +408,18 @@ const EncodePage: React.FC<EncodeProps> = ({ tabData, setTabData /* handleTabCha
   )
 }
 
+function JsonContent({ content, isError }: { content: string; isError: boolean }): JSX.Element {
+  return (
+    <>
+      <RowWithCopyButton
+        textToCopy={content}
+        contentsToDisplay={<pre className={(isError ? 'error ' : '') + 'json-formatter'}>{content}</pre>}
+      />
+      {isError && <span className="error">The AppData content is not valid, check the errors in the input form.</span>}
+    </>
+  )
+}
+
 async function _toFullAppData(formData: FormProps): Promise<FullAppData> {
   const doc = await metadataApiSDK.generateAppDataDoc(formData)
 
@@ -423,11 +437,10 @@ async function _toFullAppData(formData: FormProps): Promise<FullAppData> {
     }
   })
 
-  console.log('doc', { doc, formData })
-
   return {
     fullAppData: await stringifyDeterministic(doc), // deterministic string
     fullAppDataPrettified: JSON.stringify(doc, null, 2), // prettified string
+    isValidAppData: await metadataApiSDK.validateAppDataDoc(doc).then((result) => result.success),
   }
 }
 

diff --git a/src/apps/explorer/pages/AppData/styled.ts b/src/apps/explorer/pages/AppData/styled.ts
@@ -3,6 +3,7 @@ import { ContentCard as Content, Wrapper as WrapperTemplate } from 'apps/explore
 import { media } from 'theme/styles/media'
 import AppDataWrapper from 'components/common/AppDataWrapper'
 import ExplorerTabs from 'apps/explorer/components/common/ExplorerTabs/ExplorerTabs'
+import { transparentize } from 'polished'
 
 export const StyledExplorerTabs = styled(ExplorerTabs)`
   margin: 1.6rem auto 0;
@@ -71,6 +72,10 @@ export const Wrapper = styled(WrapperTemplate)`
       ${media.mobile} {
         max-width: none;
       }
+
+      &.error {
+        background: ${({ theme }): string => transparentize(0.8, theme.red1)};
+      }
     }
     .hidden-content {
       padding: 0 1rem;
@@ -307,6 +312,10 @@ export const Wrapper = styled(WrapperTemplate)`
       }
     }
   }
+
+  span.error {
+    color: ${(props): string => props.theme.red1};
+  }
 `
 export const IpfsWrapper = styled.div`
   display: flex;

diff --git a/yarn.lock b/yarn.lock
@@ -1353,10 +1353,10 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
-"@cowprotocol/app-data@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@cowprotocol/app-data/-/app-data-1.0.1.tgz#ca1d1490b50f83018496f78da3c47cd4e127029e"
-  integrity sha512-vDjLEvlAzdPzn/wlXwreCopuzU+U58MuLmQp40PEaH4rAgLUh9msyB21PkuRgdSAof0WAoptA8/UYFKJ4pW1sg==
+"@cowprotocol/app-data@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@cowprotocol/app-data/-/app-data-1.0.2.tgz#e559ed892265b84d926a5c84ce6add14e597bb57"
+  integrity sha512-tf4KGK+moHEAjgmOQ8E7MaRHM/rscbzFxsLE/Q+bLXNYcrcwmFDn/VjahkO7bMWhDQj4whmdgw8rbHlPo7zjdw==
   dependencies:
     ajv "^8.11.0"
     cross-fetch "^3.1.5"