merge v4-c2d into compute-jobs

content/site.json

@@ -1,9 +1,8 @@
 {
   "siteTitle": "Ocean Market",
   "siteTagline": "A marketplace to find, publish and trade data sets in the Ocean Network.",
-  "siteUrl": "https://market.oceanprotocol.com",
+  "siteUrl": "https://v4.market.oceanprotocol.com",
-  "siteIcon": "node_modules/@oceanprotocol/art/logo/favicon-white.png",
+  "siteImage": "/share.png",
-  "siteImage": "../src/@images/share.png",
   "copyright": "All Rights Reserved. Powered by [Ocean Protocol](https://oceanprotocol.com)",
   "menu": [
     {

package-lock.json

@@ -17,7 +17,8 @@
         "@oceanprotocol/typographies": "^0.1.0",
         "@portis/web3": "^4.0.7",
         "@tippyjs/react": "^4.2.6",
-        "@walletconnect/web3-provider": "^1.7.5",
+        "@urql/exchange-refocus": "^0.2.5",
+        "@walletconnect/web3-provider": "^1.7.6",
         "axios": "^0.26.1",
         "bignumber.js": "^9.0.2",
         "chart.js": "^3.7.1",
@@ -3975,9 +3976,9 @@
       }
     },
     "node_modules/@oclif/plugin-help/node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "3.0.0",
+      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
-      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+      "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
       "dev": true,
       "engines": {
         "node": ">=4"
@@ -5005,9 +5006,9 @@
       "integrity": "sha512-o7nBlaMuasuADCCL2WzhvOXA5GT5ewd/F35cY6ZU69U5OUASR3ZP4CZetVCc5MZePPa/3CL9pzJ4Rhtg1ChwVA=="
     },
     "node_modules/@truffle/codec": {
-      "version": "0.12.3",
+      "version": "0.12.4",
-      "resolved": "https://registry.npmjs.org/@truffle/codec/-/codec-0.12.3.tgz",
+      "resolved": "https://registry.npmjs.org/@truffle/codec/-/codec-0.12.4.tgz",
-      "integrity": "sha512-szDlA5KmTwFDL6yjB0i9bwz48nxObbxAwL6MERJRLrs7yQu/3jTtTW3cfw9owtsfqu7DzX4TXAPLp0eYb4PPUQ==",
+      "integrity": "sha512-8XCKMAP22fEVa8xGFA9lqBr5kWhyYW/41ekP0yFEXQhCSPEcZamc6I9h2KQGBrChdxGsKd82Y4138rHGKiQtjQ==",
       "dependencies": {
         "@truffle/abi-utils": "^0.2.10",
         "@truffle/compile-common": "^0.7.29",
@@ -5451,11 +5452,11 @@
       }
     },
     "node_modules/@truffle/debug-utils": {
-      "version": "6.0.13",
+      "version": "6.0.14",
-      "resolved": "https://registry.npmjs.org/@truffle/debug-utils/-/debug-utils-6.0.13.tgz",
+      "resolved": "https://registry.npmjs.org/@truffle/debug-utils/-/debug-utils-6.0.14.tgz",
-      "integrity": "sha512-8BZ82FqOpnfzs2IvfYOgTzthQ0e8yO1Zm86CO4vPlrbTVI0bSemCFevau0QzR5bPXVg558MHpDOhZHmZN6yU1w==",
+      "integrity": "sha512-LhtoKI86QzLFbb0dOQojNR1jl8Le0GL/fkhkaK/thdxMtkt5F7BVoO0f0CbnC9+vfp7qbgEcRct1suw38sVVGQ==",
       "dependencies": {
-        "@truffle/codec": "^0.12.3",
+        "@truffle/codec": "^0.12.4",
         "@trufflesuite/chromafi": "^3.0.0",
         "bn.js": "^5.1.3",
         "chalk": "^2.4.2",
@@ -6736,6 +6737,18 @@
         "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
       }
     },
+    "node_modules/@urql/exchange-refocus": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@urql/exchange-refocus/-/exchange-refocus-0.2.5.tgz",
+      "integrity": "sha512-JlrEXlG37mK/WgyxqVrHkLZtBMVC7x3GtgGJHiiXK41AQdU2hVy3IAQ208ENMIrkFw9SHQf8d8h7Wb2EY/1zdw==",
+      "dependencies": {
+        "@urql/core": ">=2.3.6",
+        "wonka": "^4.0.14"
+      },
+      "peerDependencies": {
+        "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
+      }
+    },
     "node_modules/@use-it/event-listener": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/@use-it/event-listener/-/event-listener-0.1.7.tgz",
@@ -6745,36 +6758,36 @@
       }
     },
     "node_modules/@walletconnect/browser-utils": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/browser-utils/-/browser-utils-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/browser-utils/-/browser-utils-1.7.6.tgz",
-      "integrity": "sha512-gm9ufi0n5cGBXoGWDtMVSqIJ0eXYW+ZFuTNVN0fm4oal26J7cPrOdFjzhv5zvx5fKztWQ21DNFZ+PRXBjXg04Q==",
+      "integrity": "sha512-7dZkvybjxIt59YdGqMCft8ydghlR7axSzZVW3Oy6NOYdq0ztZGCV/hpUcQ3pgC3uhpn93XqVPrBAyKLqt+/u5A==",
       "dependencies": {
         "@walletconnect/safe-json": "1.0.0",
-        "@walletconnect/types": "^1.7.5",
+        "@walletconnect/types": "^1.7.6",
         "@walletconnect/window-getters": "1.0.0",
         "@walletconnect/window-metadata": "1.0.0",
         "detect-browser": "5.2.0"
       }
     },
     "node_modules/@walletconnect/client": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/client/-/client-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/client/-/client-1.7.6.tgz",
-      "integrity": "sha512-Vh3h1kfhmJ4Jx//H0lmmfDc5Q2s+R73Nh5cetVN41QPRrAcqHE4lR2ZS8XxRCNBl4/gcHZJIZS9J2Ui4tTXBLA==",
+      "integrity": "sha512-ZAcH9aL+p3psXwcsts51liKiqS/Kez05bYM193QC7mfcGwlFhQWMCRWHb38y8yHrWQMUmtOZ+jKotKjrOitDUw==",
       "dependencies": {
-        "@walletconnect/core": "^1.7.5",
+        "@walletconnect/core": "^1.7.6",
-        "@walletconnect/iso-crypto": "^1.7.5",
+        "@walletconnect/iso-crypto": "^1.7.6",
-        "@walletconnect/types": "^1.7.5",
+        "@walletconnect/types": "^1.7.6",
-        "@walletconnect/utils": "^1.7.5"
+        "@walletconnect/utils": "^1.7.6"
       }
     },
     "node_modules/@walletconnect/core": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-1.7.6.tgz",
-      "integrity": "sha512-c4B8s9fZ/Ah2p460Hxo4e9pwLQVYT2+dVYAfqaxVzfYjhAokDEtO55Bdm1hujtRjQVqwTvCljKxBB+LgMp3k8w==",
+      "integrity": "sha512-gWD80GTgJ/xpYbJ/R5sbto1daDcDqeHl3ODzdtaVbDR2whS16spsEsXxgsM6BXFKqbGJ0r90SkHsNHa8xiekLQ==",
       "dependencies": {
-        "@walletconnect/socket-transport": "^1.7.5",
+        "@walletconnect/socket-transport": "^1.7.6",
-        "@walletconnect/types": "^1.7.5",
+        "@walletconnect/types": "^1.7.6",
-        "@walletconnect/utils": "^1.7.5"
+        "@walletconnect/utils": "^1.7.6"
       }
     },
     "node_modules/@walletconnect/crypto": {
@@ -6804,24 +6817,24 @@
       "integrity": "sha512-4BwqyWy6KpSvkocSaV7WR3BlZfrxLbJSLkg+j7Gl6pTDE+U55lLhJvQaMuDVazXYxcjBsG09k7UlH7cGiUI5vQ=="
     },
     "node_modules/@walletconnect/http-connection": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/http-connection/-/http-connection-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/http-connection/-/http-connection-1.7.6.tgz",
-      "integrity": "sha512-WDy2Y/07c1F107362jel0voeV6QMJuWbwAKNLtxlX8Y9KNzqZAGlHhIZykSWrMjNGwxBaXoqLPmu60uVvodc6A==",
+      "integrity": "sha512-G2xgqALcy2naHeiFS1N3VEwsgqIbFrbBv9gYaHE3R6RuEb4VVSIVGy6brpN+CoLmI680Kj2EmiJG7yvpNsHKdg==",
       "dependencies": {
-        "@walletconnect/types": "^1.7.5",
+        "@walletconnect/types": "^1.7.6",
-        "@walletconnect/utils": "^1.7.5",
+        "@walletconnect/utils": "^1.7.6",
         "eventemitter3": "4.0.7",
         "xhr2-cookies": "1.1.0"
       }
     },
     "node_modules/@walletconnect/iso-crypto": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/iso-crypto/-/iso-crypto-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/iso-crypto/-/iso-crypto-1.7.6.tgz",
-      "integrity": "sha512-mJdRs2SqAPOLBBqLhU+ZnAh2c8TL2uDuL/ojV4aBzZ0ZHNT7X2zSOjAiixCb3vvH8GAt30OKmiRo3+ChI/9zvA==",
+      "integrity": "sha512-x80OVfarjPzD02kJgnpmLCxlsFRaymGjlGWzLmtwO8/hp1mrtT/ukFOsl1Fs6Tunp7BdCoJT+9FYFarcvbsG8Q==",
       "dependencies": {
         "@walletconnect/crypto": "^1.0.2",
-        "@walletconnect/types": "^1.7.5",
+        "@walletconnect/types": "^1.7.6",
-        "@walletconnect/utils": "^1.7.5"
+        "@walletconnect/utils": "^1.7.6"
       }
     },
     "node_modules/@walletconnect/jsonrpc-types": {
@@ -6848,13 +6861,13 @@
       "deprecated": "Deprecated in favor of dynamic registry available from: https://github.com/walletconnect/walletconnect-registry"
     },
     "node_modules/@walletconnect/qrcode-modal": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/qrcode-modal/-/qrcode-modal-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/qrcode-modal/-/qrcode-modal-1.7.6.tgz",
-      "integrity": "sha512-LVq35jc3VMGq1EMcGCObQtEiercMDmUHDnc7A3AmUo0LoAbaPo6c8Hq0zqy2+JhtLmxUhU3ktf+szmCoiUDTUQ==",
+      "integrity": "sha512-SXx8eTllgyGpArwdB8v1WsmAKbxiizqebJLn32C6KRzWVW5FP4FizzgEi+r6xINWSEpWLX72GbeWAoiQDwFVFw==",
       "dependencies": {
-        "@walletconnect/browser-utils": "^1.7.5",
+        "@walletconnect/browser-utils": "^1.7.6",
         "@walletconnect/mobile-registry": "^1.4.0",
-        "@walletconnect/types": "^1.7.5",
+        "@walletconnect/types": "^1.7.6",
         "copy-to-clipboard": "^3.3.1",
         "preact": "10.4.1",
         "qrcode": "1.4.4"
@@ -6876,29 +6889,29 @@
       "integrity": "sha512-QJzp/S/86sUAgWY6eh5MKYmSfZaRpIlmCJdi5uG4DJlKkZrHEF7ye7gA+VtbVzvTtpM/gRwO2plQuiooIeXjfg=="
     },
     "node_modules/@walletconnect/socket-transport": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/socket-transport/-/socket-transport-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/socket-transport/-/socket-transport-1.7.6.tgz",
-      "integrity": "sha512-4TYCxrNWb4f5a1NGsALXidr+/6dOiqgVfUQJ4fdP6R7ijL+7jtdiktguU9FIDq5wFXRE+ZdpCpwSAfOt60q/mQ==",
+      "integrity": "sha512-yH2eKD9P34gnOxOfCarERROl5SkiwBR9UcASjcnp2L7r02ZaXHbhheXHUWzcU5HpEXrvz8DGciE7GBQn+aNgQg==",
       "dependencies": {
-        "@walletconnect/types": "^1.7.5",
+        "@walletconnect/types": "^1.7.6",
-        "@walletconnect/utils": "^1.7.5",
+        "@walletconnect/utils": "^1.7.6",
         "ws": "7.5.3"
       }
     },
     "node_modules/@walletconnect/types": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-1.7.6.tgz",
-      "integrity": "sha512-0HvZzxD93et4DdrYgAvclI1BqclkZS7iPWRtbGg3r+PQhRPbOkNypzBy6XH6wflbmr+WBGdmyJvynHsdhcCqUA=="
+      "integrity": "sha512-3JVjEzvJgDc5DzaXNxhg4JcdG4U8Qk6HVBELOu+TwiWG31TZRt82uL9CcVZKieFPP/nTWQnj+QkiKSpO7T1KTQ=="
     },
     "node_modules/@walletconnect/utils": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-1.7.6.tgz",
-      "integrity": "sha512-U954rIIA/g/Cmdqy+n3hMY1DDMmXxGs8w/QmrK9b/H5nkQ3e4QicOyynq5g/JTTesN5HZdDTFiyX9r0GSKa+iA==",
+      "integrity": "sha512-GLneac0Hx52pNHAOkTt/07K+Ht8LmWFaK0nQlHqrLmOJm8WZPnUvMZGMTpSOzgKw47u0cjhE38ipbXOaq8qReA==",
       "dependencies": {
-        "@walletconnect/browser-utils": "^1.7.5",
+        "@walletconnect/browser-utils": "^1.7.6",
         "@walletconnect/encoding": "^1.0.1",
         "@walletconnect/jsonrpc-utils": "^1.0.0",
-        "@walletconnect/types": "^1.7.5",
+        "@walletconnect/types": "^1.7.6",
         "bn.js": "4.11.8",
         "js-sha3": "0.8.0",
         "query-string": "6.13.5"
@@ -6926,15 +6939,15 @@
       }
     },
     "node_modules/@walletconnect/web3-provider": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/web3-provider/-/web3-provider-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/web3-provider/-/web3-provider-1.7.6.tgz",
-      "integrity": "sha512-x+UWOTu7jd9qog9NWhaspOmVRDJPnQrgZBscnaSC+x/aAsi52VUrd1GZ9c5UNZFgss41fdx3Z2KhkPeVrlrbuQ==",
+      "integrity": "sha512-INjHVTuuISm9rk9QGr8v0IvcmjygEyt+rDB6Iw6G5hK+qwEB+UlrRbXyu0bAmEe4wREpiJmegz7KjiHIxmCTNA==",
       "dependencies": {
-        "@walletconnect/client": "^1.7.5",
+        "@walletconnect/client": "^1.7.6",
-        "@walletconnect/http-connection": "^1.7.5",
+        "@walletconnect/http-connection": "^1.7.6",
-        "@walletconnect/qrcode-modal": "^1.7.5",
+        "@walletconnect/qrcode-modal": "^1.7.6",
-        "@walletconnect/types": "^1.7.5",
+        "@walletconnect/types": "^1.7.6",
-        "@walletconnect/utils": "^1.7.5",
+        "@walletconnect/utils": "^1.7.6",
         "web3-provider-engine": "16.0.1"
       }
     },
@@ -7129,9 +7142,9 @@
       }
     },
     "node_modules/ansi-regex": {
-      "version": "3.0.0",
+      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
-      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+      "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
       "engines": {
         "node": ">=4"
       }
@@ -17422,9 +17435,9 @@
       }
     },
     "node_modules/minimist": {
-      "version": "1.2.5",
+      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
     "node_modules/minipass": {
       "version": "2.9.0",
@@ -26715,6 +26728,7 @@
         "cross-fetch": "^3.1.5",
         "crypto-js": "^4.1.1",
         "decimal.js": "^10.3.1",
+        "web3": "^1.7.1",
         "web3-core": "^1.7.1",
         "web3-eth-contract": "^1.7.1"
       }
@@ -26817,6 +26831,7 @@
       "integrity": "sha512-5vwpq6kbvwkQwKqAoOU3L72GZ3Ta8RRrewKj9OJRolx28KLJJ8Dg9Rf7obRwt5jQA9bkYd8gqzMTrI7H3xLfaw==",
       "dev": true,
       "requires": {
+        "@oclif/config": "^1.15.1",
         "@oclif/errors": "^1.3.3",
         "@oclif/parser": "^3.8.3",
         "@oclif/plugin-help": "^3",
@@ -27144,9 +27159,9 @@
           },
           "dependencies": {
             "ansi-regex": {
-              "version": "3.0.0",
+              "version": "3.0.1",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
-              "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+              "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
               "dev": true
             },
             "string-width": {
@@ -27905,9 +27920,9 @@
       "integrity": "sha512-o7nBlaMuasuADCCL2WzhvOXA5GT5ewd/F35cY6ZU69U5OUASR3ZP4CZetVCc5MZePPa/3CL9pzJ4Rhtg1ChwVA=="
     },
     "@truffle/codec": {
-      "version": "0.12.3",
+      "version": "0.12.4",
-      "resolved": "https://registry.npmjs.org/@truffle/codec/-/codec-0.12.3.tgz",
+      "resolved": "https://registry.npmjs.org/@truffle/codec/-/codec-0.12.4.tgz",
-      "integrity": "sha512-szDlA5KmTwFDL6yjB0i9bwz48nxObbxAwL6MERJRLrs7yQu/3jTtTW3cfw9owtsfqu7DzX4TXAPLp0eYb4PPUQ==",
+      "integrity": "sha512-8XCKMAP22fEVa8xGFA9lqBr5kWhyYW/41ekP0yFEXQhCSPEcZamc6I9h2KQGBrChdxGsKd82Y4138rHGKiQtjQ==",
       "requires": {
         "@truffle/abi-utils": "^0.2.10",
         "@truffle/compile-common": "^0.7.29",
@@ -28281,11 +28296,11 @@
       }
     },
     "@truffle/debug-utils": {
-      "version": "6.0.13",
+      "version": "6.0.14",
-      "resolved": "https://registry.npmjs.org/@truffle/debug-utils/-/debug-utils-6.0.13.tgz",
+      "resolved": "https://registry.npmjs.org/@truffle/debug-utils/-/debug-utils-6.0.14.tgz",
-      "integrity": "sha512-8BZ82FqOpnfzs2IvfYOgTzthQ0e8yO1Zm86CO4vPlrbTVI0bSemCFevau0QzR5bPXVg558MHpDOhZHmZN6yU1w==",
+      "integrity": "sha512-LhtoKI86QzLFbb0dOQojNR1jl8Le0GL/fkhkaK/thdxMtkt5F7BVoO0f0CbnC9+vfp7qbgEcRct1suw38sVVGQ==",
       "requires": {
-        "@truffle/codec": "^0.12.3",
+        "@truffle/codec": "^0.12.4",
         "@trufflesuite/chromafi": "^3.0.0",
         "bn.js": "^5.1.3",
         "chalk": "^2.4.2",
@@ -29398,6 +29413,15 @@
         "wonka": "^4.0.14"
       }
     },
+    "@urql/exchange-refocus": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@urql/exchange-refocus/-/exchange-refocus-0.2.5.tgz",
+      "integrity": "sha512-JlrEXlG37mK/WgyxqVrHkLZtBMVC7x3GtgGJHiiXK41AQdU2hVy3IAQ208ENMIrkFw9SHQf8d8h7Wb2EY/1zdw==",
+      "requires": {
+        "@urql/core": ">=2.3.6",
+        "wonka": "^4.0.14"
+      }
+    },
     "@use-it/event-listener": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/@use-it/event-listener/-/event-listener-0.1.7.tgz",
@@ -29405,36 +29429,36 @@
       "requires": {}
     },
     "@walletconnect/browser-utils": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/browser-utils/-/browser-utils-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/browser-utils/-/browser-utils-1.7.6.tgz",
-      "integrity": "sha512-gm9ufi0n5cGBXoGWDtMVSqIJ0eXYW+ZFuTNVN0fm4oal26J7cPrOdFjzhv5zvx5fKztWQ21DNFZ+PRXBjXg04Q==",
+      "integrity": "sha512-7dZkvybjxIt59YdGqMCft8ydghlR7axSzZVW3Oy6NOYdq0ztZGCV/hpUcQ3pgC3uhpn93XqVPrBAyKLqt+/u5A==",
       "requires": {
         "@walletconnect/safe-json": "1.0.0",
-        "@walletconnect/types": "^1.7.5",
+        "@walletconnect/types": "^1.7.6",
         "@walletconnect/window-getters": "1.0.0",
         "@walletconnect/window-metadata": "1.0.0",
         "detect-browser": "5.2.0"
       }
     },
     "@walletconnect/client": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/client/-/client-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/client/-/client-1.7.6.tgz",
-      "integrity": "sha512-Vh3h1kfhmJ4Jx//H0lmmfDc5Q2s+R73Nh5cetVN41QPRrAcqHE4lR2ZS8XxRCNBl4/gcHZJIZS9J2Ui4tTXBLA==",
+      "integrity": "sha512-ZAcH9aL+p3psXwcsts51liKiqS/Kez05bYM193QC7mfcGwlFhQWMCRWHb38y8yHrWQMUmtOZ+jKotKjrOitDUw==",
       "requires": {
-        "@walletconnect/core": "^1.7.5",
+        "@walletconnect/core": "^1.7.6",
-        "@walletconnect/iso-crypto": "^1.7.5",
+        "@walletconnect/iso-crypto": "^1.7.6",
-        "@walletconnect/types": "^1.7.5",
+        "@walletconnect/types": "^1.7.6",
-        "@walletconnect/utils": "^1.7.5"
+        "@walletconnect/utils": "^1.7.6"
       }
     },
     "@walletconnect/core": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-1.7.6.tgz",
-      "integrity": "sha512-c4B8s9fZ/Ah2p460Hxo4e9pwLQVYT2+dVYAfqaxVzfYjhAokDEtO55Bdm1hujtRjQVqwTvCljKxBB+LgMp3k8w==",
+      "integrity": "sha512-gWD80GTgJ/xpYbJ/R5sbto1daDcDqeHl3ODzdtaVbDR2whS16spsEsXxgsM6BXFKqbGJ0r90SkHsNHa8xiekLQ==",
       "requires": {
-        "@walletconnect/socket-transport": "^1.7.5",
+        "@walletconnect/socket-transport": "^1.7.6",
-        "@walletconnect/types": "^1.7.5",
+        "@walletconnect/types": "^1.7.6",
-        "@walletconnect/utils": "^1.7.5"
+        "@walletconnect/utils": "^1.7.6"
       }
     },
     "@walletconnect/crypto": {
@@ -29464,24 +29488,24 @@
       "integrity": "sha512-4BwqyWy6KpSvkocSaV7WR3BlZfrxLbJSLkg+j7Gl6pTDE+U55lLhJvQaMuDVazXYxcjBsG09k7UlH7cGiUI5vQ=="
     },
     "@walletconnect/http-connection": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/http-connection/-/http-connection-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/http-connection/-/http-connection-1.7.6.tgz",
-      "integrity": "sha512-WDy2Y/07c1F107362jel0voeV6QMJuWbwAKNLtxlX8Y9KNzqZAGlHhIZykSWrMjNGwxBaXoqLPmu60uVvodc6A==",
+      "integrity": "sha512-G2xgqALcy2naHeiFS1N3VEwsgqIbFrbBv9gYaHE3R6RuEb4VVSIVGy6brpN+CoLmI680Kj2EmiJG7yvpNsHKdg==",
       "requires": {
-        "@walletconnect/types": "^1.7.5",
+        "@walletconnect/types": "^1.7.6",
-        "@walletconnect/utils": "^1.7.5",
+        "@walletconnect/utils": "^1.7.6",
         "eventemitter3": "4.0.7",
         "xhr2-cookies": "1.1.0"
       }
     },
     "@walletconnect/iso-crypto": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/iso-crypto/-/iso-crypto-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/iso-crypto/-/iso-crypto-1.7.6.tgz",
-      "integrity": "sha512-mJdRs2SqAPOLBBqLhU+ZnAh2c8TL2uDuL/ojV4aBzZ0ZHNT7X2zSOjAiixCb3vvH8GAt30OKmiRo3+ChI/9zvA==",
+      "integrity": "sha512-x80OVfarjPzD02kJgnpmLCxlsFRaymGjlGWzLmtwO8/hp1mrtT/ukFOsl1Fs6Tunp7BdCoJT+9FYFarcvbsG8Q==",
       "requires": {
         "@walletconnect/crypto": "^1.0.2",
-        "@walletconnect/types": "^1.7.5",
+        "@walletconnect/types": "^1.7.6",
-        "@walletconnect/utils": "^1.7.5"
+        "@walletconnect/utils": "^1.7.6"
       }
     },
     "@walletconnect/jsonrpc-types": {
@@ -29507,13 +29531,13 @@
       "integrity": "sha512-ZtKRio4uCZ1JUF7LIdecmZt7FOLnX72RPSY7aUVu7mj7CSfxDwUn6gBuK6WGtH+NZCldBqDl5DenI5fFSvkKYw=="
     },
     "@walletconnect/qrcode-modal": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/qrcode-modal/-/qrcode-modal-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/qrcode-modal/-/qrcode-modal-1.7.6.tgz",
-      "integrity": "sha512-LVq35jc3VMGq1EMcGCObQtEiercMDmUHDnc7A3AmUo0LoAbaPo6c8Hq0zqy2+JhtLmxUhU3ktf+szmCoiUDTUQ==",
+      "integrity": "sha512-SXx8eTllgyGpArwdB8v1WsmAKbxiizqebJLn32C6KRzWVW5FP4FizzgEi+r6xINWSEpWLX72GbeWAoiQDwFVFw==",
       "requires": {
-        "@walletconnect/browser-utils": "^1.7.5",
+        "@walletconnect/browser-utils": "^1.7.6",
         "@walletconnect/mobile-registry": "^1.4.0",
-        "@walletconnect/types": "^1.7.5",
+        "@walletconnect/types": "^1.7.6",
         "copy-to-clipboard": "^3.3.1",
         "preact": "10.4.1",
         "qrcode": "1.4.4"
@@ -29535,29 +29559,29 @@
       "integrity": "sha512-QJzp/S/86sUAgWY6eh5MKYmSfZaRpIlmCJdi5uG4DJlKkZrHEF7ye7gA+VtbVzvTtpM/gRwO2plQuiooIeXjfg=="
     },
     "@walletconnect/socket-transport": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/socket-transport/-/socket-transport-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/socket-transport/-/socket-transport-1.7.6.tgz",
-      "integrity": "sha512-4TYCxrNWb4f5a1NGsALXidr+/6dOiqgVfUQJ4fdP6R7ijL+7jtdiktguU9FIDq5wFXRE+ZdpCpwSAfOt60q/mQ==",
+      "integrity": "sha512-yH2eKD9P34gnOxOfCarERROl5SkiwBR9UcASjcnp2L7r02ZaXHbhheXHUWzcU5HpEXrvz8DGciE7GBQn+aNgQg==",
       "requires": {
-        "@walletconnect/types": "^1.7.5",
+        "@walletconnect/types": "^1.7.6",
-        "@walletconnect/utils": "^1.7.5",
+        "@walletconnect/utils": "^1.7.6",
         "ws": "7.5.3"
       }
     },
     "@walletconnect/types": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-1.7.6.tgz",
-      "integrity": "sha512-0HvZzxD93et4DdrYgAvclI1BqclkZS7iPWRtbGg3r+PQhRPbOkNypzBy6XH6wflbmr+WBGdmyJvynHsdhcCqUA=="
+      "integrity": "sha512-3JVjEzvJgDc5DzaXNxhg4JcdG4U8Qk6HVBELOu+TwiWG31TZRt82uL9CcVZKieFPP/nTWQnj+QkiKSpO7T1KTQ=="
     },
     "@walletconnect/utils": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-1.7.6.tgz",
-      "integrity": "sha512-U954rIIA/g/Cmdqy+n3hMY1DDMmXxGs8w/QmrK9b/H5nkQ3e4QicOyynq5g/JTTesN5HZdDTFiyX9r0GSKa+iA==",
+      "integrity": "sha512-GLneac0Hx52pNHAOkTt/07K+Ht8LmWFaK0nQlHqrLmOJm8WZPnUvMZGMTpSOzgKw47u0cjhE38ipbXOaq8qReA==",
       "requires": {
-        "@walletconnect/browser-utils": "^1.7.5",
+        "@walletconnect/browser-utils": "^1.7.6",
         "@walletconnect/encoding": "^1.0.1",
         "@walletconnect/jsonrpc-utils": "^1.0.0",
-        "@walletconnect/types": "^1.7.5",
+        "@walletconnect/types": "^1.7.6",
         "bn.js": "4.11.8",
         "js-sha3": "0.8.0",
         "query-string": "6.13.5"
@@ -29581,15 +29605,15 @@
       }
     },
     "@walletconnect/web3-provider": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@walletconnect/web3-provider/-/web3-provider-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@walletconnect/web3-provider/-/web3-provider-1.7.6.tgz",
-      "integrity": "sha512-x+UWOTu7jd9qog9NWhaspOmVRDJPnQrgZBscnaSC+x/aAsi52VUrd1GZ9c5UNZFgss41fdx3Z2KhkPeVrlrbuQ==",
+      "integrity": "sha512-INjHVTuuISm9rk9QGr8v0IvcmjygEyt+rDB6Iw6G5hK+qwEB+UlrRbXyu0bAmEe4wREpiJmegz7KjiHIxmCTNA==",
       "requires": {
-        "@walletconnect/client": "^1.7.5",
+        "@walletconnect/client": "^1.7.6",
-        "@walletconnect/http-connection": "^1.7.5",
+        "@walletconnect/http-connection": "^1.7.6",
-        "@walletconnect/qrcode-modal": "^1.7.5",
+        "@walletconnect/qrcode-modal": "^1.7.6",
-        "@walletconnect/types": "^1.7.5",
+        "@walletconnect/types": "^1.7.6",
-        "@walletconnect/utils": "^1.7.5",
+        "@walletconnect/utils": "^1.7.6",
         "web3-provider-engine": "16.0.1"
       }
     },
@@ -29747,9 +29771,9 @@
       }
     },
     "ansi-regex": {
-      "version": "3.0.0",
+      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
-      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+      "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw=="
     },
     "ansi-styles": {
       "version": "3.2.1",
@@ -38014,9 +38038,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.5",
+      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
     "minipass": {
       "version": "2.9.0",

package.json

@@ -25,7 +25,8 @@
     "@oceanprotocol/typographies": "^0.1.0",
     "@portis/web3": "^4.0.7",
     "@tippyjs/react": "^4.2.6",
-    "@walletconnect/web3-provider": "^1.7.5",
+    "@urql/exchange-refocus": "^0.2.5",
+    "@walletconnect/web3-provider": "^1.7.6",
     "axios": "^0.26.1",
     "bignumber.js": "^9.0.2",
     "chart.js": "^3.7.1",

public/site.webmanifest

@@ -0,0 +1,14 @@
+{
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

src/@context/Pool/index.tsx

@@ -53,7 +53,7 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
   const [poolSnapshots, setPoolSnapshots] = useState<PoolDataPoolSnapshots[]>()
   const [hasUserAddedLiquidity, setUserHasAddedLiquidity] = useState(false)
   const [isRemoveDisabled, setIsRemoveDisabled] = useState(false)
-  const [fetchInterval, setFetchInterval] = useState<NodeJS.Timeout>()
+  // const [fetchInterval, setFetchInterval] = useState<NodeJS.Timeout>()
 
   const fetchAllData = useCallback(async () => {
     if (!asset?.chainId || !asset?.accessDetails?.addressOrId || !owner) return
@@ -78,27 +78,27 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
   }, [asset?.chainId, asset?.accessDetails?.addressOrId, owner, accountId])
 
   // Helper: start interval fetching
-  const initFetchInterval = useCallback(() => {
+  // const initFetchInterval = useCallback(() => {
-    if (fetchInterval) return
+  //   if (fetchInterval) return
 
-    const newInterval = setInterval(() => {
+  //   const newInterval = setInterval(() => {
-      fetchAllData()
+  //     fetchAllData()
-      LoggerInstance.log(
+  //     LoggerInstance.log(
-        `[pool] Refetch interval fired after ${refreshInterval / 1000}s`
+  //       `[pool] Refetch interval fired after ${refreshInterval / 1000}s`
-      )
+  //     )
-    }, refreshInterval)
+  //   }, refreshInterval)
-    setFetchInterval(newInterval)
+  //   setFetchInterval(newInterval)
 
-    // Having `accountId` as dependency is important for interval to
+  //   // Having `accountId` as dependency is important for interval to
-    // change after user account switch.
+  //   // change after user account switch.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetchInterval, fetchAllData, accountId])
+  // }, [fetchInterval, fetchAllData, accountId])
 
-  useEffect(() => {
+  // useEffect(() => {
-    return () => {
+  //   return () => {
-      clearInterval(fetchInterval)
+  //     clearInterval(fetchInterval)
-    }
+  //   }
-  }, [fetchInterval])
+  // }, [fetchInterval])
 
   //
   // 0 Fetch all the data on mount if we are on a pool.
@@ -109,8 +109,8 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
     if (asset?.accessDetails?.type !== 'dynamic') return
 
     fetchAllData()
-    initFetchInterval()
+    // initFetchInterval()
-  }, [fetchAllData, initFetchInterval, asset?.accessDetails?.type])
+  }, [fetchAllData, asset?.accessDetails?.type])
 
   //
   // 1 General Pool Info

src/@context/UrqlProvider.tsx

@@ -1,4 +1,12 @@
-import { createClient, Provider, Client } from 'urql'
+import {
+  createClient,
+  Provider,
+  Client,
+  cacheExchange,
+  dedupExchange,
+  fetchExchange
+} from 'urql'
+import { refocusExchange } from '@urql/exchange-refocus'
 import React, { useState, useEffect, ReactNode, ReactElement } from 'react'
 import { LoggerInstance } from '@oceanprotocol/lib'
 import { getOceanConfig } from '@utils/ocean'
@@ -7,7 +15,8 @@ let urqlClient: Client
 
 function createUrqlClient(subgraphUri: string) {
   const client = createClient({
-    url: `${subgraphUri}/subgraphs/name/oceanprotocol/ocean-subgraph`
+    url: `${subgraphUri}/subgraphs/name/oceanprotocol/ocean-subgraph`,
+    exchanges: [dedupExchange, refocusExchange(), cacheExchange, fetchExchange]
   })
   return client
 }

src/@hooks/contracts/useNftFactory.ts

@@ -10,7 +10,7 @@ function useNftFactory(): NftFactory {
   useEffect(() => {
     if (!web3 || !chainId) return
     const config = getOceanConfig(chainId)
-    const factory = new NftFactory(config.erc721FactoryAddress, web3)
+    const factory = new NftFactory(config?.erc721FactoryAddress, web3)
     setNftFactory(factory)
   }, [web3, chainId])
 

src/@hooks/useSiteMetadata/types.ts

@@ -2,7 +2,6 @@ export interface UseSiteMetadata {
   siteTitle: string
   siteTagline: string
   siteUrl: string
-  siteIcon: string
   siteImage: string
   copyright: string
   menu: {

src/@utils/SvgWaves.ts

@@ -4,6 +4,7 @@ import { randomIntFromInterval } from './numbers'
 export interface WaveProperties {
   width?: number
   height?: number
+  viewBox?: string
   color?: string
   fill?: boolean
   layerCount?: number
@@ -53,6 +54,7 @@ export class SvgWaves {
     return {
       width: 99,
       height: 99,
+      viewBox: '0 0 99 99',
       color: WaveColors.Pink,
       fill: true,
       layerCount: 4,
@@ -107,8 +109,7 @@ export class SvgWaves {
 
   generateSvg(): Element {
     const svg = document.createElementNS(SvgWaves.xmlns, 'svg')
-    svg.setAttribute('width', this.properties.width.toString())
+    svg.setAttribute('viewBox', this.properties.viewBox.toString())
-    svg.setAttribute('height', this.properties.height.toString())
     svg.setAttribute('fill', this.properties.fill ? undefined : 'transparent')
     svg.setAttribute('xmlns', SvgWaves.xmlns)
 

src/@utils/feedback.ts

@@ -11,13 +11,6 @@ export function getOrderFeedback(
   }
 }
 
-export function getCollectTokensFeedback(
-  baseTokenSymbol: string,
-  baseTokenBalance: string
-) {
-  return `Collecting ${baseTokenBalance} ${baseTokenSymbol} from asset `
-}
-
 export function getComputeFeedback(
   baseTokenSymbol?: string,
   datatokenSymbol?: string,

src/@utils/subgraph.ts

@@ -211,7 +211,7 @@ export function getQueryContext(chainId: number): OperationContext {
       url: `${getSubgraphUri(
         Number(chainId)
       )}/subgraphs/name/oceanprotocol/ocean-subgraph`,
-      requestPolicy: 'cache-and-network'
+      requestPolicy: 'network-only'
     }
     return queryContext
   } catch (error) {

src/components/@shared/ButtonBuy/index.tsx

@@ -4,7 +4,7 @@ import styles from './index.module.css'
 import Loader from '../atoms/Loader'
 
 interface ButtonBuyProps {
-  action: 'download' | 'compute' | 'collect'
+  action: 'download' | 'compute'
   disabled: boolean
   hasPreviousOrder: boolean
   hasDatatoken: boolean
@@ -148,8 +148,6 @@ export default function ButtonBuy({
       ? 'Start Compute Job'
       : priceType === 'free' && algorithmPriceType === 'free'
       ? 'Order Compute Job'
-      : action === 'collect'
-      ? `Collect ${dtBalance} ${dtSymbol}`
       : `Buy Compute Job`
 
   return (

src/components/@shared/FormFields/FilesInput/Info.module.css

@@ -6,6 +6,11 @@
   position: relative;
 }
 
+.hasError {
+  border-color: var(--brand-alert-red);
+  background-color: var(--brand-white);
+}
+
 .url {
   margin: 0;
   font-size: var(--font-size-base);
@@ -42,3 +47,7 @@
 .info li.success {
   color: var(--brand-alert-green);
 }
+
+.info li.error {
+  color: var(--brand-alert-red);
+}

src/components/@shared/FormFields/FilesInput/Info.tsx

@@ -11,7 +11,7 @@ export default function FileInfo({
   file: FileMetadata
   handleClose(): void
 }): ReactElement {
-  return (
+  return file.valid ? (
     <div className={styles.info}>
       <h3 className={styles.url}>{file.url}</h3>
       <ul>
@@ -23,5 +23,20 @@ export default function FileInfo({
         &times;
       </button>
     </div>
+  ) : (
+    <div className={`${styles.info} ${!file.valid ? styles.hasError : ''}`}>
+      <h3 className={styles.url}>{file.url}</h3>
+      <ul>
+        <li className={styles.error}>
+          {' '}
+          ✗ No valid file detected. Check your URL and try again.
+        </li>
+        {file.contentLength && <li>{prettySize(+file.contentLength)}</li>}
+        {file.contentType && <li>{cleanupContentType(file.contentType)}</li>}
+      </ul>
+      <button className={styles.removeButton} onClick={handleClose}>
+        &times;
+      </button>
+    </div>
   )
 }

src/components/@shared/FormFields/FilesInput/index.tsx

@@ -10,6 +10,7 @@ import { FormPublishData } from 'src/components/Publish/_types'
 
 export default function FilesInput(props: InputProps): ReactElement {
   const [field, meta, helpers] = useField(props.name)
+  const [isInvalidUrl, setIsInvalidUrl] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const { values } = useFormikContext<FormPublishData>()
 
@@ -23,6 +24,7 @@ export default function FilesInput(props: InputProps): ReactElement {
         try {
           setIsLoading(true)
           const checkedFile = await getFileUrlInfo(url, providerUri)
+          setIsInvalidUrl(!checkedFile[0].valid)
           checkedFile && helpers.setValue([{ url, ...checkedFile[0] }])
         } catch (error) {
           toast.error(
@@ -63,16 +65,14 @@ export default function FilesInput(props: InputProps): ReactElement {
 
   return (
     <>
-      {field?.value?.length &&
+      {field.value[0].valid !== undefined ? (
-      field.value[0].url !== '' &&
-      field.value[0].valid ? (
         <FileInfo file={field.value[0]} handleClose={handleClose} />
       ) : (
         <UrlInput
           submitText="Validate"
           {...props}
           name={`${field.name}[0].url`}
-          hasError={Boolean(meta.touched && meta.error)}
+          hasError={Boolean(meta.touched && isInvalidUrl)}
           isLoading={isLoading}
           handleButtonClick={handleButtonClick}
         />

src/components/@shared/FormFields/URLInput/index.tsx

@@ -41,7 +41,9 @@ export default function URLInput({
       <InputGroup>
         <InputElement
           className={`${styles.input} ${
-            !isLoading && hasError ? styles.hasError : ''
+            !isLoading && meta.error !== undefined && meta.touched
+              ? styles.hasError
+              : ''
           }`}
           {...props}
           {...field}

src/components/@shared/Page/Seo.tsx

@@ -17,24 +17,35 @@ export default function Seo({
   // Remove trailing slash from all URLs
   const canonical = `${siteUrl}${uri}`.replace(/\/$/, '')
 
+  const pageTitle = title
+    ? `${title} - ${siteTitle}`
+    : `${siteTitle} — ${siteTagline}`
+
   return (
     <Head>
       <html lang="en" />
 
-      <title>{`${siteTitle} — ${siteTagline}`}</title>
+      <title>{pageTitle}</title>
 
-      {isBrowser &&
+      {isBrowser && window?.location?.hostname !== 'oceanprotocol.com' && (
-        window.location &&
+        <meta name="robots" content="noindex,nofollow" />
-        window.location.hostname !== 'oceanprotocol.com' && (
+      )}
-          <meta name="robots" content="noindex,nofollow" />
-        )}
 
       <link rel="canonical" href={canonical} />
+      <link rel="icon" href="/favicon.ico" sizes="any" />
+      <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/apple-touch-icon.png"
+      />
+      <link rel="manifest" href="/site.webmanifest" />
+      <meta name="theme-color" content="var(--background-content)" />
 
       <meta name="description" content={description} />
       <meta property="og:title" content={title} />
       <meta property="og:description" content={description} />
-      <meta property="og:url" content={uri} />
+      <meta property="og:url" content={canonical} />
 
       <meta name="image" content={`${siteUrl}${siteImage}`} />
       <meta property="og:image" content={`${siteUrl}${siteImage}`} />

src/components/@shared/PoolTransactions/Title.tsx

@@ -52,9 +52,12 @@ function getTitle(row: PoolTransaction, locale: string) {
     }
     case 'JOIN':
     case 'EXIT': {
-      const tokenMoved = row.baseTokenValue > 0 ? row.baseToken : row.datatoken
+      const tokenMoved =
+        Math.abs(row.baseTokenValue) > 0 ? row.baseToken : row.datatoken
       const tokenValueMoved =
-        row.baseTokenValue > 0 ? row.baseTokenValue : row.datatokenValue
+        Math.abs(row.baseTokenValue) > 0
+          ? row.baseTokenValue
+          : row.datatokenValue
       const tokenSymbol = tokenMoved.symbol
 
       title += `${row.type === 'JOIN' ? 'Add' : 'Remove'} ${formatPrice(

src/components/@shared/PoolTransactions/index.tsx

@@ -9,6 +9,7 @@ import { fetchDataForMultipleChains } from '@utils/subgraph'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import NetworkName from '@shared/NetworkName'
 import { getAssetsFromDtList } from '@utils/aquarius'
+import { getAsset } from '../../Profile/History/PoolShares/_utils'
 import { CancelToken } from 'axios'
 import Title from './Title'
 import styles from './index.module.css'
@@ -22,7 +23,7 @@ const txHistoryQueryByPool = gql`
     poolTransactions(
       orderBy: timestamp
       orderDirection: desc
-      where: { user: $user, pool: $pool }
+      where: { pool: $pool }
       first: 1000
     ) {
       baseToken {
@@ -172,6 +173,7 @@ export default function PoolTransactions({
       }
 
       if (dtList.length === 0) {
+        setTransactions([])
         setIsLoading(false)
         return
       }
@@ -180,8 +182,8 @@ export default function PoolTransactions({
       for (let i = 0; i < data.length; i++) {
         poolTransactions.push({
           ...data[i],
-          networkId: ddoList[i]?.chainId,
+          networkId: getAsset(ddoList, data[i].datatoken.address).chainId,
-          asset: ddoList[i]
+          asset: getAsset(ddoList, data[i].datatoken.address)
         })
       }
       const sortedTransactions = poolTransactions.sort(

src/components/@shared/TokenApproval/index.tsx

@@ -11,7 +11,8 @@ export default function TokenApproval({
   amount,
   tokenAddress,
   tokenSymbol,
-  setSubmitting
+  setSubmitting,
+  setIsTokenApproved
 }: {
   actionButton: JSX.Element
   disabled: boolean
@@ -19,6 +20,7 @@ export default function TokenApproval({
   tokenAddress: string
   tokenSymbol: string
   setSubmitting?: (isSubmitting: boolean) => void
+  setIsTokenApproved: (isApproved: boolean) => void
 }): ReactElement {
   const { asset, isAssetNetwork } = useAsset()
   const [tokenApproved, setTokenApproved] = useState(false)
@@ -44,6 +46,9 @@ export default function TokenApproval({
       setTokenApproved(
         new Decimal(allowanceValue).greaterThanOrEqualTo(new Decimal(amount))
       )
+    setIsTokenApproved(
+      new Decimal(allowanceValue).greaterThanOrEqualTo(new Decimal(amount))
+    )
   }, [web3, tokenAddress, spender, accountId, amount, isAssetNetwork])
 
   useEffect(() => {

src/components/Asset/AssetActions/Compute/index.tsx

@@ -419,7 +419,9 @@ export default function Compute({
             }
             hasDatatokenSelectedComputeAsset={hasAlgoAssetDatatoken}
             oceanSymbol={
-              asset?.accessDetails ? asset?.accessDetails.baseToken.symbol : ''
+              asset?.accessDetails
+                ? asset?.accessDetails?.baseToken?.symbol
+                : ''
             }
             dtSymbolSelectedComputeAsset={
               selectedAlgorithmAsset?.datatokens[0]?.symbol

src/components/Asset/AssetActions/Download.module.css

@@ -16,10 +16,3 @@
   width: 100%;
   margin-top: calc(var(--spacer));
 }
-
-.collect {
-  width: 100%;
-  justify-content: center;
-  text-align: center;
-  margin-top: calc(var(--spacer) / 2);
-}

src/components/Asset/AssetActions/Download.tsx

@@ -7,37 +7,17 @@ import ButtonBuy from '@shared/ButtonBuy'
 import { secondsToString } from '@utils/ddo'
 import AlgorithmDatasetsListForCompute from './Compute/AlgorithmDatasetsListForCompute'
 import styles from './Download.module.css'
-import {
+import { FileMetadata, LoggerInstance, ZERO_ADDRESS } from '@oceanprotocol/lib'
-  FileMetadata,
-  LoggerInstance,
-  ZERO_ADDRESS,
-  FixedRateExchange
-} from '@oceanprotocol/lib'
 import { order } from '@utils/order'
 import { AssetExtended } from 'src/@types/AssetExtended'
 import { buyDtFromPool } from '@utils/pool'
 import { downloadFile } from '@utils/provider'
-import { getCollectTokensFeedback, getOrderFeedback } from '@utils/feedback'
+import { getOrderFeedback } from '@utils/feedback'
 import { getOrderPriceAndFees } from '@utils/accessDetailsAndPricing'
 import { OrderPriceAndFees } from 'src/@types/Price'
 import { toast } from 'react-toastify'
-import { gql, OperationResult } from 'urql'
+import { useIsMounted } from '@hooks/useIsMounted'
-import { fetchData, getQueryContext } from '@utils/subgraph'
-import { getOceanConfig } from '@utils/ocean'
-import { FixedRateExchanges } from 'src/@types/subgraph/FixedRateExchanges'
 
-const FixedRateExchangesQuery = gql`
-  query FixedRateExchanges($user: String, $exchangeId: String) {
-    fixedRateExchanges(where: { owner: $user, exchangeId: $exchangeId }) {
-      id
-      owner {
-        id
-      }
-      exchangeId
-      baseTokenBalance
-    }
-  }
-`
 export default function Download({
   asset,
   file,
@@ -55,15 +35,15 @@ export default function Download({
 }): ReactElement {
   const { accountId, web3 } = useWeb3()
   const { isInPurgatory, isAssetNetwork } = useAsset()
+  const isMounted = useIsMounted()
+
   const [isDisabled, setIsDisabled] = useState(true)
   const [hasDatatoken, setHasDatatoken] = useState(false)
   const [statusText, setStatusText] = useState('')
   const [isLoading, setIsLoading] = useState(false)
   const [isOwned, setIsOwned] = useState(false)
   const [validOrderTx, setValidOrderTx] = useState('')
-  const [isCollectLoading, setIsCollectLoading] = useState(false)
+
-  const [baseTokenBalance, setBaseTokenBalance] = useState(0)
-  const [collectStatusText, setCollectStatusText] = useState('')
   const [orderPriceAndFees, setOrderPriceAndFees] =
     useState<OrderPriceAndFees>()
   useEffect(() => {
@@ -94,12 +74,14 @@ export default function Download({
   }, [dtBalance])
 
   useEffect(() => {
-    if (!accountId || !asset?.accessDetails) return
+    if (!isMounted || !accountId || !asset?.accessDetails) return
-    setIsDisabled(
+
+    const isDisabled =
       !asset?.accessDetails.isPurchasable ||
-        ((!isBalanceSufficient || !isAssetNetwork) && !isOwned && !hasDatatoken)
+      ((!isBalanceSufficient || !isAssetNetwork) && !isOwned && !hasDatatoken)
-    )
+    setIsDisabled(isDisabled)
   }, [
+    isMounted,
     asset?.accessDetails,
     isBalanceSufficient,
     isAssetNetwork,
@@ -108,41 +90,19 @@ export default function Download({
     isOwned
   ])
 
-  useEffect(() => {
-    if (!accountId || asset.nft.owner !== accountId) return
-    const queryContext = getQueryContext(Number(asset.chainId))
-
-    async function getBaseTokenBalance() {
-      const variables = {
-        user: accountId.toLowerCase(),
-        exchangeId: asset?.accessDetails?.addressOrId
-      }
-      const result: OperationResult<FixedRateExchanges> = await fetchData(
-        FixedRateExchangesQuery,
-        variables,
-        queryContext
-      )
-      result?.data?.fixedRateExchanges[0]?.baseTokenBalance
-        ? setBaseTokenBalance(
-            parseInt(result?.data?.fixedRateExchanges[0]?.baseTokenBalance)
-          )
-        : setBaseTokenBalance(0)
-    }
-    getBaseTokenBalance()
-  }, [accountId, asset?.accessDetails?.addressOrId, asset.chainId, asset.nft])
-
   async function handleOrderOrDownload() {
     setIsLoading(true)
-    if (isOwned) {
+    try {
-      setStatusText(
+      if (isOwned) {
-        getOrderFeedback(
+        setStatusText(
-          asset.accessDetails?.baseToken?.symbol,
+          getOrderFeedback(
-          asset.accessDetails?.datatoken?.symbol
+            asset.accessDetails?.baseToken?.symbol,
-        )[3]
+            asset.accessDetails?.datatoken?.symbol
-      )
+          )[3]
-      await downloadFile(web3, asset, accountId, validOrderTx)
+        )
-    } else {
+
-      try {
+        await downloadFile(web3, asset, accountId, validOrderTx)
+      } else {
         if (!hasDatatoken && asset.accessDetails.type === 'dynamic') {
           setStatusText(
             getOrderFeedback(
@@ -152,9 +112,7 @@ export default function Download({
           )
           const tx = await buyDtFromPool(asset.accessDetails, accountId, web3)
           if (!tx) {
-            toast.error('Failed to buy datatoken from pool!')
+            throw new Error()
-            setIsLoading(false)
-            return
           }
         }
         setStatusText(
@@ -165,51 +123,19 @@ export default function Download({
         )
         const orderTx = await order(web3, asset, orderPriceAndFees, accountId)
         if (!orderTx) {
-          toast.error('Failed to buy datatoken from pool!')
+          throw new Error()
-          setIsLoading(false)
-          return
         }
         setIsOwned(true)
         setValidOrderTx(orderTx.transactionHash)
-      } catch (ex) {
-        LoggerInstance.log(ex.message)
-        setIsLoading(false)
       }
-    }
-
-    setIsLoading(false)
-  }
-
-  async function handleCollectTokens() {
-    setIsCollectLoading(true)
-    const config = getOceanConfig(asset?.chainId)
-    const fixed = new FixedRateExchange(web3, config.fixedRateExchangeAddress)
-    try {
-      setCollectStatusText(
-        getCollectTokensFeedback(
-          asset.accessDetails.baseToken?.symbol,
-          baseTokenBalance.toString()
-        )
-      )
-
-      const tx = await fixed.collectBT(
-        accountId,
-        asset?.accessDetails?.addressOrId,
-        baseTokenBalance.toString()
-      )
-
-      if (!tx) {
-        setIsCollectLoading(false)
-        return
-      }
-      setBaseTokenBalance(0)
-      return tx
     } catch (error) {
-      LoggerInstance.log(error.message)
+      LoggerInstance.error(error)
-      setIsCollectLoading(false)
+      const message = isOwned
-    } finally {
+        ? 'Failed to download file!'
-      setIsCollectLoading(false)
+        : 'Failed to buy datatoken from pool!'
+      toast.error(message)
     }
+    setIsLoading(false)
   }
 
   const PurchaseButton = () => (
@@ -234,26 +160,6 @@ export default function Download({
     />
   )
 
-  const CollectTokensButton = () => (
-    <ButtonBuy
-      action="collect"
-      onClick={handleCollectTokens}
-      disabled={baseTokenBalance === 0 || !baseTokenBalance}
-      hasPreviousOrder={false}
-      hasDatatoken={false}
-      dtSymbol={asset?.accessDetails?.baseToken.symbol}
-      dtBalance={baseTokenBalance.toString()}
-      datasetLowPoolLiquidity={false}
-      assetType=""
-      stepText={collectStatusText}
-      assetTimeout=""
-      isConsumable={false}
-      consumableFeedback=""
-      isBalanceSufficient={false}
-      isLoading={isCollectLoading}
-    />
-  )
-
   return (
     <aside className={styles.consume}>
       <div className={styles.info}>
@@ -271,13 +177,6 @@ export default function Download({
         </div>
       </div>
 
-      {asset?.accessDetails?.datatoken?.name !== '' &&
-        asset?.nft.owner === accountId && (
-          <div className={styles.collect}>
-            <CollectTokensButton />
-          </div>
-        )}
-
       {asset?.metadata?.type === 'algorithm' && (
         <AlgorithmDatasetsListForCompute
           algorithmDid={asset.id}

src/components/Asset/AssetActions/Pool/Actions.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useState } from 'react'
 import Loader from '@shared/atoms/Loader'
 import Button from '@shared/atoms/Button'
 import styles from './Actions.module.css'
@@ -6,11 +6,13 @@ import ExplorerLink from '@shared/ExplorerLink'
 import SuccessConfetti from '@shared/SuccessConfetti'
 import { useWeb3 } from '@context/Web3'
 import TokenApproval from '@shared/TokenApproval'
+import Decimal from 'decimal.js'
 
 export default function Actions({
   isLoading,
   loaderMessage,
   successMessage,
+  slippage,
   txId,
   actionName,
   amount,
@@ -23,6 +25,7 @@ export default function Actions({
   isLoading: boolean
   loaderMessage: string
   successMessage: string
+  slippage?: string
   txId: string
   actionName: string
   amount?: string
@@ -33,6 +36,7 @@ export default function Actions({
   setSubmitting?: (isSubmitting: boolean) => void
 }): ReactElement {
   const { networkId } = useWeb3()
+  const [isTokenApproved, setIsTokenApproved] = useState(false)
 
   const actionButton = (
     <Button
@@ -45,15 +49,34 @@ export default function Actions({
     </Button>
   )
 
+  const applySlippage = (amount: string) => {
+    if (!amount) return '0'
+    const newAmount = new Decimal(amount)
+      .mul(
+        new Decimal(1)
+          .plus(new Decimal(slippage).div(new Decimal(100)))
+          .toString()
+      )
+      .toString()
+    return newAmount
+  }
+
   return (
     <>
       <div className={styles.actions}>
         {isLoading ? (
-          <Loader message={loaderMessage} />
+          <Loader
+            message={
+              isTokenApproved || actionName === 'Remove'
+                ? loaderMessage
+                : `Approving ${tokenSymbol}...`
+            }
+          />
         ) : actionName === 'Supply' || actionName === 'Swap' ? (
           <TokenApproval
             actionButton={actionButton}
-            amount={amount}
+            amount={slippage ? applySlippage(amount) : amount}
+            setIsTokenApproved={setIsTokenApproved}
             tokenAddress={tokenAddress}
             tokenSymbol={tokenSymbol}
             disabled={isDisabled}

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

@@ -14,6 +14,7 @@ import { useWeb3 } from '@context/Web3'
 import { useAsset } from '@context/Asset'
 import content from '../../../../../../content/price.json'
 import { calcMaxExactIn, LoggerInstance, Pool } from '@oceanprotocol/lib'
+import { usePool } from '@context/Pool'
 
 export interface FormAddLiquidity {
   amount: string
@@ -31,8 +32,7 @@ export default function Add({
   swapFee,
   datatokenSymbol,
   tokenInSymbol,
-  tokenInAddress,
+  tokenInAddress
-  fetchAllData
 }: {
   setShowAdd: (show: boolean) => void
   poolAddress: string
@@ -42,10 +42,10 @@ export default function Add({
   datatokenSymbol: string
   tokenInSymbol: string
   tokenInAddress: string
-  fetchAllData: () => void
 }): ReactElement {
   const { accountId, balance, web3 } = useWeb3()
   const { isAssetNetwork } = useAsset()
+  const { fetchAllData } = usePool()
   const { debug } = useUserPreferences()
   const [txId, setTxId] = useState<string>()
   const [amountMax, setAmountMax] = useState<string>()
@@ -123,7 +123,10 @@ export default function Add({
     <>
       <Header
         title={content.pool.add.title}
-        backAction={() => setShowAdd(false)}
+        backAction={() => {
+          setShowAdd(false)
+          fetchAllData()
+        }}
       />
       <Formik
         initialValues={initialValues}

src/components/Asset/AssetActions/Pool/Remove/index.tsx

@@ -20,6 +20,7 @@ import { useWeb3 } from '@context/Web3'
 import Decimal from 'decimal.js'
 import { useAsset } from '@context/Asset'
 import content from '../../../../../../content/price.json'
+import { usePool } from '@context/Pool'
 
 const slippagePresets = ['5', '10', '15', '25', '50']
 
@@ -29,8 +30,7 @@ export default function Remove({
   poolTokens,
   totalPoolTokens,
   tokenOutAddress,
-  tokenOutSymbol,
+  tokenOutSymbol
-  fetchAllData
 }: {
   setShowRemove: (show: boolean) => void
   poolAddress: string
@@ -38,10 +38,10 @@ export default function Remove({
   totalPoolTokens: string
   tokenOutAddress: string
   tokenOutSymbol: string
-  fetchAllData: () => void
 }): ReactElement {
   const { accountId, web3 } = useWeb3()
   const { isAssetNetwork } = useAsset()
+  const { fetchAllData } = usePool()
 
   const [amountPercent, setAmountPercent] = useState('0')
   const [amountMaxPercent, setAmountMaxPercent] = useState('100')
@@ -157,7 +157,10 @@ export default function Remove({
     <div className={styles.remove}>
       <Header
         title={content.pool.remove.title}
-        backAction={() => setShowRemove(false)}
+        backAction={() => {
+          setShowRemove(false)
+          fetchAllData()
+        }}
       />
 
       <form className={styles.removeInput}>

src/components/Asset/AssetActions/Pool/index.module.css

@@ -49,7 +49,7 @@
   padding-bottom: calc(var(--spacer) / 4);
 }
 
-.update:before {
+/* .update:before {
   content: '';
   width: 6px;
   height: 6px;
@@ -72,4 +72,4 @@
   100% {
     background: transparent;
   }
-}
+} */

src/components/Asset/AssetActions/Pool/index.tsx

@@ -29,8 +29,8 @@ export default function Pool(): ReactElement {
     poolSnapshots,
     hasUserAddedLiquidity,
     isRemoveDisabled,
-    refreshInterval,
     fetchAllData
+    // refreshInterval
   } = usePool()
 
   const [showAdd, setShowAdd] = useState(false)
@@ -51,7 +51,6 @@ export default function Pool(): ReactElement {
           datatokenSymbol={poolInfo?.datatokenSymbol}
           tokenInAddress={poolInfo?.baseTokenAddress}
           tokenInSymbol={poolInfo?.baseTokenSymbol}
-          fetchAllData={fetchAllData}
         />
       ) : showRemove ? (
         <Remove
@@ -61,7 +60,6 @@ export default function Pool(): ReactElement {
           totalPoolTokens={poolInfo?.totalPoolTokens}
           tokenOutAddress={poolInfo?.baseTokenAddress}
           tokenOutSymbol={poolInfo?.baseTokenSymbol}
-          fetchAllData={fetchAllData}
         />
       ) : (
         <>
@@ -180,7 +178,10 @@ export default function Pool(): ReactElement {
           </TokenList>
 
           <div className={styles.update}>
-            Fetching every {refreshInterval / 1000} sec.
+            <Button style="text" size="small" onClick={() => fetchAllData()}>
+              Refresh Data
+            </Button>
+            {/* Fetching every {refreshInterval / 1000} sec. */}
           </div>
           <div className={stylesActions.actions}>
             <Button

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

@@ -193,6 +193,7 @@ export default function FormTrade({
             loaderMessage="Swapping tokens..."
             successMessage="Successfully swapped tokens."
             actionName={content.trade.action}
+            slippage={values.slippage}
             amount={
               values.type === 'sell'
                 ? values.datatoken

src/components/Asset/AssetActions/Trade/TradeInput.tsx

@@ -4,10 +4,13 @@ import {
   Field,
   FieldInputProps,
   FormikContextType,
-  useFormikContext
+  useFormikContext,
+  useField
 } from 'formik'
-import Input from '@shared/FormInput'
+import debounce from 'lodash.debounce'
 import Button from '@shared/atoms/Button'
+import Input from '@shared/FormInput'
+import Error from '@shared/FormInput/Error'
 import { FormTradeData, TradeItem } from './_types'
 import UserLiquidity from '../UserLiquidity'
 import { useWeb3 } from '@context/Web3'
@@ -28,11 +31,10 @@ export default function TradeInput({
   // Connect with form
   const {
     handleChange,
-    setFieldValue,
     validateForm,
     values
   }: FormikContextType<FormTradeData> = useFormikContext()
-
+  const [field, meta] = useField(name)
   const isTopField =
     (name === 'baseToken' && values.type === 'buy') ||
     (name === 'datatoken' && values.type === 'sell')
@@ -61,11 +63,13 @@ export default function TradeInput({
             form={form}
             value={`${field.value}`}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
-              handleValueChange(name, Number(e.target.value))
-              validateForm()
               handleChange(e)
+              handleValueChange(name, Number(e.target.value))
+              // debounce needed to avoid validating the wrong (pass) value
+              debounce(() => validateForm(), 100)
             }}
             disabled={!accountId || disabled}
+            additionalComponent={<Error meta={meta} />}
           />
         )}
       </Field>

src/components/Asset/AssetActions/index.tsx

@@ -149,25 +149,12 @@ export default function AssetActions({
     />
   )
 
-  const tabs: TabsItem[] = [
+  const tabs: TabsItem[] = [{ title: 'Use', content: UseContent }]
-    {
-      title: 'Use',
-      content: UseContent
-    }
-  ]
 
   asset?.accessDetails?.type === 'dynamic' &&
     tabs.push(
-      {
+      { title: 'Pool', content: <Pool /> },
-        title: 'Pool',
+      { title: 'Trade', content: <Trade /> }
-        content: <Pool />,
-        disabled: asset?.accessDetails.datatoken.name === ''
-      },
-      {
-        title: 'Trade',
-        content: <Trade />,
-        disabled: asset?.accessDetails.datatoken.name === ''
-      }
     )
 
   return (

src/components/Asset/AssetContent/MetaMain/index.tsx

@@ -1,18 +1,20 @@
 import React, { ReactElement } from 'react'
 import styles from './index.module.css'
-import { Asset } from '@oceanprotocol/lib'
+import { AssetExtended } from 'src/@types/AssetExtended'
 import { decodeTokenURI } from '@utils/nft'
 import MetaAsset from './MetaAsset'
 import MetaInfo from './MetaInfo'
 import Tooltip from '@shared/atoms/Tooltip'
 import NftTooltip from './NftTooltip'
 import Logo from '@shared/atoms/Logo'
+import { FormPublishData } from '../../../Publish/_types'
+import { useFormikContext } from 'formik'
 
 export default function MetaMain({
   asset,
   nftPublisher
 }: {
-  asset: Asset
+  asset: AssetExtended
   nftPublisher: string
 }): ReactElement {
   const nftMetadata = decodeTokenURI(asset?.nft?.tokenURI)
@@ -20,12 +22,28 @@ export default function MetaMain({
   const blockscoutNetworks = [1287, 2021000, 2021001, 44787, 246, 1285]
   const isBlockscoutExplorer = blockscoutNetworks.includes(asset?.chainId)
 
+  // TODO: using this for the publish preview works fine, but produces a console warning
+  // on asset details page as there is no formik context there:
+  // Warning: Formik context is undefined, please verify you are calling useFormikContext()
+  // as child of a <Formik> component.
+  const formikState = useFormikContext<FormPublishData>()
+
+  // checking if the NFT has an image associated (tokenURI)
+  // if tokenURI is undefined, then we are in Preview
+  // for Preview we need to show accessDetails.dataImage
+  // as this is where the NFT's SVG (during publish) is stored
+  const nftImage = nftMetadata?.image_data
+    ? nftMetadata.image_data
+    : formikState?.values?.metadata?.nft?.image_data
+    ? formikState.values.metadata.nft.image_data
+    : null
+
   return (
     <aside className={styles.meta}>
       <header className={styles.asset}>
         <div className={styles.nftImage}>
-          {nftMetadata?.image_data ? (
+          {nftImage ? (
-            <img src={nftMetadata?.image_data} alt={asset?.nft?.name} />
+            <img src={nftImage} alt={asset?.nft?.name} />
           ) : (
             <Logo noWordmark />
           )}

src/components/Asset/Edit/DebugEditMetadata.tsx

@@ -14,14 +14,14 @@ export default function DebugEditMetadata({
   const linksTransformed = values.links?.length &&
     values.links[0].valid && [values.links[0].url.replace('javascript:', '')]
   const newMetadata: Metadata = {
-    ...asset.metadata,
+    ...asset?.metadata,
     name: values.name,
     description: values.description,
     links: linksTransformed,
     author: values.author
   }
   const updatedService: Service = {
-    ...asset.services[0],
+    ...asset?.services[0],
     timeout: mapTimeoutStringToSeconds(values.timeout)
   }
   const updatedAsset: Asset = {

src/components/Asset/Edit/EditMetadata.tsx

@@ -17,7 +17,6 @@ import { mapTimeoutStringToSeconds } from '@utils/ddo'
 import styles from './index.module.css'
 import content from '../../../../content/pages/edit.json'
 import { AssetExtended } from 'src/@types/AssetExtended'
-import { setMinterToPublisher, setMinterToDispenser } from '@utils/dispenser'
 import { useAbortController } from '@hooks/useAbortController'
 import DebugEditMetadata from './DebugEditMetadata'
 import { getOceanConfig } from '@utils/ocean'
@@ -36,7 +35,6 @@ export default function Edit({
   const newAbortController = useAbortController()
   const [success, setSuccess] = useState<string>()
   const [error, setError] = useState<string>()
-  const [timeoutStringValue, setTimeoutStringValue] = useState<string>()
   const isComputeType = asset?.services[0]?.type === 'compute'
   const hasFeedback = error || success
 
@@ -130,7 +128,7 @@ export default function Edit({
         await handleSubmit(values, resetForm)
       }}
     >
-      {({ isSubmitting, values, initialValues }) =>
+      {({ isSubmitting, values }) =>
         isSubmitting || hasFeedback ? (
           <EditFeedback
             title="Updating Data Set"
@@ -151,8 +149,6 @@ export default function Edit({
             <article>
               <FormEditMetadata
                 data={content.form.data}
-                setTimeoutStringValue={setTimeoutStringValue}
-                values={initialValues}
                 showPrice={asset?.accessDetails?.type === 'fixed'}
                 isComputeDataset={isComputeType}
               />

src/components/Asset/Edit/FormActions.module.css

@@ -18,3 +18,15 @@
   margin-left: calc(var(--spacer) / 2);
   margin-right: calc(var(--spacer) / 2);
 }
+
+.actions a {
+  padding: calc(var(--spacer) / 3);
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+  transition: 0.2s ease-out;
+}
+
+.actions a:hover {
+  transform: translate3d(0, -0.05rem, 0);
+  text-decoration: none;
+}

src/components/Asset/Edit/FormActions.tsx

@@ -3,15 +3,14 @@ import React, { ReactElement } from 'react'
 import { useAsset } from '@context/Asset'
 import Button from '@shared/atoms/Button'
 import styles from './FormActions.module.css'
+import Link from 'next/link'
 
 export default function FormActions({
-  setShowEdit,
   handleClick
 }: {
-  setShowEdit: (show: boolean) => void
   handleClick?: () => void
 }): ReactElement {
-  const { isAssetNetwork } = useAsset()
+  const { isAssetNetwork, asset } = useAsset()
   const { isValid }: FormikContextType<Partial<any>> = useFormikContext()
 
   return (
@@ -23,9 +22,9 @@ export default function FormActions({
       >
         Submit
       </Button>
-      <Button style="text" onClick={() => setShowEdit(false)}>
+      <Link href={`/asset/${asset?.id}`} key={asset?.id}>
         Cancel
-      </Button>
+      </Link>
     </footer>
   )
 }

src/components/Asset/Edit/FormEditComputeDataset.tsx

@@ -27,7 +27,6 @@ export default function FormEditComputeDataset({
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
   const { asset } = useAsset()
-  const [showEditCompute, setShowEditCompute] = useState<boolean>()
   const { values }: FormikContextType<ComputePrivacyForm> = useFormikContext()
   const [allAlgorithms, setAllAlgorithms] = useState<AssetSelectionAsset[]>()
   const newCancelToken = useCancelToken()
@@ -83,8 +82,7 @@ export default function FormEditComputeDataset({
         />
       ))}
 
-      {/* <FormActions setShowEdit={setShowEdit} /> */}
+      <FormActions />
-      <FormActions setShowEdit={setShowEditCompute} />
     </Form>
   )
 }

src/components/Asset/Edit/FormEditMetadata.tsx

@@ -53,19 +53,14 @@ function handleTimeoutCustomOption(
 
 export default function FormEditMetadata({
   data,
-  setTimeoutStringValue,
-  values,
   showPrice,
   isComputeDataset
 }: {
   data: InputProps[]
-  setTimeoutStringValue: (value: string) => void
-  values: Partial<MetadataEditForm>
   showPrice: boolean
   isComputeDataset: boolean
 }): ReactElement {
   const { oceanConfig } = useAsset()
-  const [showEdit, setShowEdit] = useState<boolean>()
   const {
     validateField,
     setFieldValue
@@ -118,10 +113,7 @@ export default function FormEditMetadata({
           )
       )}
 
-      <FormActions
+      <FormActions />
-        setShowEdit={setShowEdit}
-        // handleClick={() => setTimeoutStringValue(values?.services[0]?.timeout)}
-      />
     </Form>
   )
 }

src/components/Asset/Edit/index.module.css

@@ -32,6 +32,8 @@
 
 .description {
   font-size: var(--font-size-large);
+  margin: calc(var(--spacer) * 0.3 / var(--line-height)) 0
+    calc(var(--spacer) / var(--line-height)) 0;
 }
 
 .title {

src/components/Asset/Edit/index.tsx

@@ -11,24 +11,19 @@ import { useWeb3 } from '@context/Web3'
 import Alert from '@shared/atoms/Alert'
 
 export default function Edit({ uri }: { uri: string }): ReactElement {
-  const { asset, error, loading, owner } = useAsset()
+  const { asset, error, isInPurgatory, owner, title } = useAsset()
   const [isCompute, setIsCompute] = useState(false)
-  const [isOnwer, setIsOwner] = useState(false)
+  const [pageTitle, setPageTitle] = useState<string>('')
   const { accountId } = useWeb3()
 
-  // Switch type value upon tab change
-  function handleTabChange(tabName: string) {
-    LoggerInstance.log('switched to tab', tabName)
-    // add store restore from
-  }
-
   useEffect(() => {
-    if (!asset || error) {
+    if (!asset || error || accountId !== owner) {
+      setPageTitle('Edit action not available')
       return
     }
+    setPageTitle(isInPurgatory ? '' : `Edit ${title}`)
     setIsCompute(asset?.services[0]?.type === 'compute')
-    setIsOwner(owner === accountId)
+  }, [asset, error, isInPurgatory, title])
-  }, [asset, error])
 
   const tabs = [
     {
@@ -42,23 +37,14 @@ export default function Edit({ uri }: { uri: string }): ReactElement {
     }
   ].filter((tab) => tab !== undefined)
 
-  return asset && !loading && isOnwer ? (
+  return asset && asset?.accessDetails && accountId === owner ? (
-    <Page uri={uri}>
+    <Page title={pageTitle} noPageHeader uri={uri}>
-      <div className={styles.contianer}>
+      <div className={styles.container}>
-        <Tabs
+        <Tabs items={tabs} defaultIndex={0} className={styles.edit} />
-          items={tabs}
-          handleTabChange={handleTabChange}
-          defaultIndex={0}
-          className={styles.edit}
-        />
       </div>
     </Page>
-  ) : !isOnwer ? (
+  ) : asset && asset?.accessDetails && accountId !== owner ? (
-    <Page
+    <Page title={pageTitle} noPageHeader uri={uri}>
-      title="Edit action available only to asset owner"
-      noPageHeader
-      uri={uri}
-    >
       <Alert
         title="Edit action available only to asset owner"
         text={error}
@@ -66,7 +52,7 @@ export default function Edit({ uri }: { uri: string }): ReactElement {
       />
     </Page>
   ) : (
-    <Page title={undefined} uri={uri}>
+    <Page title={pageTitle} noPageHeader uri={uri}>
       <Loader />
     </Page>
   )

src/components/Profile/History/PoolShares/_utils.ts

@@ -5,7 +5,7 @@ import { PoolShares_poolShares as PoolShare } from '../../../../@types/subgraph/
 import { AssetPoolShare } from '.'
 import { Asset } from '@oceanprotocol/lib'
 
-function getAsset(items: Asset[], datatoken: string): Asset {
+export function getAsset(items: Asset[], datatoken: string): Asset {
   for (let i = 0; i < items.length; i++) {
     if (
       items[i].datatokens[0].address.toLowerCase() === datatoken.toLowerCase()
@@ -36,7 +36,6 @@ export async function getAssetsFromPoolShares(
       data[i].pool.totalShares,
       data[i].pool.baseTokenLiquidity
     )
-    console.log(data[i].pool.datatoken.address, userLiquidity)
     assetList.push({
       poolShare: data[i],
       userLiquidity,

src/components/Publish/Preview/index.module.css

@@ -4,6 +4,10 @@
   margin-bottom: var(--spacer);
   margin-left: calc(var(--spacer) / -4);
   margin-right: calc(var(--spacer) / -4);
+
+  /* Disable all user actions as to not run into unintended
+  consequences of browsing away from publish. */
+  pointer-events: none;
 }
 
 @media (min-width: 60rem) {

src/components/Publish/Pricing/Coin.tsx

@@ -4,7 +4,7 @@ import InputElement from '@shared/FormInput/InputElement'
 import Logo from '@images/logo.svg'
 import Conversion from '@shared/Price/Conversion'
 import { useField } from 'formik'
-import Error from './Error'
+import Error from '@shared/FormInput/Error'
 
 export default function Coin({
   datatokenOptions,

src/components/Publish/Pricing/Fees.tsx

@@ -3,7 +3,7 @@ import Tooltip from '@shared/atoms/Tooltip'
 import styles from './Fees.module.css'
 import { useField } from 'formik'
 import Input from '@shared/FormInput'
-import Error from './Error'
+import Error from '@shared/FormInput/Error'
 import { getOpcFees } from '../../../@utils/subgraph'
 import { OpcFeesQuery_opc as OpcFeesData } from '../../../@types/subgraph/OpcFeesQuery'
 import { useWeb3 } from '@context/Web3'

src/components/Publish/Pricing/Price.tsx

@@ -2,7 +2,7 @@ import Conversion from '@shared/Price/Conversion'
 import { Field, useField, useFormikContext } from 'formik'
 import React, { ReactElement } from 'react'
 import Input from '@shared/FormInput'
-import Error from './Error'
+import Error from '@shared/FormInput/Error'
 import PriceUnit from '@shared/Price/PriceUnit'
 import styles from './Price.module.css'
 import { FormPublishData } from '../_types'

src/pages/asset/[did]/index.tsx

@@ -8,7 +8,7 @@ export default function PageAssetDetails(): ReactElement {
   const { did } = router.query
   return (
     <AssetProvider did={did as string}>
-      <PageTemplateAssetDetails uri={router.pathname} />
+      <PageTemplateAssetDetails uri={router.asPath} />
     </AssetProvider>
   )
 }