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

2023-03-15 18:03:00 +01:00 · 2020-05-19 14:24:04 +03:00 · 2020-05-19 14:24:04 +03:00 · 28b213d2fc
commit 28b213d2fc
parent 55bf9f314f b93f005154
76 changed files with 4366 additions and 8686 deletions
--- a/.stylelintrc
+++ b/.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
-  }
-}
--- a/.travis.yml
+++ b/.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
--- a/README.md
+++ b/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
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/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",
-    "@truffle/hdwallet-provider": "^1.0.33",
+    "@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": "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",
-    "node-sass": "^4.13.1",
-    "query-string": "^6.11.1",
+    "moment": "^2.25.3",
+    "node-sass": "^4.14.1",
+    "query-string": "^6.12.1",
    "react": "^16.13.1",
-    "react-collapsed": "^2.2.3",
-    "react-datepicker": "^2.14.0",
+    "react-collapsed": "^3.0.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/react": "^10.0.1",
+    "@testing-library/jest-dom": "^5.7.0",
+    "@testing-library/react": "^10.0.4",
    "@types/classnames": "^2.2.10",
    "@types/is-url": "^1.2.28",
-    "@types/jest": "^25.1.4",
-    "@types/react": "^16.9.23",
+    "@types/jest": "^25.2.2",
+    "@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",
-    "react-scripts": "^3.4.0",
-    "source-map-explorer": "^2.4.0",
-    "typescript": "^3.8.3"
+    "jest-mock-axios": "^4.0.0",
+    "react-scripts": "^3.4.1",
+    "source-map-explorer": "^2.4.2",
+    "typescript": "^3.9.2"
  },
  "repository": {
    "type": "git",
--- a/client/src/components/atoms/Account.module.scss
+++ b/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;
 }

--- a/client/src/components/atoms/Account.tsx
+++ b/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
--- a/client/src/components/atoms/Button.module.scss
+++ b/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;
    }
 }

--- a/client/src/components/atoms/CategoryImage.module.scss
+++ b/client/src/components/atoms/CategoryImage.module.scss
@ -8,22 +8,18 @@
    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;
 }

 .header {
-    // stylelint-disable value-keyword-case
-    composes: categoryimage;
-    // stylelint-enable value-keyword-case
+    composes: categoryImage;
    height: 8rem;
    margin-top: $spacer / $line-height;
 }

 .dimmed {
-    // stylelint-disable value-keyword-case
-    composes: categoryimage;
-    // stylelint-enable value-keyword-case
-    opacity: .6;
+    composes: categoryImage;
+    opacity: 0.6;
 }
--- a/client/src/components/atoms/Form/Input.module.scss
+++ b/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 {
--- a/client/src/components/atoms/Form/InputDate.module.scss
+++ b/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 {
--- a/client/src/components/atoms/Form/Label.module.scss
+++ b/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;
    }
 }
--- a/client/src/components/atoms/Modal.module.scss
+++ b/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;
    }
 }

--- a/client/src/components/atoms/Seo.tsx
+++ b/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'
--- a/client/src/components/atoms/Spinner.module.scss
+++ b/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;
    }
 }

--- a/client/src/components/molecules/AccountStatus/Indicator.module.scss
+++ b/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;
-    // stylelint-enable value-keyword-case
+    composes: statusIndicator;
    background: none;
    width: 0;
    height: 0;
@ -30,9 +28,7 @@

 /* green circle */
 .statusIndicatorActive {
-    // stylelint-disable value-keyword-case
-    composes: statusindicator;
-    // stylelint-enable value-keyword-case
+    composes: statusIndicator;
    border-radius: 50%;
    background: $green;
 }
--- a/client/src/components/molecules/AccountStatus/Indicator.tsx
+++ b/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}
--- a/client/src/components/molecules/AccountStatus/Popover.module.scss
+++ b/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 {
--- a/client/src/components/molecules/AccountStatus/Popover.tsx
+++ b/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
--- a/client/src/components/molecules/AccountStatus/index.tsx
+++ b/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
        }))
    }
--- a/client/src/components/molecules/Dropzone.module.scss
+++ b/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;
 }

--- a/client/src/components/molecules/Dropzone.test.tsx
+++ b/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)
--- a/client/src/components/molecules/Dropzone.tsx
+++ b/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
    ])

--- a/client/src/components/molecules/JobTeaser.tsx
+++ b/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}`}
--- a/client/src/components/molecules/Pagination.tsx
+++ b/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="→"
--- a/client/src/components/molecules/VersionNumbers/VersionStatus.module.scss
+++ b/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;
--- a/client/src/components/molecules/VersionNumbers/VersionTable.module.scss
+++ b/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;
        }
--- a/client/src/components/molecules/VersionNumbers/VersionTable.tsx
+++ b/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'
--- a/client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss
+++ b/client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss
@ -8,13 +8,13 @@
    padding: 0;
    margin: 0;
    margin-left: -1rem;
-    margin-top: -.1rem;
-    padding-right: .5rem;
+    margin-top: -0.1rem;
+    padding-right: 0.5rem;
    cursor: pointer;

    svg {
        fill: $brand-grey-light;
-        transition: .2s ease-out;
+        transition: 0.2s ease-out;
    }
 }

--- a/client/src/components/molecules/VersionNumbers/index.tsx
+++ b/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}`}
--- a/client/src/components/organisms/AssetsUser.tsx
+++ b/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}
--- a/client/src/components/organisms/ChannelTeaser.module.scss
+++ b/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%;
--- a/client/src/components/organisms/ChannelTeaser.tsx
+++ b/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: [],
--- a/client/src/components/organisms/Footer.module.scss
+++ b/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;
    }
--- a/client/src/components/organisms/Footer.tsx
+++ b/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>
--- a/client/src/components/organisms/Header.module.scss
+++ b/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;
 }
--- a/client/src/components/organisms/Header.tsx
+++ b/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} />
--- a/client/src/components/organisms/WalletSelector.module.scss
+++ b/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;
 }

--- a/client/src/components/organisms/Web3message.tsx
+++ b/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:
--- a/client/src/components/templates/Asset/AssetDetails.module.scss
+++ b/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%;
    }
--- a/client/src/components/templates/Asset/AssetDetails.test.tsx
+++ b/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))
--- a/client/src/components/templates/Asset/AssetDetails.tsx
+++ b/client/src/components/templates/Asset/AssetDetails.tsx
@ -119,8 +119,8 @@ export default function AssetDetails({
                </h2>
                <ul>
                    {metaFixed
-                        .filter(item => item.show)
-                        .map(item => (
+                        .filter((item) => item.show)
+                        .map((item) => (
                            <MetaFixedItem
                                key={shortid.generate()}
                                name={item.name}
--- a/client/src/components/templates/Asset/AssetFile.module.scss
+++ b/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
--- a/client/src/components/templates/Asset/AssetFile.tsx
+++ b/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}
--- a/client/src/components/templates/Asset/AssetFilesDetails.tsx
+++ b/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>
--- a/client/src/components/templates/Asset/AssetJob.module.scss
+++ b/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 {
--- a/client/src/components/templates/Asset/AssetJob.tsx
+++ b/client/src/components/templates/Asset/AssetJob.tsx
@ -14,14 +14,14 @@ interface JobsProps {
    ddo: DDO
 }

-export default function AssetsJobs({ ddo, ocean }: JobsProps) {
-    const rawAlgorithmMeta = {
-        rawcode: `console.log('Hello world'!)`,
-        format: 'docker-image',
-        version: '0.1',
-        container: {}
-    }
+const rawAlgorithmMeta = {
+    rawcode: `console.log('Hello world'!)`,
+    format: 'docker-image',
+    version: '0.1',
+    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>
-                    <span className={styles.bold}>New job</span>
-                    <div className={styles.dataType}>
-                        <Input
-                            type="select"
-                            name="select"
-                            label="Select data type"
-                            placeholder=""
-                            value={computeType}
-                            options={computeOptions.map(x => x.name)}
-                            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 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>
                                )}
-                            </ReactDropzone>
-                        </div>
-                        <div className={styles.jobButtonWrapper}>
-                            <Button
-                                primary
-                                onClick={() => startJob()}
-                                disabled={
-                                    isJobStarting ||
-                                    file === null ||
-                                    computeType === ''
-                                }
-                                name="Purchase access"
-                            >
-                                Start job
-                            </Button>
-                        </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>
-                    ) : (
-                        ''
-                    )}
+                                {file !== null && (
+                                    <div className={styles.filleddragndrop}>
+                                        You selected: {(file as any).path}
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </ReactDropzone>
+                </div>
+                <div className={styles.jobButtonWrapper}>
+                    <Button
+                        primary
+                        onClick={() => startJob()}
+                        disabled={
+                            isJobStarting || file === null || computeType === ''
+                        }
+                        name="Purchase access"
+                    >
+                        Start job
+                    </Button>
                </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>
    )
 }
--- a/client/src/components/templates/Channel.tsx
+++ b/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: [],
--- a/client/src/context/MarketProvider.test.tsx
+++ b/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>
--- a/client/src/data/computeOptions.json
+++ b/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",
-      "image": "python",
-      "tag": "3.6"
+      "entrypoint": "python $ALGO",
+      "image": "oceanprotocol/algo_dockers",
+      "tag": "python-panda"
    }
  }
-]
+]
--- a/client/src/routes/Channels.tsx
+++ b/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}
--- a/client/src/routes/Home/index.module.scss
+++ b/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;
    }
--- a/client/src/routes/Publish/Files/Ipfs/Form.module.scss
+++ b/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;
--- a/client/src/routes/Publish/Files/Ipfs/Status.module.scss
+++ b/client/src/routes/Publish/Files/Ipfs/Status.module.scss
@ -7,13 +7,13 @@

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

--- a/client/src/routes/Publish/Files/Item.module.scss
+++ b/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;
    }
 }

--- a/client/src/routes/Publish/Files/index.tsx
+++ b/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)
--- a/client/src/routes/Publish/Progress.module.scss
+++ b/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%;
--- a/client/src/routes/Publish/Step.tsx
+++ b/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 ||
--- a/client/src/routes/Publish/StepRegisterContent.module.scss
+++ b/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 {
--- a/client/src/routes/Publish/index.tsx
+++ b/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.`}
--- a/client/src/serviceWorker.ts
+++ b/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()
        })
    }
--- a/client/src/styles/_animations.scss
+++ b/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;
    }
--- a/client/src/styles/_variables.scss
+++ b/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-mini: .65rem;
+$font-size-small: 0.85rem;
+$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;
--- a/client/src/styles/global.scss
+++ b/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-right: .15rem;
+    padding-left: 0.15rem;
+    padding-right: 0.15rem;
 }

 a > code {
--- a/client/src/utils/getUserJobs.ts
+++ b/client/src/utils/getUserJobs.ts
@ -1,43 +1,13 @@
-const tempList = [
-    {
-        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
-    }
-]
+import { Account } from '@oceanprotocol/squid'
+
 export async function getUserJobs(ocean: any, account: string) {
    try {
-        const accounts = await ocean.accounts.list()
-        // const jobList = await ocean.compute.status(account)
-        // const jobList = await ocean.compute.status(accounts[0])
+        const account = await ocean.accounts.list()

-        return tempList
+        await account.authenticate()
+        const jobList = await ocean.compute.status(account[0])
+        return jobList
    } catch (error) {
-        console.error(error.message)
+        console.error(error)
    }
 }
--- a/cypress/integration/1_publish.spec.js
+++ b/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')
-            .contains('+ From URL')
-            .click()
+        cy.get('button').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')
-            .contains('Add File')
-            .click()
+        cy.get('button').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')
-            .contains('Next →')
-            .should('not.be.disabled')
-            .click()
+        cy.get('button').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')
-            .contains('Next →')
-            .should('not.be.disabled')
-            .click()
+        cy.get('button').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')
-            .contains('+ From URL')
-            .click()
+        cy.get('button').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')
-            .contains('Add File')
-            .click()
+        cy.get('button').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')
-            .contains('Next →')
-            .should('not.be.disabled')
-            .click()
+        cy.get('button').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')
-            .contains('Next →')
-            .should('not.be.disabled')
-            .click()
+        cy.get('button').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/', '')
--- a/cypress/integration/2_search.spec.js
+++ b/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')
-            .contains('Search')
-            .click()
+        cy.get('button').contains('Search').click()
        // Verify there are results
        cy.get('article > a', { timeout: 60000 }).should(
            'have.length.greaterThan',
--- a/cypress/integration/3_consume.spec.js
+++ b/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}`)
        })

--- a/cypress/integration/4_faucet.spec.js
+++ b/cypress/integration/4_faucet.spec.js
@ -10,22 +10,16 @@ describe('Faucet', () => {
    })

    beforeEach(() => {
-        cy.get('button[name="FaucetETH"]')
-            .first()
-            .as('button')
+        cy.get('button[name="FaucetETH"]').first().as('button')
    })

    it('Faucet button is clickable when user is connected.', () => {
-        cy.get('@button')
-            .contains('Request ETH')
-            .should('not.be.disabled')
+        cy.get('@button').contains('Request ETH').should('not.be.disabled')
    })

    it('should execute faucet call', () => {
        // Execute call
-        cy.get('@button')
-            .contains('Request ETH')
-            .click()
+        cy.get('@button').contains('Request ETH').click()
        // Verify that we got response from server
        cy.contains(/(Successfully added|Already requested)/, {
            timeout: 60000
--- a/cypress/support/index.js
+++ b/cypress/support/index.js
@ -1,3 +1,3 @@
 /// <reference types="Cypress" />

-before(function() {})
+before(function () {})
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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:css": "prettier-stylelint --ignore-path .gitignore --write --quiet '**/*.{css,scss}'",
-    "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 .",
+    "format": "prettier --write '**/*.{js,jsx,ts,tsx,css,scss}'",
+    "lint": "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",
-    "@typescript-eslint/eslint-plugin": "^2.24.0",
-    "@typescript-eslint/parser": "^2.24.0",
-    "auto-changelog": "^1.16.2",
+    "@release-it/bumper": "^1.1.1",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
+    "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-stylelint": "^0.4.2",
-    "release-it": "^13.1.1",
-    "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",
+    "prettier": "^2.0.5",
+    "release-it": "^13.6.1",
+    "start-server-and-test": "^1.11.0",
    "typescript": "^3.8.3"
  },
  "repository": {
--- a/scripts/coverage.sh
+++ b/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
--- a/server/package-lock.json
+++ b/server/package-lock.json
--- a/server/package.json
+++ b/server/package.json
@ -9,36 +9,35 @@
    "serve": "node dist/src/server.js",
    "build": "tsc",
    "test": "jest --coverage --silent",
-    "test:watch": "jest --coverage --watch",
-    "coverage": "cat coverage/lcov.info | codacy-coverage --token 8801f827fe1144ffa85cd7da94f2bbf7"
+    "test:watch": "jest --coverage --watch"
  },
  "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",
-    "morgan": "^1.9.1",
+    "express-validator": "^6.5.0",
+    "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/jest": "^25.1.4",
+    "@types/express": "^4.17.6",
+    "@types/jest": "^25.2.3",
    "@types/morgan": "^1.9.0",
-    "@types/node": "^13.9.2",
-    "@types/request": "^2.48.4",
-    "@types/supertest": "^2.0.8",
+    "@types/node": "^14.0.1",
+    "@types/request": "^2.48.5",
+    "@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",
-    "typescript": "^3.8.3"
+    "ts-node": "^8.10.1",
+    "typescript": "^3.9.2"
  },
  "repository": {
    "type": "git",
--- a/server/test/api.test.ts
+++ b/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)
-            .post('/api/v1/urlcheck')
-            .send({
-                url:
-                    'ipfs://QmX5LRpEVocfks9FNDnRoK2imf2fy9mPpP4wfgaDVXWfYD/video.mp4'
-            })
+        const response = await request(server).post('/api/v1/urlcheck').send({
+            url:
+                'ipfs://QmX5LRpEVocfks9FNDnRoK2imf2fy9mPpP4wfgaDVXWfYD/video.mp4'
+        })
        expect(response.status).toBe(200)
        expect(response.body).toBeTruthy()
    })