raw list assets, purchase

src/pages/Details.tsx

@@ -1,9 +1,72 @@
+import { Logger } from '@oceanprotocol/squid'
+import queryString from 'query-string'
 import React, { Component } from 'react'
+import Web3 from 'web3'
+import { provideOcean } from '../ocean'
+
+interface IState {
+    ddo?: any,
+    metadata?: any
+}
+
+interface IProps {
+    location: any,
+    match: any
+}
+
+class Details extends Component<IProps, IState>  {
+
+    public state = { ddo: null, metadata: null }
+
+    public async componentDidMount() {
+        // temporary ocean init and asset retrieval
+        const { ocean } = await provideOcean()
+        const ddo = await ocean.resolveDID(this.props.match.params.did)
+        const { metadata } = ddo.findServiceByType('Metadata')
+        this.setState({ddo, metadata})
+    }
 
-class Details extends Component {
     public render() {
         return (
-            <div>Details</div>
+            <>
+                {this.state.metadata ? (this.showDetails(this.state.ddo)): (<div>Loading</div>)}
+            </>
+        )
+    }
+
+    private purchaseAsset = async (ddo: any) => {
+
+        const web3 = new Web3((window as any).web3.currentProvider)
+        await (window as any).ethereum.enable()
+
+        const { ocean } = await provideOcean()
+        const account = await ocean.getAccounts()
+
+        const service = ddo.findServiceByType('Access')
+        const serviceAgreementSignatureResult: any = await ocean
+            .signServiceAgreement(
+                ddo.id,
+                service.serviceDefinitionId,
+                account[0])
+        Logger.log('serviceAgreementSignatureResult', serviceAgreementSignatureResult)
+
+        await ocean
+            .initializeServiceAgreement(
+                ddo.id,
+                service.serviceDefinitionId,
+                serviceAgreementSignatureResult.serviceAgreementId,
+                serviceAgreementSignatureResult.serviceAgreementSignature,
+                (files: any) => Logger.log(`Got files, first files length in bytes: ${files[0].length}`),
+                account[0],
+            )
+    }
+
+    private showDetails = (ddo: any) => {
+        return (
+            <>
+                <div>{JSON.stringify(this.state.metadata)}</div>
+                <button onClick={this.purchaseAsset.bind(this, ddo)}>Purchase asset</button>
+            </>
         )
     }
 }

src/pages/Publish.tsx

@@ -126,16 +126,10 @@ class Publish extends Component<{}, IState> {
         event.preventDefault()
 
         const web3 = new Web3((window as any).web3.currentProvider)
-
         await (window as any).ethereum.enable()
-
-        const accounts = await web3.eth.getAccounts()
-
         const { ocean } = await provideOcean()
         const account = await ocean.getAccounts()
 
-        console.log(account)
-
         const newAsset = {
             // OEP-08 Attributes
             // https://github.com/oceanprotocol/OEPs/tree/master/8

src/pages/Search.tsx

@@ -1,5 +1,6 @@
 import queryString from 'query-string'
 import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
 import { provideOcean } from '../ocean'
 
 interface IState {
@@ -16,29 +17,44 @@ class Search extends Component<IProps, IState>  {
     public state = { results: [] }
 
     public async componentDidMount() {
-      // temporary ocean init and asset retrieval
-      const { ocean } = await provideOcean()
-      const searchParams = queryString.parse(this.props.location.search)
-      const queryRequest: any = {
-          offset: 100,
-          page: 0,
-          query: {
-              $text: {
-                  $search: searchParams.q
-              }
-          }
-      }
-      const assets = await ocean.searchAssets(queryRequest)
-      this.setState({results:assets})
+        // temporary ocean init and asset retrieval
+        const { ocean } = await provideOcean()
+        const searchParams = queryString.parse(this.props.location.search)
+        const queryRequest: any = {
+            offset: 100,
+            page: 0,
+            query: {
+                $text: {
+                    $search: searchParams.q
+                }
+            }
+        }
+        const assets = await ocean.searchAssets(queryRequest)
+        this.setState({results:assets})
     }
 
     public render() {
         return (
-            <div>
-                kra
+            <>
+                {this.state.results.length ? (this.state.results.map(asset => this.renderAssetBox(asset))): (<div>No data sets yet</div>)}
+            </>
+        )
+    }
+
+    private renderAssetBox = (asset:any) => {
+        const { metadata } = asset.findServiceByType('Metadata')
+        return (
+            <div key={asset.id} onClick={this.openDetails.bind(this, asset.id)}>
+                <div>{asset.id}</div>
+                <div>{metadata.base.name}</div>
+                <div>{metadata.base.description}</div>
             </div>
         )
     }
+
+    private openDetails = (assetId:string) => {
+        this.props.history.push(`/asset/${assetId}`)
+    }
 }
 
 export default Search