cleanup

package-lock.json

@@ -3762,9 +3762,9 @@
       }
     },
     "@oceanprotocol/react": {
-      "version": "0.0.26",
+      "version": "0.0.27",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.26.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.27.tgz",
-      "integrity": "sha512-EGy2kP9nEiKDT1wbTUWqogqWud/hrhUQzXnAoW0Sw5M6m7t6Jg7svbbCmI/J5YtLF+ldQv1siP8Bh0Ii+QdzBw==",
+      "integrity": "sha512-qaPD5W51rtP/ql4vEP14DqPKbe0aoyIxWNc2oxwz4xUMP+svQLgPnJyL8+9vy/qblt/bOYkO5H9GMfsjYPTOnQ==",
       "requires": {
         "@oceanprotocol/lib": "^0.1.8",
         "axios": "^0.19.2",

package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@loadable/component": "^5.13.1",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/react": "^0.0.26",
+    "@oceanprotocol/react": "^0.0.27",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
     "@tippyjs/react": "^4.1.0",

src/components/organisms/AssetActions/Compute.tsx

@@ -10,7 +10,6 @@ import {
   computeOptions,
   useCompute,
   readFileContent,
-  useMetadata,
   useOcean
 } from '@oceanprotocol/react'
 import styles from './Compute.module.css'
@@ -18,12 +17,10 @@ import Button from '../../atoms/Button'
 import Input from '../../atoms/Input'
 import Alert from '../../atoms/Alert'
 
-export default function Compute({ did }: { did: string }): ReactElement {
+export default function Compute({ ddo }: { ddo: DDO }): ReactElement {
   const { ocean } = useOcean()
-  const { ddo } = useMetadata(did)
   const { compute, isLoading, computeStepText, computeError } = useCompute()
-  const computeService = new DDO(ddo).findServiceByType('compute').attributes
+  const computeService = ddo.findServiceByType('compute').attributes.main
-    .main
 
   const [isJobStarting, setIsJobStarting] = useState(false)
   const [, setError] = useState('')
@@ -81,7 +78,7 @@ export default function Compute({ did }: { did: string }): ReactElement {
       setError('')
 
       await compute(
-        did,
+        ddo.id,
         computeService,
         ddo.dataToken,
         algorithmRawCode,

src/components/organisms/AssetActions/Consume.tsx

@@ -20,11 +20,10 @@ export default function Consume({
 }): ReactElement {
   const accessService = ddo.findServiceByType('access')
   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
@@ -42,8 +41,7 @@ export default function Consume({
         onClick={() => consume(ddo.id, ddo.dataToken, 'access')}
         disabled={isDisabled}
       >
-        Download
+        {isFree ? 'Download' : 'Buy'}
-        {/* {isFree ? 'Download' : 'Buy'} */}
       </Button>
     )
 

src/components/organisms/AssetActions/index.tsx

@@ -4,7 +4,7 @@ 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'
+import { DDO } from '@oceanprotocol/lib'
 
 export default function AssetActions({
   metadata,

src/components/organisms/AssetContent/index.tsx

@@ -7,7 +7,7 @@ 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'
+import { DDO } from '@oceanprotocol/lib'
 
 export interface AssetContentProps {
   metadata: MetadataMarket

src/components/templates/AssetDetails.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useEffect, ReactElement } from 'react'
+import { Router } from '@reach/router'
+import AssetContent from '../../components/organisms/AssetContent'
+import Layout from '../../components/Layout'
+import { MetadataMarket, ServiceMetadataMarket } from '../../@types/Metadata'
+import { MetadataStore, Logger, DDO } from '@oceanprotocol/lib'
+import Alert from '../../components/atoms/Alert'
+import Loader from '../../components/atoms/Loader'
+import { useSiteMetadata } from '../../hooks/useSiteMetadata'
+
+export default function PageTemplateAssetDetails({
+  did,
+  uri
+}: {
+  did: string
+  uri: string
+}): ReactElement {
+  const { appConfig } = useSiteMetadata()
+  const [metadata, setMetadata] = useState<MetadataMarket>()
+  const [title, setTitle] = useState<string>()
+  const [error, setError] = useState<string>()
+  const [ddo, setDdo] = useState<DDO>()
+
+  useEffect(() => {
+    async function init() {
+      try {
+        const metadataStore = new MetadataStore(
+          appConfig.oceanConfig.metadataStoreUri,
+          Logger
+        )
+        const ddo = await metadataStore.retrieveDDO(did)
+        setDdo(ddo)
+
+        if (!ddo) {
+          setTitle('Could not retrieve asset')
+          setError('The DDO was not found in MetadataStore.')
+          return
+        }
+
+        const { attributes }: ServiceMetadataMarket = ddo.findServiceByType(
+          'metadata'
+        )
+
+        setTitle(attributes.main.name)
+        setMetadata(attributes)
+      } catch (error) {
+        setTitle('Error retrieving asset')
+        setError(error.message)
+      }
+    }
+    init()
+  }, [did])
+
+  return did && metadata ? (
+    <Layout title={title} uri={uri}>
+      <Router basepath="/asset">
+        <AssetContent
+          ddo={ddo}
+          metadata={metadata as MetadataMarket}
+          path=":did"
+        />
+      </Router>
+    </Layout>
+  ) : error ? (
+    <Layout title={title} noPageHeader uri={uri}>
+      <Alert title={title} text={error} state="error" />
+    </Layout>
+  ) : (
+    <Layout title="Loading..." uri={uri}>
+      <Loader />
+    </Layout>
+  )
+}

src/pages/asset/index.tsx

@@ -1,70 +1,8 @@
-import React, { useState, useEffect, ReactElement } from 'react'
+import React, { ReactElement } from 'react'
-import { Router } from '@reach/router'
-import AssetContent from '../../components/organisms/AssetContent'
-import Layout from '../../components/Layout'
 import { PageProps } from 'gatsby'
-import { MetadataMarket, ServiceMetadataMarket } from '../../@types/Metadata'
+import PageTemplateAssetDetails from '../../components/templates/AssetDetails'
-import { MetadataStore, Logger, DDO } from '@oceanprotocol/lib'
-import Alert from '../../components/atoms/Alert'
-import Loader from '../../components/atoms/Loader'
-import { useSiteMetadata } from '../../hooks/useSiteMetadata'
-
-export default function AssetRoute(props: PageProps): ReactElement {
-  const { appConfig } = useSiteMetadata()
-  const [metadata, setMetadata] = useState<MetadataMarket>()
-  const [title, setTitle] = useState<string>()
-  const [error, setError] = useState<string>()
-  const [ddo, setDdo] = useState<DDO>()
 
+export default function PageGatsbyAssetDetails(props: PageProps): ReactElement {
   const did = props.location.pathname.split('/')[2]
-
+  return <PageTemplateAssetDetails did={did} uri={props.location.pathname} />
-  useEffect(() => {
-    async function init() {
-      try {
-        const metadataStore = new MetadataStore(
-          appConfig.oceanConfig.metadataStoreUri,
-          Logger
-        )
-        const ddo = await metadataStore.retrieveDDO(did)
-        setDdo(ddo)
-
-        if (!ddo) {
-          setTitle('Could not retrieve asset')
-          setError('The DDO was not found in MetadataStore.')
-          return
-        }
-
-        const { attributes }: ServiceMetadataMarket = ddo.findServiceByType(
-          'metadata'
-        )
-
-        setTitle(attributes.main.name)
-        setMetadata(attributes)
-      } catch (error) {
-        setTitle('Error retrieving asset')
-        setError(error.message)
-      }
-    }
-    init()
-  }, [did])
-
-  return did && metadata ? (
-    <Layout title={title} uri={props.location.pathname}>
-      <Router basepath="/asset">
-        <AssetContent
-          ddo={ddo}
-          metadata={metadata as MetadataMarket}
-          path=":did"
-        />
-      </Router>
-    </Layout>
-  ) : error ? (
-    <Layout title={title} noPageHeader uri={props.location.pathname}>
-      <Alert title={title} text={error} state="error" />
-    </Layout>
-  ) : (
-    <Layout title="Loading..." uri={props.location.pathname}>
-      <Loader />
-    </Layout>
-  )
 }