From dd297800da1149bb3143e8dde3177b29304de716 Mon Sep 17 00:00:00 2001
From: mihaisc <mihai.scarlat@smartcontrol.ro>
Date: Tue, 19 May 2020 11:57:49 +0300
Subject: [PATCH] compute

---
 package-lock.json                             | 551 ++++--------------
 package.json                                  |   7 +-
 src/@types/MetaData.d.ts                      |   2 -
 src/components/atoms/Input/Help.module.css    |   5 +
 src/components/atoms/Input/Help.tsx           |   8 +
 src/components/atoms/Input/Input.module.css   | 171 ++++++
 src/components/atoms/Input/Input.tsx          | 213 +++++++
 .../atoms/Input/InputGroup.module.css         |  35 ++
 src/components/atoms/Input/InputGroup.tsx     |   8 +
 src/components/atoms/Input/Label.module.css   |  16 +
 src/components/atoms/Input/Label.tsx          |  22 +
 src/components/atoms/Input/Row.module.css     |   3 +
 src/components/atoms/Input/Row.tsx            |   8 +
 .../molecules/AssetTeaser.module.css          |  13 +-
 src/components/molecules/AssetTeaser.tsx      |   7 +-
 .../molecules/PublishForm/PublishForm.tsx     |  71 ++-
 src/components/organisms/Compute.module.css   |  14 +-
 src/components/organisms/Compute.tsx          |  49 +-
 .../templates/AssetDetails/MetaFull.tsx       |   8 +-
 .../templates/AssetDetails/index.tsx          |  12 +-
 src/config/ocean.ts                           |   6 +-
 src/models/Asset.ts                           |   2 -
 src/models/PublishForm.ts                     |  46 +-
 src/pages/_app.tsx                            |  23 +-
 24 files changed, 730 insertions(+), 570 deletions(-)
 create mode 100644 src/components/atoms/Input/Help.module.css
 create mode 100644 src/components/atoms/Input/Help.tsx
 create mode 100644 src/components/atoms/Input/Input.module.css
 create mode 100644 src/components/atoms/Input/Input.tsx
 create mode 100644 src/components/atoms/Input/InputGroup.module.css
 create mode 100644 src/components/atoms/Input/InputGroup.tsx
 create mode 100644 src/components/atoms/Input/Label.module.css
 create mode 100644 src/components/atoms/Input/Label.tsx
 create mode 100644 src/components/atoms/Input/Row.module.css
 create mode 100644 src/components/atoms/Input/Row.tsx

diff --git a/package-lock.json b/package-lock.json
index 20c1e0af6..0ddfa5a51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3397,431 +3397,14 @@
       "integrity": "sha512-915dcnzCHEuvsmRKqVj0RxHT3T386lSJh8WREe4dsnrXHsi1ULNYxX0Ts/cvalv6bRL+aqyaZ6gN3l3nkfwEDg=="
     },
     "@oceanprotocol/react": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.3.tgz",
-      "integrity": "sha512-oC/IYQlQDlMDcmF85yvwxLaC3Am8bYoka1bivtfW/LM3bxtm0Z5y0VZtjuigBNmZf7mXXuATVNQjamN9W5VO3A==",
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.6.tgz",
+      "integrity": "sha512-rwdTGHKS6ZBxuBULfx74h3Xej3o+8rWaS4I1nUNoS1twHRxAoFv+5cg3QlbjDs1r6FZ+useoQHdBV2Ln/gGzsQ==",
       "requires": {
         "@oceanprotocol/squid": "^2.1.1",
         "axios": "^0.19.2",
         "react": "^16.13.1",
         "web3connect": "^1.0.0-beta.33"
-      },
-      "dependencies": {
-        "@ethereum-navigator/atlas": {
-          "version": "0.7.1",
-          "resolved": "https://registry.npmjs.org/@ethereum-navigator/atlas/-/atlas-0.7.1.tgz",
-          "integrity": "sha512-YV7tMVwpRcJbc+Kj/Rr0RzNV/2hHBEEM1/tMWDVLB15dGJfoQuRfPJpFt6uq+Ji6s3EkldIt9kZylEeG5ALKAA=="
-        },
-        "@ethereum-navigator/navigator": {
-          "version": "0.5.2",
-          "resolved": "https://registry.npmjs.org/@ethereum-navigator/navigator/-/navigator-0.5.2.tgz",
-          "integrity": "sha512-agSE2xzLxOKKid8QiS4v8jPhnFXW5uSXsICZ4JmS437aCZ8L3SUAy3cDQKikHb2PPZ3AazJO05k8m8i6u77peQ==",
-          "requires": {
-            "@ethereum-navigator/atlas": "^0.7.1",
-            "web3": "^1.2.7"
-          },
-          "dependencies": {
-            "web3": {
-              "version": "1.2.7",
-              "resolved": "https://registry.npmjs.org/web3/-/web3-1.2.7.tgz",
-              "integrity": "sha512-jAAJHMfUlTps+jH2li1ckDFEpPrEEriU/ubegSTGRl3KRdNhEqT93+3kd7FHJTn3NgjcyURo2+f7Da1YcZL8Mw==",
-              "requires": {
-                "web3-bzz": "1.2.7",
-                "web3-core": "1.2.7",
-                "web3-eth": "1.2.7",
-                "web3-eth-personal": "1.2.7",
-                "web3-net": "1.2.7",
-                "web3-shh": "1.2.7",
-                "web3-utils": "1.2.7"
-              }
-            }
-          }
-        },
-        "@oceanprotocol/squid": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/@oceanprotocol/squid/-/squid-2.1.1.tgz",
-          "integrity": "sha512-aoZttkArQ3qKsAHcaQfv6kFLpaSeGFHUSDRdK/MllJ5UFzclkDkBJd4P7XIJ5lS8uXOOBrrvQPxDU8wvf2yyMQ==",
-          "requires": {
-            "@ethereum-navigator/navigator": "^0.5.0",
-            "@oceanprotocol/keeper-contracts": "^0.13.2",
-            "@oceanprotocol/secret-store-client": "^0.0.15",
-            "bignumber.js": "^9.0.0",
-            "deprecated-decorator": "^0.1.6",
-            "node-fetch": "^2.6.0",
-            "save-file": "^2.3.1",
-            "uuid": "^7.0.2",
-            "web3": "^1.2.6",
-            "whatwg-url": "^8.0.0"
-          }
-        },
-        "@types/node": {
-          "version": "10.17.21",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.21.tgz",
-          "integrity": "sha512-PQKsydPxYxF1DsAFWmunaxd3sOi3iMt6Zmx/tgaagHYmwJ/9cRH91hQkeJZaUGWbvn0K5HlSVEXkn5U/llWPpQ=="
-        },
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
-        },
-        "p-cancelable": {
-          "version": "0.3.0",
-          "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.3.0.tgz",
-          "integrity": "sha512-RVbZPLso8+jFeq1MfNvgXtCRED2raz/dKpacfTNxsx6pLEpEomM7gah6VeHSYV3+vo0OAi4MkArtQcWWXuQoyw=="
-        },
-        "prepend-http": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
-          "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
-        },
-        "swarm-js": {
-          "version": "0.1.40",
-          "resolved": "https://registry.npmjs.org/swarm-js/-/swarm-js-0.1.40.tgz",
-          "integrity": "sha512-yqiOCEoA4/IShXkY3WKwP5PvZhmoOOD8clsKA7EEcRILMkTEYHCQ21HDCAcVpmIxZq4LyZvWeRJ6quIyHk1caA==",
-          "requires": {
-            "bluebird": "^3.5.0",
-            "buffer": "^5.0.5",
-            "eth-lib": "^0.1.26",
-            "fs-extra": "^4.0.2",
-            "got": "^7.1.0",
-            "mime-types": "^2.1.16",
-            "mkdirp-promise": "^5.0.1",
-            "mock-fs": "^4.1.0",
-            "setimmediate": "^1.0.5",
-            "tar": "^4.0.2",
-            "xhr-request": "^1.0.1"
-          },
-          "dependencies": {
-            "got": {
-              "version": "7.1.0",
-              "resolved": "https://registry.npmjs.org/got/-/got-7.1.0.tgz",
-              "integrity": "sha512-Y5WMo7xKKq1muPsxD+KmrR8DH5auG7fBdDVueZwETwV6VytKyU9OX/ddpq2/1hp1vIPvVb4T81dKQz3BivkNLw==",
-              "requires": {
-                "decompress-response": "^3.2.0",
-                "duplexer3": "^0.1.4",
-                "get-stream": "^3.0.0",
-                "is-plain-obj": "^1.1.0",
-                "is-retry-allowed": "^1.0.0",
-                "is-stream": "^1.0.0",
-                "isurl": "^1.0.0-alpha5",
-                "lowercase-keys": "^1.0.0",
-                "p-cancelable": "^0.3.0",
-                "p-timeout": "^1.1.1",
-                "safe-buffer": "^5.0.1",
-                "timed-out": "^4.0.0",
-                "url-parse-lax": "^1.0.0",
-                "url-to-options": "^1.0.1"
-              }
-            }
-          }
-        },
-        "url-parse-lax": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
-          "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=",
-          "requires": {
-            "prepend-http": "^1.0.1"
-          }
-        },
-        "uuid": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
-          "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
-        },
-        "web3-bzz": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-bzz/-/web3-bzz-1.2.7.tgz",
-          "integrity": "sha512-iTIWBR+Z+Bn09WprtKm46LmyNOasg2lUn++AjXkBTB8UNxlUybxtza84yl2ETTZUs0zuFzdSSAEgbjhygG+9oA==",
-          "requires": {
-            "@types/node": "^10.12.18",
-            "got": "9.6.0",
-            "swarm-js": "^0.1.40",
-            "underscore": "1.9.1"
-          }
-        },
-        "web3-core": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-core/-/web3-core-1.2.7.tgz",
-          "integrity": "sha512-QA0MTae0gXcr3KHe3cQ4x56+Wh43ZKWfMwg1gfCc3NNxPRM1jJ8qudzyptCAUcxUGXWpDG8syLIn1APDz5J8BQ==",
-          "requires": {
-            "@types/bn.js": "^4.11.4",
-            "@types/node": "^12.6.1",
-            "bignumber.js": "^9.0.0",
-            "web3-core-helpers": "1.2.7",
-            "web3-core-method": "1.2.7",
-            "web3-core-requestmanager": "1.2.7",
-            "web3-utils": "1.2.7"
-          },
-          "dependencies": {
-            "@types/node": {
-              "version": "12.12.38",
-              "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.38.tgz",
-              "integrity": "sha512-75eLjX0pFuTcUXnnWmALMzzkYorjND0ezNEycaKesbUBg9eGZp4GHPuDmkRc4mQQvIpe29zrzATNRA6hkYqwmA=="
-            }
-          }
-        },
-        "web3-core-helpers": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-core-helpers/-/web3-core-helpers-1.2.7.tgz",
-          "integrity": "sha512-bdU++9QATGeCetVrMp8pV97aQtVkN5oLBf/TWu/qumC6jK/YqrvLlBJLdwbz0QveU8zOSap6GCvJbqKvmmbV2A==",
-          "requires": {
-            "underscore": "1.9.1",
-            "web3-eth-iban": "1.2.7",
-            "web3-utils": "1.2.7"
-          }
-        },
-        "web3-core-method": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-core-method/-/web3-core-method-1.2.7.tgz",
-          "integrity": "sha512-e1TI0QUnByDMbQ8QHwnjxfjKw0LIgVRY4TYrlPijET9ebqUJU1HCayn/BHIMpV6LKyR1fQj9EldWyT64wZQXkg==",
-          "requires": {
-            "underscore": "1.9.1",
-            "web3-core-helpers": "1.2.7",
-            "web3-core-promievent": "1.2.7",
-            "web3-core-subscriptions": "1.2.7",
-            "web3-utils": "1.2.7"
-          }
-        },
-        "web3-core-promievent": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-core-promievent/-/web3-core-promievent-1.2.7.tgz",
-          "integrity": "sha512-jNmsM/czCeMGQqKKwM9/HZVTJVIF96hdMVNN/V9TGvp+EEE7vDhB4pUocDnc/QF9Z/5QFBCVmvNWttlRgZmU0A==",
-          "requires": {
-            "eventemitter3": "3.1.2"
-          }
-        },
-        "web3-core-requestmanager": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-core-requestmanager/-/web3-core-requestmanager-1.2.7.tgz",
-          "integrity": "sha512-HJb/txjHixu1dxIebiZQKBoJCaNu4gsh7mq/uj6Z/w6tIHbybL90s/7ADyMED353yyJ2tDWtYJqeMVAR+KtdaA==",
-          "requires": {
-            "underscore": "1.9.1",
-            "web3-core-helpers": "1.2.7",
-            "web3-providers-http": "1.2.7",
-            "web3-providers-ipc": "1.2.7",
-            "web3-providers-ws": "1.2.7"
-          }
-        },
-        "web3-core-subscriptions": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-core-subscriptions/-/web3-core-subscriptions-1.2.7.tgz",
-          "integrity": "sha512-W/CzQYOUawdMDvkgA/fmLsnG5aMpbjrs78LZMbc0MFXLpH3ofqAgO2by4QZrrTShUUTeWS0ZuEkFFL/iFrSObw==",
-          "requires": {
-            "eventemitter3": "3.1.2",
-            "underscore": "1.9.1",
-            "web3-core-helpers": "1.2.7"
-          }
-        },
-        "web3-eth": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-eth/-/web3-eth-1.2.7.tgz",
-          "integrity": "sha512-ljLd0oB4IjWkzFGVan4HkYhJXhSXgn9iaSaxdJixKGntZPgWMJfxeA+uLwTrlxrWzhvy4f+39WnT7wCh5e9TGg==",
-          "requires": {
-            "underscore": "1.9.1",
-            "web3-core": "1.2.7",
-            "web3-core-helpers": "1.2.7",
-            "web3-core-method": "1.2.7",
-            "web3-core-subscriptions": "1.2.7",
-            "web3-eth-abi": "1.2.7",
-            "web3-eth-accounts": "1.2.7",
-            "web3-eth-contract": "1.2.7",
-            "web3-eth-ens": "1.2.7",
-            "web3-eth-iban": "1.2.7",
-            "web3-eth-personal": "1.2.7",
-            "web3-net": "1.2.7",
-            "web3-utils": "1.2.7"
-          }
-        },
-        "web3-eth-abi": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-eth-abi/-/web3-eth-abi-1.2.7.tgz",
-          "integrity": "sha512-4FnlT1q+D0XBkxSMXlIb/eG337uQeMaUdtVQ4PZ3XzxqpcoDuMgXm4o+3NRxnWmr4AMm6QKjM+hcC7c0mBKcyg==",
-          "requires": {
-            "ethers": "4.0.0-beta.3",
-            "underscore": "1.9.1",
-            "web3-utils": "1.2.7"
-          }
-        },
-        "web3-eth-accounts": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-eth-accounts/-/web3-eth-accounts-1.2.7.tgz",
-          "integrity": "sha512-AE7QWi/iIQIjXwlAPtlMabm/OPFF0a1PhxT1EiTckpYNP8fYs6jW7lYxEtJPPJIKqfMjoi1xkEqTVR1YZQ88lg==",
-          "requires": {
-            "@web3-js/scrypt-shim": "^0.1.0",
-            "crypto-browserify": "3.12.0",
-            "eth-lib": "^0.2.8",
-            "ethereumjs-common": "^1.3.2",
-            "ethereumjs-tx": "^2.1.1",
-            "underscore": "1.9.1",
-            "uuid": "3.3.2",
-            "web3-core": "1.2.7",
-            "web3-core-helpers": "1.2.7",
-            "web3-core-method": "1.2.7",
-            "web3-utils": "1.2.7"
-          },
-          "dependencies": {
-            "eth-lib": {
-              "version": "0.2.8",
-              "resolved": "https://registry.npmjs.org/eth-lib/-/eth-lib-0.2.8.tgz",
-              "integrity": "sha512-ArJ7x1WcWOlSpzdoTBX8vkwlkSQ85CjjifSZtV4co64vWxSV8geWfPI9x4SVYu3DSxnX4yWFVTtGL+j9DUFLNw==",
-              "requires": {
-                "bn.js": "^4.11.6",
-                "elliptic": "^6.4.0",
-                "xhr-request-promise": "^0.1.2"
-              }
-            },
-            "uuid": {
-              "version": "3.3.2",
-              "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
-              "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
-            }
-          }
-        },
-        "web3-eth-contract": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-eth-contract/-/web3-eth-contract-1.2.7.tgz",
-          "integrity": "sha512-uW23Y0iL7XroRNbf9fWZ1N6OYhEYTJX8gTuYASuRnpYrISN5QGiQML6pq/NCzqypR1bl5E0fuINZQSK/xefIVw==",
-          "requires": {
-            "@types/bn.js": "^4.11.4",
-            "underscore": "1.9.1",
-            "web3-core": "1.2.7",
-            "web3-core-helpers": "1.2.7",
-            "web3-core-method": "1.2.7",
-            "web3-core-promievent": "1.2.7",
-            "web3-core-subscriptions": "1.2.7",
-            "web3-eth-abi": "1.2.7",
-            "web3-utils": "1.2.7"
-          }
-        },
-        "web3-eth-ens": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-eth-ens/-/web3-eth-ens-1.2.7.tgz",
-          "integrity": "sha512-SPRnvUNWQ0CnnTDBteGIJkvFWEizJcAHlVsrFLICwcwFZu+appjX1UOaoGu2h3GXWtc/XZlu7B451Gi+Os2cTg==",
-          "requires": {
-            "eth-ens-namehash": "2.0.8",
-            "underscore": "1.9.1",
-            "web3-core": "1.2.7",
-            "web3-core-helpers": "1.2.7",
-            "web3-core-promievent": "1.2.7",
-            "web3-eth-abi": "1.2.7",
-            "web3-eth-contract": "1.2.7",
-            "web3-utils": "1.2.7"
-          }
-        },
-        "web3-eth-iban": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-eth-iban/-/web3-eth-iban-1.2.7.tgz",
-          "integrity": "sha512-2NrClz1PoQ3nSJBd+91ylCOVga9qbTxjRofq/oSCoHVAEvz3WZyttx9k5DC+0rWqwJF1h69ufFvdHAAlmN/4lg==",
-          "requires": {
-            "bn.js": "4.11.8",
-            "web3-utils": "1.2.7"
-          }
-        },
-        "web3-eth-personal": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-eth-personal/-/web3-eth-personal-1.2.7.tgz",
-          "integrity": "sha512-2OAa1Spz0uB29dwCM8+1y0So7E47A4gKznjBEwXIYEcUIsvwT5X7ofFhC2XxyRpqlIWZSQAxRSSJFyupRRXzyw==",
-          "requires": {
-            "@types/node": "^12.6.1",
-            "web3-core": "1.2.7",
-            "web3-core-helpers": "1.2.7",
-            "web3-core-method": "1.2.7",
-            "web3-net": "1.2.7",
-            "web3-utils": "1.2.7"
-          },
-          "dependencies": {
-            "@types/node": {
-              "version": "12.12.38",
-              "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.38.tgz",
-              "integrity": "sha512-75eLjX0pFuTcUXnnWmALMzzkYorjND0ezNEycaKesbUBg9eGZp4GHPuDmkRc4mQQvIpe29zrzATNRA6hkYqwmA=="
-            }
-          }
-        },
-        "web3-net": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-net/-/web3-net-1.2.7.tgz",
-          "integrity": "sha512-j9qeZrS1FNyCeA0BfdLojkxOZQz3FKa1DJI+Dw9fEVhZS68vLOFANu2RB96gR9BoPHo5+k5D3NsKOoxt1gw3Gg==",
-          "requires": {
-            "web3-core": "1.2.7",
-            "web3-core-method": "1.2.7",
-            "web3-utils": "1.2.7"
-          }
-        },
-        "web3-providers-http": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-providers-http/-/web3-providers-http-1.2.7.tgz",
-          "integrity": "sha512-vazGx5onuH/zogrwkUaLFJwFcJ6CckP65VFSHoiV+GTQdkOqgoDIha7StKkslvDz4XJ2FuY/zOZHbtuOYeltXQ==",
-          "requires": {
-            "web3-core-helpers": "1.2.7",
-            "xhr2-cookies": "1.1.0"
-          }
-        },
-        "web3-providers-ipc": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-providers-ipc/-/web3-providers-ipc-1.2.7.tgz",
-          "integrity": "sha512-/zc0y724H2zbkV4UbGGMhsEiLfafjagIzfrsWZnyTZUlSB0OGRmmFm2EkLJAgtXrLiodaHHyXKM0vB8S24bxdA==",
-          "requires": {
-            "oboe": "2.1.4",
-            "underscore": "1.9.1",
-            "web3-core-helpers": "1.2.7"
-          }
-        },
-        "web3-providers-ws": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-providers-ws/-/web3-providers-ws-1.2.7.tgz",
-          "integrity": "sha512-b5XzqDpRkNVe6MFs5K6iqOEyjQikHtg3KuU2/ClCDV37hm0WN4xCRVMC0LwegulbDXZej3zT9+1CYzGaGFREzA==",
-          "requires": {
-            "@web3-js/websocket": "^1.0.29",
-            "eventemitter3": "^4.0.0",
-            "underscore": "1.9.1",
-            "web3-core-helpers": "1.2.7"
-          },
-          "dependencies": {
-            "eventemitter3": {
-              "version": "4.0.3",
-              "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.3.tgz",
-              "integrity": "sha512-HyaFeyfTa18nYjft59vEPsvuq6ZVcrCC1rBw6Fx8ZV9NcuUITBNCnTOyr0tHHkkHn//d+lzhsL1YybgtLQ7lng=="
-            }
-          }
-        },
-        "web3-shh": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-shh/-/web3-shh-1.2.7.tgz",
-          "integrity": "sha512-f6PAgcpG0ZAo98KqCmeHoDEx5qzm3d5plet18DkT4U6WIeYowKdec8vZaLPRR7c2XreXFJ2gQf45CB7oqR7U/w==",
-          "requires": {
-            "web3-core": "1.2.7",
-            "web3-core-method": "1.2.7",
-            "web3-core-subscriptions": "1.2.7",
-            "web3-net": "1.2.7"
-          }
-        },
-        "web3-utils": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/web3-utils/-/web3-utils-1.2.7.tgz",
-          "integrity": "sha512-FBh/CPJND+eiPeUF9KVbTyTZtXNWxPWtByBaWS6e2x4ACazPX711EeNaZaChIOGSLGe6se2n7kg6wnawe/MjuQ==",
-          "requires": {
-            "bn.js": "4.11.8",
-            "eth-lib": "0.2.7",
-            "ethereum-bloom-filters": "^1.0.6",
-            "ethjs-unit": "0.1.6",
-            "number-to-bn": "1.7.0",
-            "randombytes": "^2.1.0",
-            "underscore": "1.9.1",
-            "utf8": "3.0.0"
-          },
-          "dependencies": {
-            "eth-lib": {
-              "version": "0.2.7",
-              "resolved": "https://registry.npmjs.org/eth-lib/-/eth-lib-0.2.7.tgz",
-              "integrity": "sha1-L5Pxex4jrsN1nNSj/iDBKGo/wco=",
-              "requires": {
-                "bn.js": "^4.11.6",
-                "elliptic": "^6.4.0",
-                "xhr-request-promise": "^0.1.2"
-              }
-            }
-          }
-        }
       }
     },
     "@oceanprotocol/secret-store-client": {
@@ -3878,6 +3461,38 @@
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
       "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ=="
     },
+    "@sindresorhus/slugify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-1.0.0.tgz",
+      "integrity": "sha512-g3L0EoNpi2rT/uiOO6BUqbqXZ9mPR+LCl6yZsTDd8K/PeX+Bui5npU+mY0sME+Mc96bW/32kfDhmccPLMK/7pQ==",
+      "requires": {
+        "@sindresorhus/transliterate": "^0.1.0",
+        "escape-string-regexp": "^4.0.0"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        }
+      }
+    },
+    "@sindresorhus/transliterate": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/transliterate/-/transliterate-0.1.0.tgz",
+      "integrity": "sha512-bO6v0M0EuJPjm5Ntfow4nk+r3EZQ41n0ahvAmh766FzPqlm6V/2uDc01vZI3gLeI/1lgV2BTMb6QvxOk9z73ng==",
+      "requires": {
+        "escape-string-regexp": "^2.0.0",
+        "lodash.deburr": "^4.1.0"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w=="
+        }
+      }
+    },
     "@sinonjs/commons": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.7.1.tgz",
@@ -5145,7 +4760,7 @@
           "resolved": "https://registry.npmjs.org/web3/-/web3-0.20.7.tgz",
           "integrity": "sha512-VU6/DSUX93d1fCzBz7WP/SGCQizO1rKZi4Px9j/3yRyfssHyFcZamMw2/sj4E8TlfMXONvZLoforR8B4bRoyTQ==",
           "requires": {
-            "bignumber.js": "git+https://github.com/frozeman/bignumber.js-nolookahead.git#57692b3ecfc98bbdd6b3a516cb2353652ea49934",
+            "bignumber.js": "git+https://github.com/frozeman/bignumber.js-nolookahead.git",
             "crypto-js": "^3.1.4",
             "utf8": "^2.1.1",
             "xhr2-cookies": "^1.1.0",
@@ -5223,6 +4838,11 @@
         "@types/node": "*"
       }
     },
+    "@types/classnames": {
+      "version": "2.2.10",
+      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.10.tgz",
+      "integrity": "sha512-1UzDldn9GfYYEsWWnn/P4wkTlkZDH7lDb0wBMGbtIQc9zXEQq7FlKBdZUn6OBqD8sKZZ2RQO2mAjGpXiDGoRmQ=="
+    },
     "@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@@ -8714,7 +8334,8 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -8732,11 +8353,13 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -8749,15 +8372,18 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -8860,7 +8486,8 @@
             },
             "inherits": {
               "version": "2.0.4",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -8870,6 +8497,7 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -8882,17 +8510,20 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.9.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -8909,6 +8540,7 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -8989,7 +8621,8 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -8999,6 +8632,7 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -9074,7 +8708,8 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -9104,6 +8739,7 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -9121,6 +8757,7 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -9159,11 +8796,13 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             }
           }
         },
@@ -11772,7 +11411,7 @@
       "resolved": "https://registry.npmjs.org/eth-sig-util/-/eth-sig-util-1.4.2.tgz",
       "integrity": "sha1-jZWCAsftuq6Dlwf7pvCf8ydgYhA=",
       "requires": {
-        "ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git#1cfbb13862f90f0b391d8a699544d5fe4dfb8c7b",
+        "ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git",
         "ethereumjs-util": "^5.1.1"
       },
       "dependencies": {
@@ -15941,7 +15580,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -15962,12 +15602,14 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -15982,17 +15624,20 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -16109,7 +15754,8 @@
             "inherits": {
               "version": "2.0.4",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -16121,6 +15767,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -16135,6 +15782,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -16142,12 +15790,14 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.9.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -16166,6 +15816,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -16255,7 +15906,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -16267,6 +15919,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -16352,7 +16005,8 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -16388,6 +16042,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -16407,6 +16062,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -16450,12 +16106,14 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },
@@ -19393,6 +19051,11 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
+    "lodash.deburr": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz",
+      "integrity": "sha1-3bG7s+8HRYwBd7oH3hRCLLAz/5s="
+    },
     "lodash.defaults": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
diff --git a/package.json b/package.json
index ca478b2ce..0ad55261a 100644
--- a/package.json
+++ b/package.json
@@ -18,11 +18,14 @@
     "storybook:build": "build-storybook -c .storybook -o public/storybook"
   },
   "dependencies": {
-    "@oceanprotocol/react": "0.0.3",
-    "@oceanprotocol/squid": "^2.1.1",
     "@oceanprotocol/art": "^2.2.0",
+    "@oceanprotocol/react": "0.0.6",
+    "@oceanprotocol/squid": "^2.1.1",
     "@oceanprotocol/typographies": "^0.1.0",
+    "@sindresorhus/slugify": "^1.0.0",
+    "@types/classnames": "^2.2.10",
     "axios": "^0.19.2",
+    "classnames": "^2.2.6",
     "date-fns": "^2.11.0",
     "dotenv": "^8.2.0",
     "filesize": "^6.1.0",
diff --git a/src/@types/MetaData.d.ts b/src/@types/MetaData.d.ts
index 6234f4247..50c8d3058 100644
--- a/src/@types/MetaData.d.ts
+++ b/src/@types/MetaData.d.ts
@@ -20,12 +20,10 @@ export declare type AccessType = 'Download' | 'Compute'
 
 export interface AdditionalInformationDexFreight extends AdditionalInformation {
   description: string // required for dexFreight
-  categories: [string] // required for dexFreight, lock to one category only
   links?: Sample[] // redefine existing key, cause not specific enough in Squid
   deliveryType: DeliveryType
   termsAndConditions: boolean
   dateRange?: [string, string]
-  granularity?: Granularity
   supportName?: string
   supportEmail?: string
   access: AccessType
diff --git a/src/components/atoms/Input/Help.module.css b/src/components/atoms/Input/Help.module.css
new file mode 100644
index 000000000..a291a2365
--- /dev/null
+++ b/src/components/atoms/Input/Help.module.css
@@ -0,0 +1,5 @@
+.help {
+  font-size: var(--font-size-small);
+  color: var(--brand-grey-light);
+  margin-top: var(--spacer) / 4;
+}
diff --git a/src/components/atoms/Input/Help.tsx b/src/components/atoms/Input/Help.tsx
new file mode 100644
index 000000000..aefbaca54
--- /dev/null
+++ b/src/components/atoms/Input/Help.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import styles from './Help.module.css'
+
+const FormHelp = ({ children }: { children: string }) => (
+  <div className={styles.help}>{children}</div>
+)
+
+export default FormHelp
diff --git a/src/components/atoms/Input/Input.module.css b/src/components/atoms/Input/Input.module.css
new file mode 100644
index 000000000..5cf3c9b6c
--- /dev/null
+++ b/src/components/atoms/Input/Input.module.css
@@ -0,0 +1,171 @@
+.inputWrap,
+.inputWrapSearch {
+  background: var(--brand-gradient);
+  border-radius: var(--border-radius);
+  padding: 2px;
+  display: flex;
+  position: relative;
+}
+.inputWrap .isFocused,
+.inputWrapSearch .isFocused {
+  background: var(--brand-black);
+}
+
+.inputWrap > div,
+.inputWrap > div > div,
+.inputWrapSearch > div,
+.inputWrapSearch > div > div {
+  width: 100%;
+}
+
+.inputWrapSearch,
+.input {
+  padding-left: var(--spacer) * 1.5;
+}
+
+.inputWrapSearch svg {
+  position: absolute;
+  left: var(--spacer) / 2;
+  width: 1.25rem;
+  height: 1.25rem;
+  top: 50%;
+  margin-top: -0.6rem;
+  fill: rgba(var(--brand-grey-light), 0.7);
+}
+
+.input,
+.select {
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-bold);
+  color: var(--brand-black);
+  border: none;
+  box-shadow: none;
+  width: 100%;
+  background: var(--brand-white);
+  padding: var(--spacer) / 3;
+  margin: 0;
+  border-radius: var(--border-radius);
+  transition: 0.2s ease-out;
+  min-height: 43px;
+  appearance: none;
+}
+.input:focus,
+.select:focus {
+  border: none;
+  box-shadow: none;
+  outline: 0;
+}
+
+.select::placeholder,
+.input::placeholder {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  color: var(--brand-grey-light);
+  font-weight: var(--font-weight-base);
+  transition: 0.2s ease-out;
+  opacity: 0.7;
+}
+
+.select[readonly],
+.input[readonly],
+.select[disabled],
+.input[disabled] {
+  background-color: var(--brand-grey-lighter);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.select {
+  composes: input;
+  height: 43px;
+  padding-right: 3rem;
+  border: 0;
+
+  background-image: linear-gradient(
+      45deg,
+      transparent 50%,
+      var(--brand-purple 50%)
+    ),
+    linear-gradient(135deg, var(--brand-purple) 50%, transparent 50%),
+    linear-gradient(
+      to right,
+      var(--brand-pink) 1px,
+      lighten(var(--brand-grey-lighter), 5%) 2px,
+      lighten(var(--brand-grey-lighter), 5%)
+    );
+  background-position: calc(100% - 18px) calc(1rem + 5px),
+    calc(100% - 13px) calc(1rem + 5px), 100% 0;
+  background-size: 5px 5px, 5px 5px, 2.5rem 3rem;
+  background-repeat: no-repeat;
+}
+.select:focus {
+  outline: 0;
+  font-family: var(--font-family-base);
+}
+
+.radioGroup {
+  margin-top: var(--spacer) / 2;
+  margin-bottom: -2%;
+
+  @media screen and (min-width: var(--break-point--small)) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+}
+
+.radioWrap {
+  position: relative;
+  padding: var(--spacer) / 2;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  margin-bottom: 2%;
+
+  @media screen and (min-width: var(--break-point--small)) {
+    flex: 0 0 49%;
+  }
+}
+
+.radio:checked + label {
+  border-color: var(--brand-pink);
+}
+
+.radioLabel {
+  margin: 0;
+  padding: 0;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-small);
+  line-height: 1.2;
+  border: 2px solid var(--brand-grey-lighter);
+  border-radius: 0.2rem;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  color: var(--brand-grey);
+  text-align: left;
+  padding-left: 2.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.inputSmall {
+  composes: input;
+  font-size: var(--font-size-small);
+  min-height: 32px;
+  padding: var(--spacer) / 4;
+}
+.inputSmall::placeholder {
+  font-size: var(--font-size-small);
+}
+
+.selectSmall {
+  composes: select;
+  height: 32px;
+  padding-right: 2rem;
+  background-position: calc(100% - 14px) 1rem, calc(100% - 9px) 1rem, 100% 0;
+  background-size: 5px 5px, 5px 5px, 2rem 3rem;
+}
diff --git a/src/components/atoms/Input/Input.tsx b/src/components/atoms/Input/Input.tsx
new file mode 100644
index 000000000..e1acbed1d
--- /dev/null
+++ b/src/components/atoms/Input/Input.tsx
@@ -0,0 +1,213 @@
+import cx from 'classnames'
+import React, { PureComponent, FormEvent, ChangeEvent } from 'react'
+import slugify from '@sindresorhus/slugify'
+import DatePicker from 'react-datepicker'
+import Help from './Help'
+import Label from './Label'
+import Row from './Row'
+import InputGroup from './InputGroup'
+import styles from './Input.module.css'
+
+interface InputProps {
+  name: string
+  label: string
+  placeholder?: string
+  required?: boolean
+  help?: string
+  tag?: string
+  type?: string
+  options?: string[]
+  additionalComponent?: any
+  value?: string
+  onChange?(
+    event:
+      | FormEvent<HTMLInputElement>
+      | ChangeEvent<HTMLInputElement>
+      | ChangeEvent<HTMLSelectElement>
+      | ChangeEvent<HTMLTextAreaElement>
+  ): void
+  rows?: number
+  group?: any
+  multiple?: boolean
+  pattern?: string
+}
+
+interface InputState {
+  isFocused: boolean
+  dateCreated?: Date
+}
+
+export default class Input extends PureComponent<InputProps, InputState> {
+  public state: InputState = {
+    isFocused: false,
+    dateCreated: new Date()
+  }
+
+  public inputWrapClasses() {
+    if (this.props.type === 'search') {
+      return styles.inputWrapSearch
+    } else if (this.props.type === 'search' && this.state.isFocused) {
+      return cx(styles.inputWrapSearch, styles.isFocused)
+    } else if (this.state.isFocused && this.props.type !== 'search') {
+      return cx(styles.inputWrap, styles.isFocused)
+    } else {
+      return styles.inputWrap
+    }
+  }
+
+  public handleFocus = () => {
+    this.setState({ isFocused: !this.state.isFocused })
+  }
+
+  private handleDateChange = (date: Date) => {
+    this.setState({ dateCreated: date })
+
+    const event = {
+      currentTarget: {
+        name: 'dateCreated',
+        value: date
+      }
+    }
+    this.props.onChange!(event as any) // eslint-disable-line @typescript-eslint/no-non-null-assertion
+  }
+
+  public InputComponent = () => {
+    const { type, options, group, name, required, onChange, value } = this.props
+
+    const wrapClass = this.inputWrapClasses()
+
+    switch (type) {
+      case 'select':
+        return (
+          <div className={wrapClass}>
+            <select
+              id={name}
+              className={styles.select}
+              name={name}
+              required={required}
+              onFocus={this.handleFocus}
+              onBlur={this.handleFocus}
+              onChange={onChange}
+              value={value}
+            >
+              <option value="">---</option>
+              {options &&
+                options
+                  .sort((a, b) => a.localeCompare(b))
+                  .map((option: string, index: number) => (
+                    <option key={index} value={option}>
+                      {option}
+                    </option>
+                  ))}
+            </select>
+          </div>
+        )
+      case 'textarea':
+        return (
+          <div className={wrapClass}>
+            <textarea
+              id={name}
+              className={styles.input}
+              onFocus={this.handleFocus}
+              onBlur={this.handleFocus}
+              {...this.props}
+            />
+          </div>
+        )
+      case 'radio':
+      case 'checkbox':
+        return (
+          <div className={styles.radioGroup}>
+            {options &&
+              options.map((option: string, index: number) => (
+                <div className={styles.radioWrap} key={index}>
+                  <input
+                    className={styles.radio}
+                    id={slugify(option)}
+                    type={type}
+                    name={name}
+                    value={slugify(option)}
+                  />
+                  <label
+                    className={styles.radioLabel}
+                    htmlFor={slugify(option)}
+                  >
+                    {option}
+                  </label>
+                </div>
+              ))}
+          </div>
+        )
+      case 'date':
+        return (
+          <div className={wrapClass}>
+            <DatePicker
+              selected={this.state.dateCreated}
+              onChange={this.handleDateChange}
+              className={styles.input}
+              onFocus={this.handleFocus}
+              onBlur={this.handleFocus}
+              id={name}
+              name={name}
+            />
+          </div>
+        )
+      default:
+        return (
+          <div className={wrapClass}>
+            {group ? (
+              <InputGroup>
+                <input
+                  id={name}
+                  type={type || 'text'}
+                  className={styles.input}
+                  onFocus={this.handleFocus}
+                  onBlur={this.handleFocus}
+                  {...this.props}
+                />
+                {group}
+              </InputGroup>
+            ) : (
+              <input
+                id={name}
+                type={type || 'text'}
+                className={styles.input}
+                onFocus={this.handleFocus}
+                onBlur={this.handleFocus}
+                {...this.props}
+              />
+            )}
+
+            {/* {type === 'search' && <SearchIcon />} */}
+          </div>
+        )
+    }
+  }
+
+  public render() {
+    const {
+      name,
+      label,
+      required,
+      help,
+      additionalComponent,
+      multiple
+    } = this.props
+
+    return (
+      <Row>
+        <Label htmlFor={name} required={required}>
+          {label}
+        </Label>
+
+        <this.InputComponent />
+
+        {help && <Help>{help}</Help>}
+
+        {multiple && 'hello'}
+
+        {additionalComponent && additionalComponent}
+      </Row>
+    )
+  }
+}
diff --git a/src/components/atoms/Input/InputGroup.module.css b/src/components/atoms/Input/InputGroup.module.css
new file mode 100644
index 000000000..c6890c540
--- /dev/null
+++ b/src/components/atoms/Input/InputGroup.module.css
@@ -0,0 +1,35 @@
+.inputGroup {
+  width: 100%;
+
+  @media screen and (min-width: $break-point--small) {
+    display: flex;
+  }
+}
+.inputGroup > input {
+  @media screen and (min-width: $break-point--small) {
+    width: 75%;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+.inputGroup > button {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -120%;
+
+  @media screen and (min-width: $break-point--small) {
+    position: relative;
+    bottom: auto;
+    width: 25%;
+    height: 100%;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    box-shadow: none;
+  }
+}
+
+.inputGroup > button:hover,
+.inputGroup > button:focus {
+  transform: none;
+}
diff --git a/src/components/atoms/Input/InputGroup.tsx b/src/components/atoms/Input/InputGroup.tsx
new file mode 100644
index 000000000..e525b28b5
--- /dev/null
+++ b/src/components/atoms/Input/InputGroup.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import styles from './InputGroup.module.css'
+
+const InputGroup = ({ children }: { children: any }) => (
+  <div className={styles.inputGroup}>{children}</div>
+)
+
+export default InputGroup
diff --git a/src/components/atoms/Input/Label.module.css b/src/components/atoms/Input/Label.module.css
new file mode 100644
index 000000000..556aa8469
--- /dev/null
+++ b/src/components/atoms/Input/Label.module.css
@@ -0,0 +1,16 @@
+.label .required {
+  color: var(--brand-grey);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-title);
+  line-height: 1.2;
+  display: block;
+  margin-bottom: var(--spacer) / 6;
+}
+
+.required:after {
+  content: '*';
+  font-size: var(--font-size-base);
+  color: var(--brand-grey-light);
+  display: inline-block;
+  margin-left: 0.1rem;
+}
diff --git a/src/components/atoms/Input/Label.tsx b/src/components/atoms/Input/Label.tsx
new file mode 100644
index 000000000..25f7e860a
--- /dev/null
+++ b/src/components/atoms/Input/Label.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import styles from './Label.module.css'
+
+const Label = ({
+  required,
+  children,
+  ...props
+}: {
+  required?: boolean
+  children: string
+  htmlFor: string
+}) => (
+  <label
+    className={required ? styles.required : styles.label}
+    title={required ? 'Required' : ''}
+    {...props}
+  >
+    {children}
+  </label>
+)
+
+export default Label
diff --git a/src/components/atoms/Input/Row.module.css b/src/components/atoms/Input/Row.module.css
new file mode 100644
index 000000000..6bca01216
--- /dev/null
+++ b/src/components/atoms/Input/Row.module.css
@@ -0,0 +1,3 @@
+.row {
+  margin-bottom: var(--spacer);
+}
diff --git a/src/components/atoms/Input/Row.tsx b/src/components/atoms/Input/Row.tsx
new file mode 100644
index 000000000..4d1ac3e02
--- /dev/null
+++ b/src/components/atoms/Input/Row.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import styles from './Row.module.css'
+
+const Row = ({ children }: { children: any }) => (
+  <div className={styles.row}>{children}</div>
+)
+
+export default Row
diff --git a/src/components/molecules/AssetTeaser.module.css b/src/components/molecules/AssetTeaser.module.css
index 592c3d62a..dfe3a19f8 100644
--- a/src/components/molecules/AssetTeaser.module.css
+++ b/src/components/molecules/AssetTeaser.module.css
@@ -8,7 +8,7 @@
   font-size: var(--font-size-small);
   height: 100%;
   color: var(--brand-grey-dark);
-
+  position: relative;
   /* for sticking footer to bottom */
   display: flex;
   flex-direction: column;
@@ -62,3 +62,14 @@ p.copyright {
   text-align: center;
   margin-top: calc(var(--spacer) / 3);
 }
+
+.accessLabel {
+  font-size: var(--font-size-small);
+  width: auto;
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: var(--brand-black);
+  background: var(--brand-grey-lighter);
+  padding: 0.1px 0.5px 0.1px 0.5px;
+}
diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx
index b4c572727..56784658e 100644
--- a/src/components/molecules/AssetTeaser.tsx
+++ b/src/components/molecules/AssetTeaser.tsx
@@ -24,13 +24,15 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({ ddo }: AssetTeaserProps) => {
   let copyrightHolder
   let tags
   let categories
+  let access
 
   if (attributes && attributes.additionalInformation) {
     ;({
       description,
       copyrightHolder,
       tags,
-      categories
+      categories,
+      access
     } = attributes.additionalInformation as AdditionalInformationDexFreight)
   }
 
@@ -41,6 +43,9 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({ ddo }: AssetTeaserProps) => {
       <Link href="/asset/[did]" as={`/asset/${ddo.id}`}>
         <a className={styles.link}>
           <h1 className={styles.title}>{name}</h1>
+          {access === 'Compute' && (
+            <div className={styles.accessLabel}>{access}</div>
+          )}
           <Rating curation={curation} readonly />
 
           <div className={styles.content}>
diff --git a/src/components/molecules/PublishForm/PublishForm.tsx b/src/components/molecules/PublishForm/PublishForm.tsx
index 830da541f..0c7eed204 100644
--- a/src/components/molecules/PublishForm/PublishForm.tsx
+++ b/src/components/molecules/PublishForm/PublishForm.tsx
@@ -16,6 +16,10 @@ import styles from './PublishForm.module.css'
 import utils from 'web3-utils'
 import AssetModel from '../../../models/Asset'
 import { useWeb3, useOcean } from '@oceanprotocol/react'
+import {
+  Service,
+  ServiceCompute
+} from '@oceanprotocol/squid/dist/node/ddo/Service'
 
 declare type PublishFormProps = {}
 
@@ -49,14 +53,13 @@ export function transformPublishFormToMetadata(
     author,
     license,
     summary,
-    category,
     holder,
     keywords,
     termsAndConditions,
-    granularity,
     supportName,
     supportEmail,
-    dateRange
+    dateRange,
+    access
   } = data
 
   const metadata: MetaDataDexFreight = {
@@ -74,13 +77,12 @@ export function transformPublishFormToMetadata(
     additionalInformation: {
       ...AssetModel.additionalInformation,
       description: summary,
-      categories: [category],
       copyrightHolder: holder,
       tags: keywords?.split(','),
       termsAndConditions,
-      granularity,
       supportName,
-      supportEmail
+      supportEmail,
+      access: 'Download'
     },
     // ------- curation -------
     curation: AssetModel.curation
@@ -101,8 +103,8 @@ export function transformPublishFormToMetadata(
 
 const PublishForm: React.FC<PublishFormProps> = () => {
   const [buttonDisabled, setButtonDisabled] = useState(false)
-  const { web3, web3Connect } = useWeb3()
-  const { ocean } = useOcean()
+  const { web3Connect } = useWeb3()
+  const { ocean, account } = useOcean()
   const router = useRouter()
   const [data, updateData] = useStoredValue(
     PUBLISH_FORM_LOCAL_STORAGE_KEY,
@@ -136,22 +138,51 @@ const PublishForm: React.FC<PublishFormProps> = () => {
     }
 
     if (ocean) {
-      const asset = await ocean.assets.create(
-        (transformPublishFormToMetadata(formData) as unknown) as MetaData,
-        (await ocean.accounts.list())[0]
-      )
+      const metadata = transformPublishFormToMetadata(formData)
+
+      // if services array stays empty, the default access service
+      // will be created by squid-js
+      let services: Service[] = []
+
+      if (metadata.additionalInformation.access === 'Compute') {
+        const computeService: ServiceCompute = await ocean.compute.createComputeServiceAttributes(
+          account,
+          metadata.main.price,
+          // Note: a hack without consequences.
+          // Will make metadata.main.datePublished (automatically created by Aquarius)
+          // go out of sync with this service.main.datePublished.
+          toStringNoMS(new Date(Date.now()))
+        )
+        services = [computeService]
+      }
+
+      try {
+        const asset = await ocean.assets.create(
+          (transformPublishFormToMetadata(formData) as unknown) as MetaData,
+          account,
+          services
+        )
+
+        // Reset the form to initial values
+
+        updateData(publishFormData)
+        clearFilesData()
+
+        // User feedback and redirect
+        toast.success('asset created successfully', {
+          className: styles.success
+        })
+        toast.dismiss(submittingToast)
+        router.push(`/asset/${asset.id}`)
+      } catch (e) {
+        console.log(e)
+      } finally {
+        setButtonDisabled(false)
+      }
 
       // Reset the form to initial values
 
-      updateData(publishFormData)
-      clearFilesData()
-      setButtonDisabled(false)
       // User feedback and redirect
-      toast.success('asset created successfully', {
-        className: styles.success
-      })
-      toast.dismiss(submittingToast)
-      router.push(`/asset/${asset.id}`)
     }
   }
 
diff --git a/src/components/organisms/Compute.module.css b/src/components/organisms/Compute.module.css
index f6527cd5e..aa5609d5e 100644
--- a/src/components/organisms/Compute.module.css
+++ b/src/components/organisms/Compute.module.css
@@ -1,10 +1,7 @@
 .jobButtonWrapper {
   margin-top: var(--spacer);
 }
-.selectType {
-  width: 100%;
-  margin-bottom: var(--spacer);
-}
+
 .feedback {
   width: 100%;
   margin-top: var(--spacer);
@@ -13,9 +10,9 @@
 }
 
 .compute {
+  composes: box from '../atoms/Box.module.css';
   display: flex;
   flex-wrap: wrap;
-  padding: calc(var(--spacer) * 1.5);
 }
 .compute button {
   margin-left: var(--spacer);
@@ -24,14 +21,15 @@
   margin-left: 0px;
 }
 .price {
-  padding-bottom: calc(var(--spacer) * 1.5);
+  font-size: var(--font-size-h2);
+  /* padding-bottom: var(--spacer); */
 }
 
 .info {
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding-top: calc(var(--spacer) * 0.5);
+  /* padding-top: calc(var(--spacer) * 0.5);
   padding-bottom: var(--spacer);
-  border-top: 1px solid var(--color-secondary);
+  border-top: 1px solid var(--color-secondary); */
 }
diff --git a/src/components/organisms/Compute.tsx b/src/components/organisms/Compute.tsx
index ca276e89e..974c6fd7e 100644
--- a/src/components/organisms/Compute.tsx
+++ b/src/components/organisms/Compute.tsx
@@ -1,10 +1,9 @@
 import React, { useState, useEffect } from 'react'
-import { DDO, MetaDataAlgorithm, Ocean, DID } from '@oceanprotocol/squid'
+import { DDO, Ocean, Logger } from '@oceanprotocol/squid'
 import { ServiceMetadata } from '@oceanprotocol/squid/dist/node/ddo/Service'
 import { fromWei } from 'web3-utils'
 import compareAsBN, { Comparisson } from '../../utils/compareAsBN'
 import Loader from '../atoms/Loader'
-import { config } from '../../config/ocean'
 import Web3Feedback from '../molecules/Web3Feedback'
 import Dropzone from '../atoms/Dropzone'
 import Price from '../atoms/Price'
@@ -14,8 +13,9 @@ import {
   useCompute,
   readFileContent
 } from '@oceanprotocol/react'
-import styles from './Consume.module.css'
+import styles from './Compute.module.css'
 import Button from '../atoms/Button'
+import Input from '../atoms/Input/Input'
 
 export default function Compute({
   ddo,
@@ -27,10 +27,9 @@ export default function Compute({
   ocean: Ocean | null
 }) {
   if (!ddo) return null
-  const { compute, computeStep, computeStepText } = useCompute()
+  const { compute, isLoading, computeStepText, computeError } = useCompute()
   const [isJobStarting, setIsJobStarting] = useState(false)
-  const [step, setStep] = useState(99)
-  const [error, setError] = useState('')
+  const [, setError] = useState('')
   const [isBalanceSufficient, setIsBalanceSufficient] = useState(false)
 
   const [computeType, setComputeType] = useState('')
@@ -48,7 +47,7 @@ export default function Compute({
 
   const isFree = price === '0'
 
-  const [isTermsAgreed, setIsTermsAgreed] = useState(false)
+  const [isTermsAgreed, setIsTermsAgreed] = useState(true)
   const isComputeButtonDisabled =
     isJobStarting ||
     file === null ||
@@ -58,6 +57,7 @@ export default function Compute({
     !isTermsAgreed
 
   useEffect(() => {
+    console.log(Logger)
     setIsBalanceSufficient(
       isFree ||
         (balance !== null &&
@@ -86,7 +86,9 @@ export default function Compute({
       setIsJobStarting(true)
       setIsPublished(false)
       setError('')
-      // compute(ddo.id, algorithmRawCode, computeContainer)
+
+      await compute(ddo.id, algorithmRawCode, computeContainer)
+
       setIsPublished(true)
       setFile(null)
     } catch (error) {
@@ -96,31 +98,28 @@ export default function Compute({
     setIsJobStarting(false)
   }
 
-  function onCheck(event: any) {
-    console.log(event, event.target.checked)
-    setIsTermsAgreed(event.target.checked)
-  }
-
   return (
     <div className={styles.compute}>
-      <Price price={fromWei(price)} className={styles.price} />
+      <Price price={price} className={styles.price} />
 
       <div className={styles.info}>
         <div className={styles.selectType}>
-          {/* <input
-          type="search"
-          className={large ? `${styles.input} ${styles.large}` : styles.input}
-          placeholder={placeholder || 'What are you looking for?'}
-          value={value}
-          onChange={e => handleChange(e)}
-          required
-        /> */}
+          <Input
+            type="select"
+            name="algorithm"
+            label="Select image to run the algorithm"
+            placeholder=""
+            value={computeType}
+            options={computeOptions.map(x => x.name)}
+            onChange={handleSelectChange}
+          />
         </div>
         <div>
           <Dropzone multiple={false} handleOnDrop={onDrop} />
 
           <div className={styles.jobButtonWrapper}>
             <Button
+              primary
               onClick={() => startJob()}
               disabled={isComputeButtonDisabled}
             >
@@ -130,8 +129,10 @@ export default function Compute({
           {/* <TermsCheckbox onChange={onCheck} /> */}
         </div>
 
-        {isJobStarting && <Loader message={computeStepText} />}
-        {error !== '' && <div className={styles.feedback}>{error}</div>}
+        {isLoading && <Loader message={computeStepText} />}
+        {computeError !== undefined && (
+          <div className={styles.feedback}>{computeError}</div>
+        )}
         {isPublished && (
           <div className={styles.feedback}>
             <p>Your job started! Watch the progress in the history page.</p>
diff --git a/src/components/templates/AssetDetails/MetaFull.tsx b/src/components/templates/AssetDetails/MetaFull.tsx
index f701401f3..ddcdb712f 100644
--- a/src/components/templates/AssetDetails/MetaFull.tsx
+++ b/src/components/templates/AssetDetails/MetaFull.tsx
@@ -13,9 +13,9 @@ export default function MetaFull({
   attributes: MetaDataDexFreight
 }) {
   const { dateCreated, author, license } = attributes.main
-  let dateRange, granularity
+  let dateRange
   if (attributes && attributes.additionalInformation) {
-    ;({ dateRange, granularity } = attributes.additionalInformation)
+    ;({ dateRange } = attributes.additionalInformation)
   }
 
   // In practice dateRange will always be defined, but in the rare case it isn't
@@ -43,10 +43,6 @@ export default function MetaFull({
         }
       />
 
-      {granularity && (
-        <MetaItem title="Data Granularity" content={granularity} />
-      )}
-
       <MetaItem title="DID" content={<code>{ddo?.id}</code>} />
     </div>
   )
diff --git a/src/components/templates/AssetDetails/index.tsx b/src/components/templates/AssetDetails/index.tsx
index 627fc240c..0451903b7 100644
--- a/src/components/templates/AssetDetails/index.tsx
+++ b/src/components/templates/AssetDetails/index.tsx
@@ -15,7 +15,8 @@ import RatingAction from './RatingAction'
 import styles from './index.module.css'
 import { config } from '../../../config/ocean'
 import { findServiceByType } from '../../../utils'
-import { useMetadata, useWeb3 } from '@oceanprotocol/react'
+import { useMetadata, useWeb3, useOcean } from '@oceanprotocol/react'
+import Compute from '../../organisms/Compute'
 
 export declare type AssetDetailsPageProps = {
   title: string
@@ -33,6 +34,8 @@ const AssetDetailsPageMeta = ({
 }) => {
   if (!attributes) return null
 
+  const { web3, account } = useWeb3()
+  const { ocean, balanceInOcean } = useOcean()
   const { datePublished } = attributes.main
   const {
     description,
@@ -83,7 +86,12 @@ const AssetDetailsPageMeta = ({
       </div>
       <div>
         <div className={styles.sticky}>
-          <Consume ddo={ddo} />
+          {isCompute ? (
+            <Compute ddo={ddo} ocean={ocean} balance={balanceInOcean} />
+          ) : (
+            <Consume ddo={ddo} />
+          )}
+
           <RatingAction did={ddo.id} onVote={onVoteUpdate} />
           <MetaSecondary attributes={attributes} />
         </div>
diff --git a/src/config/ocean.ts b/src/config/ocean.ts
index f4942811f..a6414caa0 100644
--- a/src/config/ocean.ts
+++ b/src/config/ocean.ts
@@ -19,11 +19,11 @@ export const config: Partial<OceanConfig> = {
   nodeUri: process.env.NODE_URI || 'https://pacific.oceanprotocol.com',
   aquariusUri:
     process.env.AQUARIUS_URI ||
-    'https://aquarius.pacific.dexfreight.dev-ocean.com',
+    'https://aquarius.marketplace.oceanprotocol.com',
   brizoUri:
-    process.env.BRIZO_URI || 'https://brizo.pacific.dexfreight.dev-ocean.com',
+    process.env.BRIZO_URI || 'https://brizo.marketplace.oceanprotocol.com',
   brizoAddress:
-    process.env.BRIZO_ADDRESS || '0xeD792C5FcC8bF3322a6ba89A6e51eF0B6fB3C530',
+    process.env.BRIZO_ADDRESS || '0x00c6A0BC5cD0078d6Cd0b659E8061B404cfa5704',
   secretStoreUri:
     process.env.SECRET_STORE_URI || 'https://secret-store.oceanprotocol.com',
   faucetUri: process.env.FAUCET_URI || 'https://faucet.oceanprotocol.com',
diff --git a/src/models/Asset.ts b/src/models/Asset.ts
index a202cb268..d92fe61b1 100644
--- a/src/models/Asset.ts
+++ b/src/models/Asset.ts
@@ -15,7 +15,6 @@ const AssetModel: MetaDataDexFreight = {
   additionalInformation: {
     description: '',
     copyrightHolder: '',
-    categories: [''],
     tags: undefined,
     // links: [],
 
@@ -23,7 +22,6 @@ const AssetModel: MetaDataDexFreight = {
     deliveryType: 'files',
     termsAndConditions: false,
     dateRange: undefined,
-    granularity: undefined,
     supportName: undefined,
     supportEmail: undefined,
     access: 'Download'
diff --git a/src/models/PublishForm.ts b/src/models/PublishForm.ts
index e75c36604..bd837d20f 100644
--- a/src/models/PublishForm.ts
+++ b/src/models/PublishForm.ts
@@ -3,7 +3,7 @@ import { JSONSchema6 } from 'json-schema'
 import TermsWidget from '../components/atoms/FormWidgets/TermsWidget'
 import DateRangeWidget from '../components/atoms/FormWidgets/DateRangeWidget'
 import { ObjectFieldTemplate } from '../components/molecules/Form/ObjectFieldTemplate'
-import { Granularity } from '../@types/MetaData'
+import { Granularity, AccessType } from '../@types/MetaData'
 import FileField from '../components/molecules/Form/FileField'
 
 export const customWidgets = {
@@ -11,26 +11,17 @@ export const customWidgets = {
   DateRangeWidget
 }
 
-// Ref: https://react-jsonschema-form.readthedocs.io/en/latest/form-customization/#the-uischema-object
-export const CATEGORIES = [
-  'Invoices',
-  'Historical location-based data',
-  'Shipment attribute (without rate information)',
-  'Shipment attribute (with rate information)',
-  'Other'
-]
 export const PublishFormSchema: JSONSchema6 = {
   type: 'object',
   required: [
-    'category',
     'title',
     'author',
     'license',
     'price',
     'files',
-    'granularity',
     'summary',
-    'termsAndConditions'
+    'termsAndConditions',
+    'access'
   ],
   definitions: {
     files: {
@@ -43,11 +34,6 @@ export const PublishFormSchema: JSONSchema6 = {
     }
   },
   properties: {
-    category: {
-      type: 'string',
-      title: 'What type of data will you be providing?',
-      enum: CATEGORIES
-    },
     title: {
       type: 'string',
       title: 'Offer Title'
@@ -71,22 +57,15 @@ export const PublishFormSchema: JSONSchema6 = {
       type: 'number',
       minimum: 0
     },
-    granularity: {
-      type: 'string',
-      title: 'Granularity of Data',
-      enum: [
-        'Not updated periodically',
-        'Hourly',
-        'Daily',
-        'Weekly',
-        'Monthly',
-        'Annually'
-      ]
-    },
     author: {
       type: 'string',
       title: 'Author'
     },
+    access: {
+      title: 'Access type',
+      type: 'string',
+      enum: ['Download', 'Compute']
+    },
     license: {
       title: 'License',
       type: 'string',
@@ -161,9 +140,9 @@ export const PublishFormUiSchema: UiSchema = {
   price: {
     'ui:help': 'Set your price in Ocean Tokens.'
   },
-  granularity: {
+  access: {
     'ui:widget': 'select',
-    'ui:help': 'Select the timeframe your data was collected.'
+    'ui:help': 'Access Type'
   },
   author: {
     'ui:placeholder': 'e.g. Jelly McJellyfish',
@@ -190,8 +169,6 @@ export const PublishFormUiSchema: UiSchema = {
 
 export interface PublishFormDataInterface {
   // ---- required fields ----
-  category: string
-  granularity: Granularity
   summary: string
   termsAndConditions: boolean
   author: string
@@ -199,6 +176,7 @@ export interface PublishFormDataInterface {
   files: string[]
   price: number
   title: string
+  access?: AccessType
   // ---- optional fields ----
   dateRange?: string
   holder?: string
@@ -213,8 +191,6 @@ export const publishFormData: PublishFormDataInterface = {
   title: '',
   files: [''], // should be empty string initially to display the expanded field
   summary: '',
-  category: '',
-  granularity: '',
   license: '',
   termsAndConditions: false,
   dateRange: undefined,
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index d290116b7..0ade36b1a 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -12,7 +12,8 @@ import '@oceanprotocol/typographies/css/ocean-typo.css'
 import 'react-toastify/dist/ReactToastify.css'
 import '../styles/global.css'
 import '../components/atoms/NProgress.css'
-import { Web3Provider, OceanProvider } from '@oceanprotocol/react'
+import { Web3Provider, OceanProvider, Config } from '@oceanprotocol/react'
+import { config } from '../config/ocean'
 
 export default function dexfreightApp({ Component, pageProps }: AppProps) {
   const { asPath } = useRouter()
@@ -26,24 +27,6 @@ export default function dexfreightApp({ Component, pageProps }: AppProps) {
     require('../styles/datepicker.css')
   }
 
-  const config = {
-    nodeUri: process.env.NODE_URI || 'https://pacific.oceanprotocol.com',
-    aquariusUri:
-      process.env.AQUARIUS_URI ||
-      'https://aquarius.pacific.dexfreight.dev-ocean.com',
-    brizoUri:
-      process.env.BRIZO_URI || 'https://brizo.pacific.dexfreight.dev-ocean.com',
-    brizoAddress:
-      process.env.BRIZO_ADDRESS || '0xeD792C5FcC8bF3322a6ba89A6e51eF0B6fB3C530',
-    secretStoreUri:
-      process.env.SECRET_STORE_URI || 'https://secret-store.oceanprotocol.com',
-    faucetUri: process.env.FAUCET_URI || 'https://faucet.oceanprotocol.com',
-    ratingUri:
-      process.env.RATING_URI ||
-      'https://rating.pacific.dexfreight.dev-ocean.com',
-    verbose: 3
-  }
-
   return (
     <>
       <Head>
@@ -72,7 +55,7 @@ export default function dexfreightApp({ Component, pageProps }: AppProps) {
       />
       <NProgress />
       <Web3Provider>
-        <OceanProvider config={config}>
+        <OceanProvider config={config as Config}>
           <Component {...pageProps} />
         </OceanProvider>
       </Web3Provider>