fix asset display

src/components/molecules/AssetTeaser.tsx

@@ -16,7 +16,7 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
 }: AssetTeaserProps) => {
   if (!metadata.additionalInformation) return null
 
-  const { name, price } = metadata.main
+  const { name } = metadata.main
   const { description, access } = metadata.additionalInformation
 
   return (
@@ -33,9 +33,7 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
           </Dotdotdot>
         </div>
 
-        <footer className={styles.foot}>
+        <footer className={styles.foot}>{/* <Price price={price} /> */}</footer>
-          <Price price={price} />
-        </footer>
       </Link>
     </article>
   )

src/components/organisms/AssetActions/Compute.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, ReactElement } from 'react'
-import { Ocean } from '@oceanprotocol/lib'
+import { DDO } from '@oceanprotocol/lib'
 import { fromWei } from 'web3-utils'
 import compareAsBN, { Comparisson } from '../../../utils/compareAsBN'
 import Loader from '../../atoms/Loader'
@@ -22,7 +22,8 @@ export default function Compute({ did }: { did: string }): ReactElement {
   const { ocean } = useOcean()
   const { ddo } = useMetadata(did)
   const { compute, isLoading, computeStepText, computeError } = useCompute()
-  const computeService = ddo.findServiceByType('compute').attributes.main
+  const computeService = new DDO(ddo).findServiceByType('compute').attributes
+    .main
 
   const [isJobStarting, setIsJobStarting] = useState(false)
   const [, setError] = useState('')

src/components/organisms/AssetActions/Consume.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import { fromWei } from 'web3-utils'
 import { toast } from 'react-toastify'
-import { File as FileMetadata } from '@oceanprotocol/lib'
+import { File as FileMetadata, DDO } from '@oceanprotocol/lib'
 import compareAsBN, { Comparisson } from '../../../utils/compareAsBN'
 import Button from '../../atoms/Button'
 import File from '../../atoms/File'
@@ -9,22 +9,22 @@ import Price from '../../atoms/Price'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
 import styles from './Consume.module.css'
 import Loader from '../../atoms/Loader'
-import { useOcean, useConsume, useMetadata } from '@oceanprotocol/react'
+import { useOcean, useConsume } from '@oceanprotocol/react'
 
 export default function Consume({
-  did,
+  ddo,
   file
 }: {
-  did: string
+  ddo: DDO
   file: FileMetadata
 }): ReactElement {
-  const { ddo } = useMetadata(did)
+  const accessService = ddo.findServiceByType('access')
-  const { cost } = ddo.findServiceByType('access').attributes.main
+  const { cost } = accessService.attributes.main
 
   const { ocean } = useOcean()
   const { consumeStepText, consume, consumeError } = useConsume()
 
-  const isFree = cost === '0'
+  // const isFree = cost === '0'
   // const isBalanceSufficient =
   //  isFree || compareAsBN(balanceInOcean, fromWei(cost), Comparisson.gte)
   const isDisabled = !ocean
@@ -39,10 +39,11 @@ export default function Consume({
     ) : (
       <Button
         style="primary"
-        onClick={() => consume(did, ddo.dataToken, 'access')}
+        onClick={() => consume(ddo.id, ddo.dataToken, 'access')}
         disabled={isDisabled}
       >
-        {isFree ? 'Download' : 'Buy'}
+        Download
+        {/* {isFree ? 'Download' : 'Buy'} */}
       </Button>
     )
 
@@ -53,7 +54,7 @@ export default function Consume({
           <File file={file} />
         </div>
         <div className={styles.pricewrapper}>
-          <Price price={cost} className={styles.price} />
+          {/* <Price price={cost} className={styles.price} /> */}
           <PurchaseButton />
         </div>
       </div>

src/components/organisms/AssetActions/index.tsx

@@ -4,13 +4,14 @@ import styles from './index.module.css'
 import Compute from './Compute'
 import Consume from './Consume'
 import { MetadataMarket } from '../../../@types/Metadata'
+import { MetadataStore, Logger, DDO } from '@oceanprotocol/lib'
 
 export default function AssetActions({
   metadata,
-  did
+  ddo
 }: {
   metadata: MetadataMarket
-  did: string
+  ddo: DDO
 }): ReactElement {
   const { access } = metadata.additionalInformation
   const isCompute = access && access === 'Compute'
@@ -24,9 +25,9 @@ export default function AssetActions({
       <div className={styles.tabContent}>
         <TabPanel>
           {isCompute ? (
-            <Compute did={did} />
+            <Compute ddo={ddo} />
           ) : (
-            <Consume did={did} file={metadata.main.files[0]} />
+            <Consume ddo={ddo} file={metadata.main.files[0]} />
           )}
         </TabPanel>
         <TabPanel>Trade Me</TabPanel>

src/components/organisms/AssetContent/MetaFull.tsx

@@ -18,7 +18,7 @@ export default function MetaFull({
     <div className={styles.metaFull}>
       <MetaItem title="Author" content={author} />
       <MetaItem title="License" content={license} />
-      <MetaItem title="Category" content={categories[0]} />
+      {categories && <MetaItem title="Category" content={categories[0]} />}
       <MetaItem title="Data Created" content={<Time date={dateCreated} />} />
 
       <MetaItem

src/components/organisms/AssetContent/index.tsx

@@ -7,16 +7,17 @@ import MetaFull from './MetaFull'
 import MetaSecondary from './MetaSecondary'
 import styles from './index.module.css'
 import AssetActions from '../AssetActions'
+import { MetadataStore, Logger, DDO } from '@oceanprotocol/lib'
 
 export interface AssetContentProps {
   metadata: MetadataMarket
-  did: string
+  ddo: DDO
   path?: string
 }
 
 export default function AssetContent({
   metadata,
-  did
+  ddo
 }: AssetContentProps): ReactElement {
   const { datePublished } = metadata.main
   const { description, categories } = metadata.additionalInformation
@@ -39,7 +40,7 @@ export default function AssetContent({
 
         <MetaSecondary metadata={metadata} />
 
-        <MetaFull did={did} metadata={metadata} />
+        <MetaFull did={ddo.id} metadata={metadata} />
 
         <div className={styles.buttonGroup}>
           {/* <EditAction
@@ -53,7 +54,7 @@ export default function AssetContent({
       </div>
       <div>
         <div className={styles.sticky}>
-          <AssetActions metadata={metadata} did={did} />
+          <AssetActions metadata={metadata} ddo={ddo} />
         </div>
       </div>
     </article>

src/pages/asset/index.tsx

@@ -4,7 +4,7 @@ import AssetContent from '../../components/organisms/AssetContent'
 import Layout from '../../components/Layout'
 import { PageProps } from 'gatsby'
 import { MetadataMarket, ServiceMetadataMarket } from '../../@types/Metadata'
-import { MetadataStore, Logger } from '@oceanprotocol/lib'
+import { MetadataStore, Logger, DDO } from '@oceanprotocol/lib'
 import Alert from '../../components/atoms/Alert'
 import Loader from '../../components/atoms/Loader'
 import { useSiteMetadata } from '../../hooks/useSiteMetadata'
@@ -14,6 +14,7 @@ export default function AssetRoute(props: PageProps): ReactElement {
   const [metadata, setMetadata] = useState<MetadataMarket>()
   const [title, setTitle] = useState<string>()
   const [error, setError] = useState<string>()
+  const [ddo, setDdo] = useState<DDO>()
 
   const did = props.location.pathname.split('/')[2]
 
@@ -25,6 +26,7 @@ export default function AssetRoute(props: PageProps): ReactElement {
           Logger
         )
         const ddo = await metadataStore.retrieveDDO(did)
+        setDdo(ddo)
 
         if (!ddo) {
           setTitle('Could not retrieve asset')
@@ -50,7 +52,7 @@ export default function AssetRoute(props: PageProps): ReactElement {
     <Layout title={title} uri={props.location.pathname}>
       <Router basepath="/asset">
         <AssetContent
-          did={did}
+          ddo={ddo}
           metadata={metadata as MetadataMarket}
           path=":did"
         />