Merge branch 'main' of https://github.com/oceanprotocol/market into issue-582-market-rbac-integration

.eslintrc

@@ -1,11 +1,12 @@
 {
-  "parser": "babel-eslint",
   "extends": ["eslint:recommended", "prettier"],
-  "env": { "es6": true, "browser": true, "node": true, "jest": true },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": { "jsx": true }
+  },
+  "env": { "browser": true, "node": true, "es2020": true, "jest": true },
   "settings": {
-    "react": {
+    "react": { "version": "detect" }
-      "version": "detect"
-    }
   },
   "overrides": [
     {
@@ -20,9 +21,6 @@
         "plugin:@typescript-eslint/eslint-recommended",
         "plugin:@typescript-eslint/recommended",
         "plugin:prettier/recommended",
-        "prettier/react",
-        "prettier/standard",
-        "prettier/@typescript-eslint",
         "plugin:react-hooks/recommended"
       ],
       "plugins": ["@typescript-eslint", "prettier"],

.nvmrc

@@ -0,0 +1 @@
+16

README.md

@@ -38,6 +38,9 @@ To start local development:
 git clone git@github.com:oceanprotocol/market.git
 cd market
 
+# when using nvm to manage Node.js versions
+nvm use
+
 npm install
 npm start
 ```

gatsby-node.js

@@ -43,7 +43,7 @@ exports.onCreatePage = async ({ page, actions }) => {
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     node: {
-      // 'fs' fix for squid.js
+      // 'fs' fix for ocean.js
       fs: 'empty'
     },
     // fix for 'got'/'swarm-js' dependency

package.json

@@ -23,122 +23,112 @@
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@apollo/client": "^3.3.11",
+    "@apollo/client": "^3.3.19",
     "@coingecko/cryptoformat": "^0.4.2",
-    "@loadable/component": "^5.14.1",
+    "@loadable/component": "^5.15.0",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/lib": "^0.14.8",
+    "@oceanprotocol/lib": "^0.15.1",
     "@oceanprotocol/typographies": "^0.1.0",
-    "@portis/web3": "^3.0.3",
+    "@portis/web3": "^4.0.4",
-    "@sindresorhus/slugify": "^1.0.0",
+    "@sindresorhus/slugify": "^2.1.0",
-    "@tippyjs/react": "^4.2.0",
+    "@tippyjs/react": "^4.2.5",
-    "@types/classnames": "^2.2.11",
+    "@walletconnect/web3-provider": "^1.4.1",
-    "@vercel/node": "^1.8.5",
-    "@walletconnect/web3-provider": "^1.3.4",
     "axios": "^0.21.1",
     "chart.js": "^2.9.4",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.1",
-    "cross-fetch": "^3.0.6",
+    "cross-fetch": "^3.1.4",
-    "date-fns": "^2.16.1",
+    "date-fns": "^2.22.1",
     "decimal.js": "^10.2.1",
     "dom-confetti": "^0.2.2",
-    "dotenv": "^8.2.0",
+    "dotenv": "^10.0.0",
     "ethereum-address": "0.0.4",
     "ethereum-blockies": "github:MyEtherWallet/blockies",
-    "filesize": "^6.1.0",
+    "filesize": "^6.3.0",
-    "formik": "^2.2.6",
+    "formik": "^2.2.9",
-    "gatsby": "^2.30.2",
+    "gatsby": "^2.32.13",
     "gatsby-image": "^2.9.0",
     "gatsby-plugin-manifest": "^2.10.0",
     "gatsby-plugin-react-helmet": "^3.8.0",
     "gatsby-plugin-remove-trailing-slashes": "^2.8.0",
-    "gatsby-plugin-sharp": "^2.12.1",
+    "gatsby-plugin-sharp": "^2.14.4",
     "gatsby-plugin-svgr": "^2.1.0",
-    "gatsby-plugin-use-dark-mode": "^1.2.0",
+    "gatsby-plugin-use-dark-mode": "^1.3.0",
-    "gatsby-plugin-webpack-size": "^1.0.0",
+    "gatsby-plugin-webpack-size": "^2.0.1",
     "gatsby-source-filesystem": "^2.9.0",
     "gatsby-source-graphql": "^2.12.0",
     "gatsby-transformer-json": "^2.9.0",
-    "gatsby-transformer-remark": "^2.14.0",
+    "gatsby-transformer-remark": "^2.16.1",
-    "gatsby-transformer-sharp": "^2.10.1",
+    "gatsby-transformer-sharp": "^2.12.1",
-    "intersection-observer": "^0.12.0",
+    "graphql": "14.7.0",
-    "is-url-superb": "^5.0.0",
+    "is-url-superb": "^6.0.0",
     "jwt-decode": "^3.1.2",
     "lodash.debounce": "^4.0.8",
     "lodash.omit": "^4.5.0",
-    "query-string": "^6.13.8",
+    "query-string": "^7.0.0",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
-    "react-chartjs-2": "^2.11.1",
+    "react-chartjs-2": "^2.11.2",
-    "react-data-table-component": "^6.11.6",
+    "react-data-table-component": "^6.11.7",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
     "react-dotdotdot": "^1.3.1",
-    "react-dropzone": "^11.2.4",
     "react-helmet": "^6.1.0",
-    "react-intersection-observer": "^8.31.0",
+    "react-markdown": "^6.0.2",
-    "react-markdown": "^5.0.3",
+    "react-modal": "^3.14.2",
-    "react-modal": "^3.12.1",
+    "react-paginate": "^7.1.3",
-    "react-paginate": "^7.0.0",
+    "react-spring": "^9.2.1",
-    "react-spring": "^8.0.27",
+    "react-tabs": "^3.2.2",
-    "react-tabs": "^3.1.2",
+    "react-toastify": "^7.0.4",
-    "react-toastify": "^6.2.0",
     "remove-markdown": "^0.3.0",
     "shortid": "^2.2.16",
-    "slugify": "^1.4.6",
+    "slugify": "^1.5.3",
-    "swr": "^0.3.11",
+    "swr": "^0.5.6",
     "use-dark-mode": "^2.3.1",
-    "web3": "^1.3.4",
+    "web3": "^1.3.6",
     "web3modal": "^1.9.3",
-    "yup": "^0.32.6"
+    "yup": "^0.32.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-typescript": "^7.12.7",
-    "@storybook/addon-actions": "^6.1.14",
-    "@storybook/addon-storyshots": "^6.2.8",
-    "@storybook/react": "^6.2.8",
     "@svgr/webpack": "^5.5.0",
-    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.3",
+    "@testing-library/react": "^11.2.7",
-    "@types/chart.js": "^2.9.29",
+    "@types/chart.js": "^2.9.32",
-    "@types/jest": "^26.0.20",
+    "@types/classnames": "^2.3.1",
+    "@types/jest": "^26.0.23",
     "@types/loadable__component": "^5.13.1",
     "@types/lodash.debounce": "^4.0.3",
     "@types/lodash.omit": "^4.5.6",
-    "@types/node": "^14.14.20",
+    "@types/node": "^15.6.1",
-    "@types/react": "^17.0.0",
+    "@types/react": "^17.0.8",
-    "@types/react-helmet": "^6.1.0",
+    "@types/react-helmet": "^6.1.1",
-    "@types/react-modal": "^3.10.6",
+    "@types/react-modal": "^3.12.0",
-    "@types/react-paginate": "^6.2.1",
+    "@types/react-paginate": "^7.1.0",
     "@types/react-tabs": "^2.3.2",
-    "@types/remove-markdown": "^0.1.1",
+    "@types/remove-markdown": "^0.3.0",
     "@types/shortid": "0.0.29",
     "@types/yup": "^0.29.11",
-    "@typescript-eslint/eslint-plugin": "^4.13.0",
+    "@typescript-eslint/eslint-plugin": "^4.26.0",
-    "@typescript-eslint/parser": "^4.13.0",
+    "@typescript-eslint/parser": "^4.26.0",
-    "apollo": "^2.32.1",
+    "apollo": "^2.33.4",
-    "babel-loader": "^8.2.2",
+    "eslint": "^7.27.0",
-    "babel-preset-react-app": "^10.0.0",
-    "eslint": "^7.17.0",
     "eslint-config-oceanprotocol": "^1.5.0",
-    "eslint-config-prettier": "^7.1.0",
+    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^5.0.8",
+    "husky": "^6.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
-    "prettier": "^2.2.1",
+    "prettier": "^2.3.0",
     "pretty-quick": "^3.1.0",
     "serve": "^11.3.2",
     "source-map-explorer": "^2.5.2",
-    "typescript": "^4.1.3"
+    "typescript": "^4.3.2"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/oceanprotocol/market"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=14"
   },
   "browserslist": [
     ">0.2%",

src/@types/node_modules.d.ts

@@ -1,5 +1,3 @@
-declare module 'intersection-observer'
-
 declare module 'ethereum-blockies' {
   export function toDataUrl(address: string): string
 }

src/components/atoms/Button.stories.tsx

@@ -1,57 +1,57 @@
-import React from 'react'
+// import React from 'react'
-import { action } from '@storybook/addon-actions'
+// // import { action } from '@storybook/addon-actions'
-import Button from './Button'
+// import Button from './Button'
 
-export default {
+// export default {
-  title: 'Atoms/Button'
+//   title: 'Atoms/Button'
-}
+// }
 
-export const Default = () => (
+// export const Default = () => (
-  <>
+//   <>
-    <Button onClick={action('clicked')}>Hello Button</Button>
+//     <Button onClick={action('clicked')}>Hello Button</Button>
-    <br />
+//     <br />
-    <br />
+//     <br />
-    <Button size="small" onClick={action('clicked')}>
+//     <Button size="small" onClick={action('clicked')}>
-      Hello Button
+//       Hello Button
-    </Button>
+//     </Button>
-  </>
+//   </>
-)
+// )
 
-export const Primary = () => (
+// export const Primary = () => (
-  <>
+//   <>
-    <Button style="primary" onClick={action('clicked')}>
+//     <Button style="primary" onClick={action('clicked')}>
-      Hello Button
+//       Hello Button
-    </Button>
+//     </Button>
-    <br />
+//     <br />
-    <br />
+//     <br />
-    <Button style="primary" size="small" onClick={action('clicked')}>
+//     <Button style="primary" size="small" onClick={action('clicked')}>
-      Hello Button
+//       Hello Button
-    </Button>
+//     </Button>
-  </>
+//   </>
-)
+// )
 
-export const Ghost = () => (
+// export const Ghost = () => (
-  <>
+//   <>
-    <Button style="ghost" onClick={action('clicked')}>
+//     <Button style="ghost" onClick={action('clicked')}>
-      Hello Button
+//       Hello Button
-    </Button>
+//     </Button>
-    <br />
+//     <br />
-    <br />
+//     <br />
-    <Button style="ghost" size="small" onClick={action('clicked')}>
+//     <Button style="ghost" size="small" onClick={action('clicked')}>
-      Hello Button
+//       Hello Button
-    </Button>
+//     </Button>
-  </>
+//   </>
-)
+// )
 
-export const Text = () => (
+// export const Text = () => (
-  <>
+//   <>
-    <Button style="text" onClick={action('clicked')}>
+//     <Button style="text" onClick={action('clicked')}>
-      Hello Button
+//       Hello Button
-    </Button>
+//     </Button>
-    <br />
+//     <br />
-    <br />
+//     <br />
-    <Button style="text" size="small" onClick={action('clicked')}>
+//     <Button style="text" size="small" onClick={action('clicked')}>
-      Hello Button
+//       Hello Button
-    </Button>
+//     </Button>
-  </>
+//   </>
-)
+// )

src/components/atoms/Markdown.tsx

@@ -13,10 +13,9 @@ const Markdown = ({
   // https://github.com/rexxars/react-markdown/issues/105#issuecomment-351585313
   const textCleaned = text?.replace(/\\n/g, '\n ')
   return (
-    <ReactMarkdown
+    <ReactMarkdown className={`${styles.markdown} ${className}`}>
-      source={textCleaned}
+      {textCleaned}
-      className={`${styles.markdown} ${className}`}
+    </ReactMarkdown>
-    />
   )
 }
 

src/components/pages/Home.tsx

@@ -113,7 +113,7 @@ export default function HomePage(): ReactElement {
         offset: 15,
         query: {
           query_string: {
-            query: `(${results}) AND -isInPurgatory:true AND price.isConsumable:true`,
+            query: `(${results}) AND -isInPurgatory:true`,
             fields: ['dataToken']
           }
         }

src/utils/subgraph.ts

@@ -88,13 +88,13 @@ const PreviousOrderQuery = gql`
 `
 const HighestLiquidityAssets = gql`
   query HighestLiquidiyAssets {
-    pools(orderBy: valueLocked, orderDirection: desc, first: 15) {
+    pools(
+      where: { datatokenReserve_gte: 1 }
+      orderBy: valueLocked
+      orderDirection: desc
+      first: 15
+    ) {
       id
-      consumePrice
-      spotPrice
-      tx
-      symbol
-      name
       datatokenAddress
       valueLocked
     }

tests/unit/setupTests.ts

@@ -2,10 +2,6 @@ import '@testing-library/jest-dom/extend-expect'
 import * as Gatsby from 'gatsby'
 import siteMetadata from './__fixtures__/siteMetadata.json'
 
-if (typeof window.IntersectionObserver === 'undefined') {
-  import('intersection-observer')
-}
-
 import('./__mocks__/matchMedia')
 
 const useStaticQuery = jest.spyOn(Gatsby, 'useStaticQuery')

tests/unit/storyshots.test.tsx

@@ -1,14 +1,14 @@
-import initStoryshots from '@storybook/addon-storyshots'
+// import initStoryshots from '@storybook/addon-storyshots'
-import { render, wait } from '@testing-library/react'
+// import { render, wait } from '@testing-library/react'
 
-// Stories are render-tested with @testing-library/react,
+// // Stories are render-tested with @testing-library/react,
-// overwriting default snapshot testing behavior
+// // overwriting default snapshot testing behavior
-initStoryshots({
+// initStoryshots({
-  asyncJest: true,
+//   asyncJest: true,
-  test: async ({ story, done }) => {
+//   test: async ({ story, done }) => {
-    const storyElement = story.render()
+//     const storyElement = story.render()
-    // render the story with @testing-library/react
+//     // render the story with @testing-library/react
-    render(storyElement)
+//     render(storyElement)
-    await wait(() => done())
+//     await wait(() => done())
-  }
+//   }
-})
+// })