file listing fixes, consume flow updates

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>

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;
+        }
+    }
+}

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

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...'} />