Merge branch 'master' into feature/network_switcher

2023-03-15 18:03:00 +01:00 · 2020-02-01 15:46:36 +01:00 · 2020-02-01 15:46:36 +01:00 · 40ed5e101e
commit 40ed5e101e
parent 4b9418e94a 57f2022f37
49 changed files with 9132 additions and 8186 deletions
--- a/.travis.yml
+++ b/.travis.yml
@ -28,10 +28,10 @@ env:
    - IPFS_GATEWAY_URI="https://ipfs.oceanprotocol.com"

    # start Barge with these versions
-    - BRIZO_VERSION=v0.7.2
+    - BRIZO_VERSION=v0.8.1
    - AQUARIUS_VERSION=v1.0.5
-    - KEEPER_VERSION=v0.12.7
-    - EVENTS_HANDLER_VERSION=v0.3.4
+    - KEEPER_VERSION=v0.13.2
+    - EVENTS_HANDLER_VERSION=v0.4.4
    - KEEPER_OWNER_ROLE_ADDRESS="0xe2DD09d719Da89e5a3D0F2549c7E24566e947260"
    - FAUCET_TIMESPAN=0

--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,6 +4,25 @@ All notable changes to this project will be documented in this file. Dates are d

 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).

+#### [v2.2.0](https://github.com/oceanprotocol/commons/compare/v2.1.0...v2.2.0)
+
+> 1 February 2020
+
+- bump to react-scripts v3.3 [`#209`](https://github.com/oceanprotocol/commons/pull/209)
+- package updates [`65b72e5`](https://github.com/oceanprotocol/commons/commit/65b72e597d16f8660f74b0b3a491aba723488a56)
+- fix Travis [`3e814b9`](https://github.com/oceanprotocol/commons/commit/3e814b98a7f990cfee6b910f57eb02cdd1a767f1)
+- package updates [`8089a7a`](https://github.com/oceanprotocol/commons/commit/8089a7aa3e4504e1defb3a6809e4d8b4c2a823fb)
+
+#### [v2.1.0](https://github.com/oceanprotocol/commons/compare/v2.0.1...v2.1.0)
+
+> 23 January 2020
+
+- Fix search code duplication [`#216`](https://github.com/oceanprotocol/commons/pull/216)
+- bump to keeper-contracts v0.13 [`#210`](https://github.com/oceanprotocol/commons/pull/210)
+- bump to keeper-contracts v0.13.0 [`5ba5cd9`](https://github.com/oceanprotocol/commons/commit/5ba5cd9e20f7bc7ad7aebeb4b9c54f0aea549786)
+- fix code duplication [`c5ea3b7`](https://github.com/oceanprotocol/commons/commit/c5ea3b7c8a989b7c9239cc4292de53680b36c06b)
+- bump all components [`37296c5`](https://github.com/oceanprotocol/commons/commit/37296c502e24a1e0aedc021bfa666dd33dce323d)
+
 #### [v2.0.1](https://github.com/oceanprotocol/commons/compare/v2.0.0...v2.0.1)

 > 7 January 2020
@ -11,6 +30,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - more additionalInformation checks [`#213`](https://github.com/oceanprotocol/commons/pull/213)
 - remove editorconfig [`#211`](https://github.com/oceanprotocol/commons/pull/211)
 - remove editorconfig, define all styling in prettierrc [`f8dfaa4`](https://github.com/oceanprotocol/commons/commit/f8dfaa438c42e9d6c25ae9ac096129da95e431c3)
+- Release 2.0.1 [`e9e5dd9`](https://github.com/oceanprotocol/commons/commit/e9e5dd9049bd60041d1483f102fdd6749b5a9b70)

 #### [v2.0.0](https://github.com/oceanprotocol/commons/compare/v2.0.0-beta.3...v2.0.0)

--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@ -1,7 +1,7 @@
 {
  "name": "commons-client",
  "description": "Ocean Protocol marketplace frontend to explore, download, and publish open data sets.",
-  "version": "2.0.1",
+  "version": "2.2.0",
  "license": "Apache-2.0",
  "scripts": {
    "start": "react-scripts start",
@ -14,62 +14,59 @@
  },
  "dependencies": {
    "@oceanprotocol/art": "^2.2.0",
-    "@oceanprotocol/squid": "^1.0.0",
+    "@oceanprotocol/squid": "^1.3.0",
    "@oceanprotocol/typographies": "^0.1.0",
-    "@sindresorhus/slugify": "^0.9.1",
-    "@truffle/hdwallet-provider": "^1.0.26",
-    "axios": "^0.19.0",
+    "@sindresorhus/slugify": "^0.10.0",
+    "@truffle/hdwallet-provider": "^1.0.30",
+    "axios": "^0.19.2",
    "bip39": "^3.0.2",
    "classnames": "^2.2.6",
    "ethereum-blockies": "github:MyEtherWallet/blockies",
    "filesize": "^6.0.1",
    "history": "^4.10.1",
-    "ipfs-http-client": "^39.0.2",
+    "ipfs-http-client": "39.0.2",
    "is-url-superb": "^3.0.0",
    "moment": "^2.24.0",
-    "query-string": "^6.9.0",
+    "node-sass": "^4.13.1",
+    "query-string": "^6.10.1",
    "react": "^16.12.0",
    "react-collapsed": "^2.2.3",
-    "react-datepicker": "^2.10.1",
+    "react-datepicker": "^2.11.0",
    "react-dom": "^16.12.0",
    "react-dotdotdot": "^1.3.1",
    "react-dropzone": "^10.2.1",
    "react-ga": "^2.7.0",
    "react-helmet": "^5.2.1",
-    "react-markdown": "^4.2.2",
+    "react-markdown": "^4.3.1",
    "react-modal": "^3.11.1",
-    "react-moment": "^0.9.6",
+    "react-moment": "^0.9.7",
    "react-paginate": "^6.3.2",
-    "react-popper": "^1.3.6",
+    "react-popper": "^1.3.7",
    "react-router-dom": "^5.1.2",
    "react-transition-group": "^4.3.0",
    "shortid": "^2.2.15",
-    "web3": "^1.2.4"
+    "web3": "^1.2.5"
  },
  "devDependencies": {
    "@react-mock/state": "^0.1.8",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
+    "@testing-library/jest-dom": "^5.0.2",
+    "@testing-library/react": "^9.4.0",
    "@types/classnames": "^2.2.9",
    "@types/is-url": "^1.2.28",
-    "@types/jest": "^24.0.23",
-    "@types/react": "^16.9.15",
-    "@types/react-datepicker": "^2.9.5",
-    "@types/react-dom": "^16.9.4",
-    "@types/react-helmet": "^5.0.14",
-    "@types/react-modal": "^3.10.0",
+    "@types/jest": "^24.9.1",
+    "@types/react": "^16.9.19",
+    "@types/react-datepicker": "^2.10.0",
+    "@types/react-dom": "^16.9.5",
+    "@types/react-helmet": "^5.0.15",
+    "@types/react-modal": "^3.10.4",
    "@types/react-paginate": "^6.2.1",
    "@types/react-router-dom": "^5.1.3",
    "@types/react-transition-group": "^4.2.3",
    "@types/shortid": "^0.0.29",
-    "@typescript-eslint/eslint-plugin": "^1.6.0",
-    "@typescript-eslint/parser": "^1.6.0",
-    "eslint": "^5.16.0",
-    "jest-mock-axios": "^3.1.2",
-    "node-sass": "^4.13.0",
-    "react-scripts": "3.0.1",
-    "source-map-explorer": "^2.1.2",
-    "typescript": "^3.7.3"
+    "jest-mock-axios": "^3.2.0",
+    "react-scripts": "^3.3.1",
+    "source-map-explorer": "^2.2.2",
+    "typescript": "^3.7.5"
  },
  "repository": {
    "type": "git",
--- a/client/src/App.test.tsx
+++ b/client/src/App.test.tsx
@ -2,7 +2,7 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import App from './App'
 import { User } from './context'
-import { userMock, userMockConnected } from '../__mocks__/user-mock'
+import { userMock, userMockConnected } from './__mocks__/user-mock'

 describe('App', () => {
    it('should be able to run tests', () => {
--- a/client/src/Routes.test.tsx
+++ b/client/src/Routes.test.tsx
@ -3,7 +3,7 @@ import { BrowserRouter as Router } from 'react-router-dom'
 import { render } from '@testing-library/react'
 import Routes from './Routes'
 import { User } from './context'
-import { userMockConnected } from '../__mocks__/user-mock'
+import { userMockConnected } from './__mocks__/user-mock'

 describe('Routes', () => {
    it('renders without crashing', () => {
--- a/client/src/mocks/axios.ts
+++ b/client/src/mocks/axios.ts
--- a/client/src/mocks/market-mock.ts
+++ b/client/src/mocks/market-mock.ts
--- a/client/src/mocks/ocean-mock.ts
+++ b/client/src/mocks/ocean-mock.ts
--- a/client/src/mocks/user-mock.ts
+++ b/client/src/mocks/user-mock.ts
--- a/client/src/components/atoms/Account.test.tsx
+++ b/client/src/components/atoms/Account.test.tsx
@ -3,7 +3,7 @@ import { render, fireEvent } from '@testing-library/react'
 import { toDataUrl } from 'ethereum-blockies'
 import Account from './Account'
 import { User } from '../../context'
-import { userMockConnected } from '../../../__mocks__/user-mock'
+import { userMockConnected } from '../../__mocks__/user-mock'

 describe('Account', () => {
    it('renders without crashing', () => {
--- a/client/src/components/atoms/Form/Input.tsx
+++ b/client/src/components/atoms/Form/Input.tsx
@ -56,7 +56,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
        }
    }

-    public toggleFocus = () => {
+    public handleFocus = () => {
        this.setState({ isFocused: !this.state.isFocused })
    }

@ -94,8 +94,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
                            className={styles.select}
                            name={name}
                            required={required}
-                            onFocus={this.toggleFocus}
-                            onBlur={this.toggleFocus}
+                            onFocus={this.handleFocus}
+                            onBlur={this.handleFocus}
                            onChange={onChange}
                            value={value}
                        >
@ -117,8 +117,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
                        <textarea
                            id={name}
                            className={styles.input}
-                            onFocus={this.toggleFocus}
-                            onBlur={this.toggleFocus}
+                            onFocus={this.handleFocus}
+                            onBlur={this.handleFocus}
                            {...this.props}
                        />
                    </div>
@ -154,8 +154,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
                            selected={this.state.dateCreated}
                            onChange={this.handleDateChange}
                            className={styles.input}
-                            onFocus={this.toggleFocus}
-                            onBlur={this.toggleFocus}
+                            onFocus={this.handleFocus}
+                            onBlur={this.handleFocus}
                            id={name}
                            name={name}
                        />
@ -170,8 +170,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
                                    id={name}
                                    type={type || 'text'}
                                    className={styles.input}
-                                    onFocus={this.toggleFocus}
-                                    onBlur={this.toggleFocus}
+                                    onFocus={this.handleFocus}
+                                    onBlur={this.handleFocus}
                                    {...this.props}
                                />
                                {group}
@ -181,8 +181,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
                                id={name}
                                type={type || 'text'}
                                className={styles.input}
-                                onFocus={this.toggleFocus}
-                                onBlur={this.toggleFocus}
+                                onFocus={this.handleFocus}
+                                onBlur={this.handleFocus}
                                {...this.props}
                            />
                        )}
--- a/client/src/components/atoms/Modal.tsx
+++ b/client/src/components/atoms/Modal.tsx
@ -8,7 +8,7 @@ const Modal = ({
    title,
    description,
    isOpen,
-    toggleModal,
+    onToggleModal,
    children,
    onAfterOpen,
    onRequestClose,
@ -17,7 +17,7 @@ const Modal = ({
    title: string
    description?: string
    isOpen: boolean
-    toggleModal: () => void
+    onToggleModal: () => void
    children: any
    onAfterOpen?: () => void
    onRequestClose?: () => void
@ -34,7 +34,7 @@ const Modal = ({
        >
            <button
                className={styles.close}
-                onClick={toggleModal}
+                onClick={onToggleModal}
                data-testid="closeModal"
            >
                &times;
--- a/client/src/components/molecules/AccountStatus/Popover.test.tsx
+++ b/client/src/components/molecules/AccountStatus/Popover.test.tsx
@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import Popover from './Popover'
-import { userMock, userMockConnected } from '../../../../__mocks__/user-mock'
-import { marketMock } from '../../../../__mocks__/market-mock'
+import { userMock, userMockConnected } from '../../../__mocks__/user-mock'
+import { marketMock } from '../../../__mocks__/market-mock'
 import { User, Market } from '../../../context'

 describe('Popover', () => {
--- a/client/src/components/molecules/AccountStatus/Popover.tsx
+++ b/client/src/components/molecules/AccountStatus/Popover.tsx
@ -18,36 +18,32 @@ export default class Popover extends PureComponent<{
                ref={this.props.forwardedRef}
                style={this.props.style}
            >
-                {
-                    <>
+                <div className={styles.popoverInfoline}>
+                    <Account />
+                </div>
+
+                {account && balance && (
+                    <div className={styles.popoverInfoline}>
+                        <span
+                            className={styles.balance}
+                            title={(balance.eth / 1e18).toFixed(10)}
+                        >
+                            <strong>
+                                {(balance.eth / 1e18).toFixed(3).slice(0, -1)}
+                            </strong>{' '}
+                            ETH
+                        </span>
+                        <span className={styles.balance}>
+                            <strong>{balance.ocn}</strong> OCEAN
+                        </span>
+                    </div>
+                )}
+
+                <Market.Consumer>
+                    {market => (
                        <div className={styles.popoverInfoline}>
-                            <Account />
-                        </div>
-
-                        {account && balance && (
-                            <div className={styles.popoverInfoline}>
-                                <span
-                                    className={styles.balance}
-                                    title={(balance.eth / 1e18).toFixed(10)}
-                                >
-                                    <strong>
-                                        {(balance.eth / 1e18)
-                                            .toFixed(3)
-                                            .slice(0, -1)}
-                                    </strong>{' '}
-                                    ETH
-                                </span>
-                                <span className={styles.balance}>
-                                    <strong>{balance.ocn}</strong> OCEAN
-                                </span>
-                            </div>
-                        )}
-
-                        <Market.Consumer>
-                            {market => (
-                                <div className={styles.popoverInfoline}>
-                                    {network && !market.networkMatch
-                                        ? `Please connect to Custom RPC
+                            {network && !market.networkMatch
+                                ? `Please connect to Custom RPC
                                           ${
                                               market.network === 'Pacific'
                                                   ? 'https://pacific.oceanprotocol.com'
@ -57,13 +53,10 @@ export default class Popover extends PureComponent<{
                                                   ? 'https://duero.dev-ocean.com'
                                                   : 'http://localhost:8545'
                                           }`
-                                        : network &&
-                                          `Connected to ${network} network`}
-                                </div>
-                            )}
-                        </Market.Consumer>
-                    </>
-                }
+                                : network && `Connected to ${network} network`}
+                        </div>
+                    )}
+                </Market.Consumer>
            </div>
        )
    }
--- a/client/src/components/molecules/SearchResults.module.scss
+++ b/client/src/components/molecules/SearchResults.module.scss
@ -0,0 +1,36 @@
+@import '../../styles/variables';
+
+.results {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: $spacer;
+    max-width: calc(18rem + #{$spacer * 2});
+    margin: auto;
+    margin-top: $spacer * 2;
+
+    @media (min-width: $break-point--small) {
+        margin-left: 0;
+        margin-right: 0;
+        max-width: none;
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: $break-point--medium) {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+.simple {
+    composes: results;
+    margin-top: 0;
+
+    @media (min-width: $break-point--medium) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+.empty {
+    text-align: center;
+    margin-top: $spacer * 4;
+    color: $brand-grey-light;
+}
--- a/client/src/components/molecules/SearchResults.tsx
+++ b/client/src/components/molecules/SearchResults.tsx
@ -0,0 +1,40 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { DDO } from '@oceanprotocol/squid'
+import Spinner from '../atoms/Spinner'
+import AssetTeaser from './AssetTeaser'
+import styles from './SearchResults.module.scss'
+
+export interface SearchResultsState {
+    results: DDO[]
+    totalResults: number
+    offset: number
+    totalPages: number
+    currentPage: number
+    isLoading: boolean
+}
+
+export default function SearchResults({
+    isLoading,
+    results,
+    simpleGrid
+}: {
+    isLoading: boolean
+    results: DDO[]
+    simpleGrid?: boolean
+}) {
+    return isLoading ? (
+        <Spinner message="Searching..." />
+    ) : results && results.length ? (
+        <div className={simpleGrid ? styles.simple : styles.results}>
+            {results.map((asset: any) => (
+                <AssetTeaser key={asset.id} asset={asset} />
+            ))}
+        </div>
+    ) : (
+        <div className={styles.empty}>
+            <p>No Data Sets Found.</p>
+            <Link to="/publish">+ Publish A Data Set</Link>
+        </div>
+    )
+}
--- a/client/src/components/molecules/VersionNumbers/index.test.tsx
+++ b/client/src/components/molecules/VersionNumbers/index.test.tsx
@ -5,7 +5,7 @@ import { StateMock } from '@react-mock/state'
 import VersionNumbers from '.'

 import { User } from '../../../context'
-import { userMockConnected } from '../../../../__mocks__/user-mock'
+import { userMockConnected } from '../../../__mocks__/user-mock'

 afterEach(() => {
    mockAxios.reset()
--- a/client/src/components/organisms/AssetsLatest.test.tsx
+++ b/client/src/components/organisms/AssetsLatest.test.tsx
@ -3,7 +3,7 @@ import { BrowserRouter } from 'react-router-dom'
 import { render } from '@testing-library/react'
 import AssetsLatest from './AssetsLatest'
 import { User } from '../../context'
-import { userMockConnected } from '../../../__mocks__/user-mock'
+import { userMockConnected } from '../../__mocks__/user-mock'

 describe('AssetsLatest', () => {
    it('renders without crashing', () => {
--- a/client/src/components/organisms/ChannelTeaser.module.scss
+++ b/client/src/components/organisms/ChannelTeaser.module.scss
@ -74,13 +74,3 @@
 .channelTeaser {
    color: $brand-grey;
 }
-
-.channelResults {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: $spacer;
-
-    @media (min-width: $break-point--small) {
-        grid-template-columns: 1fr 1fr;
-    }
-}
--- a/client/src/components/organisms/ChannelTeaser.test.tsx
+++ b/client/src/components/organisms/ChannelTeaser.test.tsx
@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import ChannelTeaser from './ChannelTeaser'
 import { BrowserRouter } from 'react-router-dom'
 import { User } from '../../context'
-import { userMockConnected } from '../../../__mocks__/user-mock'
+import { userMockConnected } from '../../__mocks__/user-mock'

 describe('ChannelTeaser', () => {
    it('renders without crashing', () => {
--- a/client/src/components/organisms/ChannelTeaser.tsx
+++ b/client/src/components/organisms/ChannelTeaser.tsx
@ -1,19 +1,18 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import { User } from '../../context'
-import { Logger } from '@oceanprotocol/squid'
-import Spinner from '../atoms/Spinner'
-import AssetTeaser from '../molecules/AssetTeaser'
+import { Logger, DDO } from '@oceanprotocol/squid'
+import CategoryImage from '../atoms/CategoryImage'
+import SearchResults from '../molecules/SearchResults'
 import styles from './ChannelTeaser.module.scss'
 import channels from '../../data/channels.json'
-import CategoryImage from '../atoms/CategoryImage'

 interface ChannelTeaserProps {
    channel: string
 }

 interface ChannelTeaserState {
-    channelAssets?: any[]
+    channelAssets?: DDO[]
    isLoadingChannel?: boolean
 }

@ -81,17 +80,11 @@ export default class ChannelTeaser extends Component<
                    </header>
                </div>
                <div>
-                    {isLoadingChannel ? (
-                        <Spinner message="Loading..." />
-                    ) : channelAssets && channelAssets.length ? (
-                        <div className={styles.channelResults}>
-                            {channelAssets.map((asset: any) => (
-                                <AssetTeaser key={asset.id} asset={asset} />
-                            ))}
-                        </div>
-                    ) : (
-                        <div>No data sets found.</div>
-                    )}
+                    <SearchResults
+                        isLoading={isLoadingChannel}
+                        results={channelAssets}
+                        simpleGrid
+                    />
                </div>
            </div>
        )
--- a/client/src/components/organisms/WalletSelector.test.tsx
+++ b/client/src/components/organisms/WalletSelector.test.tsx
@ -3,8 +3,8 @@ import { render, fireEvent } from '@testing-library/react'
 import ReactModal from 'react-modal'
 import WalletSelector from './WalletSelector'
 import { User, Market } from '../../context'
-import { userMockConnected } from '../../../__mocks__/user-mock'
-import { marketMock } from '../../../__mocks__/market-mock'
+import { userMockConnected } from '../../__mocks__/user-mock'
+import { marketMock } from '../../__mocks__/market-mock'

 describe('WalletSelector', () => {
    it('renders without crashing', () => {
--- a/client/src/components/organisms/WalletSelector.tsx
+++ b/client/src/components/organisms/WalletSelector.tsx
@ -90,7 +90,7 @@ export default class WalletSelector extends PureComponent<
                    title={content.title}
                    description={content.description}
                    isOpen={this.state.isModalOpen}
-                    toggleModal={this.handleToggleModal}
+                    onToggleModal={this.handleToggleModal}
                >
                    <div className={styles.info}>
                        {content.buttons.map(({ title, description, icon }) => (
--- a/client/src/components/organisms/Web3message.test.tsx
+++ b/client/src/components/organisms/Web3message.test.tsx
@ -2,8 +2,8 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import Web3message from './Web3message'
 import { User, Market } from '../../context'
-import { userMock, userMockConnected } from '../../../__mocks__/user-mock'
-import { marketMock } from '../../../__mocks__/market-mock'
+import { userMock, userMockConnected } from '../../__mocks__/user-mock'
+import { marketMock } from '../../__mocks__/market-mock'

 describe('Web3message', () => {
    it('renders with burner wallet message', () => {
--- a/client/src/components/templates/Asset/AssetFile.test.tsx
+++ b/client/src/components/templates/Asset/AssetFile.test.tsx
@ -7,8 +7,8 @@ import { StateMock } from '@react-mock/state'
 import ReactGA from 'react-ga'
 import { User, Market } from '../../../context'
 import AssetFile, { messages } from './AssetFile'
-import { userMockConnected } from '../../../../__mocks__/user-mock'
-import { marketMock } from '../../../../__mocks__/market-mock'
+import { userMockConnected } from '../../../__mocks__/user-mock'
+import { marketMock } from '../../../__mocks__/market-mock'

 const file = {
    index: 0,
--- a/client/src/components/templates/Asset/Report.tsx
+++ b/client/src/components/templates/Asset/Report.tsx
@ -36,13 +36,13 @@ export default class Report extends PureComponent<
        this.signal.cancel()
    }

-    private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    private handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
        this.setState({
            comment: event.target.value
        })
    }

-    private toggleModal = () => {
+    private handleToggleModal = () => {
        this.setState({ isModalOpen: !this.state.isModalOpen })
        this.state.isModalOpen && this.reset()
    }
@ -100,7 +100,7 @@ export default class Report extends PureComponent<
                <Button
                    link
                    className={styles.openLink}
-                    onClick={this.toggleModal}
+                    onClick={this.handleToggleModal}
                >
                    Report Data Set
                </Button>
@ -108,7 +108,7 @@ export default class Report extends PureComponent<
                    title="Report Data Set"
                    description="Found some faulty metadata, wrongly attributed data, or anything else wrong with this data set? Tell us about it and we will take a look."
                    isOpen={this.state.isModalOpen}
-                    toggleModal={this.toggleModal}
+                    onToggleModal={this.handleToggleModal}
                >
                    <div className={styles.info}>
                        <h3>{this.props.title}</h3>
@ -135,7 +135,7 @@ export default class Report extends PureComponent<
                                    help="Briefly describe what is wrong with this asset. If you want to get contacted by us, add your email at the end."
                                    required
                                    value={this.state.comment}
-                                    onChange={this.inputChange}
+                                    onChange={this.handleInputChange}
                                    rows={1}
                                />
                                <Button
--- a/client/src/components/templates/Channel.module.scss
+++ b/client/src/components/templates/Channel.module.scss
@ -1,21 +1 @@
@import '../../styles/variables';
-
-.results {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: $spacer;
-    max-width: calc(18rem + #{$spacer * 2});
-    margin: auto;
-    margin-top: $spacer * 2;
-
-    @media (min-width: $break-point--small) {
-        margin-left: 0;
-        margin-right: 0;
-        max-width: none;
-        grid-template-columns: repeat(2, 1fr);
-    }
-
-    @media (min-width: $break-point--medium) {
-        grid-template-columns: repeat(3, 1fr);
-    }
-}
--- a/client/src/components/templates/Channel.test.tsx
+++ b/client/src/components/templates/Channel.test.tsx
@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import Channel from './Channel'
 import { User } from '../../context'
 import { createMemoryHistory } from 'history'
-import { userMockConnected } from '../../../__mocks__/user-mock'
+import { userMockConnected } from '../../__mocks__/user-mock'
 import { MemoryRouter } from 'react-router'

 describe('Channel', () => {
--- a/client/src/components/templates/Channel.tsx
+++ b/client/src/components/templates/Channel.tsx
@ -1,12 +1,10 @@
 import React, { PureComponent } from 'react'
 import { Logger } from '@oceanprotocol/squid'
 import { History } from 'history'
-import Spinner from '../../components/atoms/Spinner'
 import Route from '../../components/templates/Route'
 import { User } from '../../context'
-import AssetTeaser from '../molecules/AssetTeaser'
 import Pagination from '../../components/molecules/Pagination'
-import styles from './Channel.module.scss'
+import SearchResults, { SearchResultsState } from '../molecules/SearchResults'
 import Content from '../../components/atoms/Content'
 import channels from '../../data/channels.json'
 import CategoryImage from '../atoms/CategoryImage'
@ -20,13 +18,7 @@ interface ChannelProps {
    }
 }

-interface ChannelState {
-    results: any[]
-    totalResults: number
-    offset: number
-    totalPages: number
-    currentPage: number
-    isLoading: boolean
+interface ChannelState extends SearchResultsState {
    title: string
    description: string
 }
@ -81,31 +73,28 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
        }
    }

-    private handlePageClick = async (data: { selected: number }) => {
+    private onPageClick = async (data: { selected: number }) => {
        // react-pagination starts counting at 0, we start at 1
        const toPage = data.selected + 1

        this.props.history.push({ search: `?page=${toPage}` })

-        await this.setState({ currentPage: toPage, isLoading: true })
+        this.setState({
+            currentPage: toPage,
+            isLoading: true
+        })
        await this.getChannelAssets()
    }

-    public renderResults = () =>
-        this.state.isLoading ? (
-            <Spinner message="Searching..." />
-        ) : this.state.results && this.state.results.length ? (
-            <div className={styles.results}>
-                {this.state.results.map((asset: any) => (
-                    <AssetTeaser key={asset.id} asset={asset} />
-                ))}
-            </div>
-        ) : (
-            <div>No data sets found.</div>
-        )
-
    public render() {
-        const { title, description, totalPages, currentPage } = this.state
+        const {
+            title,
+            description,
+            totalPages,
+            currentPage,
+            isLoading,
+            results
+        } = this.state

        return (
            <Route
@ -114,12 +103,12 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
                image={<CategoryImage header category={title} />}
            >
                <Content wide>
-                    {this.renderResults()}
+                    <SearchResults isLoading={isLoading} results={results} />

                    <Pagination
                        totalPages={totalPages}
                        currentPage={currentPage}
-                        handlePageClick={this.handlePageClick}
+                        handlePageClick={this.onPageClick}
                    />
                </Content>
            </Route>
--- a/client/src/context/MarketProvider.test.tsx
+++ b/client/src/context/MarketProvider.test.tsx
@ -2,7 +2,7 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import MarketProvider from './MarketProvider'
 import { User, Market } from '../context'
-import { userMockConnected } from '../../__mocks__/user-mock'
+import { userMockConnected } from '../__mocks__/user-mock'

 describe('MarketProvider', () => {
    it('renders without crashing', () => {
--- a/client/src/routes/Channels.test.tsx
+++ b/client/src/routes/Channels.test.tsx
@ -4,7 +4,7 @@ import { createMemoryHistory, createLocation } from 'history'
 import { render } from '@testing-library/react'
 import Channels from './Channels'
 import { User } from '../context'
-import { userMockConnected } from '../../__mocks__/user-mock'
+import { userMockConnected } from '../__mocks__/user-mock'

 const history = createMemoryHistory()
 const location = createLocation('/channels')
--- a/client/src/routes/Faucet/index.test.tsx
+++ b/client/src/routes/Faucet/index.test.tsx
@ -4,7 +4,7 @@ import { MemoryRouter } from 'react-router'
 import { createMemoryHistory, createLocation } from 'history'
 import Faucet from '.'
 import { User, Market } from '../../context'
-import { userMockConnected } from '../../../__mocks__/user-mock'
+import { userMockConnected } from '../../__mocks__/user-mock'

 const history = createMemoryHistory()
 const location = createLocation('/faucet')
--- a/client/src/routes/Home/Search.tsx
+++ b/client/src/routes/Home/Search.tsx
@ -16,7 +16,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
        search: ''
    }

-    private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    private handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
        this.setState({
            search: event.target.value
        })
@ -38,7 +38,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
                    label="Search for data sets"
                    placeholder="e.g. shapes of plants"
                    value={search}
-                    onChange={this.inputChange}
+                    onChange={this.handleInputChange}
                    group={
                        <Button primary disabled={!search}>
                            Search
--- a/client/src/routes/Home/index.test.tsx
+++ b/client/src/routes/Home/index.test.tsx
@ -3,7 +3,7 @@ import { Router } from 'react-router'
 import { createMemoryHistory, createLocation } from 'history'
 import { render } from '@testing-library/react'
 import Home from '.'
-import { userMock } from '../../../__mocks__/user-mock'
+import { userMock } from '../../__mocks__/user-mock'
 import { User } from '../../context'

 const history = createMemoryHistory()
--- a/client/src/routes/Publish/Files/ItemForm.tsx
+++ b/client/src/routes/Publish/Files/ItemForm.tsx
@ -45,7 +45,7 @@ export default class ItemForm extends PureComponent<
        this.props.addFile(url)
    }

-    private onChangeUrl = (e: React.FormEvent<HTMLInputElement>) => {
+    private handleChangeUrl = (e: React.FormEvent<HTMLInputElement>) => {
        this.setState({ url: e.currentTarget.value })
        this.clearErrors()
    }
@ -67,7 +67,7 @@ export default class ItemForm extends PureComponent<
                    type="url"
                    placeholder={this.props.placeholder}
                    value={url}
-                    onChange={this.onChangeUrl}
+                    onChange={this.handleChangeUrl}
                    help="Supported protocols are http(s):// and ipfs://"
                />

--- a/client/src/routes/Publish/Files/index.test.tsx
+++ b/client/src/routes/Publish/Files/index.test.tsx
@ -46,7 +46,6 @@ describe('Files', () => {

    it('renders without crashing', () => {
        const { container } = render(ui)
-
        expect(container.firstChild).toBeInTheDocument()
        expect(container.querySelector('.itemForm')).not.toBeInTheDocument()
    })
@ -82,21 +81,21 @@ describe('Files', () => {
    })

    it('item can be removed', () => {
-        const { getByTitle } = render(ui)
-
-        fireEvent.click(getByTitle('Remove item'))
+        const { getAllByTitle } = render(ui)
+        fireEvent.click(getAllByTitle('Remove item')[0])
        expect(files.length).toBe(0)
    })

    it('item can be added', async () => {
-        const { getByText, getByPlaceholderText } = render(ui)
+        const { getAllByText, getByText, getByPlaceholderText } = render(ui)

-        fireEvent.click(getByText('+ From URL'))
+        fireEvent.click(getAllByText('+ From URL')[0])
        await waitForElement(() => getByText('- Cancel'))
        fireEvent.change(getByPlaceholderText('Hello'), {
            target: { value: 'https://hello.com' }
        })
        fireEvent.click(getByText('Add File'))
+
        mockAxios.mockResponse(mockResponse)
        expect(mockAxios).toHaveBeenCalled()
    })
--- a/client/src/routes/Publish/index.test.tsx
+++ b/client/src/routes/Publish/index.test.tsx
@ -4,7 +4,7 @@ import { render, fireEvent } from '@testing-library/react'
 import { createMemoryHistory, createLocation } from 'history'
 import Publish from '.'
 import { User } from '../../context'
-import { userMockConnected } from '../../../__mocks__/user-mock'
+import { userMockConnected } from '../../__mocks__/user-mock'

 const history = createMemoryHistory()
 const location = createLocation('/publish')
--- a/client/src/routes/Publish/index.tsx
+++ b/client/src/routes/Publish/index.tsx
@ -256,7 +256,7 @@ class Publish extends Component<{}, PublishState> {
        }
    }

-    private registerAsset = async (event: FormEvent<HTMLFormElement>) => {
+    private handleRegisterAsset = async (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault()

        ReactGA.event({ category: 'Publish', action: 'registerAsset-start' })
@ -348,7 +348,7 @@ class Publish extends Component<{}, PublishState> {
                                currentStep={this.state.currentStep}
                            />

-                            <Form onSubmit={this.registerAsset}>
+                            <Form onSubmit={this.handleRegisterAsset}>
                                {steps.map((step: any, index: number) => (
                                    <Step
                                        key={index}
--- a/client/src/routes/Search.module.scss
+++ b/client/src/routes/Search.module.scss
@ -10,23 +10,3 @@
        color: $brand-grey-dark;
    }
 }
-
-.results {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: $spacer;
-
-    @media (min-width: $break-point--small) {
-        grid-template-columns: repeat(2, 1fr);
-    }
-
-    @media (min-width: $break-point--medium) {
-        grid-template-columns: repeat(3, 1fr);
-    }
-}
-
-.empty {
-    text-align: center;
-    margin-top: $spacer * 4;
-    color: $brand-grey-light;
-}
--- a/client/src/routes/Search.test.tsx
+++ b/client/src/routes/Search.test.tsx
@ -4,7 +4,7 @@ import Search from './Search'
 import { User } from '../context'
 import { createMemoryHistory } from 'history'
 import { BrowserRouter as Router } from 'react-router-dom'
-import { userMockConnected } from '../../__mocks__/user-mock'
+import { userMockConnected } from '../__mocks__/user-mock'

 const history = createMemoryHistory()

--- a/client/src/routes/Search.tsx
+++ b/client/src/routes/Search.tsx
@ -1,12 +1,12 @@
 import React, { PureComponent } from 'react'
-import { Link } from 'react-router-dom'
 import queryString from 'query-string'
 import { History, Location } from 'history'
 import { Logger } from '@oceanprotocol/squid'
-import Spinner from '../components/atoms/Spinner'
+import SearchResults, {
+    SearchResultsState
+} from '../components/molecules/SearchResults'
 import Route from '../components/templates/Route'
 import { User } from '../context'
-import AssetTeaser from '../components/molecules/AssetTeaser'
 import Pagination from '../components/molecules/Pagination'
 import styles from './Search.module.scss'
 import Content from '../components/atoms/Content'
@ -17,13 +17,7 @@ interface SearchProps {
    history: History
 }

-interface SearchState {
-    results: any[]
-    totalResults: number
-    offset: number
-    totalPages: number
-    currentPage: number
-    isLoading: boolean
+interface SearchState extends SearchResultsState {
    searchTerm: string
    searchCategories: string
 }
@ -103,7 +97,7 @@ class Search extends PureComponent<SearchProps, SearchState> {
        }
    }

-    private handlePageClick = async (data: { selected: number }) => {
+    private onPageClick = async (data: { selected: number }) => {
        // react-pagination starts counting at 0, we start at 1
        const toPage = data.selected + 1

@ -112,49 +106,41 @@ class Search extends PureComponent<SearchProps, SearchState> {
            search: `?text=${this.state.searchTerm}&page=${toPage}`
        })

-        await this.setState({ currentPage: toPage, isLoading: true })
+        this.setState({ currentPage: toPage, isLoading: true })
        await this.searchAssets()
    }

-    public renderResults = () =>
-        this.state.isLoading ? (
-            <Spinner message="Searching..." />
-        ) : this.state.results && this.state.results.length ? (
-            <div className={styles.results}>
-                {this.state.results.map((asset: any) => (
-                    <AssetTeaser key={asset.id} asset={asset} />
-                ))}
-            </div>
-        ) : (
-            <div className={styles.empty}>
-                <p>No Data Sets Found.</p>
-                <Link to="/publish">+ Publish A Data Set</Link>
-            </div>
-        )
-
    public render() {
-        const { totalResults, totalPages, currentPage } = this.state
+        const {
+            totalResults,
+            totalPages,
+            currentPage,
+            isLoading,
+            results,
+            searchTerm,
+            searchCategories
+        } = this.state

        return (
            <Route title="Search" wide>
                <Content wide>
-                    {!this.state.isLoading && (
+                    {!isLoading && (
                        <h2 className={styles.resultsTitle}>
                            {totalResults} results for{' '}
                            <span>
                                {decodeURIComponent(
-                                    this.state.searchTerm ||
-                                        this.state.searchCategories
+                                    searchTerm || searchCategories
                                )}
                            </span>
                        </h2>
                    )}
-                    {this.renderResults()}
+
+                    <SearchResults isLoading={isLoading} results={results} />

                    <Pagination
                        totalPages={totalPages}
                        currentPage={currentPage}
-                        handlePageClick={this.handlePageClick}
+                        handlePageClick={this.onPageClick}
                    />
                </Content>
            </Route>
--- a/library.json
+++ b/library.json
@ -7,11 +7,11 @@
  "dependencies": [
    {
      "name": "keeper-contracts",
-      "version": "~0.12.7"
+      "version": "~0.13.2"
    },
    {
      "name": "brizo",
-      "version": "~0.7.2"
+      "version": "~0.8.1"
    },
    {
      "name": "aquarius",
@ -19,7 +19,7 @@
    },
    {
      "name": "squid-js",
-      "version": "~1.0.0"
+      "version": "~1.1.0"
    },
    {
      "name": "faucet",
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "commons",
  "description": "Ocean Protocol marketplace to explore, download, and publish open data sets.",
-  "version": "2.0.1",
+  "version": "2.2.0",
  "license": "Apache-2.0",
  "scripts": {
    "install": "./scripts/install.sh",
@ -25,26 +25,26 @@
  "dependencies": {},
  "devDependencies": {
    "@release-it/bumper": "^1.0.5",
-    "@typescript-eslint/eslint-plugin": "^1.6.0",
-    "@typescript-eslint/parser": "^1.6.0",
+    "@typescript-eslint/eslint-plugin": "^2.18.0",
+    "@typescript-eslint/parser": "^2.18.0",
    "auto-changelog": "^1.16.2",
-    "concurrently": "^5.0.0",
-    "cypress": "^3.7.0",
+    "concurrently": "^5.1.0",
+    "cypress": "^3.8.3",
    "cypress-log-to-output": "^1.0.7",
-    "eslint": "^5.16.0",
-    "eslint-config-oceanprotocol": "^1.4.0",
-    "eslint-config-prettier": "^6.5.0",
-    "eslint-plugin-cypress": "^2.7.0",
-    "eslint-plugin-prettier": "^3.1.1",
+    "eslint": "^6.8.0",
+    "eslint-config-oceanprotocol": "^1.5.0",
+    "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-cypress": "^2.8.1",
+    "eslint-plugin-prettier": "^3.1.2",
    "prettier": "^1.19.1",
    "prettier-stylelint": "^0.4.2",
    "release-it": "^12.4.3",
-    "start-server-and-test": "^1.10.6",
-    "stylelint": "^12.0.0",
+    "start-server-and-test": "^1.10.8",
+    "stylelint": "^13.0.0",
    "stylelint-config-bigchaindb": "^1.2.2",
-    "stylelint-config-css-modules": "^2.1.0",
+    "stylelint-config-css-modules": "^2.2.0",
    "stylelint-config-standard": "^19.0.0",
-    "typescript": "^3.7.3"
+    "typescript": "^3.7.5"
  },
  "repository": {
    "type": "git",
--- a/server/package-lock.json
+++ b/server/package-lock.json
--- a/server/package.json
+++ b/server/package.json
@ -1,7 +1,7 @@
 {
  "name": "commons-server",
  "description": "Ocean Protocol marketplace backend.",
-  "version": "2.0.1",
+  "version": "2.2.0",
  "license": "Apache-2.0",
  "main": "dist/src/server.js",
  "scripts": {
@ -13,13 +13,13 @@
    "coverage": "cat coverage/lcov.info | codacy-coverage --token 8801f827fe1144ffa85cd7da94f2bbf7"
  },
  "dependencies": {
-    "@sendgrid/mail": "^6.4.0",
+    "@sendgrid/mail": "^6.5.1",
    "body-parser": "^1.18.3",
    "compression": "^1.7.4",
    "debug": "^4.1.1",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
-    "express-validator": "^6.3.0",
+    "express-validator": "^6.3.1",
    "morgan": "^1.9.1",
    "request": "^2.88.0"
  },
@ -28,17 +28,17 @@
    "@types/compression": "^1.0.1",
    "@types/debug": "^4.1.5",
    "@types/express": "^4.17.2",
-    "@types/jest": "^24.0.23",
+    "@types/jest": "^24.9.1",
    "@types/morgan": "^1.7.37",
-    "@types/node": "^12.12.14",
-    "@types/request": "^2.48.3",
+    "@types/node": "^13.5.3",
+    "@types/request": "^2.48.4",
    "@types/supertest": "^2.0.8",
-    "jest": "^24.9.0",
-    "nodemon": "^2.0.1",
+    "jest": "24.9.0",
+    "nodemon": "^2.0.2",
    "supertest": "^4.0.2",
-    "ts-jest": "^24.2.0",
-    "ts-node": "^8.5.4",
-    "typescript": "^3.7.3"
+    "ts-jest": "24.3.0",
+    "ts-node": "^8.6.2",
+    "typescript": "^3.7.5"
  },
  "repository": {
    "type": "git",
@ -46,6 +46,10 @@
  },
  "jest": {
    "preset": "ts-jest",
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/dist/"
+    ],
    "collectCoverageFrom": [
      "src/**/*.{ts,tsx}"
    ]
--- a/server/src/config.ts
+++ b/server/src/config.ts
@ -2,7 +2,7 @@ import 'dotenv/config'

 const config = {
    app: { port: 4000 },
-    sendgridApiKey: process.env.SENDGRID_API_KEY,
+    sendgridApiKey: process.env.SENDGRID_API_KEY || '',
    ipfsGatewayUri: process.env.IPFS_GATEWAY_URI || 'https://gateway.ipfs.io'
 }

--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@ -1,5 +1,6 @@
 {
  "compilerOptions": {
+    "strict": true,
    "module": "commonjs",
    "esModuleInterop": true,
    "resolveJsonModule": true,