feat(app-data): upgrade to latest appData version 1.1.0 (#651)

* feat(app-data): upgrade to latest appData version 1.1.0

* chore: show appData array buttons

* chore: comment out ipfs stuff

* refactor: remove stuff that's not needed and remove some `any`s

* refactor: sort imports

* chore: remove IPFS reference

* refactor: format

Author: alfetopito

package.json

@@ -46,7 +46,7 @@
   "author": "",
   "dependencies": {
     "@apollo/client": "^3.1.5",
-    "@cowprotocol/app-data": "^1.0.2",
+    "@cowprotocol/app-data": "^1.1.0",
     "@cowprotocol/contracts": "1.3.1",
     "@cowprotocol/cow-sdk": "^2.2.1",
     "@fortawesome/fontawesome-svg-core": "^6.1.2",

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

@@ -8,13 +8,13 @@ import { RowWithCopyButton } from 'components/common/RowWithCopyButton'
 import AppDataWrapper from 'components/common/AppDataWrapper'
 
 import {
-  INITIAL_FORM_VALUES,
+  CustomField,
+  FormProps,
   getSchema,
-  transformErrors,
   handleErrors,
+  INITIAL_FORM_VALUES,
+  transformErrors,
   uiSchema,
-  CustomField,
-  FormProps,
 } from './config'
 import { TabData } from '.'
 import { metadataApiSDK } from 'cowSdk'
@@ -201,7 +201,7 @@ const EncodePage: React.FC<EncodeProps> = ({ tabData, setTabData /* handleTabCha
           orders. This is useful for giving context to your orders, like crediting the order to a specific UI, adding
           affiliate information, or even signalling your order should be treated in a special way.
         </p>
-        <p>This field is the hexadecimal digest of an IPFS document’s CID of a JSON file.</p>
+        <p>This field is the hexadecimal digest of a JSON file.</p>
         <p>
           The JSON file follows a
           <a target="_blank" href="https://json-schema.org" rel="noreferrer">
@@ -402,7 +402,7 @@ const EncodePage: React.FC<EncodeProps> = ({ tabData, setTabData /* handleTabCha
         {error && !isDocUploaded && (
           <Notification type="error" message={error} closable={false} appendMessage={false} />
         )}
-      </div> 
+      </div>
       */}
     </>
   )

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

@@ -17,26 +17,21 @@ export const INITIAL_FORM_VALUES = {
   metadata: {},
 }
 
-export const INVALID_IPFS_CREDENTIALS = [
-  'Type error',
-  "Failed to execute 'setRequestHeader' on 'XMLHttpRequest': String contains non ISO-8859-1 code point.",
-]
+// export const INVALID_IPFS_CREDENTIALS = [
+//   'Type error',
+//   "Failed to execute 'setRequestHeader' on 'XMLHttpRequest': String contains non ISO-8859-1 code point.",
+// ]
 
 export type FormProps = Record<string, any>
 
 export const getSchema = async (): Promise<JSONSchema7> => {
   const latestSchema = (await metadataApiSDK.getAppDataSchema(LATEST_APP_DATA_VERSION)) as JSONSchema7
-  deleteAllPropertiesByName(latestSchema, 'examples')
-  deleteAllPropertiesByName(latestSchema, '$id')
-  return formatSchema(latestSchema)
-}
-
-const formatSchema = (schema: JSONSchema7): JSONSchema7 => {
-  const formattedSchema = structuredClone(schema)
 
-  return formattedSchema
+  return makeSchemaCopy(latestSchema)
 }
 
+const makeSchemaCopy = (schema: JSONSchema7): JSONSchema7 => structuredClone(schema)
+
 export const transformErrors = (errors: AjvError[]): AjvError[] => {
   return errors.reduce((errorsList, error) => {
     if (error.name === 'required') {
@@ -67,65 +62,26 @@ export const handleErrors = (
 ): FormValidation => {
   if (!ref.current) return errors
   const { errors: formErrors } = ref.current?.state as FormProps
-  handler(formErrors.length > 0)
+  handler(Array.isArray(formErrors) && formErrors?.length > 0)
   return errors
 }
 
-const deleteAllPropertiesByName = (schema: JSONSchema7, property: string): void => {
-  if (schema[property]) {
-    deletePropertyPath(schema, property)
-  }
-  if (!schema.properties) return
-
-  for (const field in schema.properties) {
-    deleteAllPropertiesByName(schema.properties[field] as JSONSchema7, property)
-  }
-}
-
-export const deletePropertyPath = (obj: any, path: any): void => {
-  if (!obj || !path) {
-    return
-  }
-
-  if (typeof path === 'string') {
-    path = path.split('.')
-  }
-
-  for (let i = 0; i < path.length - 1; i++) {
-    obj = obj[path[i]]
-
-    if (typeof obj === 'undefined') {
-      return
-    }
-  }
-
-  const propName = path.pop()
-  if (!propName) {
-    return
-  }
-
-  const propConfigurable = Object.getOwnPropertyDescriptor(obj, propName)?.configurable || false
-  if (propConfigurable) {
-    delete obj[propName]
-  }
-}
-
-export const ipfsSchema: JSONSchema7 = {
-  type: 'object',
-  required: ['pinataApiKey', 'pinataApiSecret'],
-  properties: {
-    pinataApiKey: {
-      type: 'string',
-      title: 'Pinata API key',
-      description: 'Add your Pinata API key.',
-    },
-    pinataApiSecret: {
-      type: 'string',
-      title: 'Pinata API secret',
-      description: 'Add your Pinata API secret.',
-    },
-  },
-}
+// export const ipfsSchema: JSONSchema7 = {
+//   type: 'object',
+//   required: ['pinataApiKey', 'pinataApiSecret'],
+//   properties: {
+//     pinataApiKey: {
+//       type: 'string',
+//       title: 'Pinata API key',
+//       description: 'Add your Pinata API key.',
+//     },
+//     pinataApiSecret: {
+//       type: 'string',
+//       title: 'Pinata API secret',
+//       description: 'Add your Pinata API secret.',
+//     },
+//   },
+// }
 
 export const decodeAppDataSchema: JSONSchema7 = {
   type: 'object',
@@ -197,13 +153,13 @@ export const uiSchema = {
   },
 }
 
-export const ipfsUiSchema = {
-  pinataApiKey: {
-    'ui:field': 'cField',
-    tooltip: 'Add your Pinata API key.',
-  },
-  pinataApiSecret: {
-    'ui:field': 'cField',
-    tooltip: 'Add your Pinata API secret key.',
-  },
-}
+// export const ipfsUiSchema = {
+//   pinataApiKey: {
+//     'ui:field': 'cField',
+//     tooltip: 'Add your Pinata API key.',
+//   },
+//   pinataApiSecret: {
+//     'ui:field': 'cField',
+//     tooltip: 'Add your Pinata API secret key.',
+//   },
+// }

src/apps/explorer/pages/AppData/styled.ts

@@ -119,6 +119,25 @@ export const Wrapper = styled(WrapperTemplate)`
       line-height: 1.6rem;
     }
 
+    i.glyphicon {
+      display: none;
+    }
+    .btn-add::after {
+      content: 'Add';
+    }
+    .array-item-copy::after {
+      content: 'Copy';
+    }
+    .array-item-move-up::after {
+      content: 'Move Up';
+    }
+    .array-item-move-down::after {
+      content: 'Move Down';
+    }
+    .array-item-remove::after {
+      content: 'Remove';
+    }
+
     .hidden-content {
       ${media.desktop} {
         position: sticky;

yarn.lock

@@ -1359,10 +1359,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.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==
+"@cowprotocol/app-data@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@cowprotocol/app-data/-/app-data-1.1.0.tgz#38d91a79388220bc1ff99d2b6d0d3e3cce38e8f9"
+  integrity sha512-r55wyVrVnyq32KcswGN+1q5jTIfkLq4NlhibLWpe8px05lqvHA/RXRLO8lTkK7WFtlbO4iSnQqkIs4wqLc80kg==
   dependencies:
     ajv "^8.11.0"
     cross-fetch "^3.1.5"