get config dynamically from useOcean in all components

src/components/organisms/AssetList.tsx

@@ -7,18 +7,17 @@ import { updateQueryStringParameter } from '../../utils'
 import styles from './AssetList.module.css'
 import { MetadataMarket } from '../../@types/Metadata'
 import { DDO } from '@oceanprotocol/lib'
-import { getDefaultOceanConfig } from '../../../app.config'
+import { useOcean } from '@oceanprotocol/react'
 
 declare type AssetListProps = {
   queryResult: QueryResult
 }
 
 const AssetList: React.FC<AssetListProps> = ({ queryResult }) => {
+  const { config } = useOcean()
   const location = useLocation()
   const navigate = useNavigate()
 
-  const { metadataStoreUri } = getDefaultOceanConfig()
-
   // Construct the urls on the pagination links. This is only for UX,
   // since the links are no <Link> they will not work by itself.
   function hrefBuilder(pageIndex: number) {
@@ -54,7 +53,7 @@ const AssetList: React.FC<AssetListProps> = ({ queryResult }) => {
           })
         ) : (
           <div className={styles.empty}>
-            No results found in {metadataStoreUri}
+            No results found in {config.metadataStoreUri}
           </div>
         )}
       </div>

src/components/pages/Home.tsx

@@ -6,11 +6,10 @@ import AssetList from '../organisms/AssetList'
 import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatastore/MetadataStore'
 import Container from '../atoms/Container'
 import Loader from '../atoms/Loader'
-import { getDefaultOceanConfig } from '../../../app.config'
+import { useOcean } from '@oceanprotocol/react'
 
-async function getLatestAssets() {
+async function getLatestAssets(metadataStoreUri: string) {
   try {
-    const { metadataStoreUri } = getDefaultOceanConfig()
     const metadataStore = new MetadataStore(metadataStoreUri, Logger)
 
     const result = await metadataStore.queryMetadata({
@@ -27,12 +26,13 @@ async function getLatestAssets() {
 }
 
 export default function HomePage(): ReactElement {
+  const { config } = useOcean()
   const [queryResult, setQueryResult] = useState<QueryResult>()
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
     async function init() {
-      const results = await getLatestAssets()
+      const results = await getLatestAssets(config.metadataStoreUri)
       setQueryResult(results)
       setLoading(false)
     }

src/components/templates/AssetDetails.tsx

@@ -6,7 +6,7 @@ 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 { getDefaultOceanConfig } from '../../../app.config'
+import { useOcean } from '@oceanprotocol/react'
 
 export default function PageTemplateAssetDetails({
   did,
@@ -15,6 +15,7 @@ export default function PageTemplateAssetDetails({
   did: string
   uri: string
 }): ReactElement {
+  const { config } = useOcean()
   const [metadata, setMetadata] = useState<MetadataMarket>()
   const [title, setTitle] = useState<string>()
   const [error, setError] = useState<string>()
@@ -23,8 +24,7 @@ export default function PageTemplateAssetDetails({
   useEffect(() => {
     async function init() {
       try {
-        const { metadataStoreUri } = getDefaultOceanConfig()
+        const metadataStore = new MetadataStore(config.metadataStoreUri, Logger)
-        const metadataStore = new MetadataStore(metadataStoreUri, Logger)
         const ddo = await metadataStore.retrieveDDO(did)
         setDdo(ddo)
 

src/components/templates/Search/index.tsx

@@ -7,6 +7,7 @@ import styles from './index.module.css'
 import queryString from 'query-string'
 import { getResults } from './utils'
 import Loader from '../../atoms/Loader'
+import { useOcean } from '@oceanprotocol/react'
 
 export declare type SearchPageProps = {
   text: string | string[]
@@ -19,6 +20,7 @@ export default function SearchPage({
 }: {
   location: Location
 }): ReactElement {
+  const { config } = useOcean()
   const parsed = queryString.parse(location.search)
   const { text, tag, page } = parsed
   const [queryResult, setQueryResult] = useState<QueryResult>()
@@ -27,7 +29,7 @@ export default function SearchPage({
   useEffect(() => {
     async function initSearch() {
       setLoading(true)
-      const queryResult = await getResults(parsed)
+      const queryResult = await getResults(parsed, config.metadataStoreUri)
       setQueryResult(queryResult)
       setLoading(false)
     }

src/components/templates/Search/utils.ts

@@ -4,7 +4,6 @@ import {
 } from '@oceanprotocol/lib/dist/node/metadatastore/MetadataStore'
 import { priceQueryParamToWei } from '../../../utils'
 import { MetadataStore, Logger } from '@oceanprotocol/lib'
-import { getDefaultOceanConfig } from '../../../../app.config'
 
 export function getSearchQuery(
   page?: string | string[],
@@ -32,7 +31,10 @@ export function getSearchQuery(
   } as SearchQuery
 }
 
-export async function getResults(params: any): Promise<QueryResult> {
+export async function getResults(
+  params: any,
+  metadataStoreUri: string
+): Promise<QueryResult> {
   const { text, tag, page, offset, minPrice, maxPrice } = params
 
   const minPriceParsed = priceQueryParamToWei(
@@ -52,7 +54,6 @@ export async function getResults(params: any): Promise<QueryResult> {
         ])
       : undefined
 
-  const { metadataStoreUri } = getDefaultOceanConfig()
   const metadataStore = new MetadataStore(metadataStoreUri, Logger)
   const queryResult = await metadataStore.queryMetadata(
     getSearchQuery(page, offset, text, tag, priceQuery)