fix consume flow

client/src/routes/Details/AssetDetails.tsx

@@ -5,13 +5,14 @@ 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 { metadata, ddo } = this.props
+        const { ocean, metadata, ddo } = this.props
         const { base } = metadata
 
         return (
@@ -71,6 +72,7 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                 <AssetFilesDetails
                     files={base.files ? base.files : []}
                     ddo={ddo}
+                    ocean={ocean}
                 />
 
                 <pre>

client/src/routes/Details/AssetFilesDetails.tsx

@@ -5,37 +5,31 @@ import Button from '../../components/atoms/Button'
 import styles from './AssetDetails.module.scss'
 
 interface AssetFilesDetailsProps {
+    ocean: any
     files: any[]
-    ddo: string
+    ddo: any
 }
 
 export default class AssetFilesDetails extends PureComponent<
     AssetFilesDetailsProps
 > {
+    public state = { decryptedFiles: [] }
+
     private purchaseAsset = async (ddo: any) => {
         try {
-            const account = await this.context.ocean.getAccounts()
+            const account = await this.props.ocean.getAccounts()
             const service = ddo.findServiceByType('Access')
-            const serviceAgreementSignatureResult = await this.context.ocean.signServiceAgreement(
+            const serviceAgreementSignatureResult = await this.props.ocean.signServiceAgreement(
                 ddo.id,
                 service.serviceDefinitionId,
                 account[0]
             )
-            await this.context.ocean.initializeServiceAgreement(
+            await this.props.ocean.initializeServiceAgreement(
                 ddo.id,
                 service.serviceDefinitionId,
                 serviceAgreementSignatureResult.agreementId,
                 serviceAgreementSignatureResult.signature,
-                (files: any) => {
+                (files: any) => this.setState({ decryptedFiles: files }),
-                    Logger.log('downloading files', files)
-                    files.forEach((file: any) => {
-                        const parsedUrl: any = queryString.parseUrl(file)
-                        // setTimeout(() => {
-                        //     // eslint-disable-next-line
-                        //     window.open(parsedUrl.query.url)
-                        // }, 100)
-                    })
-                },
                 account[0]
             )
         } catch (e) {
@@ -45,13 +39,14 @@ export default class AssetFilesDetails extends PureComponent<
 
     public render() {
         const { files, ddo } = this.props
+        const filesArray = this.state.decryptedFiles
+            ? this.state.decryptedFiles
+            : files
 
         return (
             <>
-                {files.forEach(file => {
+                {filesArray.length > 0 &&
-                    const parsedUrl: any = queryString.parseUrl(file)
+                    filesArray.forEach(file => (
-
-                    return (
                         <>
                             <h2>{file.name}</h2>
                             <ul>
@@ -89,12 +84,11 @@ export default class AssetFilesDetails extends PureComponent<
                                 </li>
                             </ul>
 
-                            <Button href={parsedUrl.query.url}>
+                            {file.url && (
-                                Download asset
+                                <Button href={file.url}>Download asset</Button>
-                            </Button>
+                            )}
                         </>
-                    )
+                    ))}
-                })}
 
                 <Button onClick={() => this.purchaseAsset(ddo)}>
                     Get downloads

client/src/routes/Details/index.tsx

@@ -34,7 +34,11 @@ export default class Details extends Component<DetailsProps, DetailsState> {
                 title={metadata.base ? metadata.base.name : 'Loading Details'}
             >
                 {metadata && metadata.base.name ? (
-                    <AssetDetails metadata={metadata} ddo={ddo} />
+                    <AssetDetails
+                        ocean={this.context.ocean}
+                        metadata={metadata}
+                        ddo={ddo}
+                    />
                 ) : (
                     <div className={stylesApp.loader}>
                         <Spinner message={'Loading asset...'} />