Merge branch 'feature/compute' of https://github.com/oceanprotocol/commons into feature/compute

.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

@@ -42,7 +42,6 @@ env:
 
 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
@@ -62,7 +61,6 @@ script:
   - 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

README.md

@@ -6,13 +6,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">
 
@@ -204,7 +201,7 @@ npm run cypress:open
 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/package.json

@@ -9,34 +9,33 @@
     "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": "2.0.0",
+    "@oceanprotocol/squid": "2.1.2",
     "@oceanprotocol/typographies": "^0.1.0",
-    "@sindresorhus/slugify": "^0.11.0",
+    "@sindresorhus/slugify": "^1.0.0",
-    "@truffle/hdwallet-provider": "^1.0.33",
+    "@truffle/hdwallet-provider": "^1.0.35",
     "axios": "^0.19.2",
     "bip39": "^3.0.2",
     "classnames": "^2.2.6",
     "ethereum-blockies": "github:MyEtherWallet/blockies",
     "filesize": "^6.1.0",
     "history": "^4.10.1",
-    "ipfs-http-client": "39.0.2",
+    "ipfs-http-client": "44.1.0",
     "is-url-superb": "^3.0.0",
-    "moment": "^2.24.0",
+    "moment": "^2.25.3",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.14.1",
-    "query-string": "^6.11.1",
+    "query-string": "^6.12.1",
     "react": "^16.13.1",
-    "react-collapsed": "^2.2.3",
+    "react-collapsed": "^3.0.0",
-    "react-datepicker": "^2.14.0",
+    "react-datepicker": "^2.16.0",
     "react-dom": "^16.13.1",
     "react-dotdotdot": "^1.3.1",
-    "react-dropzone": "^10.2.1",
+    "react-dropzone": "^11.0.1",
     "react-ga": "^2.7.0",
-    "react-helmet": "^5.2.1",
+    "react-helmet": "^6.0.0",
     "react-markdown": "^4.3.1",
     "react-modal": "^3.11.2",
     "react-moment": "^0.9.7",
@@ -50,24 +49,24 @@
   "devDependencies": {
     "@react-mock/state": "^0.1.8",
     "@sheerun/mutationobserver-shim": "^0.3.3",
-    "@testing-library/jest-dom": "^5.1.1",
+    "@testing-library/jest-dom": "^5.7.0",
-    "@testing-library/react": "^10.0.1",
+    "@testing-library/react": "^10.0.4",
     "@types/classnames": "^2.2.10",
     "@types/is-url": "^1.2.28",
-    "@types/jest": "^25.1.4",
+    "@types/jest": "^25.2.2",
-    "@types/react": "^16.9.23",
+    "@types/react": "^16.9.35",
     "@types/react-datepicker": "^2.11.0",
-    "@types/react-dom": "^16.9.5",
+    "@types/react-dom": "^16.9.8",
     "@types/react-helmet": "^5.0.15",
     "@types/react-modal": "^3.10.5",
     "@types/react-paginate": "^6.2.1",
     "@types/react-router-dom": "^5.1.3",
     "@types/react-transition-group": "^4.2.4",
     "@types/shortid": "^0.0.29",
-    "jest-mock-axios": "^3.2.0",
+    "jest-mock-axios": "^4.0.0",
-    "react-scripts": "^3.4.0",
+    "react-scripts": "^3.4.1",
-    "source-map-explorer": "^2.4.0",
+    "source-map-explorer": "^2.4.2",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.2"
   },
   "repository": {
     "type": "git",

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

@@ -21,7 +21,7 @@
 }
 
 .unlock {
-    font-size: $font-size-small !important; // stylelint-disable-line
+    font-size: $font-size-small !important;
     margin-left: $spacer / 2;
 }
 

client/src/components/atoms/Account.tsx

@@ -62,7 +62,7 @@ export default class Account extends PureComponent<
                     {isBurner ? (
                         <button
                             className={styles.toggle}
-                            onClick={event => this.toggleAccountInfo(event)}
+                            onClick={(event) => this.toggleAccountInfo(event)}
                             title="Show More Account Info"
                         >
                             <Caret

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);
+        transform: translate3d(0, -0.05rem, 0);
-        box-shadow: 0 12px 30px 0 rgba(0, 0, 0, .1);
+        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/CategoryImage.module.scss

@@ -8,22 +8,18 @@
     background-color: $body-background;
     border-radius: $border-radius;
     overflow: hidden;
-    opacity: .85;
+    opacity: 0.85;
-    transition: .2s ease-out;
+    transition: 0.2s ease-out;
     border: 1px solid $brand-grey-lighter;
 }
 
 .header {
-    // stylelint-disable value-keyword-case
+    composes: categoryImage;
-    composes: categoryimage;
-    // stylelint-enable value-keyword-case
     height: 8rem;
     margin-top: $spacer / $line-height;
 }
 
 .dimmed {
-    // stylelint-disable value-keyword-case
+    composes: categoryImage;
-    composes: categoryimage;
+    opacity: 0.6;
-    // stylelint-enable value-keyword-case
-    opacity: .6;
 }

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

@@ -19,9 +19,7 @@
 }
 
 .inputWrapSearch {
-    // stylelint-disable value-keyword-case
     composes: inputWrap;
-    // stylelint-enable value-keyword-case
 
     .input {
         padding-left: $spacer * 1.5;
@@ -97,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(
@@ -109,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 {

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/Modal.module.scss

@@ -11,11 +11,11 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background: rgba($brand-black, .7);
+    background: rgba($brand-black, 0.7);
     overflow-x: hidden;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
-    animation: fadeIn .2s ease-out backwards;
+    animation: fadeIn 0.2s ease-out backwards;
 }
 
 .modal {
@@ -25,7 +25,7 @@
     margin: $spacer auto;
     max-width: $break-point--small;
     position: relative;
-    animation: moveUp .2s ease-out backwards;
+    animation: moveUp 0.2s ease-out backwards;
 
     @media (min-width: $break-point--small) {
         padding: $spacer * 2 $spacer * 1.5;
@@ -68,7 +68,7 @@
 
     &:hover,
     &:focus {
-        opacity: .7;
+        opacity: 0.7;
     }
 }
 

client/src/components/atoms/Seo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Helmet from 'react-helmet'
+import { Helmet } from 'react-helmet'
 import { withRouter, RouteComponentProps } from 'react-router-dom'
 import meta from '../../data/meta.json'
 import imageDefault from '../../img/share.png'

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;
     }
 }
 
@@ -39,7 +39,7 @@
         height: $font-size-small;
         margin-top: -($font-size-small);
         margin-left: -($font-size-small / 2);
-        border-width: .1rem;
+        border-width: 0.1rem;
     }
 }
 

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

@@ -4,7 +4,7 @@
     display: inline-block;
     position: relative;
     cursor: help;
-    padding: .5rem;
+    padding: 0.5rem;
 }
 
 /* default: red square */
@@ -17,9 +17,7 @@
 
 /* yellow triangle */
 .statusIndicatorCloseEnough {
-    // stylelint-disable value-keyword-case
+    composes: statusIndicator;
-    composes: statusindicator;
-    // stylelint-enable value-keyword-case
     background: none;
     width: 0;
     height: 0;
@@ -30,9 +28,7 @@
 
 /* green circle */
 .statusIndicatorActive {
-    // stylelint-disable value-keyword-case
+    composes: statusIndicator;
-    composes: statusindicator;
-    // stylelint-enable value-keyword-case
     border-radius: 50%;
     background: $green;
 }

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

@@ -19,9 +19,9 @@ const Indicator = ({
         ref={forwardedRef}
     >
         <User.Consumer>
-            {user => (
+            {(user) => (
                 <Market.Consumer>
-                    {market =>
+                    {(market) =>
                         !user.isLogged || !market.networkMatch ? (
                             <span
                                 className={styles.statusIndicatorCloseEnough}

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

@@ -40,15 +40,12 @@ $popoverWidth: 18rem;
         border-bottom: 0;
     }
 
-    /* stylelint-disable */
     button {
         svg,
         &[data-action] {
             display: none;
         }
     }
-
-    /* stylelint-enable */
 }
 
 .balance {

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

@@ -40,7 +40,7 @@ export default class Popover extends PureComponent<{
                 )}
 
                 <Market.Consumer>
-                    {market => (
+                    {(market) => (
                         <div className={styles.popoverInfoline}>
                             {network && !market.networkMatch
                                 ? `Please connect to Custom RPC

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
         }))
     }

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

@@ -3,11 +3,11 @@
 .dropzone {
     margin-top: $spacer;
     margin-bottom: $spacer;
-    border: .2rem dashed $brand-grey-lighter;
+    border: 0.2rem dashed $brand-grey-lighter;
     border-radius: $border-radius * 2;
     padding: $spacer;
     background: $brand-white;
-    transition: .2s ease-out;
+    transition: 0.2s ease-out;
     cursor: pointer;
 
     p {
@@ -32,7 +32,7 @@
 
 .disabled {
     composes: dropzone;
-    opacity: .5;
+    opacity: 0.5;
     pointer-events: none;
 }
 

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

@@ -17,7 +17,7 @@ function mockData(files: any) {
 }
 
 function flushPromises(ui: any, container: any) {
-    return new Promise(resolve =>
+    return new Promise((resolve) =>
         setImmediate(() => {
             render(ui, { container })
             resolve(container)

client/src/components/molecules/Dropzone.tsx

@@ -12,7 +12,7 @@ export default function Dropzone({
     disabled?: boolean
     multiple?: boolean
 }) {
-    const onDrop = useCallback(acceptedFiles => handleOnDrop(acceptedFiles), [
+    const onDrop = useCallback((acceptedFiles) => handleOnDrop(acceptedFiles), [
         handleOnDrop
     ])
 

client/src/components/molecules/JobTeaser.tsx

@@ -1,6 +1,7 @@
 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'
 import shortid from 'shortid'
@@ -8,6 +9,7 @@ import shortid from 'shortid'
 export default function JobTeaser({ job }: { job: any }) {
     const { ocean } = useContext(User)
     const [assetName, setAssetName] = useState()
+    const [assetUrl, setAssetUrl] = useState()
     useEffect(() => {
         async function getAsset() {
             try {
@@ -19,7 +21,9 @@ export default function JobTeaser({ job }: { job: any }) {
                 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)
             }
@@ -31,7 +35,9 @@ export default function JobTeaser({ job }: { job: any }) {
     return (
         <article className={styles.assetList}>
             <div className={styles.listRow}>
-                <h1>{assetName}</h1>
+                <h1>
+                    <a href={assetUrl}>{assetName}</a>
+                </h1>
                 <div
                     className={styles.date}
                     title={`Created on ${job.dateCreated}`}

client/src/components/molecules/Pagination.tsx

@@ -54,7 +54,7 @@ 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="→"

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

@@ -19,10 +19,9 @@
 .indicatorActive {
     display: inline-block;
     margin-right: $spacer / 4;
-    margin-bottom: -.1rem;
+    margin-bottom: -0.1rem;
 }
 
-// stylelint-disable value-keyword-case
 .indicator {
     composes: statusindicator from '../AccountStatus/Indicator.module.scss';
 }
@@ -30,7 +29,6 @@
 .indicatorActive {
     composes: statusindicatoractive from '../AccountStatus/Indicator.module.scss';
 }
-// stylelint-enable value-keyword-case
 
 .indicatorLabel {
     font-family: $font-family-title;

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

@@ -17,7 +17,6 @@
         td {
             padding: $spacer / 6 $spacer / 2;
 
-            // stylelint-disable-next-line selector-max-compound-selectors
             &,
             code {
                 font-size: $font-size-mini;
@@ -33,7 +32,6 @@
             text-align: right;
         }
 
-        // stylelint-disable-next-line selector-no-qualifying-type
         &[colspan] {
             padding: 0;
         }

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

@@ -52,7 +52,7 @@ export const VersionTableContracts = ({
                 Object.keys(contracts)
                     // sort alphabetically
                     .sort((a, b) => a.localeCompare(b))
-                    .map(key => {
+                    .map((key) => {
                         const submarineLink = `https://submarine.${
                             network === 'pacific'
                                 ? 'oceanprotocol'

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

@@ -8,13 +8,13 @@
     padding: 0;
     margin: 0;
     margin-left: -1rem;
-    margin-top: -.1rem;
+    margin-top: -0.1rem;
-    padding-right: .5rem;
+    padding-right: 0.5rem;
     cursor: pointer;
 
     svg {
         fill: $brand-grey-light;
-        transition: .2s ease-out;
+        transition: 0.2s ease-out;
     }
 }
 

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

@@ -148,7 +148,7 @@ export default class VersionNumbers extends PureComponent<
 
         return (
             <Market.Consumer>
-                {market => (
+                {(market) => (
                     <p className={styles.versionsMinimal}>
                         <a
                             title={`${squid.name} v${squid.version}\n${brizo.name} v${brizo.version}\n${aquarius.name} v${aquarius.version}`}

client/src/components/organisms/AssetsUser.tsx

@@ -79,7 +79,7 @@ export default class AssetsUser extends PureComponent<
                     <>
                         {results
                             .slice(0, recent || undefined)
-                            .filter(asset => !!asset)
+                            .filter((asset) => !!asset)
                             .map((asset: any) => (
                                 <AssetTeaser
                                     list={list}

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%;

client/src/components/organisms/ChannelTeaser.tsx

@@ -25,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: [],

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

@@ -41,7 +41,7 @@ export default function Footer() {
                 </small>
 
                 <nav className={styles.links}>
-                    {meta.social.map(site => (
+                    {meta.social.map((site) => (
                         <a key={site.title} href={site.url}>
                             {site.title}
                         </a>

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

@@ -29,7 +29,7 @@ export default class Header extends PureComponent {
                     </NavLink>
 
                     <nav className={styles.headerMenu}>
-                        {menu.map(item => (
+                        {menu.map((item) => (
                             <MenuItem key={item.title} item={item} />
                         ))}
                         <AccountStatus className={styles.accountStatus} />

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

@@ -1,7 +1,7 @@
 @import '../../styles/variables';
 
 .openLink {
-    font-size: $font-size-small !important; // stylelint-disable-line
+    font-size: $font-size-small !important;
     margin-left: $spacer / 2;
 }
 

client/src/components/organisms/Web3message.tsx

@@ -22,7 +22,7 @@ export default class Web3message extends PureComponent<{ extended?: boolean }> {
 
         return (
             <User.Consumer>
-                {user => (
+                {(user) => (
                     <em
                         dangerouslySetInnerHTML={{
                             __html:

client/src/components/templates/Asset/AssetDetails.module.scss

@@ -119,15 +119,12 @@
         overflow-wrap: break-word;
     }
 
-    /* stylelint-disable declaration-no-important */
     code {
         display: block;
         padding: 0 !important;
         background: none !important;
     }
 
-    /* stylelint-enable declaration-no-important */
-
     @media (min-width: $break-point--small) {
         width: 70%;
     }

client/src/components/templates/Asset/AssetDetails.test.tsx

@@ -3,12 +3,14 @@ import { render } from '@testing-library/react'
 import { DDO, MetaData } from '@oceanprotocol/squid'
 import { BrowserRouter as Router } from 'react-router-dom'
 import AssetDetails, { datafilesLine } from './AssetDetails'
+import oceanMock from '../../../__mocks__/ocean-mock'
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 describe('AssetDetails', () => {
     it('renders loading without crashing', () => {
         const { container } = render(
             <AssetDetails
+                ocean={oceanMock}
                 metadata={({ main: { name: '' } } as any) as MetaData}
                 ddo={({} as any) as DDO}
             />
@@ -20,6 +22,7 @@ describe('AssetDetails', () => {
         const { container } = render(
             <Router>
                 <AssetDetails
+                    ocean={oceanMock}
                     metadata={
                         ({
                             main: {
@@ -46,7 +49,8 @@ describe('AssetDetails', () => {
         const files = [
             {
                 index: 0,
-                url: 'https://hello.com'
+                url: 'https://hello.com',
+                contentType: 'application/json'
             }
         ]
         const { container } = render(datafilesLine(files))
@@ -57,11 +61,13 @@ describe('AssetDetails', () => {
         const files = [
             {
                 index: 0,
-                url: 'https://hello.com'
+                url: 'https://hello.com',
+                contentType: 'application/json'
             },
             {
                 index: 1,
-                url: 'https://hello2.com'
+                url: 'https://hello2.com',
+                contentType: 'application/json'
             }
         ]
         const { container } = render(datafilesLine(files))

client/src/components/templates/Asset/AssetDetails.tsx

@@ -119,8 +119,8 @@ export default function AssetDetails({
                 </h2>
                 <ul>
                     {metaFixed
-                        .filter(item => item.show)
+                        .filter((item) => item.show)
-                        .map(item => (
+                        .map((item) => (
                             <MetaFixedItem
                                 key={shortid.generate()}
                                 name={item.name}

client/src/components/templates/Asset/AssetFile.module.scss

@@ -60,7 +60,7 @@
     .empty {
         font-size: $font-size-mini;
         font-weight: $font-weight-base;
-        opacity: .75;
+        opacity: 0.75;
     }
 
     // move spinner a bit up

client/src/components/templates/Asset/AssetFile.tsx

@@ -134,7 +134,7 @@ export default class AssetFile extends PureComponent<
                     <Spinner message={messages[step]} />
                 ) : (
                     <Market.Consumer>
-                        {market => (
+                        {(market) => (
                             <Button
                                 primary
                                 className={styles.buttonMain}

client/src/components/templates/Asset/AssetFilesDetails.tsx

@@ -14,7 +14,7 @@ export default class AssetFilesDetails extends PureComponent<{
         return files.length ? (
             <>
                 <div className={styles.files}>
-                    {files.map(file => (
+                    {files.map((file) => (
                         <AssetFile key={file.index} ddo={ddo} file={file} />
                     ))}
                 </div>

client/src/components/templates/Asset/AssetJob.module.scss

@@ -86,7 +86,7 @@
 
     a,
     button {
-        transition: color .2s ease-out;
+        transition: color 0.2s ease-out;
 
         &:hover,
         &:focus {

client/src/components/templates/Asset/AssetJob.tsx

@@ -14,14 +14,14 @@ interface JobsProps {
     ddo: DDO
 }
 
-export default function AssetsJobs({ ddo, ocean }: JobsProps) {
+const rawAlgorithmMeta = {
-    const rawAlgorithmMeta = {
+    rawcode: `console.log('Hello world'!)`,
-        rawcode: `console.log('Hello world'!)`,
+    format: 'docker-image',
-        format: 'docker-image',
+    version: '0.1',
-        version: '0.1',
+    container: {}
-        container: {}
+}
-    }
 
+export default function AssetsJobs({ ddo, ocean }: JobsProps) {
     const [isJobStarting, setIsJobStarting] = useState(false)
     const [step, setStep] = useState(99)
     const [error, setError] = useState('')
@@ -37,12 +37,13 @@ export default function AssetsJobs({ ddo, ocean }: JobsProps) {
         const fileText = await readFileContent(files[0])
         setAlgorithmRawCode(fileText)
     }
+
     const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
         const comType = event.target.value
         setComputeType(comType)
 
         const selectedComputeOption = computeOptions.find(
-            x => x.name === comType
+            (x) => x.name === comType
         )
         if (selectedComputeOption !== undefined)
             setComputeValue(selectedComputeOption.value)
@@ -83,85 +84,72 @@ export default function AssetsJobs({ ddo, ocean }: JobsProps) {
             setFile(null)
         } catch (error) {
             setError('Failed to start job!')
-            console.log(error)
+            console.error(error)
         }
         setIsJobStarting(false)
     }
 
     return (
-        <>
+        <div>
+            <span className={styles.bold}>New job</span>
+            <div className={styles.dataType}>
+                <Input
+                    type="select"
+                    name="select"
+                    label="Select image to run the algorithm"
+                    placeholder=""
+                    value={computeType}
+                    options={computeOptions.map((x) => x.name)}
+                    onChange={handleSelectChange}
+                />
+            </div>
             <div>
-                <div>
+                <div className={styles.inputWrap}>
-                    <span className={styles.bold}>New job</span>
+                    <ReactDropzone
-                    <div className={styles.dataType}>
+                        onDrop={(acceptedFiles) => onDrop(acceptedFiles)}
-                        <Input
+                    >
-                            type="select"
+                        {({ getRootProps, getInputProps }) => (
-                            name="select"
+                            <div {...getRootProps()}>
-                            label="Select data type"
+                                <input {...getInputProps()} />
-                            placeholder=""
+                                {file === null && (
-                            value={computeType}
+                                    <div className={styles.dragndrop}>
-                            options={computeOptions.map(x => x.name)}
+                                        Click or drop your notebook here
-                            onChange={handleSelectChange}
-                        />
-                    </div>
-                    <div>
-                        <div className={styles.inputWrap}>
-                            <ReactDropzone
-                                onDrop={acceptedFiles => onDrop(acceptedFiles)}
-                            >
-                                {({ getRootProps, getInputProps }) => (
-                                    <div {...getRootProps()}>
-                                        <input {...getInputProps()} />
-                                        {file === null && (
-                                            <div className={styles.dragndrop}>
-                                                Click or drop your notebook here
-                                            </div>
-                                        )}
-                                        {file !== null && (
-                                            <div
-                                                className={
-                                                    styles.filleddragndrop
-                                                }
-                                            >
-                                                You selected:{' '}
-                                                {(file as any).path}
-                                            </div>
-                                        )}
                                     </div>
                                 )}
-                            </ReactDropzone>
+                                {file !== null && (
-                        </div>
+                                    <div className={styles.filleddragndrop}>
-                        <div className={styles.jobButtonWrapper}>
+                                        You selected: {(file as any).path}
-                            <Button
+                                    </div>
-                                primary
+                                )}
-                                onClick={() => startJob()}
+                            </div>
-                                disabled={
+                        )}
-                                    isJobStarting ||
+                    </ReactDropzone>
-                                    file === null ||
+                </div>
-                                    computeType === ''
+                <div className={styles.jobButtonWrapper}>
-                                }
+                    <Button
-                                name="Purchase access"
+                        primary
-                            >
+                        onClick={() => startJob()}
-                                Start job
+                        disabled={
-                            </Button>
+                            isJobStarting || file === null || computeType === ''
-                        </div>
+                        }
-                    </div>
+                        name="Purchase access"
-                    {isJobStarting ? <Spinner message={messages[step]} /> : ''}
+                    >
-                    {error !== '' && (
+                        Start job
-                        <div className={styles.error}>{error}</div>
+                    </Button>
-                    )}
-                    {isPublished ? (
-                        <div className={styles.success}>
-                            <p>Your job started!</p>
-                            <Button link to="/history/">
-                                Watch the progress in the history page.
-                            </Button>
-                        </div>
-                    ) : (
-                        ''
-                    )}
                 </div>
             </div>
-        </>
+            {isJobStarting ? <Spinner message={messages[step]} /> : ''}
+            {error !== '' && <div className={styles.error}>{error}</div>}
+            {isPublished ? (
+                <div className={styles.success}>
+                    <p>Your job started!</p>
+                    <Button link to="/history/">
+                        Watch the progress in the history page.
+                    </Button>
+                </div>
+            ) : (
+                ''
+            )}
+        </div>
     )
 }

client/src/components/templates/Channel.tsx

@@ -27,7 +27,7 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
     // get content data based on received channel param
     public channel = channels.items
         .filter(({ tag }) => tag === this.props.match.params.channel)
-        .map(channel => channel)[0]
+        .map((channel) => channel)[0]
 
     public state = {
         results: [],

client/src/context/MarketProvider.test.tsx

@@ -10,7 +10,7 @@ describe('MarketProvider', () => {
             <User.Provider value={userMockConnected}>
                 <MarketProvider ocean={userMockConnected.ocean as any}>
                     <Market.Consumer>
-                        {market => (
+                        {(market) => (
                             <div data-testid="hello">{market.network}</div>
                         )}
                     </Market.Consumer>

client/src/data/computeOptions.json

@@ -1,6 +1,6 @@
 [
   {
-    "name": "nodejs",
+    "name": "nodejs:10",
     "value": {
       "entrypoint": "node $ALGO",
       "image": "node",
@@ -8,11 +8,11 @@
     }
   },
   {
-    "name": "pyhton3.6",
+    "name": "pyhton with pandas",
     "value": {
-      "entrypoint": "python3.6 $ALGO",
+      "entrypoint": "python $ALGO",
-      "image": "python",
+      "image": "oceanprotocol/algo_dockers",
-      "tag": "3.6"
+      "tag": "python-panda"
     }
   }
 ]

client/src/routes/Channels.tsx

@@ -10,7 +10,7 @@ class Channels extends Component {
         return (
             <Route title={channels.title} description={channels.description}>
                 <Content wide>
-                    {channels.items.map(channel => (
+                    {channels.items.map((channel) => (
                         <ChannelTeaser
                             key={channel.title}
                             channel={channel.tag}

client/src/routes/Home/index.module.scss

@@ -14,7 +14,6 @@
     }
 
     // grab the channel teaser on front page
-    // stylelint-disable-next-line
     article > div > h2 + div {
         padding-top: $spacer / 2;
     }

client/src/routes/Publish/Files/Ipfs/Form.module.scss

@@ -11,12 +11,12 @@
         display: block;
         width: 100%;
         cursor: pointer;
-        border: .1rem solid $brand-grey-lighter;
+        border: 0.1rem solid $brand-grey-lighter;
         border-radius: $border-radius;
         padding: $spacer / 2 $spacer / 2;
         margin-top: $spacer / 2;
         background: $brand-white;
-        transition: border .2s ease-out;
+        transition: border 0.2s ease-out;
 
         &:hover {
             border-color: $brand-grey-light;

client/src/routes/Publish/Files/Ipfs/Status.module.scss

@@ -7,13 +7,13 @@
 
     &:before {
         content: '';
-        width: .5rem;
+        width: 0.5rem;
-        height: .5rem;
+        height: 0.5rem;
         display: inline-block;
         background: $yellow;
         border-radius: 50%;
         margin-right: $spacer / 6;
-        margin-bottom: .1rem;
+        margin-bottom: 0.1rem;
     }
 }
 

client/src/routes/Publish/Files/Item.module.scss

@@ -26,11 +26,11 @@
     position: absolute;
     top: $spacer / 8;
     right: 0;
-    transition: .2s ease-out;
+    transition: 0.2s ease-out;
 
     &:hover,
     &:focus {
-        opacity: .7;
+        opacity: 0.7;
     }
 }
 

client/src/routes/Publish/Files/index.tsx

@@ -113,7 +113,7 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
 
     private addFile = async (url: string) => {
         // check for duplicate urls
-        const duplicateFiles = this.props.files.filter(props =>
+        const duplicateFiles = this.props.files.filter((props) =>
             url.includes(props.url)
         )
 
@@ -185,7 +185,7 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
                         </ul>
                     )}
 
-                    {buttons.map(button => {
+                    {buttons.map((button) => {
                         const isActive =
                             (button.id === 'url' && isFormShown) ||
                             (button.id === 'ipfs' && isIpfsFormShown)

client/src/routes/Publish/Progress.module.scss

@@ -18,7 +18,7 @@
         content: '';
         display: block;
         width: 60%;
-        height: .1rem;
+        height: 0.1rem;
         background: $brand-grey-lighter;
         position: absolute;
         top: 20%;

client/src/routes/Publish/Step.tsx

@@ -155,7 +155,7 @@ export default class Step extends PureComponent<StepProps, {}> {
 
                     {lastStep && (
                         <Market.Consumer>
-                            {market => (
+                            {(market) => (
                                 <Button
                                     disabled={
                                         !this.context.isLogged ||

client/src/routes/Publish/StepRegisterContent.module.scss

@@ -21,7 +21,7 @@
 
     a,
     button {
-        transition: color .2s ease-out;
+        transition: color 0.2s ease-out;
 
         &:hover,
         &:focus {

client/src/routes/Publish/index.tsx

@@ -147,7 +147,7 @@ class Publish extends Component<{}, PublishState> {
         // Setting state for all fields
         if (hasContent) {
             this.setState(
-                prevState => ({
+                (prevState) => ({
                     validationStatus: {
                         ...prevState.validationStatus,
                         [this.state.currentStep]: {
@@ -162,7 +162,7 @@ class Publish extends Component<{}, PublishState> {
             )
         } else {
             this.setState(
-                prevState => ({
+                (prevState) => ({
                     validationStatus: {
                         ...prevState.validationStatus,
                         [this.state.currentStep]: {
@@ -184,7 +184,7 @@ class Publish extends Component<{}, PublishState> {
         // Step 1
         //
         if (validationStatus[1].name && validationStatus[1].files) {
-            this.setState(prevState => ({
+            this.setState((prevState) => ({
                 validationStatus: {
                     ...prevState.validationStatus,
                     1: {
@@ -194,7 +194,7 @@ class Publish extends Component<{}, PublishState> {
                 }
             }))
         } else {
-            this.setState(prevState => ({
+            this.setState((prevState) => ({
                 validationStatus: {
                     ...prevState.validationStatus,
                     1: {
@@ -209,7 +209,7 @@ class Publish extends Component<{}, PublishState> {
         // Step 2
         //
         if (validationStatus[2].description && validationStatus[2].categories) {
-            this.setState(prevState => ({
+            this.setState((prevState) => ({
                 validationStatus: {
                     ...prevState.validationStatus,
                     2: {
@@ -219,7 +219,7 @@ class Publish extends Component<{}, PublishState> {
                 }
             }))
         } else {
-            this.setState(prevState => ({
+            this.setState((prevState) => ({
                 validationStatus: {
                     ...prevState.validationStatus,
                     2: {
@@ -238,7 +238,7 @@ class Publish extends Component<{}, PublishState> {
             validationStatus[3].copyrightHolder &&
             validationStatus[3].license
         ) {
-            this.setState(prevState => ({
+            this.setState((prevState) => ({
                 validationStatus: {
                     ...prevState.validationStatus,
                     3: {
@@ -248,7 +248,7 @@ class Publish extends Component<{}, PublishState> {
                 }
             }))
         } else {
-            this.setState(prevState => ({
+            this.setState((prevState) => ({
                 validationStatus: {
                     ...prevState.validationStatus,
                     3: {
@@ -369,7 +369,7 @@ class Publish extends Component<{}, PublishState> {
     public render() {
         return (
             <Market.Consumer>
-                {market => (
+                {(market) => (
                     <Route
                         title="Publish"
                         description={`Publish a new data set into the Ocean Protocol ${market.network} Network.`}

client/src/serviceWorker.ts

@@ -67,7 +67,7 @@ export function register(config?: Config) {
 function registerValidSW(swUrl: string, config?: Config) {
     navigator.serviceWorker
         .register(swUrl)
-        .then(registration => {
+        .then((registration) => {
             registration.onupdatefound = () => {
                 const installingWorker = registration.installing
                 if (installingWorker == null) {
@@ -103,7 +103,7 @@ function registerValidSW(swUrl: string, config?: Config) {
                 }
             }
         })
-        .catch(error => {
+        .catch((error) => {
             console.error('Error during service worker registration:', error)
         })
 }
@@ -111,7 +111,7 @@ function registerValidSW(swUrl: string, config?: Config) {
 function checkValidServiceWorker(swUrl: string, config?: Config) {
     // Check if the service worker can be found. If it can't reload the page.
     fetch(swUrl)
-        .then(response => {
+        .then((response) => {
             // Ensure service worker exists, and that we really are getting a JS file.
             const contentType = response.headers.get('content-type')
             if (
@@ -120,7 +120,7 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
                     contentType.indexOf('javascript') === -1)
             ) {
                 // No service worker found. Probably a different app. Reload the page.
-                navigator.serviceWorker.ready.then(registration => {
+                navigator.serviceWorker.ready.then((registration) => {
                     registration.unregister().then(() => {
                         window.location.reload()
                     })
@@ -139,7 +139,7 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
 
 export function unregister() {
     if ('serviceWorker' in navigator) {
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
             registration.unregister()
         })
     }

client/src/styles/_animations.scss

@@ -1,6 +1,6 @@
 .fade {
     &-enter {
-        opacity: .01;
+        opacity: 0.01;
     }
 
     &-enter-active {
@@ -13,14 +13,14 @@
     }
 
     &-exit-active {
-        opacity: .01;
+        opacity: 0.01;
         transition: opacity 400ms ease-in;
     }
 }
 
 .grow {
     &-enter {
-        opacity: .01;
+        opacity: 0.01;
         max-height: 0;
     }
 
@@ -36,7 +36,7 @@
     }
 
     &-exit-active {
-        opacity: .01;
+        opacity: 0.01;
         max-height: 0;
         transition: 200ms ease-in;
     }

client/src/styles/_variables.scss

@@ -21,20 +21,18 @@ $brand-gradient: linear-gradient(to right bottom, $brand-purple, $brand-pink);
 $body-background: darken($brand-white, 1%);
 
 // Fonts
-// stylelint-disable value-keyword-case
 $font-family-base: 'Sharp Sans', -apple-system, blinkmacsystemfont, 'Segoe UI',
     helvetica, arial, sans-serif;
 $font-family-title: 'Sharp Sans Display', -apple-system, blinkmacsystemfont,
     'Segoe UI', helvetica, arial, sans-serif;
 $font-family-monospace: 'Fira Code', 'Fira Mono', menlo, monaco, consolas,
     'Courier New', monospace;
-// stylelint-enable value-keyword-case
 
 $font-size-root: 16px;
 $font-size-base: 1rem;
 $font-size-large: 1.2rem;
-$font-size-small: .85rem;
+$font-size-small: 0.85rem;
-$font-size-mini: .65rem;
+$font-size-mini: 0.65rem;
 $font-size-text: $font-size-base;
 $font-size-label: $font-size-base;
 $font-size-title: 1.4rem;
@@ -51,7 +49,7 @@ $line-height: 1.6;
 
 // Sizes
 $spacer: 2rem;
-$page-frame: .75rem;
+$page-frame: 0.75rem;
 
 $break-point--small: 640px;
 $break-point--medium: 860px;
@@ -59,6 +57,6 @@ $break-point--large: 1140px;
 $break-point--huge: 1400px;
 $brand-border-width: 1px;
 
-$border-radius: .2rem;
+$border-radius: 0.2rem;
 
 $narrowWidth: 35rem;

client/src/styles/global.scss

@@ -1,5 +1,3 @@
-// stylelint-disable selector-no-qualifying-type, declaration-no-important, selector-no-vendor-prefix
-
 @import 'variables';
 @import 'animations';
 @import '../../node_modules/@oceanprotocol/typographies/sass/ocean-typo.scss';
@@ -10,15 +8,12 @@
     box-sizing: border-box;
 }
 
-/* stylelint-disable selector-max-id */
 html,
 body,
 #root {
     height: 100%;
 }
 
-/* stylelint-enable selector-max-id */
-
 html {
     font-size: $font-size-root;
 }
@@ -44,13 +39,13 @@ body {
 a {
     text-decoration: none;
     color: $brand-pink;
-    transition: .2s ease-out;
+    transition: 0.2s ease-out;
 
     &:hover,
     &:focus {
         color: darken($brand-pink, 15%);
         text-decoration: none;
-        transform: translate3d(0, -.1rem, 0);
+        transform: translate3d(0, -0.1rem, 0);
     }
 
     &:active {
@@ -206,7 +201,7 @@ picture {
 hr {
     margin: $spacer 0;
     border: 0;
-    border-bottom: .1rem solid $brand-grey-lighter;
+    border-bottom: 0.1rem solid $brand-grey-lighter;
 }
 
 // Quotes
@@ -230,7 +225,7 @@ blockquote > p {
 blockquote {
     margin: 0 0 $spacer;
     padding-left: $spacer / 2;
-    border-left: .2rem solid $brand-grey-lighter;
+    border-left: 0.2rem solid $brand-grey-lighter;
 
     @media screen and (min-width: $break-point--small) {
         padding-left: $spacer / $line-height;
@@ -295,8 +290,8 @@ samp {
 :not(pre) > code {
     color: $brand-grey-dark;
     display: inline-block;
-    padding-left: .15rem;
+    padding-left: 0.15rem;
-    padding-right: .15rem;
+    padding-right: 0.15rem;
 }
 
 a > code {

client/src/utils/getUserJobs.ts

@@ -1,43 +1,13 @@
-const tempList = [
+import { Account } from '@oceanprotocol/squid'
-    {
+
-        agreementId:
-            'a40d4fbddf7c45fb988b3f47e7fb8d50386ee8c968c94a0db6909cd96582e6cd',
-        algorithmLogUrl: null,
-        dateCreated: 1585581794.73346,
-        dateFinished: null,
-        jobId: '5e67cdffc2224907b10cdb802820033ee',
-        owner: '0x4D156A2ef69ffdDC55838176C6712C90f60a2285',
-        removed: 0,
-        resultsDid: '',
-        resultsUrl: '',
-        status: 10,
-        statusText: 'Job started',
-        stopreq: 0
-    },
-    {
-        agreementId:
-            'a40d4fbddf7c45fb988b3f47e7fb8d50386ee8c968c94a0db6909cd96582e6cd',
-        algorithmLogUrl: null,
-        dateCreated: 1585581794.73346,
-        dateFinished: null,
-        jobId: '5e67cdffc2224907b10cdb80820033ee',
-        owner: '0x4D156A2ef69ffdDC55838176C6712C90f60a2285',
-        removed: 0,
-        resultsDid: '',
-        resultsUrl: '',
-        status: 10,
-        statusText: 'Job started',
-        stopreq: 0
-    }
-]
 export async function getUserJobs(ocean: any, account: string) {
     try {
-        const accounts = await ocean.accounts.list()
+        const account = await ocean.accounts.list()
-        // const jobList = await ocean.compute.status(account)
-        // const jobList = await ocean.compute.status(accounts[0])
 
-        return tempList
+        await account.authenticate()
+        const jobList = await ocean.compute.status(account[0])
+        return jobList
     } catch (error) {
-        console.error(error.message)
+        console.error(error)
     }
 }

cypress/integration/1_publish.spec.js

@@ -13,17 +13,13 @@ describe('Publish', () => {
         // Fill title
         cy.get('input#name').type('Commons Integration Test')
         // Open Add a file form
-        cy.get('button')
+        cy.get('button').contains('+ From URL').click()
-            .contains('+ From URL')
-            .click()
         // Fill url of file
         cy.get('input#url').type(
             'https://oceanprotocol.com/tech-whitepaper.pdf'
         )
         // Add file to main form
-        cy.get('button')
+        cy.get('button').contains('Add File').click()
-            .contains('Add File')
-            .click()
         // Verify and nove to next step
         cy.get('button', { timeout: 60000 })
             .contains('Next →')
@@ -36,10 +32,7 @@ describe('Publish', () => {
         // Pick category
         cy.get('select#categories').select('Biology')
         // Verify and move to next step
-        cy.get('button')
+        cy.get('button').contains('Next →').should('not.be.disabled').click()
-            .contains('Next →')
-            .should('not.be.disabled')
-            .click()
         // Verify we are on next step
         cy.get('article>div').should('contain', 'Authorship')
         // Fill author
@@ -49,10 +42,7 @@ describe('Publish', () => {
         // Pick author
         cy.get('select#license').select('Public Domain')
         // Verify and move to next step
-        cy.get('button')
+        cy.get('button').contains('Next →').should('not.be.disabled').click()
-            .contains('Next →')
-            .should('not.be.disabled')
-            .click()
         // Verify we are on next step
         cy.get('article>div').should('contain', 'Register')
         // Start publish process
@@ -69,7 +59,7 @@ describe('Publish', () => {
         cy.get('a')
             .contains('See published asset')
             .invoke('attr', 'href')
-            .then(href => {
+            .then((href) => {
                 cy.writeFile(
                     'cypress/fixtures/did.txt',
                     href.replace('/asset/', '')
@@ -81,17 +71,13 @@ describe('Publish', () => {
         // Fill title
         cy.get('input#name').type('Commons Integration IPFS Test')
         // Open Add a file form
-        cy.get('button')
+        cy.get('button').contains('+ From URL').click()
-            .contains('+ From URL')
-            .click()
         // Fill url of file
         cy.get('input#url').type(
             'ipfs://QmX5LRpEVocfks9FNDnRoK2imf2fy9mPpP4wfgaDVXWfYD/video.mp4'
         )
         // Add file to main form
-        cy.get('button')
+        cy.get('button').contains('Add File').click()
-            .contains('Add File')
-            .click()
         // Verify and nove to next step
         cy.get('button', { timeout: 60000 })
             .contains('Next →')
@@ -104,10 +90,7 @@ describe('Publish', () => {
         // Pick category
         cy.get('select#categories').select('Biology')
         // Verify and move to next step
-        cy.get('button')
+        cy.get('button').contains('Next →').should('not.be.disabled').click()
-            .contains('Next →')
-            .should('not.be.disabled')
-            .click()
         // Verify we are on next step
         cy.get('article>div').should('contain', 'Authorship')
         // Fill author
@@ -117,10 +100,7 @@ describe('Publish', () => {
         // Pick author
         cy.get('select#license').select('Public Domain')
         // Verify and move to next step
-        cy.get('button')
+        cy.get('button').contains('Next →').should('not.be.disabled').click()
-            .contains('Next →')
-            .should('not.be.disabled')
-            .click()
         // Verify we are on next step
         cy.get('article>div').should('contain', 'Register')
         // Start publish process
@@ -137,7 +117,7 @@ describe('Publish', () => {
         cy.get('a')
             .contains('See published asset')
             .invoke('attr', 'href')
-            .then(href => {
+            .then((href) => {
                 cy.writeFile(
                     'cypress/fixtures/did-ipfs.txt',
                     href.replace('/asset/', '')

cypress/integration/2_search.spec.js

@@ -10,9 +10,7 @@ describe('Search', () => {
         // Fill search phrase
         cy.get('input#search').type('Commons Integration Test')
         // Start search
-        cy.get('button')
+        cy.get('button').contains('Search').click()
-            .contains('Search')
-            .click()
         // Verify there are results
         cy.get('article > a', { timeout: 60000 }).should(
             'have.length.greaterThan',

cypress/integration/3_consume.spec.js

@@ -1,7 +1,7 @@
 /// <reference types="Cypress" />
 describe('Consume', () => {
     it('should consume https:// file', () => {
-        cy.fixture('did').then(did => {
+        cy.fixture('did').then((did) => {
             cy.visit(`/asset/${did}`)
         })
 
@@ -31,7 +31,7 @@ describe('Consume', () => {
     })
 
     it('should consume ipfs:// file', () => {
-        cy.fixture('did-ipfs').then(did => {
+        cy.fixture('did-ipfs').then((did) => {
             cy.visit(`/asset/${did}`)
         })
 

cypress/integration/4_faucet.spec.js

@@ -10,22 +10,16 @@ describe('Faucet', () => {
     })
 
     beforeEach(() => {
-        cy.get('button[name="FaucetETH"]')
+        cy.get('button[name="FaucetETH"]').first().as('button')
-            .first()
-            .as('button')
     })
 
     it('Faucet button is clickable when user is connected.', () => {
-        cy.get('@button')
+        cy.get('@button').contains('Request ETH').should('not.be.disabled')
-            .contains('Request ETH')
-            .should('not.be.disabled')
     })
 
     it('should execute faucet call', () => {
         // Execute call
-        cy.get('@button')
+        cy.get('@button').contains('Request ETH').click()
-            .contains('Request ETH')
-            .click()
         // Verify that we got response from server
         cy.contains(/(Successfully added|Already requested)/, {
             timeout: 60000

cypress/support/index.js

@@ -1,3 +1,3 @@
 /// <reference types="Cypress" />
 
-before(function() {})
+before(function () {})

package.json

@@ -10,13 +10,9 @@
     "test": "npm run lint && scripts/test.sh && npm run test:e2e",
     "test:e2e": "start-test start http-get://localhost:3000 cypress:run",
     "test:watch": "npm run lint && concurrently \"cd client && npm run test:watch\" \"cd server && npm run test:watch\"",
-    "format:js": "prettier --parser typescript --write '**/*.{js,jsx,ts,tsx}'",
+    "format": "prettier --write '**/*.{js,jsx,ts,tsx,css,scss}'",
-    "format:css": "prettier-stylelint --ignore-path .gitignore --write --quiet '**/*.{css,scss}'",
+    "lint": "eslint --ignore-path .gitignore --ignore-path .prettierignore --ext .ts,.tsx .",
-    "format": "npm run format:js && npm run format:css",
-    "lint:css": "stylelint --ignore-path .gitignore './**/*.{css,scss}'",
-    "lint:js": "eslint --ignore-path .gitignore --ignore-path .prettierignore --ext .ts,.tsx .",
     "lint:fix": "eslint --fix --ignore-path .gitignore --ignore-path .prettierignore --ext .ts,.tsx .",
-    "lint": "npm run lint:js && npm run lint:css",
     "release": "release-it --non-interactive",
     "changelog": "auto-changelog -p",
     "cypress:run": "cypress run --browser chrome",
@@ -24,26 +20,21 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@release-it/bumper": "^1.1.0",
+    "@release-it/bumper": "^1.1.1",
-    "@typescript-eslint/eslint-plugin": "^2.24.0",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.24.0",
+    "@typescript-eslint/parser": "^2.33.0",
-    "auto-changelog": "^1.16.2",
+    "auto-changelog": "^2.0.0",
     "concurrently": "^5.1.0",
-    "cypress": "^4.2.0",
+    "cypress": "^4.5.0",
     "cypress-log-to-output": "^1.0.8",
     "eslint": "^6.8.0",
     "eslint-config-oceanprotocol": "^1.5.0",
-    "eslint-config-prettier": "^6.10.0",
+    "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-cypress": "^2.10.3",
     "eslint-plugin-prettier": "^3.1.2",
-    "prettier": "^1.19.1",
+    "prettier": "^2.0.5",
-    "prettier-stylelint": "^0.4.2",
+    "release-it": "^13.6.1",
-    "release-it": "^13.1.1",
+    "start-server-and-test": "^1.11.0",
-    "start-server-and-test": "^1.10.10",
-    "stylelint": "^13.2.1",
-    "stylelint-config-bigchaindb": "^1.2.2",
-    "stylelint-config-css-modules": "^2.2.0",
-    "stylelint-config-standard": "^20.0.0",
     "typescript": "^3.8.3"
   },
   "repository": {

scripts/coverage.sh

@@ -1,12 +0,0 @@
-#/usr/bin/env/sh
-set -e
-
-components="server client"
-
-for component in $components
-do
-    printf "\n\nReporting coverage: $component\n"
-    cd $component
-    npm run coverage
-    cd ..
-done

server/package.json

@@ -9,36 +9,35 @@
     "serve": "node dist/src/server.js",
     "build": "tsc",
     "test": "jest --coverage --silent",
-    "test:watch": "jest --coverage --watch",
+    "test:watch": "jest --coverage --watch"
-    "coverage": "cat coverage/lcov.info | codacy-coverage --token 8801f827fe1144ffa85cd7da94f2bbf7"
   },
   "dependencies": {
-    "@sendgrid/mail": "^6.5.5",
+    "@sendgrid/mail": "^7.1.1",
     "body-parser": "^1.19.0",
     "compression": "^1.7.4",
     "debug": "^4.1.1",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
-    "express-validator": "^6.4.0",
+    "express-validator": "^6.5.0",
-    "morgan": "^1.9.1",
+    "morgan": "^1.10.0",
     "request": "^2.88.2"
   },
   "devDependencies": {
     "@types/body-parser": "^1.19.0",
     "@types/compression": "^1.7.0",
     "@types/debug": "^4.1.5",
-    "@types/express": "^4.17.3",
+    "@types/express": "^4.17.6",
-    "@types/jest": "^25.1.4",
+    "@types/jest": "^25.2.3",
     "@types/morgan": "^1.9.0",
-    "@types/node": "^13.9.2",
+    "@types/node": "^14.0.1",
-    "@types/request": "^2.48.4",
+    "@types/request": "^2.48.5",
-    "@types/supertest": "^2.0.8",
+    "@types/supertest": "^2.0.9",
     "jest": "24.9.0",
-    "nodemon": "^2.0.2",
+    "nodemon": "^2.0.4",
     "supertest": "^4.0.2",
     "ts-jest": "24.3.0",
-    "ts-node": "^8.7.0",
+    "ts-node": "^8.10.1",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.2"
   },
   "repository": {
     "type": "git",

server/test/api.test.ts

@@ -1,7 +1,7 @@
 import request from 'supertest'
 import server from '../src/server'
 
-afterAll(done => {
+afterAll((done) => {
     server.close(done)
 })
 
@@ -22,12 +22,10 @@ describe('POST /api/v1/urlcheck', () => {
     })
 
     it('responds with json on ipfs://', async () => {
-        const response = await request(server)
+        const response = await request(server).post('/api/v1/urlcheck').send({
-            .post('/api/v1/urlcheck')
+            url:
-            .send({
+                'ipfs://QmX5LRpEVocfks9FNDnRoK2imf2fy9mPpP4wfgaDVXWfYD/video.mp4'
-                url:
+        })
-                    'ipfs://QmX5LRpEVocfks9FNDnRoK2imf2fy9mPpP4wfgaDVXWfYD/video.mp4'
-            })
         expect(response.status).toBe(200)
         expect(response.body).toBeTruthy()
     })