use queryMetadata

src/components/organisms/AssetContent/index.tsx

@@ -1,6 +1,5 @@
 import { MetaDataMarket } from '../../../@types/MetaData'
 import React, { ReactElement } from 'react'
-import { useOcean } from '@oceanprotocol/react'
 import Time from '../../atoms/Time'
 import { Link } from 'gatsby'
 import Markdown from '../../atoms/Markdown'

src/components/pages/Home.tsx

@@ -3,23 +3,27 @@ import SearchBar from '../molecules/SearchBar'
 import { ServiceMetaDataMarket } from '../../@types/MetaData'
 import AssetTeaser from '../molecules/AssetTeaser'
 import styles from './Home.module.css'
-import axios from 'axios'
 import { oceanConfig } from '../../../app.config'
-import { DDO } from '@oceanprotocol/lib'
+import { DDO, MetadataStore, Logger } from '@oceanprotocol/lib'
 
 export default function HomePage(): ReactElement {
   const [assets, setAssets] = useState<DDO[]>()
 
   useEffect(() => {
     async function getAllAssets() {
-      try {
-        const result = await axios(
-          `${oceanConfig.metadataStoreUri}/api/v1/aquarius/assets/ddo`
-        )
-        setAssets(result.data)
-      } catch (error) {
-        console.error(error.message)
-      }
+      const metadataStore = new MetadataStore(
+        oceanConfig.metadataStoreUri,
+        Logger
+      )
+
+      const result = await metadataStore.queryMetadata({
+        page: 1,
+        offset: 10,
+        query: {},
+        sort: { created: -1 }
+      })
+
+      result && result.results && setAssets(result.results)
     }
     getAllAssets()
   }, [])

src/pages/asset/index.tsx

@@ -7,7 +7,7 @@ import { MetaDataMarket, ServiceMetaDataMarket } from '../../@types/MetaData'
 import { MetadataStore, Logger } from '@oceanprotocol/lib'
 import { oceanConfig } from '../../../app.config'
 import Alert from '../../components/atoms/Alert'
-import { useMetadata } from '@oceanprotocol/react'
+import Loader from '../../components/atoms/Loader'
 
 export default function AssetRoute(props: PageProps): ReactElement {
   const [metadata, setMetadata] = useState<MetaDataMarket>()
@@ -45,11 +45,7 @@ export default function AssetRoute(props: PageProps): ReactElement {
     init()
   }, [])
 
-  return error ? (
-    <Layout title={title} noPageHeader uri={props.location.pathname}>
-      <Alert title={title} text={error} state="error" />
-    </Layout>
-  ) : did && metadata ? (
+  return did && metadata ? (
     <Layout title={title} uri={props.location.pathname}>
       <Router basepath="/asset">
         <AssetContent
@@ -59,9 +55,13 @@ export default function AssetRoute(props: PageProps): ReactElement {
         />
       </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}>
-      Loading...
+      <Loader />
     </Layout>
   )
 }