Merge branch 'feature/history-compute' of https://github.com/oceanprotocol/market into feature/history-compute

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

package-lock.json

@@ -4479,11 +4479,11 @@
       }
     },
     "@oceanprotocol/react": {
-      "version": "0.3.2",
+      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.3.4.tgz",
-      "integrity": "sha512-reCw+HfDQnD1tOLqDX6nOWcT5l0+4MlK4APSB7sU75RpFCEZP+p9vDFbyNoOV/mV2cnzAGCS+zqNIKqSina5Jg==",
+      "integrity": "sha512-ACCbjbGq8jZ5knNeP4rQA2g7WxCyVIvifualTOGoW5xJVudYJmt6rAJMCJTrjNMqQ8b0aRQ9wLO4G/A3ISydiw==",
       "requires": {
-        "@oceanprotocol/lib": "^0.7.1",
+        "@oceanprotocol/lib": "^0.7.3",
         "axios": "^0.20.0",
         "decimal.js": "^10.2.1",
         "web3": "^1.3.0",
@@ -7996,9 +7996,9 @@
       }
     },
     "@types/node": {
-      "version": "14.14.0",
+      "version": "14.14.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.0.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.2.tgz",
-      "integrity": "sha512-BfbIHP9IapdupGhq/hc+jT5dyiBVZ2DdeC5WwJWQWDb0GijQlzUFAeIQn/2GtvZcd2HVUU7An8felIICFTC2qg=="
+      "integrity": "sha512-jeYJU2kl7hL9U5xuI/BhKPZ4vqGM/OmK6whiFAXVhlstzZhVamWhDSmHyGLIp+RVyuF9/d0dqr2P85aFj4BvJg=="
     },
     "@types/node-fetch": {
       "version": "2.5.7",
@@ -8134,6 +8134,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-modal": {
+      "version": "3.10.6",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.10.6.tgz",
+      "integrity": "sha512-XpshhwVYir1TRZ2HS5EfmNotJjB8UEC2IkT3omNtiQzROOXSzVLz5xsjwEpACP8U+PctkpfZepX+WT5oDf0a9g==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-paginate": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/@types/react-paginate/-/react-paginate-6.2.1.tgz",
@@ -15503,9 +15512,9 @@
       }
     },
     "eslint-config-prettier": {
-      "version": "6.13.0",
+      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.14.0.tgz",
-      "integrity": "sha512-LcT0i0LSmnzqK2t764pyIt7kKH2AuuqKRTtJTdddWxOiUja9HdG5GXBVF2gmCTvVYWVsTu8J2MhJLVGRh+pj8w==",
+      "integrity": "sha512-DbVwh0qZhAC7CNDWcq8cBdK6FcVHiMTKmCypOPWeZkp9hJ8xYwTaWSa6bb6cjfi8KOeJy0e9a8Izxyx+O4+gCQ==",
       "dev": true,
       "requires": {
         "get-stdin": "^6.0.0"
@@ -16480,6 +16489,11 @@
         }
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
     "exif-parser": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/exif-parser/-/exif-parser-0.1.12.tgz",
@@ -17681,9 +17695,9 @@
       "dev": true
     },
     "gatsby": {
-      "version": "2.24.84",
+      "version": "2.24.85",
-      "resolved": "https://registry.npmjs.org/gatsby/-/gatsby-2.24.84.tgz",
+      "resolved": "https://registry.npmjs.org/gatsby/-/gatsby-2.24.85.tgz",
-      "integrity": "sha512-joA11EK+GiVDivsgeMPfbRbgh9h1Ls29h2go5I/mLjzOUpiX5Rkjpv6mD56zWuhy2ZztHB366jhwM4OIQ9wsqw==",
+      "integrity": "sha512-PvVs0i3aI+VG9SA2gN2dpHu2ZsJ1cvKkvT9PGVJCUn4S+Qj/UDsTSplr392BehcT1ck9llB8/1yLbv+25K3Smw==",
       "requires": {
         "@babel/code-frame": "^7.10.4",
         "@babel/core": "^7.11.6",
@@ -17758,7 +17772,7 @@
         "gatsby-link": "^2.4.16",
         "gatsby-plugin-page-creator": "^2.3.33",
         "gatsby-plugin-typescript": "^2.4.24",
-        "gatsby-plugin-utils": "^0.2.38",
+        "gatsby-plugin-utils": "^0.2.39",
         "gatsby-react-router-scroll": "^3.0.15",
         "gatsby-telemetry": "^1.3.38",
         "glob": "^7.1.6",
@@ -18828,9 +18842,9 @@
       }
     },
     "gatsby-plugin-utils": {
-      "version": "0.2.38",
+      "version": "0.2.39",
-      "resolved": "https://registry.npmjs.org/gatsby-plugin-utils/-/gatsby-plugin-utils-0.2.38.tgz",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-utils/-/gatsby-plugin-utils-0.2.39.tgz",
-      "integrity": "sha512-honEdQSMwYO1DzJ6h+El2YfFollNzTHTs1rsR5UjBDXOgnBXL3VEWXhcMTGqSMmoPFqiqvQOzq6CKF7zHlytyA==",
+      "integrity": "sha512-Ar6m9hjWodd4+AwHQZYBe08XGmYS1t5nghZdyKGaBcdMZRP3GGmoeyU7LH/bdkvJFf0dyoY1Me0oJV4ZNT6Abg==",
       "requires": {
         "joi": "^17.2.1"
       }
@@ -19205,9 +19219,9 @@
       }
     },
     "gatsby-transformer-remark": {
-      "version": "2.8.45",
+      "version": "2.8.46",
-      "resolved": "https://registry.npmjs.org/gatsby-transformer-remark/-/gatsby-transformer-remark-2.8.45.tgz",
+      "resolved": "https://registry.npmjs.org/gatsby-transformer-remark/-/gatsby-transformer-remark-2.8.46.tgz",
-      "integrity": "sha512-jIsLIpebLISB+TA3E4xykHFxYvLZsg/cRrv3TyzuLNeVYM+wJFAby2XdffE/xRzrCrhvXmTlT4NTg/oq79JA4w==",
+      "integrity": "sha512-pVx96U/qL2AftX/mzWw/mG/0CVZfqs2scadnIi3FuXbcFwUJfIzKzZZczz0o1PQt4GTXN5H6Q2Wiap/IOxfS2g==",
       "requires": {
         "@babel/runtime": "^7.11.2",
         "bluebird": "^3.7.2",
@@ -20449,14 +20463,14 @@
       "integrity": "sha512-aI5tKwNTBzOZApHIynaAwecLBv8TlZTEy/P4Sj2SzzAhBrGuI8yGZ0UIXVPQzOHGS+to2mjb04iy6VWt/8+d8A=="
     },
     "html-to-react": {
-      "version": "1.4.3",
+      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/html-to-react/-/html-to-react-1.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/html-to-react/-/html-to-react-1.4.4.tgz",
-      "integrity": "sha512-txe09A3vxW8yEZGJXJ1is5gGDfBEVACmZDSgwDyH5EsfRdOubBwBCg63ZThZP0xBn0UE4FyvMXZXmohusCxDcg==",
+      "integrity": "sha512-oE4GYH8c/gvFQwfNHBhg1LpfiPsQRKj0JQmvccvUHqyyF7U1H7UzZ7Z6CyF7okv1QFukyvjH9aAApNa4kYSO9g==",
       "requires": {
-        "domhandler": "^3.0",
+        "domhandler": "^3.3.0",
-        "htmlparser2": "^4.1.0",
+        "htmlparser2": "^5.0",
         "lodash.camelcase": "^4.3.0",
-        "ramda": "^0.27"
+        "ramda": "^0.27.1"
       },
       "dependencies": {
         "dom-serializer": {
@@ -20475,31 +20489,31 @@
           "integrity": "sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA=="
         },
         "domhandler": {
-          "version": "3.2.0",
+          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.3.0.tgz",
-          "integrity": "sha512-FnT5pxGpykNI10uuwyqae65Ysw7XBQJKDjDjlHgE/rsNtjr1FyGNVNQCVlM5hwcq9wkyWSqB+L5Z+Qa4khwLuA==",
+          "integrity": "sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==",
           "requires": {
             "domelementtype": "^2.0.1"
           }
         },
         "domutils": {
-          "version": "2.4.1",
+          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.1.tgz",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.2.tgz",
-          "integrity": "sha512-AA5r2GD1Dljhxc+k4zD2HYQaDkDPBhTqmqF55wLNlxfhFQlqaYME8Jhmo2nKNBb+CNfPXE8SAjtF6SsZ0cza/w==",
+          "integrity": "sha512-NKbgaM8ZJOecTZsIzW5gSuplsX2IWW2mIK7xVr8hTQF2v1CJWTmLZ1HOCh5sH+IzVPAGE5IucooOkvwBRAdowA==",
           "requires": {
             "dom-serializer": "^1.0.1",
             "domelementtype": "^2.0.1",
-            "domhandler": "^3.2.0"
+            "domhandler": "^3.3.0"
           }
         },
         "htmlparser2": {
-          "version": "4.1.0",
+          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-4.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-5.0.0.tgz",
-          "integrity": "sha512-4zDq1a1zhE4gQso/c5LP1OtrhYTncXNSpvJYtWJBtXAETPlMfi3IFNjGuQbYLuVY4ZR0QMqRVvo4Pdy9KLyP8Q==",
+          "integrity": "sha512-/Cvz5RTj9q71kCL9No1u2jhFaAdoMtxpNy0YTwjmQB3iX2TZXfCojTm7tp3rM4NxcwaX1iAzvNgo8OFectXmrQ==",
           "requires": {
             "domelementtype": "^2.0.1",
-            "domhandler": "^3.0.0",
+            "domhandler": "^3.3.0",
-            "domutils": "^2.0.0",
+            "domutils": "^2.4.2",
             "entities": "^2.0.0"
           }
         }
@@ -26842,6 +26856,17 @@
         "unist-util-visit": "^2.0.0"
       }
     },
+    "mdast-util-from-markdown": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.1.tgz",
+      "integrity": "sha512-qJXNcFcuCSPqUF0Tb0uYcFDIq67qwB3sxo9RPdf9vG8T90ViKnksFqdB/Coq2a7sTnxL/Ify2y7aIQXDkQFH0w==",
+      "requires": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-to-string": "^1.0.0",
+        "micromark": "~2.10.0",
+        "parse-entities": "^2.0.0"
+      }
+    },
     "mdast-util-to-hast": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-9.1.0.tgz",
@@ -27206,6 +27231,30 @@
       "integrity": "sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==",
       "dev": true
     },
+    "micromark": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.10.1.tgz",
+      "integrity": "sha512-fUuVF8sC1X7wsCS29SYQ2ZfIZYbTymp0EYr6sab3idFjigFFjGa5UwoniPlV9tAgntjuapW1t9U+S0yDYeGKHQ==",
+      "requires": {
+        "debug": "^4.0.0",
+        "parse-entities": "^2.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
+          "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
     "micromatch": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
@@ -27746,11 +27795,6 @@
         "tslib": "^1.10.0"
       }
     },
-    "no-scroll": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/no-scroll/-/no-scroll-2.1.1.tgz",
-      "integrity": "sha512-YTzGAJOo/B6hkodeT5SKKHpOhAzjMfkUCCXjLJwjWk2F4/InIg+HbdH9kmT7bKpleDuqLZDTRy2OdNtAj0IVyQ=="
-    },
     "node-abi": {
       "version": "2.19.1",
       "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.19.1.tgz",
@@ -30918,133 +30962,61 @@
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
     "react-markdown": {
-      "version": "4.3.1",
+      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-4.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-5.0.1.tgz",
-      "integrity": "sha512-HQlWFTbDxTtNY6bjgp3C3uv1h2xcjCSi1zAEzfBW9OwJJvENSYiLXWNXN5hHLsoqai7RnZiiHzcnWdXk2Splzw==",
+      "integrity": "sha512-+Fu+UeIfuwhCvaIPNJfG12b9LZlBxwbj3wHt3pE+znmG/lisDIYcTjLvLE5uwkv1RB7na7uaWrGFNmpSSVBwgg==",
       "requires": {
+        "@types/mdast": "^3.0.3",
+        "@types/unist": "^2.0.3",
         "html-to-react": "^1.3.4",
         "mdast-add-list-metadata": "1.0.1",
         "prop-types": "^15.7.2",
         "react-is": "^16.8.6",
-        "remark-parse": "^5.0.0",
+        "remark-parse": "^9.0.0",
-        "unified": "^6.1.5",
+        "unified": "^9.0.0",
-        "unist-util-visit": "^1.3.0",
+        "unist-util-visit": "^2.0.0",
         "xtend": "^4.0.1"
       },
       "dependencies": {
-        "is-buffer": {
+        "is-plain-obj": {
-          "version": "1.1.6",
+          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
-          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+          "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA=="
-        },
-        "parse-entities": {
-          "version": "1.2.2",
-          "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.2.tgz",
-          "integrity": "sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==",
-          "requires": {
-            "character-entities": "^1.0.0",
-            "character-entities-legacy": "^1.0.0",
-            "character-reference-invalid": "^1.0.0",
-            "is-alphanumerical": "^1.0.0",
-            "is-decimal": "^1.0.0",
-            "is-hexadecimal": "^1.0.0"
-          }
         },
         "remark-parse": {
-          "version": "5.0.0",
+          "version": "9.0.0",
-          "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-5.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-9.0.0.tgz",
-          "integrity": "sha512-b3iXszZLH1TLoyUzrATcTQUZrwNl1rE70rVdSruJFlDaJ9z5aMkhrG43Pp68OgfHndL/ADz6V69Zow8cTQu+JA==",
+          "integrity": "sha512-geKatMwSzEXKHuzBNU1z676sGcDcFoChMK38TgdHJNAYfFtsfHDQG7MoJAjs6sgYMqyLduCYWDIWZIxiPeafEw==",
           "requires": {
-            "collapse-white-space": "^1.0.2",
+            "mdast-util-from-markdown": "^0.8.0"
-            "is-alphabetical": "^1.0.0",
-            "is-decimal": "^1.0.0",
-            "is-whitespace-character": "^1.0.0",
-            "is-word-character": "^1.0.0",
-            "markdown-escapes": "^1.0.0",
-            "parse-entities": "^1.1.0",
-            "repeat-string": "^1.5.4",
-            "state-toggle": "^1.0.0",
-            "trim": "0.0.1",
-            "trim-trailing-lines": "^1.0.0",
-            "unherit": "^1.0.4",
-            "unist-util-remove-position": "^1.0.0",
-            "vfile-location": "^2.0.0",
-            "xtend": "^4.0.1"
           }
         },
         "unified": {
-          "version": "6.2.0",
+          "version": "9.2.0",
-          "resolved": "https://registry.npmjs.org/unified/-/unified-6.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/unified/-/unified-9.2.0.tgz",
-          "integrity": "sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA==",
+          "integrity": "sha512-vx2Z0vY+a3YoTj8+pttM3tiJHCwY5UFbYdiWrwBEbHmK8pvsPj2rtAX2BFfgXen8T39CJWblWRDT4L5WGXtDdg==",
           "requires": {
             "bail": "^1.0.0",
             "extend": "^3.0.0",
-            "is-plain-obj": "^1.1.0",
+            "is-buffer": "^2.0.0",
+            "is-plain-obj": "^2.0.0",
             "trough": "^1.0.0",
-            "vfile": "^2.0.0",
+            "vfile": "^4.0.0"
-            "x-is-string": "^0.1.0"
-          }
-        },
-        "unist-util-is": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
-          "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A=="
-        },
-        "unist-util-remove-position": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-1.1.4.tgz",
-          "integrity": "sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==",
-          "requires": {
-            "unist-util-visit": "^1.1.0"
-          }
-        },
-        "unist-util-stringify-position": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz",
-          "integrity": "sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ=="
-        },
-        "unist-util-visit": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
-          "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
-          "requires": {
-            "unist-util-visit-parents": "^2.0.0"
-          }
-        },
-        "unist-util-visit-parents": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
-          "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
-          "requires": {
-            "unist-util-is": "^3.0.0"
-          }
-        },
-        "vfile": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/vfile/-/vfile-2.3.0.tgz",
-          "integrity": "sha512-ASt4mBUHcTpMKD/l5Q+WJXNtshlWxOogYyGYYrg4lt/vuRjC1EFQtlAofL5VmtVNIZJzWYFJjzGWZ0Gw8pzW1w==",
-          "requires": {
-            "is-buffer": "^1.1.4",
-            "replace-ext": "1.0.0",
-            "unist-util-stringify-position": "^1.0.0",
-            "vfile-message": "^1.0.0"
-          }
-        },
-        "vfile-location": {
-          "version": "2.0.6",
-          "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.6.tgz",
-          "integrity": "sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA=="
-        },
-        "vfile-message": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-1.1.1.tgz",
-          "integrity": "sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==",
-          "requires": {
-            "unist-util-stringify-position": "^1.1.1"
           }
         }
       }
     },
+    "react-modal": {
+      "version": "3.11.2",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.11.2.tgz",
+      "integrity": "sha512-o8gvvCOFaG1T7W6JUvsYjRjMVToLZgLIsi5kdhFIQCtHxDkA47LznX62j+l6YQkpXDbvQegsDyxe/+JJsFQN7w==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.5.10",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-onclickoutside": {
       "version": "6.9.0",
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz",
@@ -31119,15 +31091,6 @@
         "tslib": "^1.0.0"
       }
     },
-    "react-responsive-modal": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/react-responsive-modal/-/react-responsive-modal-5.1.1.tgz",
-      "integrity": "sha512-DjNBoVWfiP+5KCvpqFKhjKPVpPUYjpieCU/F3nlBU4OPImiZyGdM7l8iDjTIEti0lAt02vbuwmAaVLf3z1Mrqw==",
-      "requires": {
-        "classnames": "^2.2.6",
-        "no-scroll": "^2.1.1"
-      }
-    },
     "react-side-effect": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz",
@@ -33250,9 +33213,9 @@
       "optional": true
     },
     "shortid": {
-      "version": "2.2.15",
+      "version": "2.2.16",
-      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.15.tgz",
+      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.16.tgz",
-      "integrity": "sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==",
+      "integrity": "sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==",
       "requires": {
         "nanoid": "^2.1.0"
       }
@@ -36519,9 +36482,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "12.12.69",
+          "version": "12.19.0",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.69.tgz",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.0.tgz",
-          "integrity": "sha512-2F2VQRSFmzqgUEXw75L51MgnnZqc6bKWVSUPfrDPzp6mzGGibeVwyQcpvZvBr5RnsoMRHmC8EcBQiobSeqeJxg=="
+          "integrity": "sha512-4BVAE9yp5DU3ISqBInsaRp9J474HWNaNVs8eZ1Far3dI1MwS3Wk0EvBRMM4xBh3Oz+c05hUgJmcbtAVmG8bv7w=="
         }
       }
     },
@@ -36719,9 +36682,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "12.12.69",
+          "version": "12.19.0",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.69.tgz",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.0.tgz",
-          "integrity": "sha512-2F2VQRSFmzqgUEXw75L51MgnnZqc6bKWVSUPfrDPzp6mzGGibeVwyQcpvZvBr5RnsoMRHmC8EcBQiobSeqeJxg=="
+          "integrity": "sha512-4BVAE9yp5DU3ISqBInsaRp9J474HWNaNVs8eZ1Far3dI1MwS3Wk0EvBRMM4xBh3Oz+c05hUgJmcbtAVmG8bv7w=="
         }
       }
     },

package.json

@@ -23,7 +23,7 @@
     "@loadable/component": "5.13.1",
     "@oceanprotocol/art": "^3.0.0",
     "@oceanprotocol/lib": "^0.7.3",
-    "@oceanprotocol/react": "^0.3.2",
+    "@oceanprotocol/react": "^0.3.4",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
     "@tippyjs/react": "^4.2.0",
@@ -40,7 +40,7 @@
     "ethereum-blockies": "github:MyEtherWallet/blockies",
     "filesize": "^6.1.0",
     "formik": "^2.2.0",
-    "gatsby": "^2.24.84",
+    "gatsby": "^2.24.85",
     "gatsby-image": "^2.4.21",
     "gatsby-plugin-manifest": "^2.4.35",
     "gatsby-plugin-react-helmet": "^3.3.14",
@@ -51,7 +51,7 @@
     "gatsby-source-filesystem": "^2.3.35",
     "gatsby-source-graphql": "^2.7.6",
     "gatsby-transformer-json": "^2.4.15",
-    "gatsby-transformer-remark": "^2.8.45",
+    "gatsby-transformer-remark": "^2.8.46",
     "gatsby-transformer-sharp": "^2.5.19",
     "intersection-observer": "^0.11.0",
     "is-url-superb": "^4.0.0",
@@ -65,14 +65,14 @@
     "react-dotdotdot": "^1.3.1",
     "react-dropzone": "^11.2.0",
     "react-helmet": "^6.1.0",
-    "react-markdown": "^4.3.1",
+    "react-markdown": "^5.0.1",
+    "react-modal": "^3.11.2",
     "react-paginate": "^6.5.0",
-    "react-responsive-modal": "^5.1.1",
     "react-spring": "^8.0.27",
     "react-tabs": "^3.1.1",
     "react-toastify": "^6.0.9",
     "remove-markdown": "^0.3.0",
-    "shortid": "^2.2.15",
+    "shortid": "^2.2.16",
     "slugify": "^1.4.5",
     "swr": "^0.3.6",
     "yup": "^0.29.3"
@@ -90,10 +90,11 @@
     "@types/loadable__component": "^5.13.1",
     "@types/lodash.debounce": "^4.0.3",
     "@types/lodash.omit": "^4.5.6",
-    "@types/node": "^14.14.0",
+    "@types/node": "^14.14.2",
     "@types/react": "^16.9.53",
     "@types/react-datepicker": "^3.1.1",
     "@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",
@@ -105,7 +106,7 @@
     "babel-preset-react-app": "^9.1.2",
     "eslint": "^7.11.0",
     "eslint-config-oceanprotocol": "^1.5.0",
-    "eslint-config-prettier": "^6.13.0",
+    "eslint-config-prettier": "^6.14.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",

src/components/atoms/BaseDialog.module.css

@@ -1,10 +0,0 @@
-.customOverlay {
-}
-.customModal {
-  border-radius: 15px;
-  margin: auto;
-}
-
-.dialogTitle {
-  margin-top: 30px !important;
-}

src/components/atoms/BaseDialog.tsx

@@ -1,35 +0,0 @@
-import React, { ReactNode, ReactElement } from 'react'
-import styles from './BaseDialog.module.css'
-import { Modal } from 'react-responsive-modal'
-import 'react-responsive-modal/styles.css'
-export default function BaseDialog({
-  open,
-  title,
-  onClose,
-  children,
-  disableClose,
-  actions,
-  ...other
-}: {
-  open: boolean
-  title: string
-  onClose: () => void
-  children: ReactNode
-  disableClose?: boolean
-  actions?: any
-}): ReactElement {
-  return (
-    <Modal
-      open={open}
-      onClose={onClose}
-      classNames={{
-        overlay: styles.customOverlay,
-        modal: styles.customModal
-      }}
-      {...other}
-    >
-      <h2 className={styles.dialogTitle}>{title}</h2>
-      <div>{children}</div>
-    </Modal>
-  )
-}

src/components/atoms/Modal.module.css

@@ -0,0 +1,96 @@
+/* prevent background scrolling */
+:global(.ReactModal__Body--open) {
+  overflow: hidden;
+}
+
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(3px);
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  animation: fadeIn 0.2s ease-out backwards;
+  z-index: 5;
+}
+
+.modal {
+  composes: box from './Box.module.css';
+  padding: var(--spacer);
+  margin: var(--spacer) auto;
+  max-width: var(--break-point--small);
+  position: relative;
+  animation: moveUp 0.2s ease-out backwards;
+}
+
+.modal:focus {
+  outline: 0;
+}
+
+@media (min-width: 40rem) {
+  .modal {
+    padding: calc(var(--spacer) * 2);
+  }
+}
+
+.header {
+  padding-bottom: var(--spacer);
+}
+
+.title {
+  font-size: var(--font-size-h3);
+  margin: 0;
+}
+
+@media (min-width: 40rem) {
+  .title {
+    font-size: var(--font-size-h2);
+  }
+}
+
+.description {
+  margin: 0;
+  margin-top: var(--spacer);
+}
+
+.close {
+  position: absolute;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  box-shadow: none;
+  outline: 0;
+  top: calc(var(--spacer) / 4);
+  right: calc(var(--spacer) / 2);
+  font-size: var(--font-size-h2);
+  color: var(--brand-grey);
+}
+
+.close:hover,
+.close:focus {
+  opacity: 0.7;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes moveUp {
+  from {
+    transform: translate3d(0, 1rem, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}

src/components/atoms/Modal.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Modal from './Modal'
+import ReactModal from 'react-modal'
+
+describe('Modal', () => {
+  it('renders without crashing', () => {
+    ReactModal.setAppElement(document.createElement('div'))
+
+    render(
+      <Modal title="Hello" isOpen onToggleModal={() => null}>
+        Hello
+      </Modal>
+    )
+    expect(document.querySelector('.ReactModalPortal')).toBeInTheDocument()
+  })
+})

src/components/atoms/Modal.tsx

@@ -0,0 +1,41 @@
+import React, { ReactElement, ReactNode } from 'react'
+import ReactModal from 'react-modal'
+import styles from './Modal.module.css'
+
+if (process.env.NODE_ENV !== 'test') ReactModal.setAppElement('#___gatsby')
+
+export interface ModalProps extends ReactModal.Props {
+  title: string
+  onToggleModal: () => void
+  children: ReactNode
+}
+
+export default function Modal({
+  title,
+  onToggleModal,
+  children,
+  ...props
+}: ModalProps): ReactElement {
+  return (
+    <ReactModal
+      contentLabel={title}
+      className={styles.modal}
+      overlayClassName={styles.modalOverlay}
+      {...props}
+    >
+      <button
+        className={styles.close}
+        onClick={onToggleModal}
+        data-testid="closeModal"
+      >
+        &times;
+      </button>
+
+      <header className={styles.header}>
+        <h2 className={styles.title}>{title}</h2>
+      </header>
+
+      {children}
+    </ReactModal>
+  )
+}

src/components/pages/History/ComputeDetailsModal.tsx

@@ -2,8 +2,8 @@ import { Logger } from '@oceanprotocol/lib'
 import { useOcean } from '@oceanprotocol/react'
 import React, { ReactElement, useEffect, useState } from 'react'
 import Loader from '../../atoms/Loader'
+import Modal from '../../atoms/Modal'
 import AssetList from '../../organisms/AssetList'
-import BaseDialog from '../../atoms/BaseDialog'
 import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/ComputeJob'
 import { ComputeJobMetaData } from '@types/ComputeJobMetaData'
 import Time from '../../atoms/Time'
@@ -11,22 +11,20 @@ import shortid from 'shortid'
 
 export default function ComputeDetailsModal({
   computeJob,
-  open,
+  isOpen,
-  onClose
+  onToggleModal
 }: {
   computeJob: ComputeJobMetaData
-  open: boolean
+  isOpen: boolean
-  onClose: () => void
+  onToggleModal: () => void
 }): ReactElement {
   const { ocean, status, account } = useOcean()
   const [isLoading, setIsLoading] = useState(false)
 
   useEffect(() => {
     async function getDetails() {
-      console.log('open', open)
+      if (!account || !ocean || !computeJob || !isOpen) return
-      if (!account || !ocean || !computeJob || !open) return
 
-      console.log('open', open)
       try {
         setIsLoading(true)
         const job = await ocean.compute.status(
@@ -50,27 +48,31 @@ export default function ComputeDetailsModal({
   }, [ocean, status, account, open])
 
   return (
-    <BaseDialog open={open} onClose={onClose} title="Compute job details">
+    <Modal
+      title="Compute job details"
+      isOpen={isOpen}
+      onToggleModal={onToggleModal}
+    >
       {isLoading ? (
         <Loader />
       ) : (
-        <>
+          <>
-          <p>{computeJob.assetName}</p>
+            <p>{computeJob.assetName}</p>
-          <p>
+            <p>
-            <Time date={computeJob.dateCreated} isUnix />
+              <Time date={computeJob.dateCreated} isUnix />
-          </p>
+            </p>
-          <p>
+            <p>
-            <Time date={computeJob.dateFinished} isUnix />
+              <Time date={computeJob.dateFinished} isUnix />
-          </p>
+            </p>
-          <p>{computeJob.statusText}</p>
+            <p>{computeJob.statusText}</p>
-          <p>{computeJob.algorithmLogUrl}</p>
+            <p>{computeJob.algorithmLogUrl}</p>
-          <p>
+            <p>
-            {computeJob.resultsUrls?.map((url) => {
+              {computeJob.resultsUrls?.map((url) => {
-              return <span key={shortid.generate()}>{url}</span>
+                return <span key={shortid.generate()}>{url}</span>
-            })}{' '}
+              })}{' '}
-          </p>
+            </p>
-        </>
+          </>
-      )}
+        )}
-    </BaseDialog>
+    </Modal>
   )
 }

src/components/pages/History/ComputeJobs.tsx

@@ -20,8 +20,8 @@ function DetailsButton({ row }: { row: ComputeJobMetaData }): ReactElement {
       </Button>
       <ComputeDetailsModal
         computeJob={row}
-        open={isDialogOpen}
+        isOpen={isDialogOpen}
-        onClose={() => setIsDialogOpen(false)}
+        onToggleModal={() => setIsDialogOpen(false)}
       />
     </>
   )
@@ -72,7 +72,6 @@ export default function ComputeJobs(): ReactElement {
   const { ocean, account } = useOcean()
   const [jobs, setJobs] = useState<ComputeJobMetaData[]>()
   const [isLoading, setIsLoading] = useState(false)
-  const [userAgreed, setUserAgreed] = useState(false)
 
   const getTitle = async (did: string) => {
     const ddo = await ocean.metadatacache.retrieveDDO(did)