Update README.md

Bump @types/jest from 25.2.3 to 26.0.0 in /client

.dockerignore

@@ -1 +0,0 @@
-node_modules

.editorconfig

@@ -1,12 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_size = 4
-end_of_line = lf
-indent_style = space
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.{json,yml,yaml,md}]
-indent_size = 2

.eslintrc

@@ -1,28 +1,43 @@
 {
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
-        "project": "./tsconfig.json"
+        "project": [
+            "./tsconfig.json",
+            "./client/tsconfig.json",
+            "./server/tsconfig.json",
+            "./cypress/tsconfig.json"
+        ]
     },
     "extends": [
         "oceanprotocol",
         "oceanprotocol/react",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:prettier/recommended",
         "prettier/react",
         "prettier/standard",
-        "plugin:prettier/recommended",
-        "plugin:@typescript-eslint/recommended",
-        "prettier/@typescript-eslint"
+        "prettier/@typescript-eslint",
+        "plugin:cypress/recommended"
     ],
-    "plugins": ["@typescript-eslint", "prettier"],
+    "plugins": ["@typescript-eslint", "prettier", "cypress"],
     "rules": {
         "@typescript-eslint/explicit-function-return-type": 0,
         "@typescript-eslint/member-delimiter-style": [
             "error",
             { "multiline": { "delimiter": "none" } }
-        ]
+        ],
+        "@typescript-eslint/no-explicit-any": "off"
     },
     "env": {
         "es6": true,
         "browser": true,
-        "jest": true
+        "node": true,
+        "jest": true,
+        "cypress/globals": true
+    },
+    "settings": {
+        "react": {
+            "version": "16.10"
+        }
     }
 }

.github/dependabot.yml

@@ -0,0 +1,20 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/server"
+  schedule:
+    interval: weekly
+    time: '03:00'
+    timezone: Europe/Berlin
+- package-ecosystem: npm
+  directory: "/client"
+  schedule:
+    interval: weekly
+    time: '03:00'
+    timezone: Europe/Berlin
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: weekly
+    time: '03:00'
+    timezone: Europe/Berlin

.gitignore

@@ -12,6 +12,7 @@ dist
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
@@ -20,3 +21,10 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# cypress
+cypress/screenshots
+cypress/videos
+cypress/fixtures/did.txt
+cypress/fixtures/did-ipfs.txt
+artifacts

.nvmrc

@@ -0,0 +1 @@
+v12

.prettierignore

@@ -1,3 +1,4 @@
 node_modules
 build
 dist
+coverage

.prettierrc

@@ -1,5 +1,15 @@
 {
     "semi": false,
     "singleQuote": true,
-    "trailingComma": "none"
-}
+    "trailingComma": "none",
+    "tabWidth": 4,
+    "endOfLine": "lf",
+    "overrides": [
+        {
+            "files": ["*.{json,yml,yaml,md}"],
+            "options": {
+                "tabWidth": 2
+            }
+        }
+    ]
+}

.stylelintrc

@@ -1,11 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-bigchaindb",
-    "stylelint-config-css-modules",
-    "./node_modules/prettier-stylelint/config.js"
-  ],
-  "syntax": "scss",
-  "rules": {
-      "no-descending-specificity": null
-  }
-}

.travis.yml

@@ -1,29 +1,86 @@
 dist: xenial
+sudo: required
 language: node_js
 node_js:
-  - '11'
+  - '12'
+
+services:
+  - docker
+
+addons:
+  # required for internal Aquarius-Brizo communication
+  # https://docs.travis-ci.com/user/hosts/
+  hosts:
+    - aquarius
+  apt:
+    packages:
+      # for Cypress
+      - libgconf-2-4
+
+env:
+  global:
+    # run E2E tests against local Spree
+    - REACT_APP_NODE_URI="http://localhost:8545"
+    - REACT_APP_AQUARIUS_URI="http://aquarius:5000"
+    - REACT_APP_BRIZO_URI="http://localhost:8030"
+    - REACT_APP_SECRET_STORE_URI="http://localhost:12001"
+    - REACT_APP_FAUCET_URI="http://localhost:3001"
+    - REACT_APP_BRIZO_ADDRESS="0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0"
+
+    # IPFS client & server config
+    - REACT_APP_IPFS_GATEWAY_URI="https://ipfs.oceanprotocol.com"
+    - REACT_APP_IPFS_NODE_URI="https://ipfs.oceanprotocol.com:443"
+    - IPFS_GATEWAY_URI="https://ipfs.oceanprotocol.com"
+
+    # start Barge with these versions
+    - BRIZO_VERSION=v0.9.3
+    - AQUARIUS_VERSION=v1.0.7
+    - KEEPER_VERSION=v0.13.2
+    - EVENTS_HANDLER_VERSION=v0.4.5
+    - KEEPER_OWNER_ROLE_ADDRESS="0xe2DD09d719Da89e5a3D0F2549c7E24566e947260"
+    - FAUCET_TIMESPAN=0
 
 before_install:
   - npm install -g npm
-  - npm install -g codacy-coverage
+  # Fixes an issue where the max file watch count is exceeded, triggering ENOSPC
+  # https://stackoverflow.com/questions/22475849/node-js-error-enospc#32600959
+  - echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
+
+before_script:
+  - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
+  - chmod +x ./cc-test-reporter
+  - ./cc-test-reporter before-build
+  - git clone https://github.com/oceanprotocol/barge
+  - cd barge
+  - bash -x start_ocean.sh --no-commons 2>&1 > start_ocean.log &
+  - cd ..
 
 script:
   # - ./scripts/install.sh # runs automatically with npm ci
+  # executing `npm test` scripts individually here, so first one failing will exit the build
+  - npm run lint || travis_terminate 1
+  - ./scripts/keeper.sh
   - ./scripts/test.sh
-  - ./scripts/coverage.sh
+    # Pipe the coverage data to Code Climate
+  - ./cc-test-reporter format-coverage -t lcov -o coverage/codeclimate.client.json client/coverage/lcov.info
+  - ./cc-test-reporter format-coverage -t lcov -o coverage/codeclimate.server.json server/coverage/lcov.info
+  - ./cc-test-reporter sum-coverage coverage/codeclimate.*.json -p 2
+  - if [[ "$TRAVIS_TEST_RESULT" == 0 ]]; then ./cc-test-reporter upload-coverage; fi
+  - npm run test:e2e || travis_terminate 1
   - ./scripts/build.sh
 
 notifications:
   email: false
 
 cache:
+  npm: true
   directories:
-    - node_modules
-
-deploy:
-  - provider: script
-    skip_cleanup: true
-    script: bash -ex ./scripts/deploy_on_k8s.sh
-    on:
-      tags: true
-      all_branches: true
+    # cache folder with Cypress binary
+    - ~/.cache
+# deploy:
+#   - provider: script
+#     skip_cleanup: true
+#     script: bash -ex ./scripts/deploy_on_k8s.sh
+#     on:
+#       tags: true
+#       all_branches: true

CHANGELOG.md

@@ -4,6 +4,370 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v2.4.1](https://github.com/oceanprotocol/commons/compare/v2.4.0...v2.4.1)
+
+> 19 May 2020
+
+- fix history [`#282`](https://github.com/oceanprotocol/commons/pull/282)
+
+#### [v2.4.0](https://github.com/oceanprotocol/commons/compare/v2.3.1...v2.4.0)
+
+> 19 May 2020
+
+- Feature/compute [`#225`](https://github.com/oceanprotocol/commons/pull/225)
+- remove stylelint & codacy [`#270`](https://github.com/oceanprotocol/commons/pull/270)
+- Bump typescript from 3.8.3 to 3.9.2 in /client [`#256`](https://github.com/oceanprotocol/commons/pull/256)
+- Bump @sindresorhus/slugify from 0.11.0 to 1.0.0 in /client [`#255`](https://github.com/oceanprotocol/commons/pull/255)
+- Bump cypress from 4.2.0 to 4.5.0 [`#250`](https://github.com/oceanprotocol/commons/pull/250)
+- Bump @types/jest from 25.1.4 to 25.2.2 in /client [`#240`](https://github.com/oceanprotocol/commons/pull/240)
+- Bump @typescript-eslint/eslint-plugin from 2.24.0 to 2.33.0 [`#231`](https://github.com/oceanprotocol/commons/pull/231)
+- Bump start-server-and-test from 1.10.10 to 1.11.0 [`#228`](https://github.com/oceanprotocol/commons/pull/228)
+- [Security] Bump handlebars from 4.5.3 to 4.7.6 [`#227`](https://github.com/oceanprotocol/commons/pull/227)
+- Bump release-it from 13.1.1 to 13.6.0 [`#226`](https://github.com/oceanprotocol/commons/pull/226)
+- bump to squid-js v2.2.0 [`91821e8`](https://github.com/oceanprotocol/commons/commit/91821e88d4e4ff1bb6814338b3d9fee4746fd9a8)
+- Release 2.4.0 [`c0effd4`](https://github.com/oceanprotocol/commons/commit/c0effd449f7cc01cf043ab924bb8040d0db55b9b)
+- Merge pull request #281 from oceanprotocol/dependabot/npm_and_yarn/client/react-router-dom-5.2.0 [`6f05baf`](https://github.com/oceanprotocol/commons/commit/6f05baff3af9fa7490100b79b2978ed56ece02f4)
+
+#### [v2.3.1](https://github.com/oceanprotocol/commons/compare/v2.3.0...v2.3.1)
+
+> 20 March 2020
+
+- package updates [`#223`](https://github.com/oceanprotocol/commons/pull/223)
+- Bump acorn from 5.7.3 to 5.7.4 in /server [`#222`](https://github.com/oceanprotocol/commons/pull/222)
+- Bump acorn from 5.7.3 to 5.7.4 in /client [`#221`](https://github.com/oceanprotocol/commons/pull/221)
+- Bump acorn from 7.1.0 to 7.1.1 [`#220`](https://github.com/oceanprotocol/commons/pull/220)
+- more package updates [`192c541`](https://github.com/oceanprotocol/commons/commit/192c54134ab7e26b85ee09ad94de01cfa8efc514)
+- Release 2.3.1 [`f630771`](https://github.com/oceanprotocol/commons/commit/f63077181e8094546d68ee66dc8f6d3bd33c5df6)
+- lint fixes [`b7c6543`](https://github.com/oceanprotocol/commons/commit/b7c6543fbefb6b5b701d3e879bcbd79e09255a7b)
+
+#### [v2.3.0](https://github.com/oceanprotocol/commons/compare/v2.2.0...v2.3.0)
+
+> 20 February 2020
+
+- bump to squid.js v2 beta [`#218`](https://github.com/oceanprotocol/commons/pull/218)
+- Release 2.3.0 [`f143a59`](https://github.com/oceanprotocol/commons/commit/f143a59b0b3f911bffdc9535ad4fe9cfd345864d)
+- update ocean.assets methods [`c669089`](https://github.com/oceanprotocol/commons/commit/c669089d3b2be3d304e1ef8ed1b6827c0cb75ec8)
+
+#### [v2.2.0](https://github.com/oceanprotocol/commons/compare/v2.1.0...v2.2.0)
+
+> 1 February 2020
+
+- bump to react-scripts v3.3 [`#209`](https://github.com/oceanprotocol/commons/pull/209)
+- package updates [`65b72e5`](https://github.com/oceanprotocol/commons/commit/65b72e597d16f8660f74b0b3a491aba723488a56)
+- fix Travis [`3e814b9`](https://github.com/oceanprotocol/commons/commit/3e814b98a7f990cfee6b910f57eb02cdd1a767f1)
+- package updates [`8089a7a`](https://github.com/oceanprotocol/commons/commit/8089a7aa3e4504e1defb3a6809e4d8b4c2a823fb)
+
+#### [v2.1.0](https://github.com/oceanprotocol/commons/compare/v2.1.0-beta.0...v2.1.0)
+
+> 23 January 2020
+
+- Fix search code duplication [`#216`](https://github.com/oceanprotocol/commons/pull/216)
+- bump to keeper-contracts v0.13 [`#210`](https://github.com/oceanprotocol/commons/pull/210)
+- more additionalInformation checks [`#213`](https://github.com/oceanprotocol/commons/pull/213)
+- remove editorconfig [`#211`](https://github.com/oceanprotocol/commons/pull/211)
+- bump to keeper-contracts v0.13.0 [`5ba5cd9`](https://github.com/oceanprotocol/commons/commit/5ba5cd9e20f7bc7ad7aebeb4b9c54f0aea549786)
+- fix code duplication [`c5ea3b7`](https://github.com/oceanprotocol/commons/commit/c5ea3b7c8a989b7c9239cc4292de53680b36c06b)
+- bump all components [`37296c5`](https://github.com/oceanprotocol/commons/commit/37296c502e24a1e0aedc021bfa666dd33dce323d)
+
+#### [v2.1.0-beta.0](https://github.com/oceanprotocol/commons/compare/v2.0.1...v2.1.0-beta.0)
+
+> 17 December 2019
+
+- bump to keeper-contracts v0.13.0 [`c4219bf`](https://github.com/oceanprotocol/commons/commit/c4219bf1a839e88024c3b7a87f95833b40769d58)
+- Release 2.1.0-beta.0 [`64eb7ab`](https://github.com/oceanprotocol/commons/commit/64eb7ab3f2dbd3f5b9736cab67bad4f960c914ff)
+
+#### [v2.0.1](https://github.com/oceanprotocol/commons/compare/v2.0.0...v2.0.1)
+
+> 7 January 2020
+
+- more additionalInformation checks [`#213`](https://github.com/oceanprotocol/commons/pull/213)
+- remove editorconfig [`#211`](https://github.com/oceanprotocol/commons/pull/211)
+- remove editorconfig, define all styling in prettierrc [`f8dfaa4`](https://github.com/oceanprotocol/commons/commit/f8dfaa438c42e9d6c25ae9ac096129da95e431c3)
+- Release 2.0.1 [`e9e5dd9`](https://github.com/oceanprotocol/commons/commit/e9e5dd9049bd60041d1483f102fdd6749b5a9b70)
+
+#### [v2.0.0](https://github.com/oceanprotocol/commons/compare/v2.0.0-beta.3...v2.0.0)
+
+> 9 December 2019
+
+- Migrate to new v2 DDO structure [`#207`](https://github.com/oceanprotocol/commons/pull/207)
+- bump dependencies [`a8c695e`](https://github.com/oceanprotocol/commons/commit/a8c695e16f07b603250aa0eae5aa64d6275072b6)
+- test and package fixes [`3df046b`](https://github.com/oceanprotocol/commons/commit/3df046bbea14c0d0b4817976b8496c5af365bc0d)
+- Release 2.0.0 [`70a3339`](https://github.com/oceanprotocol/commons/commit/70a3339f8b0fdbabad1475659639f145ec68ed6c)
+
+#### [v2.0.0-beta.3](https://github.com/oceanprotocol/commons/compare/v2.0.0-beta.2...v2.0.0-beta.3)
+
+> 22 November 2019
+
+- bump web3 packages [`8c3262c`](https://github.com/oceanprotocol/commons/commit/8c3262c1d91727dcb514ff049d8db5f48e812fed)
+- bump packages [`5800027`](https://github.com/oceanprotocol/commons/commit/5800027cbf4461cb274ce182e3350e3a1c4b708c)
+- update to new DDO structure [`985803d`](https://github.com/oceanprotocol/commons/commit/985803d43e4a3d729d90196f260b128bf2e37f63)
+
+#### [v2.0.0-beta.2](https://github.com/oceanprotocol/commons/compare/v2.0.0-beta.1...v2.0.0-beta.2)
+
+> 15 November 2019
+
+- bump packages [`428532e`](https://github.com/oceanprotocol/commons/commit/428532e2c624fed19bae342b40fdb0f5d9a403d3)
+- Release 2.0.0-beta.2 [`9f55d0a`](https://github.com/oceanprotocol/commons/commit/9f55d0a69577ee64fe8fd6ce9889e31f90fd1562)
+- bump squid-js [`b75af1b`](https://github.com/oceanprotocol/commons/commit/b75af1bae3f05006ea557c6de05dfe3ddea555eb)
+
+#### [v2.0.0-beta.1](https://github.com/oceanprotocol/commons/compare/v2.0.0-beta.0...v2.0.0-beta.1)
+
+> 14 November 2019
+
+- bump web3 packages [`13a8bf8`](https://github.com/oceanprotocol/commons/commit/13a8bf86a56d3bddca44aa505a27e95507069238)
+- Release 2.0.0-beta.1 [`cf9d65d`](https://github.com/oceanprotocol/commons/commit/cf9d65da3f353db60da331f8d553e3e19f849d15)
+
+#### [v2.0.0-beta.0](https://github.com/oceanprotocol/commons/compare/v1.3.2...v2.0.0-beta.0)
+
+> 14 November 2019
+
+- update to new DDO structure [`e34dde1`](https://github.com/oceanprotocol/commons/commit/e34dde1a111d00943dc68d32c04b8fa230996d6d)
+- Release 2.0.0-beta.0 [`0136695`](https://github.com/oceanprotocol/commons/commit/0136695051fe9f753946f1b7de4a55264e3cb174)
+- contentLength as string [`3d9935b`](https://github.com/oceanprotocol/commons/commit/3d9935b46553143ed1fad6ee6e6b80c23ca6e59e)
+
+#### [v1.3.2](https://github.com/oceanprotocol/commons/compare/v1.3.1...v1.3.2)
+
+> 22 November 2019
+
+- Release 1.3.2 [`b02cda0`](https://github.com/oceanprotocol/commons/commit/b02cda043c33c00174e4e4f3ec56e7d0aa5386da)
+- bump to squid-js v0.8.3 [`8ca727f`](https://github.com/oceanprotocol/commons/commit/8ca727fffc2cc137b978b7d65ed586da405b015b)
+
+#### [v1.3.1](https://github.com/oceanprotocol/commons/compare/v1.3.0...v1.3.1)
+
+> 7 November 2019
+
+- Bump squid [`#206`](https://github.com/oceanprotocol/commons/pull/206)
+- bump squid [`ccdef81`](https://github.com/oceanprotocol/commons/commit/ccdef8143ea2f6062c4ffbe65451fdce7c5c40e3)
+- downgrade @typescript-eslint packages [`afd4ec9`](https://github.com/oceanprotocol/commons/commit/afd4ec991f384596d26e63f2dcb710eda648457e)
+- Release 1.3.1 [`c8a46a5`](https://github.com/oceanprotocol/commons/commit/c8a46a5316c811766907a0b5866989e750b2ff0a)
+
+#### [v1.3.0](https://github.com/oceanprotocol/commons/compare/v1.2.2...v1.3.0)
+
+> 1 November 2019
+
+- bump packages [`#204`](https://github.com/oceanprotocol/commons/pull/204)
+- lock to react-scripts 3.0.1 [`da9237e`](https://github.com/oceanprotocol/commons/commit/da9237ea46fd8bc5af26b168bc9a1cd1708fe122)
+- web3 1.2.2 & truffle-hd-wallet updates, simplify types [`aec1f78`](https://github.com/oceanprotocol/commons/commit/aec1f782574077510fcad323e87e6c72b3cf039a)
+- more test fixes [`fe4f223`](https://github.com/oceanprotocol/commons/commit/fe4f2233f09240c63351f03209d1588fcb7b0dcb)
+
+#### [v1.2.2](https://github.com/oceanprotocol/commons/compare/v1.2.1...v1.2.2)
+
+> 24 October 2019
+
+- IPFS fixes [`#203`](https://github.com/oceanprotocol/commons/pull/203)
+- stream files when adding [`77deaf0`](https://github.com/oceanprotocol/commons/commit/77deaf063e2ef3c6650fe7238acae3749bea2a1b)
+- Release 1.2.2 [`ae34031`](https://github.com/oceanprotocol/commons/commit/ae34031e9f2cd1a6aea801d50149156baeb41609)
+- lazy load IPFS component [`4319115`](https://github.com/oceanprotocol/commons/commit/4319115e0015e888587f2d6538e1301936385137)
+
+#### [v1.2.1](https://github.com/oceanprotocol/commons/compare/v1.2.0...v1.2.1)
+
+> 15 October 2019
+
+- package fixes [`78d4c8b`](https://github.com/oceanprotocol/commons/commit/78d4c8b874ac1764c219a80231c6d06d02539ff7)
+- hotfix for Docker build [`8aadcb9`](https://github.com/oceanprotocol/commons/commit/8aadcb9d97f3f6b4b8344718d4f5bd604de0ae39)
+- Docker tweaks [`9226bf2`](https://github.com/oceanprotocol/commons/commit/9226bf2799b7c85a0c85e42c537cc53de9eabead)
+
+#### [v1.2.0](https://github.com/oceanprotocol/commons/compare/v1.1.4...v1.2.0)
+
+> 14 October 2019
+
+- Add files to IPFS during publish flow [`#191`](https://github.com/oceanprotocol/commons/pull/191)
+- working prototype of adding files to IPFS during publish flow [`1c59d49`](https://github.com/oceanprotocol/commons/commit/1c59d49d5dddcf28ed015ede4a132e6498e91711)
+- new client package-lock [`725215b`](https://github.com/oceanprotocol/commons/commit/725215b6ee0b065855f55b7124340abf63a0b357)
+- bump IPFS packages [`af8df22`](https://github.com/oceanprotocol/commons/commit/af8df224cb08e052605090f96c9a730f672a6a47)
+
+#### [v1.1.4](https://github.com/oceanprotocol/commons/compare/v1.1.3...v1.1.4)
+
+> 14 October 2019
+
+- Faucet route refactor [`#202`](https://github.com/oceanprotocol/commons/pull/202)
+- Put Channels behind feature switch [`#201`](https://github.com/oceanprotocol/commons/pull/201)
+- put channels behind feature switch [`a7209f6`](https://github.com/oceanprotocol/commons/commit/a7209f690d925d74c57b8c61498d3cea522d8f70)
+- more dynamic intro text [`e007ab2`](https://github.com/oceanprotocol/commons/commit/e007ab20901e2155bd891fd77e2d1aa98daee5f9)
+- Release 1.1.4 [`10b6623`](https://github.com/oceanprotocol/commons/commit/10b662343faa4a27bc8259f1406cf622c2c8ac67)
+
+#### [v1.1.3](https://github.com/oceanprotocol/commons/compare/v1.1.2...v1.1.3)
+
+> 8 October 2019
+
+- switch Barge to --no-commons flag [`#200`](https://github.com/oceanprotocol/commons/pull/200)
+- added token faucet functionality [`#199`](https://github.com/oceanprotocol/commons/pull/199)
+- prettier [`3235dc1`](https://github.com/oceanprotocol/commons/commit/3235dc1d5e24f314e6d9b2886d709eadc25913df)
+- - increased token amount given [`aeb24aa`](https://github.com/oceanprotocol/commons/commit/aeb24aadda30934785436a0501d57e71a69f2708)
+- Release 1.1.3 [`8f0988e`](https://github.com/oceanprotocol/commons/commit/8f0988e1b0978dc58a235edbd70bf742cb41e511)
+
+#### [v1.1.2](https://github.com/oceanprotocol/commons/compare/v1.1.1...v1.1.2)
+
+> 24 September 2019
+
+- show web3 message on asset loading failure [`#198`](https://github.com/oceanprotocol/commons/pull/198)
+- Release 1.1.2 [`29e6e8b`](https://github.com/oceanprotocol/commons/commit/29e6e8b5afdc2d085b45aa51049b9b59e501e293)
+
+#### [v1.1.1](https://github.com/oceanprotocol/commons/compare/v1.1.0...v1.1.1)
+
+> 13 September 2019
+
+- fix error output on asset details loading [`#196`](https://github.com/oceanprotocol/commons/pull/196)
+- fix event bubbling on wallet selector button [`#197`](https://github.com/oceanprotocol/commons/issues/197)
+- asset details refactor [`821f80d`](https://github.com/oceanprotocol/commons/commit/821f80da0f6c9bda862472f2a2b094a92a73ce6e)
+- Release 1.1.1 [`33b14bc`](https://github.com/oceanprotocol/commons/commit/33b14bc8e346c18e853585cd79770776d24b20ed)
+- test fixes [`12f6cfc`](https://github.com/oceanprotocol/commons/commit/12f6cfcb8049fb035bcbeabe099af51329334667)
+
+#### [v1.1.0](https://github.com/oceanprotocol/commons/compare/v1.0.2...v1.1.0)
+
+> 11 September 2019
+
+- bump to squid-js v0.7.2 [`#189`](https://github.com/oceanprotocol/commons/pull/189)
+- get faucet network from response [`#195`](https://github.com/oceanprotocol/commons/pull/195)
+- add code climate [`#194`](https://github.com/oceanprotocol/commons/pull/194)
+- Disable auto-deployments for now [`#193`](https://github.com/oceanprotocol/commons/pull/193)
+- code fixes [`1f7845a`](https://github.com/oceanprotocol/commons/commit/1f7845aa221b486abb0f51bdc156d2bed5c0e16a)
+- Release 1.1.0 [`c4029b1`](https://github.com/oceanprotocol/commons/commit/c4029b147c2bda0a846a2365f1d96555eabb454b)
+- disable auto-deployments for now [`4ae344a`](https://github.com/oceanprotocol/commons/commit/4ae344a861c76527bce8eacb55d86e83cc7c6ae9)
+
+#### [v1.0.2](https://github.com/oceanprotocol/commons/compare/v1.0.1...v1.0.2)
+
+> 2 September 2019
+
+- Fix vulnerabilities [`#190`](https://github.com/oceanprotocol/commons/pull/190)
+- Fix faucet on consume, publish category warning [`#185`](https://github.com/oceanprotocol/commons/pull/185)
+- Consume hang fix [`#184`](https://github.com/oceanprotocol/commons/pull/184)
+- Optional pricing [`#182`](https://github.com/oceanprotocol/commons/pull/182)
+- package updates and test fixes [`#179`](https://github.com/oceanprotocol/commons/pull/179)
+- Stop wallet event propagation [`#181`](https://github.com/oceanprotocol/commons/pull/181)
+- bump packages, fresh package-lock [`e2aef49`](https://github.com/oceanprotocol/commons/commit/e2aef49256047834cee004e4c5ca2a03a6d7bf2a)
+- bump packages [`b3ee23e`](https://github.com/oceanprotocol/commons/commit/b3ee23e728ab3654ad054eb166cb5e6a73ba9c4e)
+- bump packages [`509a69b`](https://github.com/oceanprotocol/commons/commit/509a69b53d773a4db77e788ffc0673ed2a846633)
+
+#### [v1.0.1](https://github.com/oceanprotocol/commons/compare/v1.0.0...v1.0.1)
+
+> 18 July 2019
+
+- Update About page [`#180`](https://github.com/oceanprotocol/commons/pull/180)
+- update about text [`8d06a67`](https://github.com/oceanprotocol/commons/commit/8d06a67e7fe24a4e420666e78d173b40feb7818b)
+- Release 1.0.1 [`3cafd60`](https://github.com/oceanprotocol/commons/commit/3cafd60b07cbe73983e898d1cd89afd1a8e7e051)
+
+### [v1.0.0](https://github.com/oceanprotocol/commons/compare/v0.6.3...v1.0.0)
+
+> 17 July 2019
+
+- Wallet selection [`#176`](https://github.com/oceanprotocol/commons/pull/176)
+- Updated the script to deploy on pacific-ocean [`#178`](https://github.com/oceanprotocol/commons/pull/178)
+- run tests against Aquarius & Brizo pacific test instances [`#173`](https://github.com/oceanprotocol/commons/pull/173)
+- Modal fixes [`#177`](https://github.com/oceanprotocol/commons/pull/177)
+- remove wallet setup from Cypress [`01fb305`](https://github.com/oceanprotocol/commons/commit/01fb305612a4c85190f569870cc1ef37a2c4593d)
+- allow login to wallets [`adf52ce`](https://github.com/oceanprotocol/commons/commit/adf52ceb77302d5a7ebe4e866766cc540f51a778)
+- fix re-renders caused by withTracker HOC [`ca58d7d`](https://github.com/oceanprotocol/commons/commit/ca58d7d0b170913352936a47cb33661f06123abb)
+
+#### [v0.6.3](https://github.com/oceanprotocol/commons/compare/v0.6.2...v0.6.3)
+
+> 9 July 2019
+
+- Release 0.6.3 [`edbc327`](https://github.com/oceanprotocol/commons/commit/edbc3276d75b5858278be050d65d5fefcf48aaae)
+- server: adapt to new tsc output [`362a266`](https://github.com/oceanprotocol/commons/commit/362a26651822f450d4b9a528c7fa46d4b9bbbfba)
+
+#### [v0.6.2](https://github.com/oceanprotocol/commons/compare/v0.6.1...v0.6.2)
+
+> 9 July 2019
+
+- Release 0.6.2 [`2a9d747`](https://github.com/oceanprotocol/commons/commit/2a9d7476c8a3038e2edcadc36df8861921512f2a)
+- server build fix [`4ed72f3`](https://github.com/oceanprotocol/commons/commit/4ed72f382c2c0ea0ee5fedc0bdb6050555b88361)
+
+#### [v0.6.1](https://github.com/oceanprotocol/commons/compare/v0.6.0...v0.6.1)
+
+> 9 July 2019
+
+- Reporting data sets [`#172`](https://github.com/oceanprotocol/commons/pull/172)
+- email sending via sendgrid [`cee4997`](https://github.com/oceanprotocol/commons/commit/cee49978c495a64b20e3a5f3a3ae296dbef140dd)
+- send Slack message [`fa078c6`](https://github.com/oceanprotocol/commons/commit/fa078c6c4c5677a3f7bc98751c5c726f377a1e00)
+- add Modal component [`cb1e0ca`](https://github.com/oceanprotocol/commons/commit/cb1e0ca624a6a0aa72b87cf913f581efbe81d320)
+
+#### [v0.6.0](https://github.com/oceanprotocol/commons/compare/v0.5.4...v0.6.0)
+
+> 4 July 2019
+
+- default all connections to Pacific [`#164`](https://github.com/oceanprotocol/commons/pull/164)
+- fix version tags, fixed squid-js [`#166`](https://github.com/oceanprotocol/commons/pull/166)
+- Connect to pacific [`#167`](https://github.com/oceanprotocol/commons/pull/167)
+- Cypress cleanup & fixes [`#165`](https://github.com/oceanprotocol/commons/pull/165)
+- End-to-end testing setup with Cypress [`#134`](https://github.com/oceanprotocol/commons/pull/134)
+- fix web3 version + use truffle-hdwallet [`d364a7b`](https://github.com/oceanprotocol/commons/commit/d364a7beef5dd547b2d41f2907736481734b1c8b)
+- add tests [`e5960d3`](https://github.com/oceanprotocol/commons/commit/e5960d3fd621ebe3d7af267d98cfcce1262e93fb)
+- fresh package-lock [`9b9db4b`](https://github.com/oceanprotocol/commons/commit/9b9db4b655b10d2255201a2abc37b234be2e9c68)
+
+#### [v0.5.4](https://github.com/oceanprotocol/commons/compare/v0.5.3...v0.5.4)
+
+> 25 June 2019
+
+- bump to squid-js v0.6.0 [`#163`](https://github.com/oceanprotocol/commons/pull/163)
+- switch to axios for file url check [`#162`](https://github.com/oceanprotocol/commons/pull/162)
+- switch to axios for file publish [`7043266`](https://github.com/oceanprotocol/commons/commit/70432662542a4de24133bfdd8906e569adfeb606)
+- Release 0.5.4 [`9699030`](https://github.com/oceanprotocol/commons/commit/96990309e044bc2355951b9c72e0f7cefdf82feb)
+- bump to squid-js v0.6.2 [`57e9cd6`](https://github.com/oceanprotocol/commons/commit/57e9cd69ffcbdb341f39349d44ea3aa785f51f65)
+
+#### [v0.5.3](https://github.com/oceanprotocol/commons/compare/v0.5.2...v0.5.3)
+
+> 19 June 2019
+
+- SEO component [`#159`](https://github.com/oceanprotocol/commons/pull/159)
+- Release 0.5.3 [`75a262f`](https://github.com/oceanprotocol/commons/commit/75a262f5d633bd0f053ead0b5fd44d4ad56bd029)
+- add robots.txt [`3024944`](https://github.com/oceanprotocol/commons/commit/30249447ceb7ccbc2b9347d7a757a93cd690fcbd)
+
+#### [v0.5.2](https://github.com/oceanprotocol/commons/compare/v0.5.1...v0.5.2)
+
+> 19 June 2019
+
+- add config values for Pacific connection [`#161`](https://github.com/oceanprotocol/commons/pull/161)
+- Refactor VersionNumbers to be sourced from squid-js [`#160`](https://github.com/oceanprotocol/commons/pull/160)
+- output overall status [`059ae62`](https://github.com/oceanprotocol/commons/commit/059ae62f967f40d9635cc729d31ab84fa913df8b)
+- switch to using squid-js for version numbers [`c4f862b`](https://github.com/oceanprotocol/commons/commit/c4f862baa5fa835ec3ff3aafeefa60f524d011b2)
+- collapse contracts by default [`838757f`](https://github.com/oceanprotocol/commons/commit/838757f5e832973f54540b0bd78fd7b6ec3fcafe)
+
+#### [v0.5.1](https://github.com/oceanprotocol/commons/compare/v0.5.0...v0.5.1)
+
+> 14 June 2019
+
+- Submarine links and Pacific support [`#158`](https://github.com/oceanprotocol/commons/pull/158)
+- link up transaction IDs with submarine, support pacific too [`97d6c27`](https://github.com/oceanprotocol/commons/commit/97d6c2756ed31f90f960dae21b8889d61232cd09)
+- link version numbers to release pages [`6f7edfa`](https://github.com/oceanprotocol/commons/commit/6f7edfa30f3b188e87cbce3c2404db313920e305)
+- Release 0.5.1 [`c063ad8`](https://github.com/oceanprotocol/commons/commit/c063ad82cb5e3a51b5083427fc50afc5b161533a)
+
+#### [v0.5.0](https://github.com/oceanprotocol/commons/compare/v0.4.5...v0.5.0)
+
+> 12 June 2019
+
+- make price a string, Aquarius 0.2.7 validation updates [`#142`](https://github.com/oceanprotocol/commons/pull/142)
+- simplify Ocean URIs and env variables, document .env usage [`#157`](https://github.com/oceanprotocol/commons/pull/157)
+- version number fixes [`#156`](https://github.com/oceanprotocol/commons/pull/156)
+- additions to Ocean versions output [`#155`](https://github.com/oceanprotocol/commons/pull/155)
+- highly simplify Ocean URIs and env variables [`4b919f2`](https://github.com/oceanprotocol/commons/commit/4b919f2ee86b5e507d293fbe6684d296c2574d28)
+- update tests [`264a066`](https://github.com/oceanprotocol/commons/commit/264a066874dbe55950f54754924e2a5c4d2b69ec)
+- mock file fetch request [`7d727bc`](https://github.com/oceanprotocol/commons/commit/7d727bcdf95ada24304cc03a2a63c35a644d2a08)
+
+#### [v0.4.5](https://github.com/oceanprotocol/commons/compare/v0.4.4...v0.4.5)
+
+> 6 June 2019
+
+- hotfix for failing server run on Docker [`#154`](https://github.com/oceanprotocol/commons/pull/154)
+- Release 0.4.5 [`e499430`](https://github.com/oceanprotocol/commons/commit/e4994308ad369595d88e1d7b524d986d80c58cd7)
+
+#### [v0.4.4](https://github.com/oceanprotocol/commons/compare/v0.4.3...v0.4.4)
+
+> 6 June 2019
+
+- switch to new Travis caching strategy [`#153`](https://github.com/oceanprotocol/commons/pull/153)
+- fix account address display in Firefox [`#152`](https://github.com/oceanprotocol/commons/pull/152)
+- Release 0.4.4 [`5f19fbe`](https://github.com/oceanprotocol/commons/commit/5f19fbe4206045a6ba086173403f1594d0806be1)
+
+#### [v0.4.3](https://github.com/oceanprotocol/commons/compare/v0.4.2...v0.4.3)
+
+> 3 June 2019
+
+- output event messages during publishing flow [`#151`](https://github.com/oceanprotocol/commons/pull/151)
+- squid-js v0.5.14 [`b27c458`](https://github.com/oceanprotocol/commons/commit/b27c458fb20af086063556831f8bc695c5f1c89b)
+- Release 0.4.3 [`303a7bf`](https://github.com/oceanprotocol/commons/commit/303a7bf12ca26a716de38ad9a14ef274c60b661b)
+- update tests [`56604b9`](https://github.com/oceanprotocol/commons/commit/56604b972c6dc99953e31cc4a4e24cd7c0e0a34e)
+
 #### [v0.4.2](https://github.com/oceanprotocol/commons/compare/v0.4.1...v0.4.2)
 
 > 31 May 2019
@@ -30,18 +394,18 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 > 28 May 2019
 
 - AI For Good: channels, new front-page & categories list [`#125`](https://github.com/oceanprotocol/commons/pull/125)
-- asset files & fixed metadata tweaks [`be6c478`](https://github.com/oceanprotocol/commons/commit/be6c478ca723e7face0fc0d37129fd9ff183cffe)
-- cleanup contentType in one central place, add more manual replacements [`5e94d73`](https://github.com/oceanprotocol/commons/commit/5e94d73197275a89e9460f98dab5408a7dc1f52a)
-- fix tests [`d74a4c0`](https://github.com/oceanprotocol/commons/commit/d74a4c0cbca57e5bf0f8e687148dd0332334acfc)
+- rebase fix [`90b163b`](https://github.com/oceanprotocol/commons/commit/90b163b2aa1703fd4e450e4e83076ed4522b0aad)
+- category search, make multiple layouts on one page possible [`1b1ac5c`](https://github.com/oceanprotocol/commons/commit/1b1ac5c9ef75e3a67d949a07e8177245e7912fe7)
+- channel teaser component, use on channels page [`1b7d343`](https://github.com/oceanprotocol/commons/commit/1b7d34398490a14a0fd62db7b28e54dab14acc30)
 
 #### [v0.3.2](https://github.com/oceanprotocol/commons/compare/v0.3.1...v0.3.2)
 
 > 27 May 2019
 
 - Add range error handling [`#144`](https://github.com/oceanprotocol/commons/pull/144)
-- rebase fix [`90b163b`](https://github.com/oceanprotocol/commons/commit/90b163b2aa1703fd4e450e4e83076ed4522b0aad)
-- category search, make multiple layouts on one page possible [`1b1ac5c`](https://github.com/oceanprotocol/commons/commit/1b1ac5c9ef75e3a67d949a07e8177245e7912fe7)
-- channel teaser component, use on channels page [`1b7d343`](https://github.com/oceanprotocol/commons/commit/1b7d34398490a14a0fd62db7b28e54dab14acc30)
+- update changelog [`7669545`](https://github.com/oceanprotocol/commons/commit/7669545d1391b764fd42419c41162182b93d9118)
+- Release 0.3.2 [`63b87cf`](https://github.com/oceanprotocol/commons/commit/63b87cfb82b410886baefe8a20da0b7f1d3ac34e)
+- add range error handling [`2687c78`](https://github.com/oceanprotocol/commons/commit/2687c7847425c549927993ee396d8e12072ad9da)
 
 #### [v0.3.1](https://github.com/oceanprotocol/commons/compare/v0.3.0...v0.3.1)
 
@@ -57,17 +421,17 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Consume feedback mesages [`#110`](https://github.com/oceanprotocol/commons/pull/110)
 - fresh package-lock [`743fe53`](https://github.com/oceanprotocol/commons/commit/743fe533dc848dd1f120e6086e3ef311a23395a0)
-- update changelog [`01e68b6`](https://github.com/oceanprotocol/commons/commit/01e68b6632b44c71ee8f6f0521d56355d2c4f6a7)
-- bump required component versions [`d6a7800`](https://github.com/oceanprotocol/commons/commit/d6a7800cc4b408f12e2e6d4b8c5c6100536ab2d7)
+- message tweaks [`0e12204`](https://github.com/oceanprotocol/commons/commit/0e12204a5a0b72b070f5b7a8cc9d14c351cff3c2)
+- message output refactor, testing [`879f511`](https://github.com/oceanprotocol/commons/commit/879f51170ea0dfdf97d72a3594ac73b920d52162)
 
 #### [v0.2.14](https://github.com/oceanprotocol/commons/compare/v0.2.13...v0.2.14)
 
 > 20 May 2019
 
 - AI Commons link [`#137`](https://github.com/oceanprotocol/commons/pull/137)
-- message tweaks [`0e12204`](https://github.com/oceanprotocol/commons/commit/0e12204a5a0b72b070f5b7a8cc9d14c351cff3c2)
-- message output refactor, testing [`879f511`](https://github.com/oceanprotocol/commons/commit/879f51170ea0dfdf97d72a3594ac73b920d52162)
 - add AI Commons logo [`081772c`](https://github.com/oceanprotocol/commons/commit/081772ce3764b95d67cf685c5d71c335c7f68d47)
+- clarify changelog updating [`bf3378b`](https://github.com/oceanprotocol/commons/commit/bf3378bc489b197cc2fc0d4f955e376b39dee1ca)
+- update changelog [`7e2d7ac`](https://github.com/oceanprotocol/commons/commit/7e2d7ac6ad06c7acd26851d95ba3ab673f7a45b9)
 
 #### [v0.2.13](https://github.com/oceanprotocol/commons/compare/v0.2.12...v0.2.13)
 
@@ -75,9 +439,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Output total assets [`#128`](https://github.com/oceanprotocol/commons/pull/128)
 - Updated Telegram link [`#138`](https://github.com/oceanprotocol/commons/pull/138)
+- output total assets in the marketplace, use new Market Provider for it [`2244082`](https://github.com/oceanprotocol/commons/commit/22440827cafb8ccc4621e49df12b96b1192dd5f0)
+- styling, AI Commons link [`e6fc7a9`](https://github.com/oceanprotocol/commons/commit/e6fc7a9085805a18a1779de4b9628dcc96403f4f)
 - update changelog [`7df6958`](https://github.com/oceanprotocol/commons/commit/7df695812325f6470cabd036f744cf2e5281ae6f)
-- Release 0.2.13 [`7a6075b`](https://github.com/oceanprotocol/commons/commit/7a6075b553050a0bc9512873fad8e56a8f4f6ee3)
-- remove AI Commons line for now [`21786a7`](https://github.com/oceanprotocol/commons/commit/21786a7d16a2e999835c85605dcdc4e23c6727ea)
 
 #### [v0.2.12](https://github.com/oceanprotocol/commons/compare/v0.2.11...v0.2.12)
 
@@ -85,9 +449,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Fix versions vwv.y.z [`#135`](https://github.com/oceanprotocol/commons/pull/135)
 - consistent AI For Good category naming [`#136`](https://github.com/oceanprotocol/commons/pull/136)
-- output total assets in the marketplace, use new Market Provider for it [`2244082`](https://github.com/oceanprotocol/commons/commit/22440827cafb8ccc4621e49df12b96b1192dd5f0)
-- styling, AI Commons link [`e6fc7a9`](https://github.com/oceanprotocol/commons/commit/e6fc7a9085805a18a1779de4b9628dcc96403f4f)
 - update changelog [`a831848`](https://github.com/oceanprotocol/commons/commit/a83184851ca1293a684463b32bd2dbc0c59d5583)
+- Release 0.2.12 [`8c4fefc`](https://github.com/oceanprotocol/commons/commit/8c4fefcee1e4c7c9e02eeb97fe90911e2bc54ef6)
 
 #### [v0.2.11](https://github.com/oceanprotocol/commons/compare/v0.2.10...v0.2.11)
 
@@ -105,7 +468,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - AI for Good category [`#126`](https://github.com/oceanprotocol/commons/pull/126)
 - Network detection tweaks [`#122`](https://github.com/oceanprotocol/commons/pull/122)
 - bump squid-js [`97b20b4`](https://github.com/oceanprotocol/commons/commit/97b20b4e9b09f3ade7d55636fb6ef169bacf4222)
-- isCorrectNetwork -> isOceanNetwork [`807723b`](https://github.com/oceanprotocol/commons/commit/807723be350a60da97f25c53eed102bafcbf1c3c)
+- isCorrectNetwork -> isOceanNetwork [`807723b`](https://github.com/oceanprotocol/commons/commit/807723be350a60da97f25c53eed102bafcbf1c3c)
 - less verbose error logging [`f49fa14`](https://github.com/oceanprotocol/commons/commit/f49fa14b2aa7d35a91f8003ddd297b4f2df8ca78)
 
 #### [v0.2.9](https://github.com/oceanprotocol/commons/compare/v0.2.8...v0.2.9)
@@ -160,7 +523,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - fix search titles [`#112`](https://github.com/oceanprotocol/commons/pull/112)
 - Release 0.2.4 [`8f832b6`](https://github.com/oceanprotocol/commons/commit/8f832b63220a46a8de0061ffc2498186e2099315)
-- update telegram link [`e6806f4`](https://github.com/oceanprotocol/commons/commit/e6806f467d6e2299bc0886eba53d0646dfa4df31)
 
 #### [v0.2.3](https://github.com/oceanprotocol/commons/compare/v0.2.2...v0.2.3)
 
@@ -317,7 +679,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - add changelog [`#33`](https://github.com/oceanprotocol/commons/pull/33)
 - Front-page tweaks & user asset list [`#19`](https://github.com/oceanprotocol/commons/pull/19)
 - add invoice view [`#29`](https://github.com/oceanprotocol/commons/pull/29)
-- root app->/client, microservice in /server [`#28`](https://github.com/oceanprotocol/commons/pull/28)
+- root app->/client, microservice in /server [`#28`](https://github.com/oceanprotocol/commons/pull/28)
 - Account & Faucet UI [`#25`](https://github.com/oceanprotocol/commons/pull/25)
 - New publish flow [`#23`](https://github.com/oceanprotocol/commons/pull/23)
 - package updates [`#27`](https://github.com/oceanprotocol/commons/pull/27)
@@ -342,4 +704,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - kick out prototyping stuff [`#58`](https://github.com/oceanprotocol/commons/issues/58)
 - one dev interface for client & server [`7e42991`](https://github.com/oceanprotocol/commons/commit/7e42991706f139a34e425dd7c20b28b4f55d77aa)
 - npm install [`07f6d22`](https://github.com/oceanprotocol/commons/commit/07f6d22a36f0f253f9a6619912489679f62218da)
-- display published [`43d0847`](https://github.com/oceanprotocol/commons/commit/43d0847d48ccf3f5796f27aae6cd179770c8a8d5)
+- start command [`c49fc85`](https://github.com/oceanprotocol/commons/commit/c49fc85017b0560cf96c7ed8e7d6e2c2ace1bff9)

README.md

@@ -1,3 +1,7 @@
+**This repo is obsolete as of Ocean V3 (Oct 2020). Superseded by [oceanprotocol/market](https://github.com/oceanprotocol/market).**
+
+----
+
 [![banner](https://raw.githubusercontent.com/oceanprotocol/art/master/github/repo-banner%402x.png)](https://oceanprotocol.com)
 
 <h1 align="center">Commons</h1>
@@ -6,11 +10,10 @@
 > https://commons.oceanprotocol.com
 
 [![Build Status](https://travis-ci.com/oceanprotocol/commons.svg?branch=master)](https://travis-ci.com/oceanprotocol/commons)
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/6a19987e62344b1c9c1d5bc9f315c733)](https://www.codacy.com/app/ocean-protocol/commons)
-[![Codacy Badge](https://api.codacy.com/project/badge/Coverage/6a19987e62344b1c9c1d5bc9f315c733)](https://www.codacy.com/app/ocean-protocol/commons)
+[![Maintainability](https://api.codeclimate.com/v1/badges/ed6e8212a8d294b6aa88/maintainability)](https://codeclimate.com/github/oceanprotocol/commons/maintainability)
+[![Test Coverage](https://api.codeclimate.com/v1/badges/ed6e8212a8d294b6aa88/test_coverage)](https://codeclimate.com/github/oceanprotocol/commons/test_coverage)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-7b1173.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![js oceanprotocol](https://img.shields.io/badge/js-oceanprotocol-7b1173.svg)](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
-[![css bigchaindb](https://img.shields.io/badge/css-bigchaindb-39BA91.svg)](https://github.com/bigchaindb/stylelint-config-bigchaindb)
 
 <img width="1218" alt="Commons UI" src="https://user-images.githubusercontent.com/90316/55874266-296ef080-5b92-11e9-8ac6-2423cb2a80fb.png">
 
@@ -23,9 +26,16 @@
 If you're a developer and want to contribute to, or want to utilize this marketplace's code in your projects, then keep on reading.
 
 - [🏄 Get Started](#-get-started)
-  - [🏖 Remote Ocean: Nile](#-remote-ocean-nile)
+  - [🏖 Remote Ocean: Pacific](#-remote-ocean-pacific)
   - [🐳 Use with Barge](#-use-with-barge)
+  - [⛵️ Environment Variables](#️-environment-variables)
+    - [Client](#client)
+    - [Server](#server)
+    - [Feature Switches](#feature-switches)
+    - [More Settings](#more-settings)
 - [👩‍🔬 Testing](#-testing)
+  - [Unit Tests](#unit-tests)
+  - [End-to-End Integration Tests](#end-to-end-integration-tests)
 - [✨ Code Style](#-code-style)
 - [🛳 Production](#-production)
 - [⬆️ Releases](#️-releases)
@@ -38,7 +48,7 @@ If you're a developer and want to contribute to, or want to utilize this marketp
 This repo contains a client and a server, both written in TypeScript:
 
 - **client**: React app setup with [squid-js](https://github.com/oceanprotocol/squid-js), bootstrapped with [Create React App](https://github.com/facebook/create-react-app)
-- **server**: Node.js app, utilizing [Express](https://expressjs.com). The server provides various microservices, like remote file checking.
+- **server**: Node.js app, utilizing [Express](https://expressjs.com). The server provides various microservices, like remote file checking. The endpoints are documented in [server Readme](server/).
 
 To spin up both, the client and the server in a watch mode for local development, execute:
 
@@ -49,39 +59,115 @@ npm start
 
 Open [http://localhost:3000](http://localhost:3000) to view the client in the browser. The page will reload if you make edits to files in either `./client` or `./server`.
 
-### 🏖 Remote Ocean: Nile
+### 🏖 Remote Ocean: Pacific
 
-To make use of all the functionality, you need to connect to the Ocean network. By default, the client will connect to Ocean components running within [Ocean's Nile test network](https://docs.oceanprotocol.com/concepts/testnets/#the-nile-testnet) remotely.
+To make use of all the functionality, you need to connect to an Ocean network.
 
-This means you need to connect with your MetaMask to the Nile network too. To do this:
+By default, the client will connect to Ocean components running within [Ocean's Pacific network](https://docs.oceanprotocol.com/concepts/pacific-network/) remotely.
+
+By default, the client uses a burner wallet connected to the correct network automatically. If you choose to use MetaMask, you need to connect to the Pacific network. To do this:
 
 1. select Custom RPC in the network dropdown in MetaMask
-2. under New Network, enter `https://nile.dev-ocean.com` as the custom RPC URL
-3. Hit _Save_, and you’re now connected to Nile
+2. under New Network, enter `https://pacific.oceanprotocol.com` as the custom RPC URL
+3. Hit _Save_, and you’re now connected to Pacific
 
 ### 🐳 Use with Barge
 
-If you prefer to connect to locally running components instead of remote connections to Ocean's Nile network, you can spin up [`barge`](https://github.com/oceanprotocol/barge) and use a local network:
+If you prefer to connect to locally running components instead of remote connections to Ocean's Nile network, you can spin up [`barge`](https://github.com/oceanprotocol/barge) and use a local Spree network:
 
 ```bash
 git clone git@github.com:oceanprotocol/barge.git
 cd barge
 
-./start_ocean.sh --latest --no-pleuston --local-spree-node
+# startup with local Spree node
+./start_ocean.sh --no-commons
 ```
 
-Modify `./client/src/config.ts` to use those local connections.
+Then set [environment variables](#️-environment-variables) to use those local connections.
+
+Finally, you need to copy the generated contract artifacts out of the Docker container. To do this, execute this script in another terminal:
+
+```bash
+./scripts/keeper.sh
+```
+
+The script will wait for all contracts to be generated in the `keeper-contracts` Docker container, then will copy the artifacts in place.
+
+If you are on macOS, you need to additionally tweak your `/etc/hosts` file so Brizo can connect to Aquarius. This is only required on macOS and is a [known limitation of Docker for Mac](https://docs.docker.com/docker-for-mac/networking/#known-limitations-use-cases-and-workarounds):
+
+```bash
+sudo vi /etc/hosts
+
+# add this line, and save
+127.0.0.1    aquarius
+```
+
+Then use this host for the local Aquarius url in the client config:
+
+```bash
+REACT_APP_AQUARIUS_URI="http://aquarius:5000"
+```
+
+### ⛵️ Environment Variables
+
+#### Client
+
+The `./client/src/config.ts` file is setup to prioritize environment variables for setting each Ocean component endpoint.
+
+By setting environment variables, you can easily switch between Ocean networks the commons client connects to, without directly modifying `./client/src/config.ts`. This is helpful e.g. for local development so you don't accidentially commit changes to the config file.
+
+For local development, you can use a `.env.local` file. There's an example file with the most common network configurations preconfigured:
+
+```bash
+cp client/.env.local.example client/.env.local
+
+# uncomment the config you need
+vi client/.env.local
+```
+
+#### Server
+
+The server uses its own environment variables too:
+
+```bash
+cp server/.env.example server/.env
+
+# edit variables
+vi server/.env
+```
+
+#### Feature Switches
+
+Beside configuring the network endpopints, the client allows to activate some features with environment variables in `client/.env.local`:
+
+| Env Variable                           | Feature Description                                                                                                                                                      |
+| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `REACT_APP_SHOW_CHANNELS`              | Show the channels feature which shows assets based on a certain tag in a prominent view. This is deeactivated by default and only activated in live Commons deployments. |
+| `REACT_APP_SHOW_REQUEST_TOKENS_BUTTON` | Shows a second button on the `/faucet` route to request Ocean Tokens in addition to Ether. Will only work in Ocean testnets.                                             |
+| `REACT_APP_ALLOW_PRICING`              | Activate pricing feature. Will show a price input during publish flow, and output prices for each data asset.                                                            |
+
+#### More Settings
+
+| Env Variable                                                          | Example                                | Feature Description                               |
+| --------------------------------------------------------------------- | -------------------------------------- | ------------------------------------------------- |
+| client: `REACT_APP_IPFS_GATEWAY_URI`<br /> server: `IPFS_GATEWAY_URI` | `"https://ipfs.oceanprotocol.com"`     | The IPFS gateway URI.                             |
+| `REACT_APP_IPFS_NODE_URI`                                             | `"https://ipfs.oceanprotocol.com:443"` | The IPFS node URI used to add files to IPFS.      |
+| `REACT_APP_REPORT_EMAIL`                                              | `"jelly@mcjellyfish.com"`              | The email used for the _report an asset_ feature. |
 
 ## 👩‍🔬 Testing
 
-Test suite is setup with [Jest](https://jestjs.io) and [react-testing-library](https://github.com/kentcdodds/react-testing-library).
+Test suite is setup with [Jest](https://jestjs.io) and [react-testing-library](https://github.com/kentcdodds/react-testing-library) for unit testing, and [Cypress](https://www.cypress.io) for integration testing.
 
-To run all tests, including all linting tests:
+To run all linting, unit and integration tests in one go, run:
 
 ```bash
 npm test
 ```
 
+The endpoints the integration tests run against are defined by your [Environment Variables](#️-Environment-Variables), and Cypress-specific variables in `cypress.json`.
+
+### Unit Tests
+
 For local development, you can start the test runners for client & server in a watch mode.
 
 ```bash
@@ -98,12 +184,28 @@ cd server/
 npm run test:watch
 ```
 
+### End-to-End Integration Tests
+
+To run all integration tests in headless mode, run:
+
+```bash
+npm run test:e2e
+```
+
+This will automatically spin up all required resources to run the integrations tests, and then run them.
+
+You can also use the UI of Cypress to run and inspect the integration tests locally:
+
+```bash
+npm run cypress:open
+```
+
 ## ✨ Code Style
 
 For linting and auto-formatting you can use from the root of the project:
 
 ```bash
-# auto format all ts & css with eslint & stylelint
+# auto format all ts & css with eslint
 npm run lint
 
 # auto format all ts & css with prettier, taking all configs into account

client/.dockerignore

@@ -1 +1,6 @@
 node_modules
+.env.local
+.env
+build
+coverage
+__mocks__

client/.env.local.example

@@ -0,0 +1,63 @@
+#
+# When none of the following variables are set,
+# Commons will default connecting to Pacific
+#
+
+#
+# Connect to Pacific
+#
+REACT_APP_NODE_URI="https://pacific.oceanprotocol.com"
+REACT_APP_SECRET_STORE_URI="https://secret-store.oceanprotocol.com"
+REACT_APP_FAUCET_URI="https://faucet.oceanprotocol.com"
+# Pacific Test instances
+REACT_APP_AQUARIUS_URI="https://aquarius.test.oceanprotocol.com"
+REACT_APP_BRIZO_URI="https://brizo.test.oceanprotocol.com"
+REACT_APP_BRIZO_ADDRESS="0x0474ed05ba757dde575dfaaaa267d9e7f3643abc"
+# Pacific Commons instances
+# REACT_APP_AQUARIUS_URI="https://aquarius.commons.oceanprotocol.com"
+# REACT_APP_BRIZO_URI="https://brizo.commons.oceanprotocol.com"
+# REACT_APP_BRIZO_ADDRESS="0x008c25ed3594e094db4592f4115d5fa74c4f41ea"
+
+#
+# Connect to Nile
+#
+# REACT_APP_NODE_URI="https://nile.dev-ocean.com"
+# REACT_APP_SECRET_STORE_URI="https://secret-store.nile.dev-ocean.com"
+# REACT_APP_FAUCET_URI="https://faucet.nile.dev-ocean.com"
+# REACT_APP_BRIZO_ADDRESS="0x4aaab179035dc57b35e2ce066919048686f82972"
+# Nile Test instances
+# REACT_APP_AQUARIUS_URI="https://aquarius.nile.dev-ocean.com"
+# REACT_APP_BRIZO_URI="https://brizo.nile.dev-ocean.com"
+# Nile Commons instances
+# REACT_APP_AQUARIUS_URI="https://aquarius.marketplace.dev-ocean.com"
+# REACT_APP_BRIZO_URI="https://brizo.marketplace.dev-ocean.com"
+
+#
+# Connect to Duero
+#
+# REACT_APP_NODE_URI="https://duero.dev-ocean.com"
+# REACT_APP_AQUARIUS_URI="https://aquarius.duero.dev-ocean.com"
+# REACT_APP_BRIZO_URI="https://brizo.duero.dev-ocean.com"
+# REACT_APP_SECRET_STORE_URI="https://secret-store.duero.dev-ocean.com"
+# REACT_APP_FAUCET_URI="https://faucet.duero.dev-ocean.com"
+# REACT_APP_BRIZO_ADDRESS="0x9d4ed58293f71122ad6a733c1603927a150735d0"
+
+#
+# Connect to Spree (local with Barge)
+#
+# REACT_APP_NODE_URI="http://localhost:8545"
+# REACT_APP_AQUARIUS_URI="http://aquarius:5000"
+# REACT_APP_BRIZO_URI="http://localhost:8030"
+# REACT_APP_SECRET_STORE_URI="http://localhost:12001"
+# REACT_APP_FAUCET_URI="http://localhost:3001"
+# REACT_APP_BRIZO_ADDRESS="0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0"
+
+#
+# APP CONFIG
+#
+REACT_APP_REPORT_EMAIL="test@example.com"
+# REACT_APP_SHOW_CHANNELS=true
+# REACT_APP_ALLOW_PRICING=true
+# REACT_APP_SHOW_REQUEST_TOKENS_BUTTON=true
+REACT_APP_IPFS_GATEWAY_URI="https://ipfs.oceanprotocol.com"
+REACT_APP_IPFS_NODE_URI="https://ipfs.oceanprotocol.com:443"

client/Dockerfile

@@ -1,20 +1,23 @@
 FROM node:11-alpine
 LABEL maintainer="Ocean Protocol <devops@oceanprotocol.com>"
 
-RUN apk add --no-cache --update\
-    bash\
-    g++\
-    gcc\
-    git\
-    gettext\
-    make\
-    python
+RUN apk add --no-cache --update \
+    bash \
+    g++ \
+    gcc \
+    git \
+    gettext \
+    make \
+    python \
+    && rm -rf /var/cache/apk/*
+
+COPY package*.json /app/frontend/
+WORKDIR /app/frontend
+RUN npm install -g npm serve \
+    && npm install \
+    && npm cache clean --force
 
 COPY . /app/frontend
-WORKDIR /app/frontend
-
-RUN npm install -g npm serve
-RUN npm install
 RUN npm run build
 
 # Default ENV values

client/__mocks__/ocean-mock.ts

@@ -1,38 +0,0 @@
-const oceanMock = {
-    ocean: {
-        accounts: {
-            list: () => ['xxx', 'xxx']
-        },
-        aquarius: {
-            queryMetadata: () => {
-                return {
-                    results: [],
-                    totalResults: 1,
-                    totalPages: 1
-                }
-            }
-        },
-        assets: {
-            resolve: jest.fn(),
-            order: () => {
-                return {
-                    next: jest.fn()
-                }
-            },
-            consume: jest.fn()
-        },
-        keeper: {
-            conditions: {
-                accessSecretStoreCondition: {
-                    getGrantedDidByConsumer: () => {
-                        return {
-                            find: jest.fn()
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-export default oceanMock

client/package.json

@@ -1,64 +1,72 @@
 {
   "name": "commons-client",
   "description": "Ocean Protocol marketplace frontend to explore, download, and publish open data sets.",
-  "version": "0.4.2",
+  "version": "2.4.1",
   "license": "Apache-2.0",
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts --max_old_space_size=4096 build",
-    "test": "react-scripts test --coverage --watchAll=false",
+    "build": "CI=false react-scripts --max_old_space_size=4096 build",
+    "test": "react-scripts test --coverage --watchAll=false --silent",
     "test:watch": "react-scripts test --coverage",
     "eject": "react-scripts eject",
-    "coverage": "cat coverage/lcov.info | codacy-coverage --token 8801f827fe1144ffa85cd7da94f2bbf7"
+    "analyze": "source-map-explorer 'build/static/js/*.js'"
   },
   "dependencies": {
     "@oceanprotocol/art": "^2.2.0",
-    "@oceanprotocol/squid": "^0.5.12",
+    "@oceanprotocol/squid": "^2.2.0",
     "@oceanprotocol/typographies": "^0.1.0",
-    "@sindresorhus/slugify": "^0.9.1",
-    "axios": "^0.18.0",
+    "@sindresorhus/slugify": "^1.0.0",
+    "@truffle/hdwallet-provider": "^1.0.35",
+    "axios": "^0.19.2",
+    "bip39": "^3.0.2",
     "classnames": "^2.2.6",
-    "ethereum-blockies": "MyEtherWallet/blockies",
-    "filesize": "^4.1.2",
-    "history": "^4.9.0",
-    "is-url": "^1.2.4",
-    "moment": "^2.24.0",
-    "query-string": "^6.5.0",
-    "react": "^16.8.6",
-    "react-datepicker": "^2.5.0",
-    "react-dom": "^16.8.6",
-    "react-dotdotdot": "^1.3.0",
-    "react-ga": "^2.5.7",
-    "react-helmet": "^5.2.1",
-    "react-markdown": "^4.0.8",
-    "react-moment": "^0.9.2",
-    "react-paginate": "^6.3.0",
-    "react-popper": "^1.3.3",
-    "react-router-dom": "^5.0.0",
-    "react-transition-group": "^4.0.0",
-    "web3": "1.0.0-beta.37"
+    "ethereum-blockies": "github:MyEtherWallet/blockies",
+    "filesize": "^6.1.0",
+    "history": "^4.10.1",
+    "ipfs-http-client": "44.2.0",
+    "is-url-superb": "^4.0.0",
+    "moment": "^2.26.0",
+    "node-sass": "^4.14.1",
+    "query-string": "^6.13.1",
+    "react": "^16.13.1",
+    "react-collapsed": "^3.0.0",
+    "react-datepicker": "^3.0.0",
+    "react-dom": "^16.13.1",
+    "react-dotdotdot": "^1.3.1",
+    "react-dropzone": "^11.0.1",
+    "react-ga": "^3.0.0",
+    "react-helmet": "^6.0.0",
+    "react-markdown": "^4.3.1",
+    "react-modal": "^3.11.2",
+    "react-moment": "^0.9.7",
+    "react-paginate": "^6.3.2",
+    "react-popper": "^1.3.7",
+    "react-router-dom": "^5.2.0",
+    "react-transition-group": "^4.4.1",
+    "shortid": "^2.2.15",
+    "web3": "^1.2.8"
   },
   "devDependencies": {
     "@react-mock/state": "^0.1.8",
-    "@testing-library/react": "^8.0.1",
-    "@types/classnames": "^2.2.7",
-    "@types/filesize": "^4.1.0",
+    "@sheerun/mutationobserver-shim": "^0.3.3",
+    "@testing-library/jest-dom": "^5.9.0",
+    "@testing-library/react": "^10.2.1",
+    "@types/classnames": "^2.2.10",
     "@types/is-url": "^1.2.28",
-    "@types/jest": "^24.0.12",
-    "@types/react": "^16.8.15",
-    "@types/react-datepicker": "^2.3.0",
-    "@types/react-dom": "^16.8.4",
-    "@types/react-dotdotdot": "^1.2.0",
-    "@types/react-helmet": "^5.0.8",
+    "@types/jest": "^26.0.0",
+    "@types/react": "^16.9.35",
+    "@types/react-datepicker": "^2.11.0",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-helmet": "^6.0.0",
+    "@types/react-modal": "^3.10.5",
     "@types/react-paginate": "^6.2.1",
-    "@types/react-router-dom": "^4.3.2",
-    "@types/react-transition-group": "^2.9.1",
-    "@types/web3": "^1.0.18",
-    "jest-dom": "^3.1.4",
-    "jest-mock-axios": "^3.0.0",
-    "node-sass": "^4.12.0",
-    "react-scripts": "^3.0.0",
-    "typescript": "3.4.5"
+    "@types/react-router-dom": "^5.1.5",
+    "@types/react-transition-group": "^4.4.0",
+    "@types/shortid": "^0.0.29",
+    "jest-mock-axios": "^4.2.0",
+    "react-scripts": "^3.4.1",
+    "source-map-explorer": "^2.4.2",
+    "typescript": "^3.9.3"
   },
   "repository": {
     "type": "git",
@@ -73,7 +81,8 @@
   "jest": {
     "collectCoverageFrom": [
       "src/**/*.{ts,tsx}",
-      "!src/serviceWorker.ts"
+      "!src/serviceWorker.ts",
+      "!src/**/*.d.ts"
     ]
   }
 }

client/public/index.html

@@ -12,39 +12,6 @@
 
         <title>Commons</title>
 
-        <meta
-            content="A marketplace to find and publish open data sets in the Ocean Network."
-            name="description"
-        />
-        <meta
-            content="https://commons.oceanprotocol.com/share.png"
-            name="image"
-        />
-        <link href="https://commons.oceanprotocol.com" rel="canonical" />
-
-        <meta content="https://commons.oceanprotocol.com" property="og:url" />
-        <meta content="Commons" property="og:title" />
-        <meta
-            content="A marketplace to find and publish open data sets in the Ocean Network."
-            property="og:description"
-        />
-        <meta
-            content="https://commons.oceanprotocol.com/share.png"
-            property="og:image"
-        />
-
-        <meta content="summary_large_image" name="twitter:card" />
-        <meta content="@oceanprotocol" name="twitter:creator" />
-        <meta content="Commons" name="twitter:title" />
-        <meta
-            content="A marketplace to find and publish open data sets in the Ocean Network."
-            name="twitter:description"
-        />
-        <meta
-            content="https://commons.oceanprotocol.com/share.png"
-            name="twitter:image"
-        />
-
         <style>
             .loader {
                 display: block;

client/public/manifest.json

@@ -21,5 +21,5 @@
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#141414",
-  "background_color": "#141414"
+  "background_color": "#ffffff"
 }

client/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /search

client/src/@types/global.d.ts

@@ -0,0 +1,9 @@
+import Web3 from 'web3'
+import { Eth } from 'web3/eth'
+
+declare global {
+    interface Window {
+        web3: Web3
+        ethereum: Eth
+    }
+}

client/src/@types/node_modules.d.ts

@@ -3,3 +3,8 @@
 declare module 'ethereum-blockies' {
     export function toDataUrl(address: string): string
 }
+
+declare module 'ipfs'
+declare module 'ipfs-http-client'
+declare module 'react-collapsed'
+declare module 'filesize'

client/src/App.test.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import App from './App'
 import { User } from './context'
-import { userMock, userMockConnected } from '../__mocks__/user-mock'
+import { userMock, userMockConnected } from './__mocks__/user-mock'
 
 describe('App', () => {
     it('should be able to run tests', () => {

client/src/Routes.test.tsx

@@ -3,7 +3,7 @@ import { BrowserRouter as Router } from 'react-router-dom'
 import { render } from '@testing-library/react'
 import Routes from './Routes'
 import { User } from './context'
-import { userMockConnected } from '../__mocks__/user-mock'
+import { userMockConnected } from './__mocks__/user-mock'
 
 describe('Routes', () => {
     it('renders without crashing', () => {

client/src/Routes.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Route, Switch } from 'react-router-dom'
-import withTracker from './hoc/withTracker'
+import { showChannels } from './config'
 
 import About from './routes/About'
 import Home from './routes/Home'
@@ -17,17 +17,21 @@ import Channel from './components/templates/Channel'
 
 const Routes = () => (
     <Switch>
-        <Route component={withTracker(Home)} exact path="/" />
-        <Route component={withTracker(Styleguide)} path="/styleguide" />
-        <Route component={withTracker(About)} path="/about" />
-        <Route component={withTracker(Publish)} path="/publish" />
-        <Route component={withTracker(Search)} path="/search" />
-        <Route component={withTracker(Asset)} path="/asset/:did" />
-        <Route component={withTracker(Faucet)} path="/faucet" />
-        <Route component={withTracker(History)} path="/history" />
-        <Route component={withTracker(Channels)} exact path="/channels" />
-        <Route component={withTracker(Channel)} path="/channels/:channel" />
-        <Route component={withTracker(NotFound)} />
+        <Route component={Home} exact path="/" />
+        <Route component={Styleguide} path="/styleguide" />
+        <Route component={About} path="/about" />
+        <Route component={Publish} path="/publish" />
+        <Route component={Search} path="/search" />
+        <Route component={Asset} path="/asset/:did" />
+        <Route component={Faucet} path="/faucet" />
+        <Route component={History} path="/history" />
+        {showChannels && (
+            <>
+                <Route component={Channels} exact path="/channels" />
+                <Route component={Channel} path="/channels/:channel" />
+            </>
+        )}
+        <Route component={NotFound} />
     </Switch>
 )
 

client/src/__mocks__/ddo-mock.ts

@@ -0,0 +1,10 @@
+import { DDO } from '@oceanprotocol/squid'
+
+const ddoMock = ({
+    id: 'xxx',
+    findServiceByType: () => {
+        return { index: 'xxx' }
+    }
+} as any) as DDO
+
+export default ddoMock

client/src/__mocks__/market-mock.ts

@@ -0,0 +1,8 @@
+const marketMock = {
+    totalAssets: 1000,
+    categories: ['category'],
+    network: 'Pacific',
+    networkMatch: true
+}
+
+export { marketMock }

client/src/__mocks__/ocean-mock.ts

@@ -0,0 +1,76 @@
+const oceanMock = {
+    ocean: {
+        accounts: {
+            list: () => ['xxx', 'xxx']
+        },
+        aquarius: {
+            queryMetadata: () => {
+                return {
+                    results: [],
+                    totalResults: 1,
+                    totalPages: 1
+                }
+            }
+        },
+        assets: {
+            query: () => {
+                return {
+                    results: [],
+                    page: 1,
+                    /* eslint-disable @typescript-eslint/camelcase */
+                    total_pages: 1611,
+                    total_results: 1611
+                    /* eslint-enable @typescript-eslint/camelcase */
+                }
+            },
+            resolve: jest.fn(),
+            order: () => {
+                return {
+                    next: jest.fn()
+                }
+            },
+            consume: jest.fn()
+        },
+        keeper: {
+            conditions: {
+                accessSecretStoreCondition: {
+                    getGrantedDidByConsumer: () => {
+                        return {
+                            find: jest.fn()
+                        }
+                    }
+                }
+            }
+        },
+        versions: {
+            get: jest.fn(() =>
+                Promise.resolve({
+                    squid: {
+                        name: 'Squid-js',
+                        status: 'Working'
+                    },
+                    aquarius: {
+                        name: 'Aquarius',
+                        status: 'Working'
+                    },
+                    brizo: {
+                        name: 'Brizo',
+                        network: 'Nile',
+                        status: 'Working',
+                        contracts: {
+                            hello: 'hello',
+                            hello2: 'hello2'
+                        }
+                    },
+                    status: {
+                        ok: true,
+                        network: true,
+                        contracts: true
+                    }
+                })
+            )
+        }
+    }
+}
+
+export default oceanMock

client/src/__mocks__/user-mock.ts

@@ -3,30 +3,32 @@ import oceanMock from './ocean-mock'
 const userMock = {
     isLogged: false,
     isLoading: false,
-    isWeb3: false,
-    isOceanNetwork: false,
+    isBurner: false,
+    isWeb3Capable: false,
     account: '',
     web3: {},
     ...oceanMock,
     balance: { eth: 0, ocn: 0 },
     network: '',
     requestFromFaucet: jest.fn(),
-    unlockAccounts: jest.fn(),
+    loginMetamask: jest.fn(),
+    loginBurnerWallet: jest.fn(),
     message: ''
 }
 
 const userMockConnected = {
     isLogged: true,
     isLoading: false,
-    isWeb3: true,
-    isOceanNetwork: true,
+    isBurner: false,
+    isWeb3Capable: true,
     account: '0xxxxxx',
     web3: {},
     ...oceanMock,
     balance: { eth: 0, ocn: 0 },
     network: '',
     requestFromFaucet: jest.fn(),
-    unlockAccounts: jest.fn(),
+    loginMetamask: jest.fn(),
+    loginBurnerWallet: jest.fn(),
     message: ''
 }
 

client/src/components/atoms/Account.module.scss

@@ -2,18 +2,82 @@
 
 .account {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     text-align: left;
 
-    > div {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-family: $font-family-monospace;
-        font-size: $font-size-small;
+    > div:first-of-type {
+        flex: 0 0 80%;
     }
 }
 
+.accountId {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: $font-family-monospace;
+    font-size: $font-size-small;
+    font-weight: 700;
+}
+
+.unlock {
+    font-size: $font-size-small !important;
+    margin-left: $spacer / 2;
+}
+
+.accountType {
+    width: 100%;
+    margin-left: calc(1.5rem + #{$spacer / 3});
+    font-size: $font-size-small;
+    font-weight: $font-weight-bold;
+    color: $brand-grey-light;
+}
+
+.toggle {
+    background: none;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    color: inherit;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+
+    svg {
+        display: inline-block;
+        fill: currentColor;
+        margin-right: $spacer / 8;
+        transition: 0.2s ease-out;
+    }
+}
+
+.open {
+    transform: rotate(90deg);
+}
+
+.seedphrase {
+    margin-top: $spacer / 2;
+    margin-left: calc(1.5rem + #{$spacer / 4});
+    margin-right: calc(1.5rem + #{$spacer / 4});
+
+    code {
+        display: block;
+        text-align: center;
+        padding: $spacer / 2 $spacer;
+        border-radius: $border-radius;
+        background: $body-background;
+        border: 1px solid $brand-grey-lighter;
+        margin-bottom: $spacer / 4;
+        word-break: normal;
+    }
+}
+
+.seedphraseHelp {
+    color: $brand-grey-light;
+    font-size: $font-size-small;
+    margin: 0;
+}
+
 .blockies {
     width: 1.5rem;
     height: 1.5rem;
@@ -21,4 +85,5 @@
     display: inline-block;
     margin-right: $spacer / 3;
     margin-left: 0;
+    border: 1px solid $brand-grey-lighter;
 }

client/src/components/atoms/Account.test.tsx

@@ -1,28 +1,61 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 import { toDataUrl } from 'ethereum-blockies'
 import Account from './Account'
+import { User } from '../../context'
+import { userMockConnected } from '../../__mocks__/user-mock'
 
 describe('Account', () => {
     it('renders without crashing', () => {
-        const { container } = render(<Account account={'0xxxxxxxxxxxxxxx'} />)
+        const { container } = render(
+            <User.Provider
+                value={{ ...userMockConnected, account: '0xxxxxxxxxxxxxxx' }}
+            >
+                <Account />
+            </User.Provider>
+        )
         expect(container.firstChild).toBeInTheDocument()
     })
 
     it('outputs empty state without account', () => {
-        const { container } = render(<Account account={''} />)
+        const { container, getByText } = render(
+            <User.Provider value={{ ...userMockConnected, account: '' }}>
+                <Account />
+            </User.Provider>
+        )
         expect(container.firstChild).toHaveTextContent('No account selected')
+        fireEvent.click(getByText('Unlock Account'))
     })
 
     it('outputs blockie img', () => {
         const account = '0xxxxxxxxxxxxxxx'
         const blockies = toDataUrl(account)
 
-        const { container } = render(<Account account={account} />)
+        const { container } = render(
+            <User.Provider value={{ ...userMockConnected, account }}>
+                <Account />
+            </User.Provider>
+        )
         expect(container.querySelector('.blockies')).toBeInTheDocument()
         expect(container.querySelector('.blockies')).toHaveAttribute(
             'src',
             blockies
         )
     })
+
+    it('Account info can be toggled', () => {
+        const { container, getByText } = render(
+            <User.Provider
+                value={{
+                    ...userMockConnected,
+                    isBurner: true,
+                    account: '0xxxxxxxxxxxxxxx'
+                }}
+            >
+                <Account />
+            </User.Provider>
+        )
+        expect(container.firstChild).toBeInTheDocument()
+        fireEvent.click(getByText('Burner Wallet'))
+    })
 })

client/src/components/atoms/Account.tsx

@@ -1,19 +1,90 @@
-import React from 'react'
+import React, { PureComponent, MouseEvent } from 'react'
 import Dotdotdot from 'react-dotdotdot'
 import { toDataUrl } from 'ethereum-blockies'
 import styles from './Account.module.scss'
+import WalletSelector from '../organisms/WalletSelector'
+import content from '../../data/web3message.json'
+import { ReactComponent as Caret } from '../../img/caret.svg'
+import { User } from '../../context'
+import Button from './Button'
 
-const Account = ({ account }: { account: string }) => {
-    const blockies = account && toDataUrl(account)
+export default class Account extends PureComponent<
+    {},
+    { isAccountInfoOpen: boolean }
+> {
+    public static contextType = User
 
-    return account && blockies ? (
-        <div className={styles.account}>
-            <img className={styles.blockies} src={blockies} alt="Blockies" />
-            <Dotdotdot clamp={1}>{account}</Dotdotdot>
-        </div>
-    ) : (
-        <em>No account selected</em>
-    )
+    public state = {
+        isAccountInfoOpen: false
+    }
+
+    private toggleAccountInfo(event: MouseEvent) {
+        event.preventDefault()
+        this.setState({ isAccountInfoOpen: !this.state.isAccountInfoOpen })
+    }
+
+    public render() {
+        const { account, isBurner, loginMetamask, isWeb3Capable } = this.context
+        const { isAccountInfoOpen } = this.state
+        const seedphrase = localStorage.getItem('seedphrase') as string
+        const blockies = account && toDataUrl(account)
+
+        return (
+            <div className={styles.account}>
+                {account ? (
+                    <>
+                        <img
+                            className={styles.blockies}
+                            src={blockies}
+                            alt="Blockies"
+                        />
+                        <Dotdotdot className={styles.accountId} clamp={2}>
+                            {account}
+                        </Dotdotdot>
+                    </>
+                ) : (
+                    <>
+                        <span className={styles.blockies} />
+                        <em className={styles.noAccount}>
+                            No account selected
+                        </em>
+                        <Button
+                            link
+                            className={styles.unlock}
+                            onClick={() => loginMetamask()}
+                        >
+                            Unlock Account
+                        </Button>
+                    </>
+                )}
+
+                <div className={styles.accountType}>
+                    {isBurner ? (
+                        <button
+                            className={styles.toggle}
+                            onClick={(event) => this.toggleAccountInfo(event)}
+                            title="Show More Account Info"
+                        >
+                            <Caret
+                                className={isAccountInfoOpen ? styles.open : ''}
+                            />{' '}
+                            Burner Wallet
+                        </button>
+                    ) : (
+                        'MetaMask'
+                    )}
+                    {isWeb3Capable && <WalletSelector />}
+                </div>
+
+                {isBurner && isAccountInfoOpen && (
+                    <div className={styles.seedphrase}>
+                        <code>{seedphrase}</code>
+                        <p className={styles.seedphraseHelp}>
+                            {content.seedphrase}
+                        </p>
+                    </div>
+                )}
+            </div>
+        )
+    }
 }
-
-export default Account

client/src/components/atoms/Button.module.scss

@@ -13,10 +13,10 @@
     font-weight: $font-weight-bold;
     text-transform: uppercase;
     border-radius: 2px;
-    transition: .2s ease-out;
+    transition: 0.2s ease-out;
     color: $brand-white;
     background: $brand-grey-light;
-    box-shadow: 0 9px 18px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 9px 18px 0 rgba(0, 0, 0, 0.1);
     min-height: 45px;
     user-select: none;
 
@@ -25,21 +25,21 @@
         color: $brand-white;
         background: $brand-grey-light;
         text-decoration: none;
-        transform: translate3d(0, -.05rem, 0);
-        box-shadow: 0 12px 30px 0 rgba(0, 0, 0, .1);
+        transform: translate3d(0, -0.05rem, 0);
+        box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.1);
     }
 
     &:active {
         background: $brand-grey-light;
         transition: none;
         transform: none;
-        box-shadow: 0 5px 18px 0 rgba(0, 0, 0, .1);
+        box-shadow: 0 5px 18px 0 rgba(0, 0, 0, 0.1);
     }
 
     &:disabled {
         cursor: not-allowed;
         pointer-events: none;
-        opacity: .5;
+        opacity: 0.5;
     }
 }
 

client/src/components/atoms/Button.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import { Link } from 'react-router-dom'
 import cx from 'classnames'
 import styles from './Button.module.scss'
@@ -12,49 +12,37 @@ interface ButtonProps {
     onClick?: any
     disabled?: boolean
     to?: string
+    name?: string
 }
 
-export default class Button extends PureComponent<ButtonProps, any> {
-    public render() {
-        let classes
-        const {
-            primary,
-            link,
-            href,
-            children,
-            className,
-            to,
-            ...props
-        } = this.props
-
-        if (primary) {
-            classes = styles.buttonPrimary
-        } else if (link) {
-            classes = styles.link
-        } else {
-            classes = styles.button
-        }
-
-        if (to) {
-            return (
-                <Link to={to} className={cx(classes, className)} {...props}>
-                    {children}
-                </Link>
-            )
-        }
-
-        if (href) {
-            return (
-                <a href={href} className={cx(classes, className)} {...props}>
-                    {children}
-                </a>
-            )
-        }
-
-        return (
-            <button className={cx(classes, className)} {...props}>
-                {children}
-            </button>
-        )
-    }
+function getClasses(primary: boolean | undefined, link: boolean | undefined) {
+    return primary ? styles.buttonPrimary : link ? styles.link : styles.button
 }
+
+const Button = ({
+    primary,
+    link,
+    href,
+    children,
+    className,
+    to,
+    ...props
+}: ButtonProps) => {
+    const classes = getClasses(primary, link)
+
+    return to ? (
+        <Link to={to} className={cx(classes, className)} {...props}>
+            {children}
+        </Link>
+    ) : href ? (
+        <a href={href} className={cx(classes, className)} {...props}>
+            {children}
+        </a>
+    ) : (
+        <button className={cx(classes, className)} {...props}>
+            {children}
+        </button>
+    )
+}
+
+export default Button

client/src/components/atoms/CategoryImage.module.scss

@@ -8,8 +8,8 @@
     background-color: $body-background;
     border-radius: $border-radius;
     overflow: hidden;
-    opacity: .85;
-    transition: .2s ease-out;
+    opacity: 0.85;
+    transition: 0.2s ease-out;
     border: 1px solid $brand-grey-lighter;
 }
 
@@ -21,5 +21,5 @@
 
 .dimmed {
     composes: categoryImage;
-    opacity: .6;
+    opacity: 0.6;
 }

client/src/components/atoms/CategoryImage.test.tsx

@@ -5,7 +5,7 @@ import formPublish from '../../data/form-publish.json'
 
 describe('CategoryImage', () => {
     it('renders fallback image', () => {
-        const { container } = render(<CategoryImage category={''} />)
+        const { container } = render(<CategoryImage category="" />)
         expect(container.firstChild).toBeInTheDocument()
         expect(container.firstChild.style.backgroundImage).toMatch(
             /jellyfish-back/

client/src/components/atoms/Form/Input.module.scss

@@ -31,8 +31,8 @@
         width: 1.25rem;
         height: 1.25rem;
         top: 50%;
-        margin-top: -.6rem;
-        fill: rgba($brand-grey-light, .7);
+        margin-top: -0.6rem;
+        fill: rgba($brand-grey-light, 0.7);
     }
 }
 
@@ -48,7 +48,7 @@
     padding: $spacer / 3;
     margin: 0;
     border-radius: $border-radius;
-    transition: .2s ease-out;
+    transition: 0.2s ease-out;
     min-height: 43px;
     appearance: none;
 
@@ -63,8 +63,8 @@
         font-size: $font-size-base;
         color: $brand-grey-light;
         font-weight: $font-weight-base;
-        transition: .2s ease-out;
-        opacity: .7;
+        transition: 0.2s ease-out;
+        opacity: 0.7;
     }
 
     &[readonly],
@@ -95,7 +95,6 @@
     border: 0;
 
     // custom arrow
-    // stylelint-disable
     background-image: linear-gradient(45deg, transparent 50%, $brand-purple 50%),
         linear-gradient(135deg, $brand-purple 50%, transparent 50%),
         linear-gradient(
@@ -107,7 +106,6 @@
     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;
-    // stylelint-enable
     background-repeat: no-repeat;
 
     &:focus {
@@ -153,7 +151,7 @@
     font-size: $font-size-small;
     line-height: 1.2;
     border: 2px solid $brand-grey-lighter;
-    border-radius: .2rem;
+    border-radius: 0.2rem;
     position: absolute;
     left: 0;
     right: 0;

client/src/components/atoms/Form/Input.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 import Input from './Input'
 
 describe('Input', () => {
@@ -7,10 +7,10 @@ describe('Input', () => {
         const { container } = render(<Input name="my-input" label="My Input" />)
         expect(container.firstChild).toBeInTheDocument()
         expect(container.querySelector('.label')).toHaveTextContent('My Input')
-        expect(container.querySelector('.input')).toHaveAttribute(
-            'id',
-            'my-input'
-        )
+
+        const input = container.querySelector('.input')
+        expect(input).toHaveAttribute('id', 'my-input')
+        input && fireEvent.focus(input)
     })
 
     it('renders as text input by default', () => {
@@ -25,13 +25,13 @@ describe('Input', () => {
         const { container } = render(
             <Input name="my-input" label="My Input" type="search" />
         )
-        expect(container.querySelector('.input')).toHaveAttribute(
-            'type',
-            'search'
-        )
+        const input = container.querySelector('.input')
+        expect(input).toHaveAttribute('type', 'search')
         expect(container.querySelector('label + div')).toHaveClass(
             'inputWrapSearch'
         )
+
+        input && fireEvent.focus(input)
     })
 
     it('renders select', () => {

client/src/components/atoms/Form/Input.tsx

@@ -30,6 +30,7 @@ interface InputProps {
     rows?: number
     group?: any
     multiple?: boolean
+    pattern?: string
 }
 
 interface InputState {
@@ -55,7 +56,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
         }
     }
 
-    public toggleFocus = () => {
+    public handleFocus = () => {
         this.setState({ isFocused: !this.state.isFocused })
     }
 
@@ -93,8 +94,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
                             className={styles.select}
                             name={name}
                             required={required}
-                            onFocus={this.toggleFocus}
-                            onBlur={this.toggleFocus}
+                            onFocus={this.handleFocus}
+                            onBlur={this.handleFocus}
                             onChange={onChange}
                             value={value}
                         >
@@ -116,8 +117,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
                         <textarea
                             id={name}
                             className={styles.input}
-                            onFocus={this.toggleFocus}
-                            onBlur={this.toggleFocus}
+                            onFocus={this.handleFocus}
+                            onBlur={this.handleFocus}
                             {...this.props}
                         />
                     </div>
@@ -153,8 +154,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
                             selected={this.state.dateCreated}
                             onChange={this.handleDateChange}
                             className={styles.input}
-                            onFocus={this.toggleFocus}
-                            onBlur={this.toggleFocus}
+                            onFocus={this.handleFocus}
+                            onBlur={this.handleFocus}
                             id={name}
                             name={name}
                         />
@@ -169,8 +170,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
                                     id={name}
                                     type={type || 'text'}
                                     className={styles.input}
-                                    onFocus={this.toggleFocus}
-                                    onBlur={this.toggleFocus}
+                                    onFocus={this.handleFocus}
+                                    onBlur={this.handleFocus}
                                     {...this.props}
                                 />
                                 {group}
@@ -180,8 +181,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
                                 id={name}
                                 type={type || 'text'}
                                 className={styles.input}
-                                onFocus={this.toggleFocus}
-                                onBlur={this.toggleFocus}
+                                onFocus={this.handleFocus}
+                                onBlur={this.handleFocus}
                                 {...this.props}
                             />
                         )}

client/src/components/atoms/Form/InputDate.module.scss

@@ -39,7 +39,9 @@
     max-width: 16rem;
 }
 
-:global .react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle:before,
+:global
+    .react-datepicker-popper[data-placement^='top']
+    .react-datepicker__triangle:before,
 :global .react-datepicker__year-read-view--down-arrow:before,
 :global .react-datepicker__month-read-view--down-arrow:before,
 :global .react-datepicker__month-year-read-view--down-arrow:before {

client/src/components/atoms/Form/Label.module.scss

@@ -17,6 +17,6 @@
         font-size: $font-size-base;
         color: $brand-grey-light;
         display: inline-block;
-        margin-left: .1rem;
+        margin-left: 0.1rem;
     }
 }

client/src/components/atoms/Markdown.test.tsx

@@ -4,7 +4,7 @@ import Markdown from './Markdown'
 
 describe('Markdown', () => {
     it('renders without crashing', () => {
-        const { container } = render(<Markdown text={'#hello'} />)
+        const { container } = render(<Markdown text="#hello" />)
         expect(container.firstChild).toBeInTheDocument()
     })
 })

client/src/components/atoms/Modal.module.scss

@@ -0,0 +1,93 @@
+@import '../../styles/variables';
+
+// prevent background scrolling
+:global(.ReactModal__Body--open) {
+    overflow: hidden;
+}
+
+.modalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba($brand-black, 0.7);
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    animation: fadeIn 0.2s ease-out backwards;
+}
+
+.modal {
+    padding: $spacer;
+    border-radius: $border-radius;
+    background: $body-background;
+    margin: $spacer auto;
+    max-width: $break-point--small;
+    position: relative;
+    animation: moveUp 0.2s ease-out backwards;
+
+    @media (min-width: $break-point--small) {
+        padding: $spacer * 2 $spacer * 1.5;
+    }
+
+    &:focus {
+        outline: 0;
+    }
+}
+
+.header {
+    margin-bottom: $spacer;
+}
+
+.title {
+    font-size: $font-size-h3;
+    margin: 0;
+
+    @media (min-width: $break-point--small) {
+        font-size: $font-size-h2;
+    }
+}
+
+.description {
+    margin: 0;
+    margin-top: $spacer / 2;
+}
+
+.close {
+    position: absolute;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    box-shadow: none;
+    outline: 0;
+    top: $spacer / 4;
+    right: $spacer / 2;
+    font-size: $font-size-h2;
+    color: $brand-grey;
+
+    &:hover,
+    &:focus {
+        opacity: 0.7;
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes moveUp {
+    from {
+        transform: translate3d(0, 1rem, 0);
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}

client/src/components/atoms/Modal.test.tsx

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

client/src/components/atoms/Modal.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import ReactModal from 'react-modal'
+import styles from './Modal.module.scss'
+
+if (process.env.NODE_ENV !== 'test') ReactModal.setAppElement('#root')
+
+const Modal = ({
+    title,
+    description,
+    isOpen,
+    onToggleModal,
+    children,
+    onAfterOpen,
+    onRequestClose,
+    ...props
+}: {
+    title: string
+    description?: string
+    isOpen: boolean
+    onToggleModal: () => void
+    children: any
+    onAfterOpen?: () => void
+    onRequestClose?: () => void
+}) => {
+    return (
+        <ReactModal
+            isOpen={isOpen}
+            onAfterOpen={onAfterOpen}
+            onRequestClose={onRequestClose}
+            contentLabel={title}
+            className={styles.modal}
+            overlayClassName={styles.modalOverlay}
+            {...props}
+        >
+            <button
+                className={styles.close}
+                onClick={onToggleModal}
+                data-testid="closeModal"
+            >
+                &times;
+            </button>
+
+            <header className={styles.header}>
+                <h2 className={styles.title}>{title}</h2>
+                {description && (
+                    <p className={styles.description}>{description}</p>
+                )}
+            </header>
+
+            {children}
+        </ReactModal>
+    )
+}
+
+export default Modal

client/src/components/atoms/Seo.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { Helmet } from 'react-helmet'
+import { withRouter, RouteComponentProps } from 'react-router-dom'
+import meta from '../../data/meta.json'
+import imageDefault from '../../img/share.png'
+
+const MetaTags = ({
+    title,
+    description,
+    url,
+    image
+}: {
+    title: string
+    description: string
+    url: string
+    image: string
+}) => (
+    <Helmet defaultTitle={meta.title} titleTemplate={`%s - ${meta.title}`}>
+        <html lang="en" />
+
+        {title && <title>{title}</title>}
+
+        {/* General tags */}
+        <meta name="description" content={description} />
+        <meta name="image" content={image} />
+        <link rel="canonical" href={url} />
+
+        {/* OpenGraph tags */}
+        <meta property="og:url" content={url} />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={description} />
+        <meta property="og:image" content={image} />
+
+        {/* Twitter Card tags */}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:creator" content="@oceanprotocol" />
+        <meta name="twitter:title" content={title} />
+        <meta name="twitter:description" content={description} />
+        <meta name="twitter:image" content={image} />
+
+        {/* Prevent search engine indexing except for live */}
+        {window.location.hostname !== 'commons.oceanprotocol.com' && (
+            <meta name="robots" content="noindex,nofollow" />
+        )}
+    </Helmet>
+)
+
+interface SeoProps extends RouteComponentProps {
+    title?: string
+    description?: string
+    shareImage?: string
+}
+
+const Seo = ({ title, description, shareImage, location }: SeoProps) => {
+    title = title || meta.title
+    description = description || meta.description
+    shareImage = shareImage || meta.url + imageDefault
+
+    const url = meta.url + location.pathname + location.search
+
+    return (
+        <MetaTags
+            title={title}
+            description={description}
+            url={url}
+            image={shareImage}
+        />
+    )
+}
+
+export default withRouter(Seo)

client/src/components/atoms/Spinner.module.scss

@@ -20,7 +20,7 @@
         border-radius: 50%;
         border: 2px solid $brand-purple;
         border-top-color: $brand-violet;
-        animation: spinner .6s linear infinite;
+        animation: spinner 0.6s linear infinite;
     }
 }
 
@@ -29,6 +29,20 @@
     padding-top: $spacer / 4;
 }
 
+.small {
+    composes: spinner;
+    margin: 0;
+    display: inline-block;
+
+    &:before {
+        width: $font-size-small;
+        height: $font-size-small;
+        margin-top: -($font-size-small);
+        margin-left: -($font-size-small / 2);
+        border-width: 0.1rem;
+    }
+}
+
 @keyframes spinner {
     to {
         transform: rotate(360deg);

client/src/components/atoms/Spinner.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Spinner from './Spinner'
+
+describe('Spinner', () => {
+    it('renders without crashing', () => {
+        const { container } = render(<Spinner />)
+        expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('renders small variant', () => {
+        const { container } = render(<Spinner small />)
+        expect(container.firstChild).toBeInTheDocument()
+    })
+})

client/src/components/atoms/Spinner.tsx

@@ -1,15 +1,27 @@
 import React from 'react'
 import styles from './Spinner.module.scss'
 
-const Spinner = ({ message }: { message?: string }) => (
-    <div className={styles.spinner}>
-        {message && (
-            <div
-                className={styles.spinnerMessage}
-                dangerouslySetInnerHTML={{ __html: message }}
-            />
-        )}
-    </div>
-)
+const Spinner = ({
+    message,
+    small,
+    className
+}: {
+    message?: string
+    small?: boolean
+    className?: string
+}) => {
+    const classes = className || (small ? styles.small : styles.spinner)
+
+    return (
+        <div className={classes}>
+            {message && (
+                <div
+                    className={styles.spinnerMessage}
+                    dangerouslySetInnerHTML={{ __html: message }}
+                />
+            )}
+        </div>
+    )
+}
 
 export default Spinner

client/src/components/atoms/VersionNumbers.module.scss

@@ -1,21 +0,0 @@
-@import '../../styles/variables';
-
-.version {
-    font-family: $font-family-monospace;
-    font-size: $font-size-mini;
-    margin-top: $spacer;
-}
-
-.more {
-    cursor: help;
-    display: inline-block;
-    margin-left: $spacer / 4;
-    margin-bottom: -.1rem;
-    vertical-align: middle;
-
-    svg {
-        width: $font-size-mini;
-        height: $font-size-mini;
-        fill: currentColor;
-    }
-}

client/src/components/atoms/VersionNumbers.test.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import { render, waitForElement } from '@testing-library/react'
-import mockAxios from 'jest-mock-axios'
-import VersionNumbers from './VersionNumbers'
-
-afterEach(() => {
-    mockAxios.reset()
-})
-
-describe('VersionNumbers', () => {
-    it('renders without crashing', () => {
-        const { container } = render(<VersionNumbers />)
-        expect(container.firstChild).toBeInTheDocument()
-    })
-
-    it('returns component versions in link title, prefixed with `v`', async () => {
-        const { getByTitle } = render(<VersionNumbers />)
-        mockAxios.mockResponse({ data: { version: '6.6.6' } })
-        expect(mockAxios.get).toHaveBeenCalled()
-        await waitForElement(() => getByTitle(/v6.6.6/))
-    })
-})

client/src/components/atoms/VersionNumbers.tsx

@@ -1,110 +0,0 @@
-import React, { PureComponent } from 'react'
-import { Logger } from '@oceanprotocol/squid'
-import axios from 'axios'
-import { version } from '../../../package.json'
-import { version as versionSquid } from '@oceanprotocol/squid/package.json'
-import styles from './VersionNumbers.module.scss'
-
-import {
-    aquariusHost,
-    aquariusPort,
-    aquariusScheme,
-    brizoHost,
-    brizoPort,
-    brizoScheme,
-    faucetHost,
-    faucetPort,
-    faucetScheme
-} from '../../config'
-
-const commonsVersion =
-    process.env.NODE_ENV === 'production' ? `v${version}` : `v${version}-dev`
-
-interface VersionNumbersState {
-    commons: string
-    squidJs: string
-    aquarius: string
-    brizo: string
-    faucet: string
-}
-
-export default class VersionNumbers extends PureComponent<
-    {},
-    VersionNumbersState
-> {
-    public state = {
-        commons: commonsVersion,
-        squidJs: `v${versionSquid}`,
-        aquarius: 'v0.0.0',
-        brizo: 'v0.0.0',
-        faucet: 'v0.0.0'
-    }
-
-    // for canceling axios requests
-    public signal = axios.CancelToken.source()
-
-    public componentWillMount() {
-        this.setComponentVersions()
-    }
-
-    public componentWillUnmount() {
-        this.signal.cancel()
-    }
-
-    private async setComponentVersions() {
-        try {
-            const versionAquarius = await this.getVersion(
-                aquariusScheme,
-                aquariusHost,
-                aquariusPort
-            )
-            this.setState({ aquarius: `v${versionAquarius}` })
-
-            const versionBrizo = await this.getVersion(
-                brizoScheme,
-                brizoHost,
-                brizoPort
-            )
-            this.setState({ brizo: `v${versionBrizo}` })
-
-            const versionFaucet = await this.getVersion(
-                faucetScheme,
-                faucetHost,
-                faucetPort
-            )
-            this.setState({ faucet: `v${versionFaucet}` })
-        } catch (error) {
-            !axios.isCancel(error) && Logger.error(error.message)
-        }
-    }
-
-    private async getVersion(
-        scheme: string,
-        host: string,
-        port: number | string
-    ) {
-        const { data } = await axios.get(`${scheme}://${host}:${port}`, {
-            headers: { Accept: 'application/json' },
-            cancelToken: this.signal.token
-        })
-        const { version } = data
-        return version
-    }
-
-    public render() {
-        const { commons, squidJs, brizo, aquarius, faucet } = this.state
-
-        const componentsOutput = `Squid-js ${squidJs}  \nBrizo ${brizo} \nAquarius ${aquarius} \nFaucet ${faucet}`
-
-        return (
-            <p className={styles.version}>
-                <a
-                    title={componentsOutput}
-                    href={`https://github.com/oceanprotocol/commons/releases/tag/${commons}`}
-                >
-                    {commons}
-                </a>
-            </p>
-        )
-    }
-}

client/src/components/molecules/AccountStatus/Indicator.module.scss

@@ -4,10 +4,10 @@
     display: inline-block;
     position: relative;
     cursor: help;
-    padding: .5rem;
+    padding: 0.5rem;
 }
 
-// default: red square
+/* default: red square */
 .statusIndicator {
     width: $font-size-small;
     height: $font-size-small;
@@ -15,7 +15,7 @@
     background: $red;
 }
 
-// yellow triangle
+/* yellow triangle */
 .statusIndicatorCloseEnough {
     composes: statusIndicator;
     background: none;
@@ -26,7 +26,7 @@
     border-bottom: $font-size-small solid $yellow;
 }
 
-// green circle
+/* green circle */
 .statusIndicatorActive {
     composes: statusIndicator;
     border-radius: 50%;

client/src/components/molecules/AccountStatus/Indicator.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import cx from 'classnames'
-import { User } from '../../../context'
+import { User, Market } from '../../../context'
 import styles from './Indicator.module.scss'
 
 const Indicator = ({
@@ -19,15 +19,19 @@ const Indicator = ({
         ref={forwardedRef}
     >
         <User.Consumer>
-            {states =>
-                !states.isWeb3 ? (
-                    <span className={styles.statusIndicator} />
-                ) : !states.isLogged || !states.isOceanNetwork ? (
-                    <span className={styles.statusIndicatorCloseEnough} />
-                ) : states.isLogged ? (
-                    <span className={styles.statusIndicatorActive} />
-                ) : null
-            }
+            {(user) => (
+                <Market.Consumer>
+                    {(market) =>
+                        !user.isLogged || !market.networkMatch ? (
+                            <span
+                                className={styles.statusIndicatorCloseEnough}
+                            />
+                        ) : user.isLogged ? (
+                            <span className={styles.statusIndicatorActive} />
+                        ) : null
+                    }
+                </Market.Consumer>
+            )}
         </User.Consumer>
     </div>
 )

client/src/components/molecules/AccountStatus/Popover.module.scss

@@ -7,12 +7,12 @@ $popoverWidth: 18rem;
     width: $popoverWidth;
     padding: $spacer / 2;
     background: $brand-black;
-    border-radius: .1rem;
-    border: .1rem solid $brand-grey-light;
-    box-shadow: 0 6px 16px 0 rgba($brand-black, .3);
+    border-radius: 0.1rem;
+    border: 0.1rem solid $brand-grey-light;
+    box-shadow: 0 6px 16px 0 rgba($brand-black, 0.3);
     color: $brand-grey-light;
     font-size: $font-size-small;
-    animation: showPopup .2s ease-in forwards;
+    animation: showPopup 0.2s ease-in forwards;
     white-space: initial;
     text-align: left;
 }
@@ -28,7 +28,7 @@ $popoverWidth: 18rem;
 }
 
 .popoverInfoline {
-    border-bottom: .05rem solid $brand-grey;
+    border-bottom: 0.05rem solid $brand-grey;
     padding: $spacer / 3 0;
 
     &:first-child {
@@ -41,7 +41,10 @@ $popoverWidth: 18rem;
     }
 
     button {
-        font-size: $font-size-small;
+        svg,
+        &[data-action] {
+            display: none;
+        }
     }
 }
 
@@ -50,6 +53,10 @@ $popoverWidth: 18rem;
     margin-left: $spacer / 2;
     white-space: nowrap;
 
+    strong {
+        color: $brand-grey-lighter;
+    }
+
     &:first-child {
         margin-left: 0;
     }

client/src/components/molecules/AccountStatus/Popover.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import Popover from './Popover'
-import { userMock, userMockConnected } from '../../../../__mocks__/user-mock'
-import { User } from '../../../context'
+import { userMock, userMockConnected } from '../../../__mocks__/user-mock'
+import { marketMock } from '../../../__mocks__/market-mock'
+import { User, Market } from '../../../context'
 
 describe('Popover', () => {
     it('renders without crashing', () => {
@@ -25,12 +26,14 @@ describe('Popover', () => {
 
     it('renders correct network', () => {
         const { container } = render(
-            <User.Provider value={{ ...userMockConnected, network: 'Nile' }}>
-                <Popover forwardedRef={() => null} style={{}} />
+            <User.Provider value={{ ...userMockConnected, network: 'Pacific' }}>
+                <Market.Provider value={{ ...marketMock }}>
+                    <Popover forwardedRef={() => null} style={{}} />
+                </Market.Provider>
             </User.Provider>
         )
         expect(container.firstChild).toBeInTheDocument()
-        expect(container.firstChild).toHaveTextContent('Connected to Nile')
+        expect(container.firstChild).toHaveTextContent('Connected to Pacific')
     })
 
     it('renders with wrong network', () => {
@@ -38,7 +41,6 @@ describe('Popover', () => {
             <User.Provider
                 value={{
                     ...userMockConnected,
-                    isOceanNetwork: false,
                     network: '1'
                 }}
             >

client/src/components/molecules/AccountStatus/Popover.tsx

@@ -1,20 +1,16 @@
 import React, { PureComponent } from 'react'
 import Account from '../../atoms/Account'
-import { User } from '../../../context'
+import { User, Market } from '../../../context'
 import styles from './Popover.module.scss'
 
 export default class Popover extends PureComponent<{
-    forwardedRef: (ref: HTMLElement | null) => void
-    style: React.CSSProperties
+    forwardedRef?: (ref: HTMLElement | null) => void
+    style?: React.CSSProperties
 }> {
+    public static contextType = User
+
     public render() {
-        const {
-            account,
-            balance,
-            network,
-            isWeb3,
-            isOceanNetwork
-        } = this.context
+        const { account, balance, network } = this.context
 
         return (
             <div
@@ -22,46 +18,46 @@ export default class Popover extends PureComponent<{
                 ref={this.props.forwardedRef}
                 style={this.props.style}
             >
-                {!isWeb3 ? (
+                <div className={styles.popoverInfoline}>
+                    <Account />
+                </div>
+
+                {account && balance && (
                     <div className={styles.popoverInfoline}>
-                        No Web3 detected. Use a browser with MetaMask installed
-                        to publish assets.
+                        <span
+                            className={styles.balance}
+                            title={(balance.eth / 1e18).toFixed(10)}
+                        >
+                            <strong>
+                                {(balance.eth / 1e18).toFixed(3).slice(0, -1)}
+                            </strong>{' '}
+                            ETH
+                        </span>
+                        <span className={styles.balance}>
+                            <strong>{balance.ocn}</strong> OCEAN
+                        </span>
                     </div>
-                ) : (
-                    <>
-                        <div className={styles.popoverInfoline}>
-                            <Account account={account} />
-                        </div>
-
-                        {account && balance && (
-                            <div className={styles.popoverInfoline}>
-                                <span
-                                    className={styles.balance}
-                                    title={(balance.eth / 1e18).toFixed(10)}
-                                >
-                                    <strong>
-                                        {(balance.eth / 1e18)
-                                            .toFixed(3)
-                                            .slice(0, -1)}
-                                    </strong>{' '}
-                                    ETH
-                                </span>
-                                <span className={styles.balance}>
-                                    <strong>{balance.ocn}</strong> OCEAN
-                                </span>
-                            </div>
-                        )}
+                )}
 
+                <Market.Consumer>
+                    {(market) => (
                         <div className={styles.popoverInfoline}>
-                            {network && !isOceanNetwork
-                                ? 'Please connect to Custom RPC\n https://nile.dev-ocean.com'
+                            {network && !market.networkMatch
+                                ? `Please connect to Custom RPC
+                                           ${
+                                               market.network === 'Pacific'
+                                                   ? 'https://pacific.oceanprotocol.com'
+                                                   : market.network === 'Nile'
+                                                   ? 'https://nile.dev-ocean.com'
+                                                   : market.network === 'Duero'
+                                                   ? 'https://duero.dev-ocean.com'
+                                                   : 'http://localhost:8545'
+                                           }`
                                 : network && `Connected to ${network} network`}
                         </div>
-                    </>
-                )}
+                    )}
+                </Market.Consumer>
             </div>
         )
     }
 }
-
-Popover.contextType = User

client/src/components/molecules/AccountStatus/index.test.tsx

@@ -10,9 +10,7 @@ describe('AccountStatus', () => {
 
     it('togglePopover fires', () => {
         const { container } = render(<AccountStatus />)
-
-        const indicator = container.querySelector('.statusIndicator')
-
+        const indicator = container.querySelector('.status')
         indicator && fireEvent.mouseOver(indicator)
         expect(container.querySelector('.popover')).toBeInTheDocument()
         indicator && fireEvent.mouseOut(indicator)

client/src/components/molecules/AccountStatus/index.tsx

@@ -20,7 +20,7 @@ export default class AccountStatus extends PureComponent<
     }
 
     private togglePopover() {
-        this.setState(prevState => ({
+        this.setState((prevState) => ({
             isPopoverOpen: !prevState.isPopoverOpen
         }))
     }
@@ -29,7 +29,7 @@ export default class AccountStatus extends PureComponent<
         return (
             <Manager>
                 <Reference>
-                    {({ ref }) => (
+                    {({ ref }: { ref: any }) => (
                         <AccountIndicator
                             togglePopover={() => this.togglePopover()}
                             className={this.props.className}
@@ -39,7 +39,15 @@ export default class AccountStatus extends PureComponent<
                 </Reference>
                 {this.state.isPopoverOpen && (
                     <Popper placement="auto">
-                        {({ ref, style, placement }) => (
+                        {({
+                            ref,
+                            style,
+                            placement
+                        }: {
+                            ref: any
+                            style: any
+                            placement: any
+                        }) => (
                             <AccountPopover
                                 forwardedRef={ref}
                                 style={style}

client/src/components/molecules/AssetTeaser.module.scss

@@ -32,6 +32,7 @@
     h1 {
         font-size: $font-size-large;
         margin-top: 0;
+        margin-bottom: $spacer / 4;
     }
 }
 
@@ -89,7 +90,18 @@
 }
 
 .assetFooter {
-    margin-top: $spacer / 2;
+    margin-top: $spacer;
     font-size: $font-size-small;
     color: $brand-grey-light;
+    display: flex;
+    justify-content: space-between;
+}
+
+.price {
+    font-size: $font-size-mini;
+
+    span {
+        color: $brand-grey;
+        font-size: $font-size-small;
+    }
 }

client/src/components/molecules/AssetTeaser.tsx

@@ -5,6 +5,8 @@ import Dotdotdot from 'react-dotdotdot'
 import cx from 'classnames'
 import styles from './AssetTeaser.module.scss'
 import CategoryImage from '../atoms/CategoryImage'
+import { allowPricing } from '../../config'
+import Web3 from 'web3'
 
 const AssetTeaser = ({
     asset,
@@ -15,18 +17,18 @@ const AssetTeaser = ({
     list?: boolean
     minimal?: boolean
 }) => {
-    const { metadata } = asset.findServiceByType('Metadata')
-    const { base } = metadata
+    const { attributes } = asset.findServiceByType('metadata')
+    const { main, additionalInformation } = attributes
 
     return list ? (
         <article className={styles.assetList}>
             <Link to={`/asset/${asset.id}`}>
-                <h1>{base.name}</h1>
+                <h1>{main.name}</h1>
                 <div
                     className={styles.date}
-                    title={`Published on ${base.datePublished}`}
+                    title={`Published on ${main.datePublished}`}
                 >
-                    {moment(base.datePublished, 'YYYYMMDD').fromNow()}
+                    {moment(main.datePublished, 'YYYYMMDD').fromNow()}
                 </div>
             </Link>
         </article>
@@ -37,18 +39,36 @@ const AssetTeaser = ({
             }
         >
             <Link to={`/asset/${asset.id}`}>
-                {base.categories && !minimal && (
-                    <CategoryImage dimmed category={base.categories[0]} />
-                )}
-                <h1>{base.name}</h1>
+                {additionalInformation &&
+                    additionalInformation.categories &&
+                    !minimal && (
+                        <CategoryImage
+                            dimmed
+                            category={additionalInformation.categories[0]}
+                        />
+                    )}
+                <h1>{main.name}</h1>
 
-                {!minimal && (
+                {additionalInformation && !minimal && (
                     <div className={styles.description}>
-                        <Dotdotdot clamp={3}>{base.description}</Dotdotdot>
+                        <Dotdotdot clamp={3}>
+                            {additionalInformation.description}
+                        </Dotdotdot>
                     </div>
                 )}
                 <footer className={styles.assetFooter}>
-                    {base.categories && <div>{base.categories[0]}</div>}
+                    {additionalInformation &&
+                        additionalInformation.categories && (
+                            <div>{additionalInformation.categories[0]}</div>
+                        )}
+                    {allowPricing && (
+                        <div className={styles.price}>
+                            <span>
+                                {Web3.utils.fromWei(main.price.toString())}
+                            </span>{' '}
+                            OCEAN
+                        </div>
+                    )}
                 </footer>
             </Link>
         </article>

client/src/components/molecules/Dropzone.module.scss

@@ -0,0 +1,45 @@
+@import '../../styles/variables';
+
+.dropzone {
+    margin-top: $spacer;
+    margin-bottom: $spacer;
+    border: 0.2rem dashed $brand-grey-lighter;
+    border-radius: $border-radius * 2;
+    padding: $spacer;
+    background: $brand-white;
+    transition: 0.2s ease-out;
+    cursor: pointer;
+
+    p {
+        text-align: center;
+        margin-bottom: 0;
+        font-size: $font-size-small;
+        color: $brand-grey-light;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+        border-color: $brand-grey-light;
+        outline: 0;
+    }
+}
+
+.dragover {
+    composes: dropzone;
+    border-color: $brand-pink;
+}
+
+.disabled {
+    composes: dropzone;
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.dropzoneFiles {
+    padding: $spacer 0;
+
+    ul {
+        margin: 0;
+    }
+}

client/src/components/molecules/Dropzone.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { fireEvent, render, act } from '@testing-library/react'
+import Dropzone from './Dropzone'
+
+function mockData(files: any) {
+    return {
+        dataTransfer: {
+            files,
+            items: files.map((file: any) => ({
+                kind: 'file',
+                type: file.type,
+                getAsFile: () => file
+            })),
+            types: ['Files']
+        }
+    }
+}
+
+function flushPromises(ui: any, container: any) {
+    return new Promise((resolve) =>
+        setImmediate(() => {
+            render(ui, { container })
+            resolve(container)
+        })
+    )
+}
+
+function dispatchEvt(node: any, type: string, data: any) {
+    const event = new Event(type, { bubbles: true })
+    Object.assign(event, data)
+    fireEvent(node, event)
+}
+
+test('invoke onDragEnter when dragenter event occurs', async () => {
+    const file = new File([JSON.stringify({ ping: true })], 'ping.json', {
+        type: 'application/json'
+    })
+    const data = mockData([file])
+    const handleOnDrop = jest.fn()
+
+    await act(async () => {
+        const ui = <Dropzone handleOnDrop={handleOnDrop} />
+        const { container } = render(ui)
+
+        // drop a file
+        const dropzone = container.querySelector('div')
+        dispatchEvt(dropzone, 'dragenter', data)
+        dispatchEvt(dropzone, 'dragover', data)
+        dispatchEvt(dropzone, 'drop', data)
+        await flushPromises(ui, container)
+    })
+
+    expect(handleOnDrop).toHaveBeenCalled()
+})

client/src/components/molecules/Dropzone.tsx

@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react'
+import { useDropzone } from 'react-dropzone'
+import styles from './Dropzone.module.scss'
+import { formatBytes } from '../../utils/utils'
+
+export default function Dropzone({
+    handleOnDrop,
+    disabled,
+    multiple
+}: {
+    handleOnDrop(files: File[]): void
+    disabled?: boolean
+    multiple?: boolean
+}) {
+    const onDrop = useCallback((acceptedFiles) => handleOnDrop(acceptedFiles), [
+        handleOnDrop
+    ])
+
+    const {
+        acceptedFiles,
+        getRootProps,
+        getInputProps,
+        isDragActive,
+        isDragReject
+    } = useDropzone({ onDrop })
+
+    const files = acceptedFiles.map((file: any) => (
+        <li key={file.path}>
+            {file.path} - {formatBytes(file.size, 0)}
+        </li>
+    ))
+
+    return (
+        <>
+            {acceptedFiles.length > 0 ? (
+                <aside className={styles.dropzoneFiles}>
+                    <ul>{files}</ul>
+                </aside>
+            ) : (
+                <div
+                    {...getRootProps({
+                        className: isDragActive
+                            ? styles.dragover
+                            : disabled
+                            ? styles.disabled
+                            : styles.dropzone
+                    })}
+                >
+                    <input {...getInputProps({ multiple })} />
+                    <p>
+                        {isDragActive && !isDragReject
+                            ? `Drop it like it's hot!`
+                            : multiple
+                            ? `Drag 'n' drop some files here, or click to select files`
+                            : `Drag 'n' drop a file here, or click to select a file`}
+                        {}
+                    </p>
+                </div>
+            )}
+        </>
+    )
+}

client/src/components/molecules/JobTeaser.module.scss

@@ -0,0 +1,25 @@
+@import '../../styles/variables';
+
+.assetList {
+    color: $brand-grey-dark;
+    border-bottom: 1px solid $brand-grey-lighter;
+    padding-top: $spacer / 2;
+    padding-bottom: $spacer / 2;
+
+    h1 {
+        font-size: $font-size-base;
+        color: inherit;
+        margin: 0;
+    }
+}
+
+.listRow {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.date {
+    font-size: $font-size-small;
+    color: $brand-grey-light;
+}

client/src/components/molecules/JobTeaser.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState, useContext } from 'react'
+import { User } from '../../context'
+import moment from 'moment'
+import shortid from 'shortid'
+import styles from './JobTeaser.module.scss'
+import Dotdotdot from 'react-dotdotdot'
+
+export default function JobTeaser({ job }: { job: any }) {
+    const { ocean } = useContext(User)
+    const [assetName, setAssetName] = useState()
+    const [assetUrl, setAssetUrl] = useState()
+    useEffect(() => {
+        async function getAsset() {
+            try {
+                const {
+                    did
+                } = await (ocean as any).keeper.agreementStoreManager.getAgreement(
+                    job.agreementId
+                )
+                const asset = await (ocean as any).assets.resolve(did)
+                const { attributes } = asset.findServiceByType('metadata')
+                const { main } = attributes
+                const link = '/asset/did:op:' + did
+                setAssetName(main.name)
+                setAssetUrl(link as any)
+            } catch (error) {
+                console.log(error)
+            }
+        }
+
+        getAsset()
+    }, [ocean, job.agreementId])
+
+    return (
+        <article className={styles.assetList}>
+            <div className={styles.listRow}>
+                <h1>
+                    <a href={assetUrl}>{assetName}</a>
+                </h1>
+                <div
+                    className={styles.date}
+                    title={`Created on ${job.dateCreated}`}
+                >
+                    {moment.unix(job.dateCreated).fromNow()}
+                </div>
+            </div>
+            <div className={styles.listRow}>
+                <div>Job status</div>
+                <div>{job.statusText}</div>
+            </div>
+            <div>
+                {job.algorithmLogUrl ? (
+                    <a href={job.algorithmLogUrl}> Algorithm log</a>
+                ) : (
+                    ''
+                )}
+            </div>
+            <div>
+                {job.resultsUrl ? (
+                    <>
+                        <div>Output URL</div>
+                        {job.resultsUrl.map((result: string) => (
+                            <a href={result} key={shortid.generate()}>
+                                {' '}
+                                {result.substring(0, 52)}...
+                            </a>
+                        ))}
+                    </>
+                ) : (
+                    ''
+                )}
+            </div>
+        </article>
+    )
+}

client/src/components/molecules/Pagination.tsx

@@ -17,17 +17,18 @@ export default class Pagination extends PureComponent<
     PaginationState
 > {
     public state = { smallViewport: true }
+
     private mq = window.matchMedia && window.matchMedia('(min-width: 600px)')
 
     public componentDidMount() {
-        if (window.matchMedia) {
+        if (window && window.matchMedia) {
             this.mq.addListener(this.viewportChange)
             this.viewportChange(this.mq)
         }
     }
 
     public componentWillUnmount() {
-        if (window.matchMedia) {
+        if (window && window.matchMedia) {
             this.mq.removeListener(this.viewportChange)
         }
     }
@@ -53,11 +54,11 @@ export default class Pagination extends PureComponent<
                     // adapt based on media query match
                     marginPagesDisplayed={smallViewport ? 0 : 1}
                     pageRangeDisplayed={smallViewport ? 3 : 6}
-                    onPageChange={data => handlePageClick(data)}
+                    onPageChange={(data) => handlePageClick(data)}
                     disableInitialCallback
-                    previousLabel={'←'}
-                    nextLabel={'→'}
-                    breakLabel={'...'}
+                    previousLabel="←"
+                    nextLabel="→"
+                    breakLabel="..."
                     containerClassName={styles.pagination}
                     pageLinkClassName={styles.number}
                     activeLinkClassName={styles.current}

client/src/components/molecules/SearchResults.module.scss

@@ -0,0 +1,36 @@
+@import '../../styles/variables';
+
+.results {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: $spacer;
+    max-width: calc(18rem + #{$spacer * 2});
+    margin: auto;
+    margin-top: $spacer * 2;
+
+    @media (min-width: $break-point--small) {
+        margin-left: 0;
+        margin-right: 0;
+        max-width: none;
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: $break-point--medium) {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+.simple {
+    composes: results;
+    margin-top: 0;
+
+    @media (min-width: $break-point--medium) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+.empty {
+    text-align: center;
+    margin-top: $spacer * 4;
+    color: $brand-grey-light;
+}

client/src/components/molecules/SearchResults.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { DDO } from '@oceanprotocol/squid'
+import Spinner from '../atoms/Spinner'
+import AssetTeaser from './AssetTeaser'
+import styles from './SearchResults.module.scss'
+
+export interface SearchResultsState {
+    results: DDO[]
+    totalResults: number
+    offset: number
+    totalPages: number
+    currentPage: number
+    isLoading: boolean
+}
+
+export default function SearchResults({
+    isLoading,
+    results,
+    simpleGrid
+}: {
+    isLoading: boolean
+    results: DDO[]
+    simpleGrid?: boolean
+}) {
+    return isLoading ? (
+        <Spinner message="Searching..." />
+    ) : results && results.length ? (
+        <div className={simpleGrid ? styles.simple : styles.results}>
+            {results.map((asset: any) => (
+                <AssetTeaser key={asset.id} asset={asset} />
+            ))}
+        </div>
+    ) : (
+        <div className={styles.empty}>
+            <p>No Data Sets Found.</p>
+            <Link to="/publish">+ Publish A Data Set</Link>
+        </div>
+    )
+}

client/src/components/molecules/VersionNumbers/VersionNumber.module.scss

@@ -0,0 +1,22 @@
+@import '../../../styles/variables';
+
+.spinner {
+    composes: spinner, small from '../../atoms/Spinner.module.scss';
+    margin-right: $spacer;
+}
+
+.commit {
+    margin-left: $spacer / 8;
+
+    code {
+        color: $brand-grey-light;
+        font-size: $font-size-mini;
+    }
+}
+
+.network {
+    color: $brand-grey-light;
+    text-transform: capitalize;
+    margin-left: $spacer / 8;
+    font-size: $font-size-mini;
+}

client/src/components/molecules/VersionNumbers/VersionNumber.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import VersionNumber from './VersionNumber'
+
+describe('VersionNumber', () => {
+    it('renders without crashing', () => {
+        const { container } = render(<VersionNumber name="Commons" />)
+        expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('renders with all props set', () => {
+        const { container } = render(
+            <VersionNumber
+                name="Commons"
+                version="6.6.6"
+                network="Nile"
+                commit="xxxxxxxxxxx"
+            />
+        )
+        expect(container.firstChild).toBeInTheDocument()
+        expect(container.firstChild).toHaveTextContent('6.6.6')
+    })
+})

client/src/components/molecules/VersionNumbers/VersionNumber.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { OceanPlatformTechStatus } from '@oceanprotocol/squid'
+import slugify from '@sindresorhus/slugify'
+import Spinner from '../../atoms/Spinner'
+import styles from './VersionNumber.module.scss'
+
+const VersionNumber = ({
+    name,
+    version,
+    network,
+    status,
+    commit
+}: {
+    name: string
+    version?: string
+    network?: string
+    status?: OceanPlatformTechStatus
+    commit?: string
+}) =>
+    version ? (
+        <>
+            <a
+                href={`https://github.com/oceanprotocol/${slugify(
+                    name
+                )}/releases/tag/v${version}`}
+                title="Go to release on GitHub"
+            >
+                <code>v{version}</code>
+            </a>
+            {commit && (
+                <a
+                    href={`https://github.com/oceanprotocol/${slugify(
+                        name
+                    )}/commit/${commit}`}
+                    className={styles.commit}
+                    title={`Go to commit ${commit} on GitHub`}
+                >
+                    <code>{commit.substring(0, 7)}</code>
+                </a>
+            )}
+            {network && <span className={styles.network}>{` ${network}`}</span>}
+        </>
+    ) : (
+        <span>
+            {status === OceanPlatformTechStatus.Loading ? (
+                <Spinner className={styles.spinner} small />
+            ) : (
+                status || 'Could not get version'
+            )}
+        </span>
+    )
+
+export default VersionNumber

client/src/components/molecules/VersionNumbers/VersionStatus.module.scss

@@ -0,0 +1,37 @@
+@import '../../../styles/variables';
+
+.status {
+    text-align: center;
+    padding-top: $spacer / 2;
+    padding-bottom: $spacer;
+    display: flex;
+    justify-content: space-between;
+}
+
+.element {
+    display: inline-block;
+    margin-left: $spacer / 1.5;
+    margin-right: $spacer / 1.5;
+    text-align: center;
+}
+
+.indicator,
+.indicatorActive {
+    display: inline-block;
+    margin-right: $spacer / 4;
+    margin-bottom: -0.1rem;
+}
+
+.indicator {
+    composes: statusindicator from '../AccountStatus/Indicator.module.scss';
+}
+
+.indicatorActive {
+    composes: statusindicatoractive from '../AccountStatus/Indicator.module.scss';
+}
+
+.indicatorLabel {
+    font-family: $font-family-title;
+    color: $brand-grey;
+    text-transform: capitalize;
+}

client/src/components/molecules/VersionNumbers/VersionStatus.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import VersionStatus from './VersionStatus'
+
+describe('VersionStatus', () => {
+    it('renders without crashing', () => {
+        const { container } = render(
+            <VersionStatus
+                status={{ ok: false, contracts: false, network: false }}
+            />
+        )
+        expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('renders true states', () => {
+        const { container } = render(
+            <VersionStatus
+                status={{ ok: true, contracts: false, network: false }}
+            />
+        )
+        expect(container.firstChild).toBeInTheDocument()
+    })
+})

client/src/components/molecules/VersionNumbers/VersionStatus.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import styles from './VersionStatus.module.scss'
+
+const statusInfo: { [key: string]: string } = {
+    ok: 'Shows if connection to all component endpoints can be established.',
+    network: 'Shows if all components are on the same network.',
+    contracts: 'Shows if contracts loaded by components are the same version.'
+}
+
+const VersionStatus = ({
+    status
+}: {
+    status: { ok: boolean; network: boolean; contracts: boolean }
+}) => {
+    return (
+        <div className={styles.status}>
+            {Object.entries(status).map(([key, value]) => (
+                <div
+                    className={styles.element}
+                    key={key}
+                    title={statusInfo[key]}
+                >
+                    <span
+                        className={
+                            value === true
+                                ? styles.indicatorActive
+                                : styles.indicator
+                        }
+                    >
+                        {value}
+                    </span>
+                    <span className={styles.indicatorLabel}>
+                        {key === 'ok' ? 'components' : key}
+                    </span>
+                </div>
+            ))}
+        </div>
+    )
+}
+
+export default VersionStatus

client/src/components/molecules/VersionNumbers/VersionTable.module.scss

@@ -0,0 +1,58 @@
+@import '../../../styles/variables';
+
+.tableWrap {
+    // make 'em scrollable
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.table {
+    border-top: 1px solid $brand-grey-lighter;
+
+    table {
+        margin-left: $spacer;
+        width: calc(100% - #{$spacer});
+        margin-bottom: -1px;
+
+        td {
+            padding: $spacer / 6 $spacer / 2;
+
+            &,
+            code {
+                font-size: $font-size-mini;
+            }
+        }
+    }
+
+    td {
+        padding: $spacer / 4 $spacer / 2 $spacer / 4 $spacer * 1.3;
+        vertical-align: top;
+
+        &:last-child {
+            text-align: right;
+        }
+
+        &[colspan] {
+            padding: 0;
+        }
+    }
+
+    a {
+        &,
+        code {
+            color: $brand-grey;
+        }
+
+        &:hover,
+        &:focus {
+            &,
+            code {
+                color: $brand-pink;
+            }
+        }
+    }
+}
+
+.label {
+    min-width: 15rem;
+}

client/src/components/molecules/VersionNumbers/VersionTable.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { VersionTableContracts } from './VersionTable'
+
+describe('VersionTableContracts', () => {
+    it('renders without crashing', () => {
+        const { container } = render(
+            <VersionTableContracts
+                contracts={{ hello: 'hello', hello2: 'hello2' }}
+                network="nile"
+                keeperVersion="6.6.6"
+            />
+        )
+        expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('renders correct Submarine links', () => {
+        const { container, rerender } = render(
+            <VersionTableContracts
+                contracts={{ hello: 'hello', hello2: 'hello2' }}
+                network="duero"
+                keeperVersion="6.6.6"
+            />
+        )
+        expect(container.querySelector('tr:last-child a').href).toMatch(
+            /submarine.duero.dev-ocean/
+        )
+
+        rerender(
+            <VersionTableContracts
+                contracts={{ hello: 'hello', hello2: 'hello2' }}
+                network="nile"
+                keeperVersion="6.6.6"
+            />
+        )
+        expect(container.querySelector('tr:last-child a').href).toMatch(
+            /submarine.nile.dev-ocean/
+        )
+
+        rerender(
+            <VersionTableContracts
+                contracts={{ hello: 'hello', hello2: 'hello2' }}
+                network="pacific"
+                keeperVersion="6.6.6"
+            />
+        )
+        expect(container.querySelector('tr:last-child a').href).toMatch(
+            /submarine.oceanprotocol/
+        )
+    })
+})

client/src/components/molecules/VersionNumbers/VersionTable.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { VersionNumbersState } from '.'
+import VersionTableRow from './VersionTableRow'
+import styles from './VersionTable.module.scss'
+import VersionNumber from './VersionNumber'
+
+import {
+    serviceUri,
+    nodeUri,
+    aquariusUri,
+    brizoUri,
+    brizoAddress,
+    secretStoreUri,
+    faucetUri
+} from '../../../config'
+
+const commonsConfig = {
+    serviceUri,
+    nodeUri,
+    aquariusUri,
+    brizoUri,
+    brizoAddress,
+    secretStoreUri,
+    faucetUri
+}
+
+export const VersionTableContracts = ({
+    contracts,
+    network,
+    keeperVersion
+}: {
+    contracts: {
+        [contractName: string]: string
+    }
+    network: string
+    keeperVersion?: string
+}) => (
+    <table>
+        <tbody>
+            <tr>
+                <td>
+                    <strong>Keeper Contracts</strong>
+                </td>
+                <td>
+                    <VersionNumber
+                        name="Keeper Contracts"
+                        version={keeperVersion}
+                    />
+                </td>
+            </tr>
+            {contracts &&
+                Object.keys(contracts)
+                    // sort alphabetically
+                    .sort((a, b) => a.localeCompare(b))
+                    .map((key) => {
+                        const submarineLink = `https://submarine.${
+                            network === 'pacific'
+                                ? 'oceanprotocol'
+                                : `${network}.dev-ocean`
+                        }.com/address/${contracts[key]}`
+
+                        return (
+                            <tr key={key}>
+                                <td>
+                                    <code className={styles.label}>{key}</code>
+                                </td>
+                                <td>
+                                    <a href={submarineLink}>
+                                        <code>{contracts[key]}</code>
+                                    </a>
+                                </td>
+                            </tr>
+                        )
+                    })}
+        </tbody>
+    </table>
+)
+
+export const VersionTableCommons = () => (
+    <table>
+        <tbody>
+            {Object.entries(commonsConfig).map(([key, value]) => (
+                <tr key={key}>
+                    <td>
+                        <code className={styles.label}>{key}</code>
+                    </td>
+                    <td>
+                        <code>{value}</code>
+                    </td>
+                </tr>
+            ))}
+        </tbody>
+    </table>
+)
+
+const VersionTable = ({ data }: { data: VersionNumbersState }) => {
+    return (
+        <div className={styles.tableWrap}>
+            <table className={styles.table}>
+                <tbody>
+                    {Object.entries(data)
+                        .filter(([key]) => key !== 'status')
+                        .map(([key, value]) => (
+                            <VersionTableRow key={key} value={value} />
+                        ))}
+                </tbody>
+            </table>
+        </div>
+    )
+}
+
+export default VersionTable

client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss

@@ -0,0 +1,23 @@
+@import '../../../styles/variables';
+
+.handle {
+    display: inline-block;
+    border: 0;
+    background: none;
+    box-shadow: none;
+    padding: 0;
+    margin: 0;
+    margin-left: -1rem;
+    margin-top: -0.1rem;
+    padding-right: 0.5rem;
+    cursor: pointer;
+
+    svg {
+        fill: $brand-grey-light;
+        transition: 0.2s ease-out;
+    }
+}
+
+.open {
+    transform: rotate(90deg);
+}

client/src/components/molecules/VersionNumbers/VersionTableRow.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import useCollapse from 'react-collapsed'
+import slugify from '@sindresorhus/slugify'
+import styles from './VersionTableRow.module.scss'
+import { VersionTableContracts, VersionTableCommons } from './VersionTable'
+import VersionNumber from './VersionNumber'
+import { ReactComponent as Caret } from '../../../img/caret.svg'
+
+const VersionTableRow = ({ value }: { value: any }) => {
+    const collapseStyles = {
+        transitionDuration: '0.01s'
+    }
+
+    const expandStyles = {
+        transitionDuration: '0.01s',
+        transitionTimingFunction: 'ease-out'
+    }
+
+    const { getCollapseProps, getToggleProps, isOpen } = useCollapse({
+        collapseStyles,
+        expandStyles
+    })
+
+    return (
+        <>
+            <tr>
+                <td>
+                    {(value.name === 'Commons' || value.contracts) && (
+                        <button className={styles.handle} {...getToggleProps()}>
+                            <Caret className={isOpen ? styles.open : ''} />
+                        </button>
+                    )}
+                    <a
+                        href={`https://github.com/oceanprotocol/${slugify(
+                            value.name || value.software
+                        )}`}
+                    >
+                        <strong>{value.name || value.software}</strong>
+                    </a>
+                </td>
+                <td>
+                    <VersionNumber
+                        name={value.name || value.software}
+                        version={value.version}
+                        status={value.status}
+                        network={value.network}
+                        commit={value.commit}
+                    />
+                </td>
+            </tr>
+            {value.name === 'Commons' && (
+                <tr {...getCollapseProps()}>
+                    <td colSpan={2}>
+                        <VersionTableCommons />
+                    </td>
+                </tr>
+            )}
+            {value.contracts && (
+                <tr {...getCollapseProps()}>
+                    <td colSpan={2}>
+                        <VersionTableContracts
+                            contracts={value.contracts}
+                            network={value.network || ''}
+                            keeperVersion={value.keeperVersion}
+                        />
+                    </td>
+                </tr>
+            )}
+        </>
+    )
+}
+
+export default VersionTableRow

client/src/components/molecules/VersionNumbers/index.module.scss

@@ -0,0 +1,13 @@
+@import '../../../styles/variables';
+
+.versionsTitle {
+    font-size: $font-size-large;
+    margin-bottom: $spacer / 2;
+    margin-top: $spacer * 2;
+}
+
+.versionsMinimal {
+    font-family: $font-family-monospace;
+    font-size: $font-size-mini;
+    margin-top: $spacer;
+}

client/src/components/molecules/VersionNumbers/index.test.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import mockAxios from 'jest-mock-axios'
+import { StateMock } from '@react-mock/state'
+import VersionNumbers from '.'
+
+import { User } from '../../../context'
+import { userMockConnected } from '../../../__mocks__/user-mock'
+
+afterEach(() => {
+    mockAxios.reset()
+})
+
+const stateMockIncomplete = {
+    commons: {
+        name: 'Commons',
+        version: undefined
+    },
+    squid: {
+        name: 'Squid-js',
+        version: undefined
+    },
+    aquarius: {
+        name: 'Aquarius',
+        version: undefined
+    },
+    brizo: {
+        name: 'Brizo',
+        version: undefined,
+        contracts: undefined,
+        network: undefined,
+        keeperVersion: undefined,
+        keeperUrl: undefined
+    },
+    faucet: {
+        name: 'Faucet',
+        version: undefined,
+        network: undefined
+    },
+    status: {
+        ok: false,
+        network: false,
+        contracts: false
+    }
+}
+
+const mockResponse = {
+    data: {
+        software: 'Faucet',
+        version: '6.6.6',
+        network: 'Pacific'
+    }
+}
+
+const mockResponseFaulty = {
+    status: 404,
+    statusText: 'Not Found',
+    data: {}
+}
+
+describe('VersionNumbers', () => {
+    it('renders without crashing', () => {
+        const { container, rerender } = render(
+            <User.Provider value={userMockConnected}>
+                <VersionNumbers account="0x00000" />
+            </User.Provider>
+        )
+        mockAxios.mockResponse(mockResponse)
+        expect(mockAxios.get).toHaveBeenCalled()
+        expect(container.firstChild).toBeInTheDocument()
+
+        rerender(
+            <User.Provider value={userMockConnected}>
+                <VersionNumbers account="0x99999" />
+            </User.Provider>
+        )
+        mockAxios.mockResponse(mockResponse)
+        expect(mockAxios.get).toHaveBeenCalled()
+    })
+
+    it('renders without proper component response', () => {
+        const { container } = render(
+            <User.Provider value={userMockConnected}>
+                <StateMock state={stateMockIncomplete}>
+                    <VersionNumbers account="0x00000" />
+                </StateMock>
+            </User.Provider>
+        )
+        mockAxios.mockResponse(mockResponseFaulty)
+        expect(mockAxios.get).toHaveBeenCalled()
+        expect(container.querySelector('table')).toHaveTextContent(
+            'Could not get version'
+        )
+    })
+})

client/src/components/molecules/VersionNumbers/index.tsx

@@ -0,0 +1,181 @@
+import React, { PureComponent } from 'react'
+import {
+    OceanPlatformVersions,
+    OceanPlatformTechStatus,
+    Logger
+} from '@oceanprotocol/squid'
+import axios from 'axios'
+import { version } from '../../../../package.json'
+import styles from './index.module.scss'
+
+import { nodeUri, faucetUri } from '../../../config'
+import { User, Market } from '../../../context'
+
+import VersionTable from './VersionTable'
+import VersionStatus from './VersionStatus'
+
+interface VersionNumbersProps {
+    minimal?: boolean
+    account: string
+}
+
+export interface VersionNumbersState extends OceanPlatformVersions {
+    commons: {
+        name: string
+        version: string
+        network: string
+    }
+    faucet: {
+        name: string
+        version: string
+        network: string
+        status: OceanPlatformTechStatus
+    }
+}
+
+export default class VersionNumbers extends PureComponent<
+    VersionNumbersProps,
+    VersionNumbersState
+> {
+    public static contextType = User
+
+    // construct values which are not part of any response
+    public commonsVersion =
+        process.env.NODE_ENV === 'production' ? version : `${version}-dev`
+
+    public commonsNetwork = faucetUri.includes('localhost')
+        ? 'Spree'
+        : new URL(nodeUri).hostname.split('.')[0]
+
+    // define a minimal default state to fill UI
+    public state: VersionNumbersState = {
+        commons: {
+            name: 'Commons',
+            network: this.commonsNetwork,
+            version: this.commonsVersion
+        },
+        squid: {
+            name: 'Squid-js',
+            status: OceanPlatformTechStatus.Loading
+        },
+        aquarius: {
+            name: 'Aquarius',
+            status: OceanPlatformTechStatus.Loading
+        },
+        brizo: {
+            name: 'Brizo',
+            status: OceanPlatformTechStatus.Loading
+        },
+        faucet: {
+            name: 'Faucet',
+            version: '',
+            network: '',
+            status: OceanPlatformTechStatus.Loading
+        },
+        status: {
+            ok: false,
+            network: false,
+            contracts: false
+        }
+    }
+
+    // for canceling axios requests
+    public signal = axios.CancelToken.source()
+
+    public componentDidMount() {
+        this.getOceanVersions()
+        this.getFaucetVersion()
+    }
+
+    public async componentDidUpdate(prevProps: any) {
+        // Workaround: Using account prop instead of getting it from
+        // context to be able to compare. Cause there is no `prevContext`.
+        if (prevProps.account !== this.props.account) {
+            this.getOceanVersions()
+            this.getFaucetVersion()
+        }
+    }
+
+    public componentWillUnmount() {
+        this.signal.cancel()
+    }
+
+    private async getOceanVersions() {
+        const { ocean } = this.context
+        // wait until ocean object is properly populated
+        if (ocean.versions === undefined) return
+
+        const response = await ocean.versions.get()
+        const { squid, brizo, aquarius, status } = response
+
+        this.setState({
+            ...this.state,
+            squid,
+            brizo,
+            aquarius,
+            status
+        })
+    }
+
+    private async getFaucetVersion() {
+        try {
+            const response = await axios.get(faucetUri, {
+                headers: { Accept: 'application/json' },
+                cancelToken: this.signal.token
+            })
+
+            // fail silently
+            if (response.status !== 200) return
+
+            const { version, network } = response.data
+
+            this.setState({
+                ...this.state,
+                faucet: {
+                    ...this.state.faucet,
+                    version,
+                    network,
+                    status: OceanPlatformTechStatus.Working
+                }
+            })
+        } catch (error) {
+            !axios.isCancel(error) && Logger.error(error.message)
+        }
+    }
+
+    private MinimalOutput = () => {
+        const { commons, squid, brizo, aquarius } = this.state
+
+        return (
+            <Market.Consumer>
+                {(market) => (
+                    <p className={styles.versionsMinimal}>
+                        <a
+                            title={`${squid.name} v${squid.version}\n${brizo.name} v${brizo.version}\n${aquarius.name} v${aquarius.version}`}
+                            href="/about"
+                        >
+                            v{commons.version}{' '}
+                            {market.network && `(${market.network})`}
+                        </a>
+                    </p>
+                )}
+            </Market.Consumer>
+        )
+    }
+
+    public render() {
+        const { minimal } = this.props
+
+        return minimal ? (
+            <this.MinimalOutput />
+        ) : (
+            <>
+                <h2 className={styles.versionsTitle} id="#oceanversions">
+                    Ocean Components Status
+                </h2>
+                <VersionStatus status={this.state.status} />
+                <VersionTable data={this.state} />
+            </>
+        )
+    }
+}

client/src/components/organisms/AssetsLatest.module.scss

@@ -2,7 +2,7 @@
 
 .latestAssetsWrap {
     // full width break out of container
-    margin-right: calc(-50vw + 50%);
+    //  margin-right: calc(-50vw + 50%);
 }
 
 .latestAssets {

client/src/components/organisms/AssetsLatest.test.tsx

@@ -3,7 +3,7 @@ import { BrowserRouter } from 'react-router-dom'
 import { render } from '@testing-library/react'
 import AssetsLatest from './AssetsLatest'
 import { User } from '../../context'
-import { userMockConnected } from '../../../__mocks__/user-mock'
+import { userMockConnected } from '../../__mocks__/user-mock'
 
 describe('AssetsLatest', () => {
     it('renders without crashing', () => {

client/src/components/organisms/AssetsLatest.tsx

@@ -13,7 +13,7 @@ interface AssetsLatestState {
 export default class AssetsLatest extends PureComponent<{}, AssetsLatestState> {
     public state = { latestAssets: [], isLoadingLatest: true }
 
-    public _isMounted: boolean = false
+    public _isMounted = false
 
     public componentDidMount() {
         this._isMounted = true
@@ -37,7 +37,7 @@ export default class AssetsLatest extends PureComponent<{}, AssetsLatestState> {
         }
 
         try {
-            const search = await ocean.aquarius.queryMetadata(searchQuery)
+            const search = await ocean.assets.query(searchQuery)
             this.setState({
                 latestAssets: search.results,
                 isLoadingLatest: false

client/src/components/organisms/AssetsUser.tsx

@@ -10,9 +10,11 @@ export default class AssetsUser extends PureComponent<
     { list?: boolean; recent?: number },
     { results: any[]; isLoading: boolean }
 > {
+    public static contextType = User
+
     public state = { results: [], isLoading: true }
 
-    public _isMounted: boolean = false
+    public _isMounted = false
 
     public componentDidMount() {
         this._isMounted = true
@@ -57,53 +59,47 @@ export default class AssetsUser extends PureComponent<
     }
 
     public render() {
-        const { account, isOceanNetwork } = this.context
+        const { account } = this.context
+        const { recent, list } = this.props
+        const { isLoading, results } = this.state
+
+        if (!account) return null
 
         return (
-            isOceanNetwork &&
-            account && (
-                <div className={styles.assetsUser}>
-                    {this.props.recent && (
-                        <h2 className={styles.subTitle}>
-                            Your Latest Published Data Sets
-                        </h2>
-                    )}
+            <div className={styles.assetsUser}>
+                {this.props.recent && (
+                    <h2 className={styles.subTitle}>
+                        Your Latest Published Data Sets
+                    </h2>
+                )}
 
-                    {this.state.isLoading ? (
-                        <Spinner />
-                    ) : this.state.results.length ? (
-                        <>
-                            {this.state.results
-                                .slice(
-                                    0,
-                                    this.props.recent
-                                        ? this.props.recent
-                                        : undefined
-                                )
-                                .filter(asset => !!asset)
-                                .map((asset: any) => (
-                                    <AssetTeaser
-                                        list={this.props.list}
-                                        key={asset.id}
-                                        asset={asset}
-                                    />
-                                ))}
-                            {this.props.recent && (
-                                <Link className={styles.link} to={'/history'}>
-                                    All Data Sets
-                                </Link>
-                            )}
-                        </>
-                    ) : (
-                        <div className={styles.empty}>
-                            <p>No Data Sets Yet.</p>
-                            <Link to="/publish">+ Publish A Data Set</Link>
-                        </div>
-                    )}
-                </div>
-            )
+                {isLoading ? (
+                    <Spinner />
+                ) : results.length ? (
+                    <>
+                        {results
+                            .slice(0, recent || undefined)
+                            .filter((asset) => !!asset)
+                            .map((asset: any) => (
+                                <AssetTeaser
+                                    list={list}
+                                    key={asset.id}
+                                    asset={asset}
+                                />
+                            ))}
+                        {recent && (
+                            <Link className={styles.link} to="/history">
+                                All Data Sets
+                            </Link>
+                        )}
+                    </>
+                ) : (
+                    <div className={styles.empty}>
+                        <p>No Data Sets Yet.</p>
+                        <Link to="/publish">+ Publish A Data Set</Link>
+                    </div>
+                )}
+            </div>
         )
     }
 }
-
-AssetsUser.contextType = User

client/src/components/organisms/ChannelTeaser.module.scss

@@ -62,7 +62,6 @@
             transform: none;
 
             // category image
-            // stylelint-disable-next-line
             .channelTitle + div {
                 opacity: 1;
                 background-size: 105%;
@@ -74,13 +73,3 @@
 .channelTeaser {
     color: $brand-grey;
 }
-
-.channelResults {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: $spacer;
-
-    @media (min-width: $break-point--small) {
-        grid-template-columns: 1fr 1fr;
-    }
-}

client/src/components/organisms/ChannelTeaser.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import ChannelTeaser from './ChannelTeaser'
 import { BrowserRouter } from 'react-router-dom'
 import { User } from '../../context'
-import { userMockConnected } from '../../../__mocks__/user-mock'
+import { userMockConnected } from '../../__mocks__/user-mock'
 
 describe('ChannelTeaser', () => {
     it('renders without crashing', () => {

client/src/components/organisms/ChannelTeaser.tsx

@@ -1,19 +1,18 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import { User } from '../../context'
-import { Logger } from '@oceanprotocol/squid'
-import Spinner from '../atoms/Spinner'
-import AssetTeaser from '../molecules/AssetTeaser'
+import { Logger, DDO } from '@oceanprotocol/squid'
+import CategoryImage from '../atoms/CategoryImage'
+import SearchResults from '../molecules/SearchResults'
 import styles from './ChannelTeaser.module.scss'
 import channels from '../../data/channels.json'
-import CategoryImage from '../atoms/CategoryImage'
 
 interface ChannelTeaserProps {
     channel: string
 }
 
 interface ChannelTeaserState {
-    channelAssets?: any[]
+    channelAssets?: DDO[]
     isLoadingChannel?: boolean
 }
 
@@ -26,7 +25,7 @@ export default class ChannelTeaser extends Component<
     // Get channel content
     public channel = channels.items
         .filter(({ tag }) => tag === this.props.channel)
-        .map(channel => channel)[0]
+        .map((channel) => channel)[0]
 
     public state = {
         channelAssets: [],
@@ -52,7 +51,7 @@ export default class ChannelTeaser extends Component<
         }
 
         try {
-            const search = await ocean.aquarius.queryMetadata(searchQuery)
+            const search = await ocean.assets.query(searchQuery)
             this.setState({
                 channelAssets: search.results,
                 isLoadingChannel: false
@@ -81,17 +80,11 @@ export default class ChannelTeaser extends Component<
                     </header>
                 </div>
                 <div>
-                    {isLoadingChannel ? (
-                        <Spinner message="Loading..." />
-                    ) : channelAssets && channelAssets.length ? (
-                        <div className={styles.channelResults}>
-                            {channelAssets.map((asset: any) => (
-                                <AssetTeaser key={asset.id} asset={asset} />
-                            ))}
-                        </div>
-                    ) : (
-                        <div>No data sets found.</div>
-                    )}
+                    <SearchResults
+                        isLoading={isLoadingChannel}
+                        results={channelAssets}
+                        simpleGrid
+                    />
                 </div>
             </div>
         )

client/src/components/organisms/Footer.module.scss

@@ -77,7 +77,7 @@
         width: 100px;
         height: auto;
         vertical-align: middle;
-        margin-top: -.05rem;
+        margin-top: -0.05rem;
         margin-left: $spacer / 6;
         fill: currentColor;
     }

client/src/components/organisms/Footer.tsx

@@ -1,56 +1,53 @@
-import React from 'react'
-import { Market } from '../../context'
+import React, { useContext } from 'react'
+import { Market, User } from '../../context'
 import Content from '../atoms/Content'
 import { ReactComponent as AiCommons } from '../../img/aicommons.svg'
 import styles from './Footer.module.scss'
 
 import meta from '../../data/meta.json'
-import VersionNumbers from '../atoms/VersionNumbers'
+import VersionNumbers from '../molecules/VersionNumbers'
+
+export default function Footer() {
+    const market = useContext(Market)
+    const user = useContext(User)
+
+    return (
+        <footer className={styles.footer}>
+            <aside className={styles.stats}>
+                <Content wide>
+                    <p>
+                        Online since March 2019.
+                        {market.totalAssets > 0 &&
+                            ` With a total of ${market.totalAssets} registered assets.`}
+                    </p>
+                    <p className={styles.aicommons}>
+                        Proud supporter of{' '}
+                        <a
+                            href="https://aicommons.com/?utm_source=commons.oceanprotocol.com"
+                            title="AI Commons"
+                        >
+                            <AiCommons />
+                        </a>
+                    </p>
+                    <VersionNumbers account={user.account} minimal />
+                </Content>
+            </aside>
 
-const Footer = () => (
-    <footer className={styles.footer}>
-        <aside className={styles.stats}>
             <Content wide>
-                <p>
-                    Online since March 2019.
-                    <Market.Consumer>
-                        {state =>
-                            state.totalAssets > 0 &&
-                            ` With a total of ${
-                                state.totalAssets
-                            } registered assets.`
-                        }
-                    </Market.Consumer>
-                </p>
-                <p className={styles.aicommons}>
-                    Proud supporter of{' '}
-                    <a
-                        href="https://aicommons.com/?utm_source=commons.oceanprotocol.com"
-                        title="AI Commons"
-                    >
-                        <AiCommons />
-                    </a>
-                </p>
-                <VersionNumbers />
+                <small>
+                    &copy; {new Date().getFullYear()}{' '}
+                    <a href={meta.social[0].url}>{meta.company}</a> &mdash; All
+                    Rights Reserved
+                </small>
+
+                <nav className={styles.links}>
+                    {meta.social.map((site) => (
+                        <a key={site.title} href={site.url}>
+                            {site.title}
+                        </a>
+                    ))}
+                </nav>
             </Content>
-        </aside>
-
-        <Content wide>
-            <small>
-                &copy; {new Date().getFullYear()}{' '}
-                <a href={meta.social[0].url}>{meta.company}</a> &mdash; All
-                Rights Reserved
-            </small>
-
-            <nav className={styles.links}>
-                {meta.social.map(site => (
-                    <a key={site.title} href={site.url}>
-                        {site.title}
-                    </a>
-                ))}
-            </nav>
-        </Content>
-    </footer>
-)
-
-export default Footer
+        </footer>
+    )
+}

client/src/components/organisms/Header.module.scss

@@ -70,7 +70,7 @@
     &::-webkit-scrollbar {
         width: 3px;
         height: 3px;
-        transition: opacity .2s ease-out;
+        transition: opacity 0.2s ease-out;
     }
 }
 
@@ -99,5 +99,5 @@
 
 .accountStatus {
     margin-left: $spacer / 2;
-    margin-bottom: -.5rem;
+    margin-bottom: -0.5rem;
 }

client/src/components/organisms/Header.tsx

@@ -1,11 +1,10 @@
 import React, { PureComponent } from 'react'
 import { NavLink } from 'react-router-dom'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
-import { User } from '../../context'
 import AccountStatus from '../molecules/AccountStatus'
 import styles from './Header.module.scss'
 
-import menu from '../../data/menu.json'
+import menu from '../../data/menu'
 import meta from '../../data/meta.json'
 
 const MenuItem = ({ item }: { item: any }) => (
@@ -24,13 +23,13 @@ export default class Header extends PureComponent {
         return (
             <header className={styles.header}>
                 <div className={styles.headerContent}>
-                    <NavLink to={'/'} className={styles.headerLogo}>
+                    <NavLink to="/" className={styles.headerLogo}>
                         <Logo className={styles.headerLogoImage} />
                         <h1 className={styles.headerTitle}>{meta.title}</h1>
                     </NavLink>
 
                     <nav className={styles.headerMenu}>
-                        {menu.map(item => (
+                        {menu.map((item) => (
                             <MenuItem key={item.title} item={item} />
                         ))}
                         <AccountStatus className={styles.accountStatus} />
@@ -40,5 +39,3 @@ export default class Header extends PureComponent {
         )
     }
 }
-
-Header.contextType = User

client/src/components/organisms/JobsUser.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react'
+import { getUserJobs } from '../../utils/getUserJobs'
+import { User } from '../../context'
+import Spinner from '../atoms/Spinner'
+import JobTeaser from '../molecules/JobTeaser'
+
+export default function JobsUser() {
+    const { ocean, account } = React.useContext(User)
+    const [jobList, setJobList] = useState<any[]>([])
+    const [isLoading, setIsLoading] = useState(false)
+    useEffect(() => {
+        setIsLoading(true)
+        async function getJobs() {
+            const userJobs = await getUserJobs(ocean, account)
+            setJobList(userJobs as any)
+            setIsLoading(false)
+        }
+        getJobs()
+    }, [account, ocean])
+
+    return (
+        <>
+            {isLoading ? (
+                <Spinner />
+            ) : jobList && jobList.length ? (
+                jobList
+                    .reverse()
+                    .map((job: any) => <JobTeaser key={job.jobId} job={job} />)
+            ) : (
+                ''
+            )}
+        </>
+    )
+}

client/src/components/organisms/WalletSelector.module.scss

@@ -0,0 +1,73 @@
+@import '../../styles/variables';
+
+.openLink {
+    font-size: $font-size-small !important;
+    margin-left: $spacer / 2;
+}
+
+.info {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.button {
+    flex: 0 0 100%;
+    background: $brand-white;
+    border: 1px solid $brand-grey-lighter;
+    border-radius: $border-radius;
+    line-height: 1.5;
+    padding: $spacer / 1.5;
+    font-family: $font-family-base;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    text-align: left;
+    cursor: pointer;
+    transition: border 0.2s ease-out;
+    margin-bottom: $spacer;
+    position: relative;
+
+    @media (min-width: $break-point--small) {
+        flex-basis: 48%;
+        margin-bottom: 0;
+    }
+
+    &:hover,
+    &:focus {
+        border-color: $brand-pink;
+    }
+}
+
+.buttonActive {
+    composes: button;
+    pointer-events: none;
+    background: $body-background;
+}
+
+.selected {
+    position: absolute;
+    right: $spacer / 3;
+    top: $spacer / 4;
+    color: $brand-grey-light;
+    font-weight: $font-weight-bold;
+}
+
+.buttonIcon {
+    font-size: $font-size-h4;
+    display: inline-block;
+    margin-right: $spacer / 4;
+}
+
+.buttonTitle {
+    font-size: $font-size-base;
+    margin-bottom: $spacer / 2;
+    font-weight: $font-weight-bold;
+    margin-top: 0;
+}
+
+.buttonDescription {
+    font-size: $font-size-small;
+    font-weight: $font-weight-bold;
+    color: $brand-grey-light;
+}

client/src/components/organisms/WalletSelector.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import ReactModal from 'react-modal'
+import WalletSelector from './WalletSelector'
+import { User, Market } from '../../context'
+import { userMockConnected } from '../../__mocks__/user-mock'
+import { marketMock } from '../../__mocks__/market-mock'
+
+describe('WalletSelector', () => {
+    it('renders without crashing', () => {
+        ReactModal.setAppElement(document.createElement('div'))
+
+        const { container, getByText } = render(
+            <User.Provider value={userMockConnected}>
+                <Market.Provider value={marketMock}>
+                    <WalletSelector />
+                </Market.Provider>
+            </User.Provider>
+        )
+        expect(container.firstChild).toBeInTheDocument()
+        fireEvent.click(getByText('Select wallet'))
+
+        const burnerButton = getByText('Burner Wallet')
+        fireEvent.click(burnerButton)
+
+        fireEvent.click(getByText('Select wallet'))
+        // const metamaskButton = getByText('MetaMask')
+        // fireEvent.click(metamaskButton)
+    })
+})

client/src/components/organisms/WalletSelector.tsx

@@ -0,0 +1,109 @@
+import React, { PureComponent } from 'react'
+import Modal from '../atoms/Modal'
+import { User } from '../../context'
+import styles from './WalletSelector.module.scss'
+import Button from '../atoms/Button'
+import content from '../../data/wallets.json'
+
+export default class WalletSelector extends PureComponent<
+    {},
+    { isModalOpen: boolean }
+> {
+    public static contextType = User
+
+    public state = {
+        isModalOpen: false
+    }
+
+    private handleToggleModal = (e?: Event) => {
+        e && e.preventDefault()
+        this.setState({ isModalOpen: !this.state.isModalOpen })
+    }
+
+    private loginBurnerWallet = () => {
+        this.context.loginBurnerWallet()
+        this.handleToggleModal()
+    }
+
+    private loginMetamask = () => {
+        this.context.loginMetamask()
+        this.context.logoutBurnerWallet()
+        this.handleToggleModal()
+    }
+
+    private WalletButton = ({
+        title,
+        description,
+        icon
+    }: {
+        title: string
+        description: string
+        icon: string
+    }) => {
+        const active =
+            (title === 'Burner Wallet' && this.context.isBurner) ||
+            (title === 'MetaMask' && !this.context.isBurner)
+
+        return (
+            <button
+                className={active ? styles.buttonActive : styles.button}
+                onClick={
+                    title === 'MetaMask'
+                        ? this.loginMetamask
+                        : this.loginBurnerWallet
+                }
+            >
+                <div>
+                    <h3 className={styles.buttonTitle}>
+                        <span
+                            className={styles.buttonIcon}
+                            role="img"
+                            aria-label={title}
+                        >
+                            {icon}
+                        </span>
+                        {title}
+                    </h3>
+                    <span className={styles.buttonDescription}>
+                        {description}
+                    </span>
+                    {active && (
+                        <span className={styles.selected}>Selected</span>
+                    )}
+                </div>
+            </button>
+        )
+    }
+
+    public render() {
+        return (
+            <>
+                <Button
+                    link
+                    className={styles.openLink}
+                    onClick={this.handleToggleModal}
+                    data-action="wallet"
+                >
+                    {content.title}
+                </Button>
+                <Modal
+                    title={content.title}
+                    description={content.description}
+                    isOpen={this.state.isModalOpen}
+                    onToggleModal={this.handleToggleModal}
+                >
+                    <div className={styles.info}>
+                        {content.buttons.map(({ title, description, icon }) => (
+                            <this.WalletButton
+                                key={title}
+                                title={title}
+                                icon={icon}
+                                description={description}
+                            />
+                        ))}
+                    </div>
+                </Modal>
+            </>
+        )
+    }
+}