Merge pull request #80 from oceanprotocol/feature/packages

package updates

.eslintrc

@@ -22,7 +22,8 @@
         "plugin:prettier/recommended",
         "prettier/react",
         "prettier/standard",
-        "prettier/@typescript-eslint"
+        "prettier/@typescript-eslint",
+        "plugin:react-hooks/recommended"
       ],
       "plugins": ["@typescript-eslint", "prettier"],
       "rules": {

package.json

@@ -20,14 +20,14 @@
   },
   "dependencies": {
     "@coingecko/cryptoformat": "^0.4.1",
-    "@loadable/component": "^5.13.1",
+    "@loadable/component": "5.13.1",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/lib": "^0.2.4",
+    "@oceanprotocol/lib": "^0.2.5",
-    "@oceanprotocol/react": "^0.0.43",
+    "@oceanprotocol/react": "^0.0.44",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
     "@tippyjs/react": "^4.1.0",
-    "@toruslabs/torus-embed": "^1.8.3",
+    "@toruslabs/torus-embed": "^1.8.4",
     "@types/classnames": "^2.2.10",
     "@vercel/node": "^1.8.2",
     "@walletconnect/web3-provider": "^1.2.2",
@@ -39,33 +39,33 @@
     "ethereum-blockies": "github:MyEtherWallet/blockies",
     "filesize": "^6.1.0",
     "formik": "^2.1.5",
-    "gatsby": "^2.24.57",
+    "gatsby": "^2.24.60",
-    "gatsby-image": "^2.4.17",
+    "gatsby-image": "^2.4.18",
-    "gatsby-plugin-manifest": "^2.4.28",
+    "gatsby-plugin-manifest": "^2.4.29",
-    "gatsby-plugin-react-helmet": "^3.3.10",
+    "gatsby-plugin-react-helmet": "^3.3.11",
-    "gatsby-plugin-remove-trailing-slashes": "^2.3.11",
+    "gatsby-plugin-remove-trailing-slashes": "^2.3.12",
-    "gatsby-plugin-sharp": "^2.6.35",
+    "gatsby-plugin-sharp": "^2.6.36",
     "gatsby-plugin-svgr": "^2.0.2",
     "gatsby-plugin-webpack-size": "^1.0.0",
-    "gatsby-source-filesystem": "^2.3.29",
+    "gatsby-source-filesystem": "^2.3.30",
-    "gatsby-source-graphql": "^2.7.3",
+    "gatsby-source-graphql": "^2.7.4",
-    "gatsby-transformer-json": "^2.4.11",
+    "gatsby-transformer-json": "^2.4.12",
-    "gatsby-transformer-remark": "^2.8.34",
+    "gatsby-transformer-remark": "^2.8.35",
-    "gatsby-transformer-sharp": "^2.5.14",
+    "gatsby-transformer-sharp": "^2.5.15",
     "intersection-observer": "^0.11.0",
     "is-url-superb": "^4.0.0",
     "lodash.debounce": "^4.0.8",
     "lodash.omit": "^4.5.0",
-    "query-string": "^6.13.1",
+    "query-string": "^6.13.2",
     "react": "^16.13.1",
-    "react-data-table-component": "^6.11.3",
+    "react-data-table-component": "^6.11.4",
     "react-datepicker": "^3.1.3",
     "react-dom": "^16.13.1",
     "react-dotdotdot": "^1.3.1",
     "react-dropzone": "^11.1.0",
     "react-helmet": "^6.1.0",
     "react-markdown": "^4.3.1",
-    "react-paginate": "^6.4.0",
+    "react-paginate": "^6.5.0",
     "react-responsive-modal": "^5.1.0",
     "react-spring": "^8.0.27",
     "react-tabs": "^3.1.1",
@@ -83,31 +83,32 @@
     "@storybook/react": "^6.0.21",
     "@svgr/webpack": "^5.4.0",
     "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.0.2",
+    "@testing-library/react": "^11.0.4",
     "@types/jest": "^26.0.13",
     "@types/loadable__component": "^5.13.0",
     "@types/lodash.debounce": "^4.0.3",
     "@types/lodash.omit": "^4.5.6",
-    "@types/node": "^14.10.0",
+    "@types/node": "^14.10.2",
     "@types/react": "^16.9.49",
     "@types/react-datepicker": "^3.1.1",
     "@types/react-helmet": "^6.1.0",
     "@types/react-paginate": "^6.2.1",
     "@types/react-tabs": "^2.3.2",
     "@types/shortid": "0.0.29",
-    "@types/yup": "^0.29.6",
+    "@types/yup": "^0.29.7",
-    "@typescript-eslint/eslint-plugin": "^4.1.0",
+    "@typescript-eslint/eslint-plugin": "^4.1.1",
-    "@typescript-eslint/parser": "^4.1.0",
+    "@typescript-eslint/parser": "^4.1.1",
     "babel-loader": "^8.1.0",
     "babel-preset-react-app": "^9.1.2",
-    "eslint": "^7.8.1",
+    "eslint": "^7.9.0",
     "eslint-config-oceanprotocol": "^1.5.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^4.1.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.4.2",
-    "prettier": "^2.1.1",
+    "prettier": "^2.1.2",
     "serve": "^11.3.2",
     "source-map-explorer": "^2.5.0",
     "typescript": "^4.0.2"

src/components/atoms/Price/Conversion.tsx

@@ -11,11 +11,9 @@ const cx = classNames.bind(styles)
 
 export default function Conversion({
   price,
-  update = true,
   className
 }: {
   price: string // expects price in OCEAN, not wei
-  update?: boolean
   className?: string
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
@@ -56,15 +54,13 @@ export default function Conversion({
     if (isBrowser && price !== '0') {
       getData()
     }
-  }, [price, currency])
+  }, [price, currency, url])
 
-  if (update) {
+  // Fetch new prices periodically with swr
-    // Fetch new prices periodically with swr
+  useSWR(url, fetchData, {
-    useSWR(url, fetchData, {
+    refreshInterval: 30000, // 30 sec.
-      refreshInterval: 30000, // 30 sec.
+    onSuccess
-      onSuccess
+  })
-    })
-  }
 
   return (
     <span

src/components/molecules/Pagination.tsx

@@ -15,8 +15,6 @@ export default function Pagination({
   hrefBuilder,
   onPageChange
 }: PaginationProps): ReactElement {
-  if (!totalPages || totalPages < 2) return null
-
   const [smallViewport, setSmallViewport] = useState(true)
 
   function viewportChange(mq: { matches: boolean }) {
@@ -24,6 +22,8 @@ export default function Pagination({
   }
 
   useEffect(() => {
+    if (!totalPages || totalPages < 2) return null
+
     const mq = window.matchMedia('(min-width: 600px)')
     viewportChange(mq)
     mq.addListener(viewportChange)
@@ -31,7 +31,7 @@ export default function Pagination({
     return () => {
       mq.removeListener(viewportChange)
     }
-  }, [])
+  }, [totalPages])
 
   return (
     <ReactPaginate