[Explorer] Add Metadata page

package.json

@@ -52,9 +52,10 @@
   "dependencies": {
     "@amcharts/amcharts4": "^4.9.12",
     "@apollo/client": "^3.1.5",
-    "@cowprotocol/cow-sdk": "^0.0.14",
+    "@cowprotocol/app-data": "^0.0.1-RC.2",
+    "@cowprotocol/cow-sdk": "^0.0.15",
     "@fortawesome/fontawesome-svg-core": "^1.2.26",
-    "@fortawesome/free-regular-svg-icons": "^5.12.0",
+    "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.8",
     "@gnosis.pm/dex-js": "^0.10.0",
@@ -65,6 +66,7 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "4.0.0-alpha.9",
     "@popperjs/core": "^2.0.6",
+    "@rjsf/core": "^4.2.2",
     "@sentry/react": "^6.18.1",
     "@sentry/tracing": "^6.18.1",
     "@types/react": "^16.9.19",
@@ -139,7 +141,7 @@
     "@types/flexsearch": "^0.7.3",
     "@types/hapi__joi": "^16.0.12",
     "@types/jest": "^26.0.8",
-    "@types/node": "^14.0.14",
+    "@types/node": "^17.0.29",
     "@types/qrcode.react": "^1.0.0",
     "@types/react-copy-to-clipboard": "^4.3.0",
     "@types/react-cytoscapejs": "^1.2.2",

src/apps/explorer/ExplorerApp.tsx

@@ -56,6 +56,14 @@ const NotFound = React.lazy(
     ),
 )
 
+const AppDataDetails = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "Metadata_chunk"*/
+      './pages/AppData'
+    ),
+)
+
 const SearchNotFound = React.lazy(
   () =>
     import(
@@ -132,6 +140,7 @@ const AppContent = (): JSX.Element => {
           <Route path={pathPrefix + '/address/:address'} exact component={UserDetails} />
           <Route path={pathPrefix + '/tx/:txHash'} exact component={TransactionDetails} />
           <Route path={pathPrefix + '/search/:searchString?'} exact component={SearchNotFound} />
+          <Route path={pathPrefix + '/appdata'} exact component={AppDataDetails} />
           <Route component={NotFound} />
         </Switch>
       </React.Suspense>

src/apps/explorer/pages/AppData/DecodePage.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+import Form, { FormValidation } from '@rjsf/core'
+import { decodeAppDataSchema, FormProps, handleErrors, transformErrors } from './config'
+import DecodeAppData from 'components/AppData/DecodeAppData'
+
+const DecodePage: React.FC = () => {
+  const [formData, setFormdata] = useState<FormProps>()
+  const [isSubmitted, setIsSubmitted] = useState<boolean>(false)
+  const [disabled, setDisabled] = useState<boolean>(true)
+  const [invalidFormDataAttempted, setInvalidFormDataAttempted] = useState<boolean>(false)
+
+  const formRef = React.useRef<Form<FormProps>>(null)
+
+  const onSubmit = async ({ formData }: FormProps): Promise<void> => {
+    setFormdata(formData)
+    setIsSubmitted(true)
+  }
+
+  const handleOnChange = ({ formData }: FormProps): void => {
+    setFormdata(formData)
+    if (isSubmitted) {
+      setIsSubmitted(false)
+    }
+    if (JSON.stringify(formData) !== JSON.stringify({})) {
+      setDisabled(false)
+    }
+  }
+
+  const onError = (_: FormProps, errors: FormValidation): FormValidation => handleErrors(formRef, errors, setDisabled)
+
+  return (
+    <div className="decode-container">
+      <Form
+        className="data-form"
+        showErrorList={false}
+        onChange={handleOnChange}
+        formData={formData}
+        ref={formRef}
+        onSubmit={onSubmit}
+        transformErrors={transformErrors}
+        liveValidate={invalidFormDataAttempted}
+        noHtml5Validate
+        validate={onError}
+        onError={(): void => setInvalidFormDataAttempted(true)}
+        schema={decodeAppDataSchema}
+      >
+        <button className="btn btn-info" disabled={disabled} type="submit">
+          DECODE APPDATA
+        </button>
+      </Form>
+      {isSubmitted && <DecodeAppData showExpanded appData={formData?.appData} />}
+    </div>
+  )
+}
+
+export default DecodePage

src/apps/explorer/pages/AppData/FormPage.tsx

@@ -0,0 +1,254 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import Form, { FormValidation } from '@rjsf/core'
+import { JSONSchema7 } from 'json-schema'
+import { IpfsHashInfo } from '@cowprotocol/cow-sdk'
+import { COW_SDK, DEFAULT_IPFS_READ_URI } from 'const'
+import { RowWithCopyButton } from 'components/common/RowWithCopyButton'
+import Spinner from 'components/common/Spinner'
+import AppDataWrapper from 'components/common/AppDataWrapper'
+import { Notification } from 'components/Notification'
+import {
+  INITIAL_FORM_VALUES,
+  INVALID_IPFS_CREDENTIALS,
+  getSchema,
+  transformErrors,
+  handleErrors,
+  handleFormatData,
+  ipfsSchema,
+  uiSchema,
+  ipfsUiSchema,
+  CustomField,
+  FormProps,
+} from './config'
+import { IpfsWrapper } from './styled'
+import { ExternalLink } from 'components/analytics/ExternalLink'
+import { Network } from 'types'
+
+const FormPage: React.FC = () => {
+  const [schema, setSchema] = useState<JSONSchema7>({})
+  const [appDataForm, setAppDataForm] = useState({})
+  const [disabledAppData, setDisabledAppData] = useState<boolean>(true)
+  const [disabledIPFS, setDisabledIPFS] = useState<boolean>(true)
+  const [invalidFormDataAttempted, setInvalidFormDataAttempted] = useState<{ appData: boolean; ipfs: boolean }>({
+    appData: false,
+    ipfs: false,
+  })
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [ipfsHashInfo, setIpfsHashInfo] = useState<IpfsHashInfo | void | undefined>()
+  const [ipfsCredentials, setIpfsCredentials] = useState<{ pinataApiKey?: string; pinataApiSecret?: string }>({})
+  const [isDocUploaded, setIsDocUploaded] = useState<boolean>(false)
+  const [error, setError] = useState<string>()
+  const formRef = React.useRef<Form<FormProps>>(null)
+  const ipfsFormRef = React.useRef<Form<FormProps>>(null)
+
+  useEffect(() => {
+    const fetchSchema = async (): Promise<void> => {
+      const latestSchema = await getSchema()
+      setSchema(latestSchema)
+      setAppDataForm(INITIAL_FORM_VALUES)
+    }
+
+    fetchSchema()
+  }, [])
+
+  const toggleInvalid = (data: { [key: string]: boolean }): void => {
+    setInvalidFormDataAttempted((prevState) => ({ ...prevState, ...data }))
+  }
+
+  const handleMetadataErrors = useCallback(
+    (_: FormProps, errors: FormValidation): FormValidation => handleErrors(formRef, errors, setDisabledAppData),
+    [],
+  )
+
+  const handleIPFSErrors = useCallback(
+    (_: FormProps, errors: FormValidation): FormValidation => handleErrors(ipfsFormRef, errors, setDisabledIPFS),
+    [],
+  )
+
+  const handleOnChange = useCallback(
+    ({ formData }: FormProps): void => {
+      const resetFormFields = (form: string): void => {
+        setDisabledIPFS(true)
+        setIpfsCredentials({})
+        toggleInvalid({ ipfs: false })
+        if (form === 'appData') {
+          setDisabledAppData(true)
+        }
+      }
+      setAppDataForm(formData)
+      if (ipfsHashInfo) {
+        setIpfsHashInfo(undefined)
+        setIsDocUploaded(false)
+        resetFormFields('appData')
+        setError(undefined)
+      }
+      if (JSON.stringify(handleFormatData(formData)) !== JSON.stringify(INITIAL_FORM_VALUES)) {
+        setDisabledAppData(false)
+      }
+    },
+    [ipfsHashInfo],
+  )
+
+  const onSubmit = useCallback(async ({ formData }: FormProps): Promise<void> => {
+    setIsLoading(true)
+    try {
+      const hashInfo = await COW_SDK[Network.MAINNET]?.metadataApi.calculateAppDataHash(handleFormatData(formData))
+      setIpfsHashInfo(hashInfo)
+    } catch (e) {
+      setError(e.message)
+    } finally {
+      setIsLoading(false)
+      toggleInvalid({ appData: true })
+    }
+  }, [])
+
+  const handleIPFSOnChange = useCallback(({ formData: ipfsData }: FormProps): void => {
+    setIpfsCredentials(ipfsData)
+    if (JSON.stringify(ipfsData) !== JSON.stringify({})) {
+      setDisabledIPFS(false)
+    }
+  }, [])
+
+  const onUploadToIPFS = useCallback(
+    async ({ formData }: FormProps): Promise<void> => {
+      if (!ipfsHashInfo) return
+      setIsLoading(true)
+      try {
+        await COW_SDK[Network.MAINNET]?.updateContext({ ipfs: formData })
+        await COW_SDK[Network.MAINNET]?.metadataApi.uploadMetadataDocToIpfs(handleFormatData(appDataForm))
+        setIsDocUploaded(true)
+      } catch (e) {
+        if (INVALID_IPFS_CREDENTIALS.includes(e.message)) {
+          e.message = 'Invalid API keys provided.'
+        }
+        setError(e.message)
+        setIsDocUploaded(false)
+      } finally {
+        setIsLoading(false)
+        toggleInvalid({ ipfs: true })
+      }
+    },
+    [appDataForm, ipfsHashInfo],
+  )
+
+  return (
+    <>
+      <div className="form-container">
+        <Form
+          className="data-form"
+          liveOmit
+          liveValidate={invalidFormDataAttempted.appData}
+          omitExtraData
+          showErrorList={false}
+          fields={{ cField: CustomField }}
+          noHtml5Validate
+          onChange={handleOnChange}
+          formData={appDataForm}
+          validate={handleMetadataErrors}
+          transformErrors={transformErrors}
+          ref={formRef}
+          autoComplete="off"
+          onSubmit={onSubmit}
+          onError={(): void => toggleInvalid({ appData: true })}
+          schema={schema}
+          uiSchema={uiSchema}
+        >
+          <button className="btn btn-info" disabled={disabledAppData} type="submit">
+            GENERATE APPDATA DOC
+          </button>
+        </Form>
+        <AppDataWrapper>
+          <div className="hidden-content">
+            <p>AppData Root Schema information can be found in:</p>
+            <ExternalLink
+              target={'_blank'}
+              rel="noopener noreferrer"
+              href={`https://docs.cow.fi/front-end/creating-app-ids`}
+            >
+              {' '}
+              AppData documentation
+            </ExternalLink>{' '}
+            |
+            <ExternalLink
+              target={'_blank'}
+              rel="noopener noreferrer"
+              href={`https://docs.cow.fi/front-end/creating-app-ids/create-the-order-meta-data-file/metadata`}
+            >
+              {' '}
+              Metadata documentation
+            </ExternalLink>
+            <RowWithCopyButton
+              textToCopy={JSON.stringify(handleFormatData(appDataForm), null, 2)}
+              contentsToDisplay={
+                <pre className="json-formatter">{JSON.stringify(handleFormatData(appDataForm), null, 2)}</pre>
+              }
+            />
+            {ipfsHashInfo && (
+              <>
+                <h4>AppData Hash</h4>
+                <RowWithCopyButton
+                  className="appData-hash"
+                  textToCopy={ipfsHashInfo.appDataHash}
+                  contentsToDisplay={ipfsHashInfo.appDataHash}
+                />
+              </>
+            )}
+          </div>
+        </AppDataWrapper>
+      </div>
+      <div className="ipfs-container">
+        {ipfsHashInfo && (
+          <>
+            <IpfsWrapper>
+              <Form
+                className="data-form"
+                showErrorList={false}
+                onSubmit={onUploadToIPFS}
+                liveValidate={invalidFormDataAttempted.ipfs}
+                onChange={handleIPFSOnChange}
+                formData={ipfsCredentials}
+                validate={handleIPFSErrors}
+                fields={{ cField: CustomField }}
+                ref={ipfsFormRef}
+                noHtml5Validate
+                onError={(): void => toggleInvalid({ ipfs: true })}
+                transformErrors={transformErrors}
+                schema={ipfsSchema}
+                uiSchema={ipfsUiSchema}
+              >
+                <button className="btn btn-info" disabled={disabledIPFS} type="submit">
+                  UPLOAD APPDATA TO IPFS
+                </button>
+              </Form>
+            </IpfsWrapper>
+          </>
+        )}
+        {isDocUploaded && (
+          <>
+            <RowWithCopyButton
+              className="appData-hash"
+              textToCopy={`${DEFAULT_IPFS_READ_URI}/${ipfsHashInfo?.cidV0}`}
+              contentsToDisplay={
+                <a href={`${DEFAULT_IPFS_READ_URI}/${ipfsHashInfo?.cidV0}`} target="_blank" rel="noopener noreferrer">
+                  {ipfsHashInfo?.cidV0}
+                </a>
+              }
+            />
+            <Notification
+              type="success"
+              message="Document uploaded successfully!"
+              closable={false}
+              appendMessage={false}
+            />
+          </>
+        )}
+        {isLoading && <Spinner />}
+        {error && !isDocUploaded && (
+          <Notification type="error" message={error} closable={false} appendMessage={false} />
+        )}
+      </div>
+    </>
+  )
+}
+
+export default FormPage