package updates and fixes (#296)

* package updates and fixes

* yup update for edit form

package.json

@@ -6,7 +6,7 @@
   "homepage": "https://market.oceanprotocol.com",
   "scripts": {
     "start": "gatsby develop --host 0.0.0.0",
-    "build": "gatsby clean && gatsby build && cp _redirects public/_redirects",
+    "build": "gatsby build && cp _redirects public/_redirects",
     "serve": "serve -s public/",
     "jest": "NODE_ENV=test jest -c tests/unit/jest.config.js",
     "test": "npm run lint && npm run jest",
@@ -29,9 +29,9 @@
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
     "@tippyjs/react": "^4.2.0",
-    "@toruslabs/torus-embed": "^1.8.6",
+    "@toruslabs/torus-embed": "^1.9.0",
     "@types/classnames": "^2.2.11",
-    "@vercel/node": "^1.8.4",
+    "@vercel/node": "^1.8.5",
     "@walletconnect/web3-provider": "^1.3.1",
     "axios": "^0.21.0",
     "chart.js": "^2.9.4",
@@ -43,88 +43,88 @@
     "ethereum-address": "0.0.4",
     "ethereum-blockies": "github:MyEtherWallet/blockies",
     "filesize": "^6.1.0",
-    "formik": "^2.2.2",
-    "gatsby": "^2.25.3",
-    "gatsby-image": "^2.4.21",
-    "gatsby-plugin-google-analytics": "^2.4.0",
-    "gatsby-plugin-manifest": "^2.5.2",
-    "gatsby-plugin-react-helmet": "^3.3.14",
-    "gatsby-plugin-remove-trailing-slashes": "^2.3.13",
-    "gatsby-plugin-sharp": "^2.7.1",
+    "formik": "^2.2.5",
+    "gatsby": "^2.28.2",
+    "gatsby-image": "^2.7.0",
+    "gatsby-plugin-google-analytics": "^2.7.0",
+    "gatsby-plugin-manifest": "^2.8.0",
+    "gatsby-plugin-react-helmet": "^3.6.0",
+    "gatsby-plugin-remove-trailing-slashes": "^2.6.0",
+    "gatsby-plugin-sharp": "^2.10.1",
     "gatsby-plugin-svgr": "^2.0.2",
-    "gatsby-plugin-use-dark-mode": "^1.1.2",
+    "gatsby-plugin-use-dark-mode": "^1.2.0",
     "gatsby-plugin-webpack-size": "^1.0.0",
-    "gatsby-source-filesystem": "^2.4.2",
-    "gatsby-source-graphql": "^2.7.7",
-    "gatsby-transformer-json": "^2.4.15",
-    "gatsby-transformer-remark": "^2.9.2",
-    "gatsby-transformer-sharp": "^2.5.21",
+    "gatsby-source-filesystem": "^2.7.0",
+    "gatsby-source-graphql": "^2.10.0",
+    "gatsby-transformer-json": "^2.7.0",
+    "gatsby-transformer-remark": "^2.12.0",
+    "gatsby-transformer-sharp": "^2.8.0",
     "intersection-observer": "^0.11.0",
-    "is-url-superb": "^4.0.0",
+    "is-url-superb": "^5.0.0",
     "jwt-decode": "^3.1.2",
     "lodash.debounce": "^4.0.8",
     "lodash.omit": "^4.5.0",
     "query-string": "^6.13.7",
     "react": "^17.0.1",
     "react-chartjs-2": "^2.11.1",
-    "react-data-table-component": "^6.11.5",
+    "react-data-table-component": "^6.11.6",
     "react-dom": "^17.0.1",
     "react-dotdotdot": "^1.3.1",
-    "react-dropzone": "^11.2.3",
+    "react-dropzone": "^11.2.4",
     "react-helmet": "^6.1.0",
-    "react-intersection-observer": "^8.30.1",
-    "react-markdown": "^5.0.2",
-    "react-modal": "^3.11.2",
+    "react-intersection-observer": "^8.31.0",
+    "react-markdown": "^5.0.3",
+    "react-modal": "^3.12.1",
     "react-paginate": "^6.5.0",
     "react-spring": "^8.0.27",
     "react-tabs": "^3.1.1",
-    "react-toastify": "^6.1.0",
+    "react-toastify": "^6.2.0",
     "remove-markdown": "^0.3.0",
     "shortid": "^2.2.16",
     "slugify": "^1.4.6",
-    "swr": "^0.3.8",
+    "swr": "^0.3.9",
     "use-dark-mode": "^2.3.1",
-    "yup": "^0.29.3"
+    "yup": "^0.32.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.3",
-    "@babel/preset-typescript": "^7.12.1",
-    "@storybook/addon-actions": "^6.0.28",
-    "@storybook/addon-storyshots": "^6.0.28",
-    "@storybook/react": "^6.0.28",
-    "@svgr/webpack": "^5.4.0",
-    "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/react": "^11.1.1",
-    "@types/chart.js": "^2.9.27",
-    "@types/jest": "^26.0.15",
+    "@babel/core": "^7.12.10",
+    "@babel/preset-typescript": "^7.12.7",
+    "@storybook/addon-actions": "^6.1.10",
+    "@storybook/addon-storyshots": "^6.1.10",
+    "@storybook/react": "^6.1.10",
+    "@svgr/webpack": "^5.5.0",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@types/chart.js": "^2.9.28",
+    "@types/jest": "^26.0.18",
     "@types/loadable__component": "^5.13.1",
     "@types/lodash.debounce": "^4.0.3",
     "@types/lodash.omit": "^4.5.6",
-    "@types/node": "^14.14.6",
-    "@types/react": "^16.9.56",
+    "@types/node": "^14.14.12",
+    "@types/react": "^17.0.0",
     "@types/react-helmet": "^6.1.0",
     "@types/react-modal": "^3.10.6",
     "@types/react-paginate": "^6.2.1",
     "@types/react-tabs": "^2.3.2",
     "@types/remove-markdown": "^0.1.1",
     "@types/shortid": "0.0.29",
-    "@types/yup": "^0.29.9",
-    "@typescript-eslint/eslint-plugin": "^4.6.1",
-    "@typescript-eslint/parser": "^4.6.1",
-    "babel-loader": "^8.1.0",
+    "@types/yup": "^0.29.10",
+    "@typescript-eslint/eslint-plugin": "^4.9.1",
+    "@typescript-eslint/parser": "^4.9.1",
+    "babel-loader": "^8.2.2",
     "babel-preset-react-app": "^10.0.0",
-    "eslint": "^7.12.1",
+    "eslint": "^7.15.0",
     "eslint-config-oceanprotocol": "^1.5.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-config-prettier": "^7.0.0",
+    "eslint-plugin-prettier": "^3.2.0",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
-    "prettier": "^2.1.2",
+    "prettier": "^2.2.1",
     "serve": "^11.3.2",
-    "source-map-explorer": "^2.5.0",
-    "typescript": "^4.0.5"
+    "source-map-explorer": "^2.5.1",
+    "typescript": "^4.1.2"
   },
   "repository": {
     "type": "git",

src/@types/globals.d.ts

@@ -5,9 +5,9 @@ declare module '*.module.css' {
 
 declare module '*.svg' {
   import * as React from 'react'
-  export const ReactComponent: React.FunctionComponent<React.SVGProps<
-    SVGSVGElement
-  >>
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement>
+  >
   const src: string
   export default src
 }

src/components/organisms/AssetActions/Pool/Add/index.tsx

@@ -76,7 +76,7 @@ export default function Add({
 
   // Live validation rules
   // https://github.com/jquense/yup#number
-  const validationSchema = Yup.object().shape<FormAddLiquidity>({
+  const validationSchema: Yup.SchemaOf<FormAddLiquidity> = Yup.object().shape({
     amount: Yup.number()
       .min(0.00001, (param) => `Must be more or equal to ${param.min}`)
       .max(

src/components/organisms/AssetActions/Trade/FormTrade.tsx

@@ -54,20 +54,22 @@ export default function FormTrade({
   const [maximumDt, setMaximumDt] = useState(maxDt)
   const [isWarningAccepted, setIsWarningAccepted] = useState(false)
 
-  const validationSchema = Yup.object().shape<FormTradeData>({
-    ocean: Yup.number()
-      .max(maximumOcean, (param) => `Must be more or equal to ${param.max}`)
-      .min(0.001, (param) => `Must be more or equal to ${param.min}`)
-      .required('Required')
-      .nullable(),
-    datatoken: Yup.number()
-      .max(maxDt, `Must be less or equal than ${maximumDt}`)
-      .min(0.00001, (param) => `Must be more or equal to ${param.min}`)
-      .required('Required')
-      .nullable(),
-    type: Yup.string(),
-    slippage: Yup.string()
-  })
+  const validationSchema: Yup.SchemaOf<FormTradeData> = Yup.object()
+    .shape({
+      ocean: Yup.number()
+        .max(maximumOcean, (param) => `Must be more or equal to ${param.max}`)
+        .min(0.001, (param) => `Must be more or equal to ${param.min}`)
+        .required('Required')
+        .nullable(),
+      datatoken: Yup.number()
+        .max(maxDt, `Must be less or equal than ${maximumDt}`)
+        .min(0.00001, (param) => `Must be more or equal to ${param.min}`)
+        .required('Required')
+        .nullable(),
+      type: Yup.string(),
+      slippage: Yup.string()
+    })
+    .defined()
 
   async function handleTrade(values: FormTradeData) {
     try {

src/models/FormEditMetadata.ts

@@ -1,9 +1,9 @@
 import { MetadataMarket, MetadataPublishForm } from '../@types/MetaData'
 import * as Yup from 'yup'
 
-export const validationSchema = Yup.object().shape<
+export const validationSchema: Yup.SchemaOf<
   Partial<MetadataPublishForm>
->({
+> = Yup.object().shape({
   name: Yup.string()
     .min(4, (param) => `Title must be at least ${param.min} characters`)
     .required('Required'),

src/models/FormPricing.ts

@@ -1,27 +1,29 @@
 import { PriceOptionsMarket } from '../@types/MetaData'
 import * as Yup from 'yup'
 
-export const validationSchema = Yup.object().shape<PriceOptionsMarket>({
-  price: Yup.number()
-    .min(1, (param) => `Must be more or equal to ${param.min}`)
-    .required('Required'),
-  dtAmount: Yup.number()
-    .min(9, (param) => `Must be more or equal to ${param.min}`)
-    .required('Required'),
-  oceanAmount: Yup.number()
-    .min(21, (param) => `Must be more or equal to ${param.min}`)
-    .required('Required'),
-  type: Yup.string()
-    .matches(/fixed|dynamic/g)
-    .required('Required'),
-  weightOnDataToken: Yup.string().required('Required'),
-  weightOnOcean: Yup.string().required('Required'),
-  swapFee: Yup.number()
-    .min(0.1, (param) => `Must be more or equal to ${param.min}`)
-    .max(10, 'Maximum is 10%')
-    .required('Required')
-    .nullable()
-})
+export const validationSchema: Yup.SchemaOf<PriceOptionsMarket> = Yup.object().shape(
+  {
+    price: Yup.number()
+      .min(1, (param) => `Must be more or equal to ${param.min}`)
+      .required('Required'),
+    dtAmount: Yup.number()
+      .min(9, (param) => `Must be more or equal to ${param.min}`)
+      .required('Required'),
+    oceanAmount: Yup.number()
+      .min(21, (param) => `Must be more or equal to ${param.min}`)
+      .required('Required'),
+    type: Yup.string()
+      .matches(/fixed|dynamic/g, { excludeEmptyString: true })
+      .required('Required'),
+    weightOnDataToken: Yup.string().required('Required'),
+    weightOnOcean: Yup.string().required('Required'),
+    swapFee: Yup.number()
+      .min(0.1, (param) => `Must be more or equal to ${param.min}`)
+      .max(10, 'Maximum is 10%')
+      .required('Required')
+      .nullable()
+  }
+)
 
 export const initialValues: PriceOptionsMarket = {
   price: 1,

src/models/FormPublish.ts

@@ -2,29 +2,31 @@ import { MetadataPublishForm } from '../@types/MetaData'
 import { File as FileMetadata } from '@oceanprotocol/lib'
 import * as Yup from 'yup'
 
-export const validationSchema = Yup.object().shape<MetadataPublishForm>({
-  // ---- required fields ----
-  name: Yup.string()
-    .min(4, (param) => `Title must be at least ${param.min} characters`)
-    .required('Required'),
-  author: Yup.string().required('Required'),
-  dataTokenOptions: Yup.object()
-    .shape({
-      name: Yup.string(),
-      symbol: Yup.string()
-    })
-    .required('Required'),
-  files: Yup.array<FileMetadata>().required('Required').nullable(),
-  description: Yup.string().min(10).required('Required'),
-  access: Yup.string()
-    .matches(/Compute|Download/g)
-    .required('Required'),
-  termsAndConditions: Yup.boolean().required('Required'),
+export const validationSchema: Yup.SchemaOf<MetadataPublishForm> = Yup.object()
+  .shape({
+    // ---- required fields ----
+    name: Yup.string()
+      .min(4, (param) => `Title must be at least ${param.min} characters`)
+      .required('Required'),
+    author: Yup.string().required('Required'),
+    dataTokenOptions: Yup.object()
+      .shape({
+        name: Yup.string(),
+        symbol: Yup.string()
+      })
+      .required('Required'),
+    files: Yup.array<FileMetadata>().required('Required').nullable(),
+    description: Yup.string().min(10).required('Required'),
+    access: Yup.string()
+      .matches(/Compute|Download/g, { excludeEmptyString: true })
+      .required('Required'),
+    termsAndConditions: Yup.boolean().required('Required'),
 
-  // ---- optional fields ----
-  tags: Yup.string().nullable(),
-  links: Yup.object<FileMetadata[]>().nullable()
-})
+    // ---- optional fields ----
+    tags: Yup.string().nullable(),
+    links: Yup.array<FileMetadata[]>().nullable()
+  })
+  .defined()
 
 export const initialValues: Partial<MetadataPublishForm> = {
   name: '',