From 2dba004f7a30f1f455b4ee03dc8358bee3846f99 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 1 Apr 2019 16:01:51 +0200
Subject: [PATCH 01/10] add remote config for Nile

---
 client/src/config.ts | 80 ++++++++++++++++++++++++++++++++------------
 1 file changed, 58 insertions(+), 22 deletions(-)

diff --git a/client/src/config.ts b/client/src/config.ts
index 18d0700..7a154bd 100644
--- a/client/src/config.ts
+++ b/client/src/config.ts
@@ -1,33 +1,69 @@
+//
+// commons-server connection
+//
 export const serviceScheme = 'http'
 export const serviceHost = 'localhost'
 export const servicePort = 4000
 
-export const nodeScheme = 'http'
-export const nodeHost = 'localhost'
-export const nodePort = 8545
+//
+// OCEAN REMOTE CONNECTIONS
+//
+export const nodeScheme = 'https'
+export const nodeHost = 'nile.dev-ocean.com'
+export const nodePort = 443
 
-export const aquariusScheme = 'http'
-export const aquariusHost = 'aquarius'
-export const aquariusPort = 5000
+export const aquariusScheme = 'https'
+export const aquariusHost = 'nginx-aquarius.dev-ocean.com'
+export const aquariusPort = 443
 
-export const brizoScheme = 'http'
-export const brizoHost = 'localhost'
-export const brizoPort = 8030
-
-export const parityScheme = 'http'
-export const parityHost = 'localhost'
-export const parityPort = 8545
-
-export const secretStoreScheme = 'http'
-export const secretStoreHost = 'localhost'
-export const secretStorePort = 12001
+export const brizoScheme = 'https'
+export const brizoHost = 'nginx-brizo.dev-ocean.com'
+export const brizoPort = 443
 
+export const parityScheme = 'https'
+export const parityHost = 'nile.dev-ocean.com'
+export const parityPort = 443
 export const threshold = 0
-export const password = 'node0'
-export const address = '0x00bd138abd70e2f00903268f3db08f2d25677c9e'
+export const password = 'ocean_secret'
+export const address = '0x413c9ba0a05b8a600899b41b0c62dd661e689354'
 
-export const faucetScheme = 'http'
-export const faucetHost = 'localhost'
-export const faucetPort = 3001
+export const secretStoreScheme = 'https'
+export const secretStoreHost = 'secret-store.dev-ocean.com'
+export const secretStorePort = 443
+
+export const faucetScheme = 'https'
+export const faucetHost = 'faucet.nile.dev-ocean.com'
+export const faucetPort = 443
+
+//
+// OCEAN LOCAL CONNECTIONS
+// e.g. when running with barge
+//
+// export const nodeScheme = 'http'
+// export const nodeHost = 'localhost'
+// export const nodePort = 8545
+
+// export const aquariusScheme = 'http'
+// export const aquariusHost = 'aquarius'
+// export const aquariusPort = 5000
+
+// export const brizoScheme = 'http'
+// export const brizoHost = 'localhost'
+// export const brizoPort = 8030
+
+// export const parityScheme = 'http'
+// export const parityHost = 'localhost'
+// export const parityPort = 8545
+// export const threshold = 0
+// export const password = 'node0'
+// export const address = '0x00bd138abd70e2f00903268f3db08f2d25677c9e'
+
+// export const secretStoreScheme = 'http'
+// export const secretStoreHost = 'localhost'
+// export const secretStorePort = 12001
+
+// export const faucetScheme = 'http'
+// export const faucetHost = 'localhost'
+// export const faucetPort = 3001
 
 export const verbose = true

From ede9a35f3622ed4e8d86621d157db850d88e03b3 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 1 Apr 2019 17:31:43 +0200
Subject: [PATCH 02/10] document new defaults

---
 README.md | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 9a7a1d4..d18cadb 100644
--- a/README.md
+++ b/README.md
@@ -9,8 +9,8 @@
 [![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)
 
-- [Prerequisites](#prerequisites)
 - [Get Started](#get-started)
+  - [Use with Barge](#use-with-barge)
 - [Production](#production)
 - [Testing](#testing)
 - [Code Style](#code-style)
@@ -18,23 +18,10 @@
 
 <img alt="screen shot 2019-02-08 at 16 53 57" src="https://user-images.githubusercontent.com/90316/52489283-27080e80-2bc2-11e9-8ec0-508c21eb86f7.png">
 
-## Prerequisites
-
-To make use of all the functionality, you need to connect to the Ocean network.
-
-For local development, you can spin up [`barge`](https://github.com/oceanprotocol/barge) to use a local network:
-
-```bash
-git clone git@github.com:oceanprotocol/barge.git
-cd barge
-
-./start_ocean.sh --latest --no-pleuston --local-spree-node
-```
-
-The default configuration of the client & server is to connect to this local network. Modify `./client/src/config.ts`, and `./server/src/config/config.ts` to change that.
-
 ## Get Started
 
+To make use of all the functionality, you need to connect to the Ocean network. By default, the client will connect to Ocean's Nile test network remotely.
+
 To spin up both, the client and the server in a watch mode for local development, execute:
 
 ```bash
@@ -47,6 +34,19 @@ Open [http://localhost:3000](http://localhost:3000) to view the client in the br
 
 The page will reload if you make edits to files in either `./client` or `./server`.
 
+### Use with Barge
+
+If you prefer to connect to locally running components instead of remote connections to Ocean's Nile network, you can spin up [`barge`](https://github.com/oceanprotocol/barge) and use a local network:
+
+```bash
+git clone git@github.com:oceanprotocol/barge.git
+cd barge
+
+./start_ocean.sh --latest --no-pleuston --local-spree-node
+```
+
+Modify `./client/src/config.ts` to use those local connections.
+
 ## Production
 
 To create a production build of both, the client and the server:

From 0aabe940ca6df0ed8369f3775ae149b0242c8577 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 2 Apr 2019 12:58:22 +0200
Subject: [PATCH 03/10] file listing fixes, consume flow updates

---
 client/src/routes/Details/AssetDetails.tsx    |  7 +-
 .../Details/AssetFilesDetails.module.scss     | 23 +++++
 .../src/routes/Details/AssetFilesDetails.tsx  | 90 +++++++++----------
 client/src/routes/Details/index.tsx           |  6 +-
 4 files changed, 68 insertions(+), 58 deletions(-)

diff --git a/client/src/routes/Details/AssetDetails.tsx b/client/src/routes/Details/AssetDetails.tsx
index 4c857db..5fbeffe 100644
--- a/client/src/routes/Details/AssetDetails.tsx
+++ b/client/src/routes/Details/AssetDetails.tsx
@@ -5,14 +5,13 @@ import styles from './AssetDetails.module.scss'
 import AssetFilesDetails from './AssetFilesDetails'
 
 interface AssetDetailsProps {
-    ocean: any
     metadata: any
     ddo: any
 }
 
 export default class AssetDetails extends PureComponent<AssetDetailsProps> {
     public render() {
-        const { ocean, metadata, ddo } = this.props
+        const { metadata, ddo } = this.props
         const { base } = metadata
 
         return (
@@ -25,7 +24,6 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                         {base.copyrightHolder}
                     </h2>
                     <div className={styles.metaPrimaryData}>
-
                         <span title="Date created">
                             <Moment
                                 date={base.dateCreated}
@@ -33,7 +31,7 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                                 interval={0}
                             />
                         </span>
-          
+
                         {base.categories ? (
                             // TODO: Make this link to search for respective category
                             <Link to={`/search?q=${base.categories[0]}`}>
@@ -77,7 +75,6 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                 <AssetFilesDetails
                     files={base.files ? base.files : []}
                     ddo={ddo}
-                    ocean={ocean}
                 />
 
                 <pre>
diff --git a/client/src/routes/Details/AssetFilesDetails.module.scss b/client/src/routes/Details/AssetFilesDetails.module.scss
index 336702c..9eb32b5 100644
--- a/client/src/routes/Details/AssetFilesDetails.module.scss
+++ b/client/src/routes/Details/AssetFilesDetails.module.scss
@@ -11,3 +11,26 @@
     color: $red;
     font-size: $font-size-small;
 }
+
+.files {
+    text-align: center;
+}
+
+.file {
+    display: inline-block;
+    border: .1rem solid $brand-grey-light;
+    padding: $spacer $spacer / 2;
+    text-align: left;
+    margin-left: $spacer / 4;
+    margin-right: $spacer / 4;
+
+    li {
+        font-size: $font-size-small;
+        font-weight: $font-weight-bold;
+        color: $brand-grey-light;
+
+        &:before {
+            display: none;
+        }
+    }
+}
diff --git a/client/src/routes/Details/AssetFilesDetails.tsx b/client/src/routes/Details/AssetFilesDetails.tsx
index c97ff8b..d6f05a3 100644
--- a/client/src/routes/Details/AssetFilesDetails.tsx
+++ b/client/src/routes/Details/AssetFilesDetails.tsx
@@ -1,11 +1,12 @@
 import React, { PureComponent } from 'react'
 import { Logger } from '@oceanprotocol/squid'
+import filesize from 'filesize'
+import { User } from '../../context/User'
 import Button from '../../components/atoms/Button'
 import Spinner from '../../components/atoms/Spinner'
 import styles from './AssetFilesDetails.module.scss'
 
 interface AssetFilesDetailsProps {
-    ocean: any
     files: any[]
     ddo: any
 }
@@ -13,26 +14,30 @@ interface AssetFilesDetailsProps {
 export default class AssetFilesDetails extends PureComponent<
     AssetFilesDetailsProps
 > {
-    public state = { decryptedFiles: [], isLoading: false, error: null }
+    public state = { isLoading: false, error: null }
 
     private purchaseAsset = async (ddo: any) => {
         this.setState({ isLoading: true, error: null })
+
+        const { ocean } = this.context
+        const accounts = await ocean.accounts.list()
+
         try {
-            const account = await this.props.ocean.getAccounts()
             const service = ddo.findServiceByType('Access')
-            const serviceAgreementSignatureResult = await this.props.ocean.signServiceAgreement(
+            const agreementId = await ocean.assets.order(
                 ddo.id,
                 service.serviceDefinitionId,
-                account[0]
+                accounts[0]
             )
-            await this.props.ocean.initializeServiceAgreement(
+
+            const path = await ocean.assets.consume(
+                agreementId,
                 ddo.id,
                 service.serviceDefinitionId,
-                serviceAgreementSignatureResult.agreementId,
-                serviceAgreementSignatureResult.signature,
-                (files: any) => this.setState({ decryptedFiles: files }),
-                account[0]
+                accounts[0],
+                ''
             )
+            Logger.log('path', path)
 
             this.setState({ isLoading: false })
         } catch (error) {
@@ -43,51 +48,40 @@ export default class AssetFilesDetails extends PureComponent<
 
     public render() {
         const { files, ddo } = this.props
-        const filesArray =
-            this.state.decryptedFiles.length > 0
-                ? this.state.decryptedFiles
-                : files
 
-        return (
+        return files ? (
             <>
-                {this.state.decryptedFiles.length > 0 ? (
-                    filesArray.forEach(file => (
-                        <>
-                            <ul>
-                                {/*
-                                    TODO: getting this metadata depends on a change to to OEP-8,
-                                    see: https://github.com/oceanprotocol/OEPs/pull/154
-                                */}
-                                {/* <li>{file.contentType}</li> */}
-                                <li>{file.contentLength}</li>
-                                {/* <li>{file.encoding}</li> */}
-                                {/* <li>{file.compression}</li> */}
-                            </ul>
+                <div className={styles.files}>
+                    {files.map(file => (
+                        <ul key={file.index} className={styles.file}>
+                            <li>{file.contentType.split('/')[1]}</li>
+                            <li>{filesize(file.contentLength)}</li>
+                            {/* <li>{file.encoding}</li> */}
+                            {/* <li>{file.compression}</li> */}
+                        </ul>
+                    ))}
+                </div>
 
-                            {file.url && (
-                                <Button href={file.url}>Download asset</Button>
-                            )}
-                        </>
-                    ))
-                ) : this.state.isLoading ? (
+                {this.state.isLoading ? (
                     <Spinner message="Decrypting files, please sign with your wallet..." />
                 ) : (
-                    <>
-                        <Button
-                            primary
-                            className={styles.buttonMain}
-                            onClick={() => this.purchaseAsset(ddo)}
-                        >
-                            Get asset files
-                        </Button>
-                        {this.state.error && (
-                            <div className={styles.error}>
-                                {this.state.error}
-                            </div>
-                        )}
-                    </>
+                    <Button
+                        primary
+                        className={styles.buttonMain}
+                        onClick={() => this.purchaseAsset(ddo)}
+                    >
+                        Get asset files
+                    </Button>
+                )}
+
+                {this.state.error && (
+                    <div className={styles.error}>{this.state.error}</div>
                 )}
             </>
+        ) : (
+            <div>No files attached.</div>
         )
     }
 }
+
+AssetFilesDetails.contextType = User
diff --git a/client/src/routes/Details/index.tsx b/client/src/routes/Details/index.tsx
index 32283f1..e5055cb 100644
--- a/client/src/routes/Details/index.tsx
+++ b/client/src/routes/Details/index.tsx
@@ -34,11 +34,7 @@ export default class Details extends Component<DetailsProps, DetailsState> {
                 title={metadata.base ? metadata.base.name : 'Loading Details'}
             >
                 {metadata && metadata.base.name ? (
-                    <AssetDetails
-                        ocean={this.context.ocean}
-                        metadata={metadata}
-                        ddo={ddo}
-                    />
+                    <AssetDetails metadata={metadata} ddo={ddo} />
                 ) : (
                     <div className={stylesApp.loader}>
                         <Spinner message={'Loading asset...'} />

From 552ab091e5d0a244d55bcbe497adebdeb85f2b38 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 2 Apr 2019 13:12:04 +0200
Subject: [PATCH 04/10] squid-js update

---
 client/package-lock.json | 23 +++++++----------------
 client/package.json      |  2 +-
 2 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index b332192..137293c 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1026,25 +1026,16 @@
       "integrity": "sha512-p2n505t2K0zD1ZvGPhI6EsSviEVLCB7BYowhf/ONmVaWED138PaG4Z9nY6YuHU383uOoIWT+Lq3dLkFzDzstXw=="
     },
     "@oceanprotocol/keeper-contracts": {
-      "version": "0.8.9",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/keeper-contracts/-/keeper-contracts-0.8.9.tgz",
-      "integrity": "sha512-qzeBOyaWs6GbTQgbUBVoRm4/eUy4Cp8XoJW7DfsV63ee6n/bF1KS9+0ZsuhfG3dNf+TqF5/G1FqVOGeU9yV59A=="
-    },
-    "@oceanprotocol/secret-store-client": {
-      "version": "0.0.14",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/secret-store-client/-/secret-store-client-0.0.14.tgz",
-      "integrity": "sha512-Yo2/9MJC1vlWXGIaU+35naYHWWYGbtzTu2t5dW4Ro1JuIRkzxfM3TSNzPUAgsCrUBUxsCsu9pd/RjvPuE45SGw==",
-      "requires": {
-        "node-fetch": "^2.3.0"
-      }
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/keeper-contracts/-/keeper-contracts-0.9.0.tgz",
+      "integrity": "sha512-QrTCQNiQa9KszH6/dTAS0a8AoW/SIEkZazXTwA2aoePBS0X8fNpsKvT3N2OuR1YPAjCU3rGWzYdV4TNnMNbsSw=="
     },
     "@oceanprotocol/squid": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/squid/-/squid-0.4.1.tgz",
-      "integrity": "sha512-9pbBgiQv3yJkZvRNEitcGOX/nB412webuF4GCN82Uh8rb4fN3bQhkBWBsO6qgpa8DzSNwWhsmt5ScH/HuxK8FA==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/squid/-/squid-0.5.0.tgz",
+      "integrity": "sha512-yGu121WJ9XEX1U4ql/p7ISV36fqNydxGBYgXHbOjeXS/kvNFx3hP2emBf4QA12PjPZcmuLz0wE+7GBL4H/v+eA==",
       "requires": {
-        "@oceanprotocol/keeper-contracts": "^0.8.5",
-        "@oceanprotocol/secret-store-client": "~0.0.14",
+        "@oceanprotocol/keeper-contracts": "^0.9.0",
         "bignumber.js": "^8.0.1",
         "deprecated-decorator": "^0.1.6",
         "ethereumjs-util": "^6.0.0",
diff --git a/client/package.json b/client/package.json
index 5c01011..77e862d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@oceanprotocol/art": "^2.2.0",
-    "@oceanprotocol/squid": "^0.4.1",
+    "@oceanprotocol/squid": "^0.5.0",
     "@oceanprotocol/typographies": "^0.1.0",
     "classnames": "^2.2.6",
     "filesize": "^4.1.2",

From 1ab7e17e394ef8e10bf2fd8eb121f36f0e4dbca8 Mon Sep 17 00:00:00 2001
From: Jernej Pregelj <jernej.pregelj88@gmail.com>
Date: Mon, 1 Apr 2019 14:36:14 +0200
Subject: [PATCH 05/10] fix urlCheck crash

---
 server/src/routes/UrlCheckRouter.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/src/routes/UrlCheckRouter.ts b/server/src/routes/UrlCheckRouter.ts
index 360db7c..3d8d12c 100644
--- a/server/src/routes/UrlCheckRouter.ts
+++ b/server/src/routes/UrlCheckRouter.ts
@@ -22,7 +22,7 @@ export class UrlCheckRouter {
                 headers: { Range: 'bytes=0-' }
             },
             (error, response) => {
-                if (response.statusCode.toString().startsWith('2')) {
+                if (response && response.statusCode.toString().startsWith('2')) {
                     const result: any = {}
                     result.found = true
 

From 46d5540316e5346354b3faef513ea9d47b4e9242 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 2 Apr 2019 13:59:07 +0200
Subject: [PATCH 06/10] config & metadata fixes

---
 client/src/components/molecules/Asset.tsx       |  6 ++++--
 client/src/config.ts                            |  4 +---
 client/src/ocean.ts                             |  8 ++------
 client/src/routes/Details/AssetFilesDetails.tsx | 10 ++++++++--
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/client/src/components/molecules/Asset.tsx b/client/src/components/molecules/Asset.tsx
index c93bb15..db1d048 100644
--- a/client/src/components/molecules/Asset.tsx
+++ b/client/src/components/molecules/Asset.tsx
@@ -20,12 +20,14 @@ const AssetLink = ({ asset, list }: { asset: any; list?: boolean }) => {
     ) : (
         <article className={styles.asset}>
             <Link to={`/asset/${asset.id}`}>
-                <CategoryImage category={base.categories[0][0]} />
+                {base.categories && (
+                    <CategoryImage category={base.categories[0]} />
+                )}
                 <h1>{base.name}</h1>
                 <p>{base.description.substring(0, 90)}...</p>
 
                 <footer className={styles.assetFooter}>
-                    {base.categories && <div>{base.categories[0][0]}</div>}
+                    {base.categories && <div>{base.categories[0]}</div>}
                 </footer>
             </Link>
         </article>
diff --git a/client/src/config.ts b/client/src/config.ts
index 7a154bd..5c6e5ca 100644
--- a/client/src/config.ts
+++ b/client/src/config.ts
@@ -19,13 +19,11 @@ export const aquariusPort = 443
 export const brizoScheme = 'https'
 export const brizoHost = 'nginx-brizo.dev-ocean.com'
 export const brizoPort = 443
+export const brizoAddress = '0x413c9ba0a05b8a600899b41b0c62dd661e689354'
 
 export const parityScheme = 'https'
 export const parityHost = 'nile.dev-ocean.com'
 export const parityPort = 443
-export const threshold = 0
-export const password = 'ocean_secret'
-export const address = '0x413c9ba0a05b8a600899b41b0c62dd661e689354'
 
 export const secretStoreScheme = 'https'
 export const secretStoreHost = 'secret-store.dev-ocean.com'
diff --git a/client/src/ocean.ts b/client/src/ocean.ts
index f51b290..1d70dbb 100644
--- a/client/src/ocean.ts
+++ b/client/src/ocean.ts
@@ -1,24 +1,22 @@
 import { Ocean } from '@oceanprotocol/squid'
 
 import {
-    address,
     aquariusHost,
     aquariusPort,
     aquariusScheme,
     brizoHost,
     brizoPort,
     brizoScheme,
+    brizoAddress,
     nodeHost,
     nodePort,
     nodeScheme,
     parityHost,
     parityPort,
     parityScheme,
-    password,
     secretStoreHost,
     secretStorePort,
     secretStoreScheme,
-    threshold,
     verbose
 } from './config'
 
@@ -33,11 +31,9 @@ export async function provideOcean() {
         nodeUri,
         aquariusUri,
         brizoUri,
+        brizoAddress,
         parityUri,
         secretStoreUri,
-        threshold,
-        password,
-        address,
         verbose
     }
 
diff --git a/client/src/routes/Details/AssetFilesDetails.tsx b/client/src/routes/Details/AssetFilesDetails.tsx
index d6f05a3..a2fe3c2 100644
--- a/client/src/routes/Details/AssetFilesDetails.tsx
+++ b/client/src/routes/Details/AssetFilesDetails.tsx
@@ -54,8 +54,14 @@ export default class AssetFilesDetails extends PureComponent<
                 <div className={styles.files}>
                     {files.map(file => (
                         <ul key={file.index} className={styles.file}>
-                            <li>{file.contentType.split('/')[1]}</li>
-                            <li>{filesize(file.contentLength)}</li>
+                            <li>
+                                {file.contentType &&
+                                    file.contentType.split('/')[1]}
+                            </li>
+                            <li>
+                                {file.contentLength &&
+                                    filesize(file.contentLength)}
+                            </li>
                             {/* <li>{file.encoding}</li> */}
                             {/* <li>{file.compression}</li> */}
                         </ul>

From 78f4d3a12e42ac840de8ab5378bf91fd319a125f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 2 Apr 2019 14:25:16 +0200
Subject: [PATCH 07/10] loading state for search

---
 client/src/routes/Home.tsx   |  2 +-
 client/src/routes/Search.tsx | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/src/routes/Home.tsx b/client/src/routes/Home.tsx
index 8a042a1..cd74341 100644
--- a/client/src/routes/Home.tsx
+++ b/client/src/routes/Home.tsx
@@ -54,7 +54,7 @@ class Home extends Component<HomeProps, HomeState> {
 
     private searchAssets = (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault()
-        this.props.history.push(`/search?q=${this.state.search}`)
+        this.props.history.push(`/search?text=${this.state.search}`)
     }
 }
 
diff --git a/client/src/routes/Search.tsx b/client/src/routes/Search.tsx
index 9f58858..d4fd205 100644
--- a/client/src/routes/Search.tsx
+++ b/client/src/routes/Search.tsx
@@ -1,5 +1,6 @@
-import queryString from 'query-string'
 import React, { Component } from 'react'
+import queryString from 'query-string'
+import Spinner from '../components/atoms/Spinner'
 import Route from '../components/templates/Route'
 import { User } from '../context/User'
 import Asset from '../components/molecules/Asset'
@@ -7,6 +8,7 @@ import styles from './Search.module.scss'
 
 interface SearchState {
     results: any[]
+    isLoading: boolean
 }
 
 interface SearchProps {
@@ -15,16 +17,18 @@ interface SearchProps {
 }
 
 export default class Search extends Component<SearchProps, SearchState> {
-    public state = { results: [] }
+    public state = { results: [], isLoading: true }
 
     public async componentDidMount() {
         const searchParams = queryString.parse(this.props.location.search)
-        const assets = await this.context.ocean.assets.search(searchParams.q)
-        this.setState({ results: assets })
+        const assets = await this.context.ocean.assets.search(searchParams.text)
+        this.setState({ results: assets, isLoading: false })
     }
 
     public renderResults = () =>
-        this.state.results.length ? (
+        this.state.isLoading ? (
+            <Spinner message="Searching..." />
+        ) : this.state.results.length ? (
             <div className={styles.results}>
                 {this.state.results.map((asset: any) => (
                     <Asset key={asset.id} asset={asset} />

From 7cb54cbd0665a5079753649bd1a0adb602b70f94 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 2 Apr 2019 14:51:59 +0200
Subject: [PATCH 08/10] search results tweaks

---
 .../components/templates/Route.module.scss    | 20 ++++++++++++-----
 client/src/components/templates/Route.tsx     | 20 +++++++++++++++--
 client/src/routes/Search.tsx                  | 22 ++++++++++++++++++-
 3 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/client/src/components/templates/Route.module.scss b/client/src/components/templates/Route.module.scss
index 323783f..9f38241 100644
--- a/client/src/components/templates/Route.module.scss
+++ b/client/src/components/templates/Route.module.scss
@@ -3,13 +3,21 @@
 .header {
     margin-top: $spacer;
     margin-bottom: $spacer;
+}
 
-    h1 {
-        margin: 0;
-    }
+.title {
+    margin: 0;
+}
 
-    p {
-        margin-top: $spacer / 2;
-        font-size: $font-size-large;
+.description {
+    margin-top: $spacer / 2;
+    font-size: $font-size-large;
+}
+
+.titleReverse {
+    color: $brand-grey-light;
+
+    span {
+        color: $brand-grey-dark;
     }
 }
diff --git a/client/src/components/templates/Route.tsx b/client/src/components/templates/Route.tsx
index f5aa93f..209d5f4 100644
--- a/client/src/components/templates/Route.tsx
+++ b/client/src/components/templates/Route.tsx
@@ -7,12 +7,14 @@ import meta from '../../data/meta.json'
 const Route = ({
     title,
     description,
+    titleReverse,
     wide,
     children,
     className
 }: {
     title: string
     description?: string
+    titleReverse?: boolean
     children: any
     wide?: boolean
     className?: string
@@ -26,8 +28,22 @@ const Route = ({
         <Content wide={wide}>
             <article>
                 <header className={styles.header}>
-                    <h1>{title}</h1>
-                    {description && <p>{description}</p>}
+                    <h1
+                        className={
+                            titleReverse ? styles.titleReverse : styles.title
+                        }
+                        dangerouslySetInnerHTML={{
+                            __html: title
+                        }}
+                    />
+                    {description && (
+                        <p
+                            className={styles.description}
+                            dangerouslySetInnerHTML={{
+                                __html: description
+                            }}
+                        />
+                    )}
                 </header>
 
                 {children}
diff --git a/client/src/routes/Search.tsx b/client/src/routes/Search.tsx
index d4fd205..84af126 100644
--- a/client/src/routes/Search.tsx
+++ b/client/src/routes/Search.tsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import queryString from 'query-string'
+import { Logger } from '@oceanprotocol/squid'
 import Spinner from '../components/atoms/Spinner'
 import Route from '../components/templates/Route'
 import { User } from '../context/User'
@@ -21,8 +22,21 @@ export default class Search extends Component<SearchProps, SearchState> {
 
     public async componentDidMount() {
         const searchParams = queryString.parse(this.props.location.search)
+
+        const queryRequest = {
+            offset: 500,
+            page: 1,
+            query: {
+                text: searchParams.text
+            },
+            sort: {
+                text: 1
+            }
+        }
+
         const assets = await this.context.ocean.assets.search(searchParams.text)
         this.setState({ results: assets, isLoading: false })
+        Logger.log(`Loaded ${assets.length} assets`)
     }
 
     public renderResults = () =>
@@ -39,8 +53,14 @@ export default class Search extends Component<SearchProps, SearchState> {
         )
 
     public render() {
+        const searchTerm = queryString.parse(this.props.location.search).text
+
         return (
-            <Route title="Search Results" wide>
+            <Route
+                title={`Search Results for <span>${searchTerm}</span>`}
+                titleReverse
+                wide
+            >
                 {this.renderResults()}
             </Route>
         )

From 69ecf6757a6b8d249867ec644c43f929e356ce38 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 2 Apr 2019 14:55:15 +0200
Subject: [PATCH 09/10] history loading tweaks

---
 client/src/components/organisms/AssetsUser.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/organisms/AssetsUser.tsx b/client/src/components/organisms/AssetsUser.tsx
index b28f698..d7833d5 100644
--- a/client/src/components/organisms/AssetsUser.tsx
+++ b/client/src/components/organisms/AssetsUser.tsx
@@ -41,9 +41,9 @@ export default class AssetsUser extends PureComponent<
                     }
                 }
             )
+        } else {
+            this.setState({ isLoading: false })
         }
-
-        this.setState({ isLoading: false })
     }
 
     public render() {

From b23c0d128ea86ec7d3c5dba1a0732d0df51e6240 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 2 Apr 2019 17:00:30 +0200
Subject: [PATCH 10/10] mobile fixes

---
 client/src/components/atoms/Form/Form.module.scss | 6 +++++-
 client/src/components/templates/Route.module.scss | 6 ++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/src/components/atoms/Form/Form.module.scss b/client/src/components/atoms/Form/Form.module.scss
index 7d55ec7..58718da 100644
--- a/client/src/components/atoms/Form/Form.module.scss
+++ b/client/src/components/atoms/Form/Form.module.scss
@@ -3,10 +3,14 @@
 .form {
     width: 100%;
     background: $brand-white;
-    padding: $spacer;
+    padding: $spacer / 1.5;
     border: 1px solid $brand-grey-lighter;
     border-radius: $border-radius;
 
+    @media (min-width: $break-point--small) {
+        padding: $spacer;
+    }
+
     fieldset {
         border: 0;
         padding: 0;
diff --git a/client/src/components/templates/Route.module.scss b/client/src/components/templates/Route.module.scss
index 9f38241..3728aef 100644
--- a/client/src/components/templates/Route.module.scss
+++ b/client/src/components/templates/Route.module.scss
@@ -7,6 +7,11 @@
 
 .title {
     margin: 0;
+    font-size: $font-size-h2;
+
+    @media (min-width: $break-point--small) {
+        font-size: $font-size-h1;
+    }
 }
 
 .description {
@@ -15,6 +20,7 @@
 }
 
 .titleReverse {
+    composes: title;
     color: $brand-grey-light;
 
     span {