move OceanProvider to asset route

README.md

@@ -132,15 +132,19 @@ const queryLatest = {
 }
 
 function Component() {
-  const { metadataCacheUri } = useOcean()
+  const { appConfig } = useSiteMetadata()
   const [result, setResult] = useState<QueryResult>()
 
   useEffect(() => {
-    if (!metadataCacheUri) return
+    if (!appConfig.metadataCacheUri) return
     const source = axios.CancelToken.source()
 
     async function init() {
-      const result = await queryMetadata(query, metadataCacheUri, source.token)
+      const result = await queryMetadata(
+        query,
+        appConfig.metadataCacheUri,
+        source.token
+      )
       setResult(result)
     }
     init()
@@ -148,7 +152,7 @@ function Component() {
     return () => {
       source.cancel()
     }
-  }, [metadataCacheUri, query])
+  }, [appConfig.metadataCacheUri, query])
 
   return <div>{result}</div>
 }

app.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  metadataCacheUri: 'https://aquarius.mainnet.oceanprotocol.com',
   // List of supported chainIds which metadata cache queries
   // will return by default
   chainIds: [1, 3, 4, 137, 1287],

package-lock.json

@@ -43525,6 +43525,7 @@
         "node-abort-controller": "^2.0.0",
         "save-file": "^2.3.1",
         "uuid": "^8.3.2",
+        "web3": "^1.3.5",
         "web3-eth-contract": "^1.3.6"
       }
     },
@@ -43599,6 +43600,7 @@
       "integrity": "sha512-5vwpq6kbvwkQwKqAoOU3L72GZ3Ta8RRrewKj9OJRolx28KLJJ8Dg9Rf7obRwt5jQA9bkYd8gqzMTrI7H3xLfaw==",
       "dev": true,
       "requires": {
+        "@oclif/config": "^1.15.1",
         "@oclif/errors": "^1.3.3",
         "@oclif/parser": "^3.8.3",
         "@oclif/plugin-help": "^3",

src/components/molecules/AssetListTitle.tsx

@@ -5,6 +5,7 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import { getAssetsNames } from '../../utils/aquarius'
 import styles from './AssetListTitle.module.css'
 import axios from 'axios'
+import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 
 export default function AssetListTitle({
   ddo,
@@ -15,11 +16,11 @@ export default function AssetListTitle({
   did?: string
   title?: string
 }): ReactElement {
-  const { metadataCacheUri } = useOcean()
+  const { appConfig } = useSiteMetadata()
   const [assetTitle, setAssetTitle] = useState<string>(title)
 
   useEffect(() => {
-    if (title || !metadataCacheUri) return
+    if (title || !appConfig.metadataCacheUri) return
     if (ddo) {
       const { attributes } = ddo.findServiceByType('metadata')
       setAssetTitle(attributes.main.name)
@@ -29,7 +30,11 @@ export default function AssetListTitle({
     const source = axios.CancelToken.source()
 
     async function getAssetName() {
-      const title = await getAssetsNames([did], metadataCacheUri, source.token)
+      const title = await getAssetsNames(
+        [did],
+        appConfig.metadataCacheUri,
+        source.token
+      )
       setAssetTitle(title[did])
     }
 
@@ -38,7 +43,7 @@ export default function AssetListTitle({
     return () => {
       source.cancel()
     }
-  }, [assetTitle, metadataCacheUri, ddo, did, title])
+  }, [assetTitle, appConfig.metadataCacheUri, ddo, did, title])
 
   return (
     <h3 className={styles.title}>

src/components/molecules/Bookmarks.tsx

@@ -8,6 +8,7 @@ import Tooltip from '../atoms/Tooltip'
 import AssetTitle from './AssetListTitle'
 import { queryMetadata } from '../../utils/aquarius'
 import axios, { CancelToken } from 'axios'
+import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 
 async function getAssetsBookmarked(
   bookmarks: string[],
@@ -78,7 +79,7 @@ const columns = [
 ]
 
 export default function Bookmarks(): ReactElement {
-  const { metadataCacheUri } = useOcean()
+  const { appConfig } = useSiteMetadata()
   const { bookmarks } = useUserPreferences()
 
   const [pinned, setPinned] = useState<DDO[]>()
@@ -87,7 +88,7 @@ export default function Bookmarks(): ReactElement {
   const networkName = (config as ConfigHelperConfig)?.network
 
   useEffect(() => {
-    if (!metadataCacheUri || !networkName || bookmarks === {}) return
+    if (!appConfig.metadataCacheUri || !networkName || bookmarks === {}) return
 
     const source = axios.CancelToken.source()
 
@@ -102,7 +103,7 @@ export default function Bookmarks(): ReactElement {
       try {
         const resultPinned = await getAssetsBookmarked(
           bookmarks[networkName],
-          metadataCacheUri,
+          appConfig.metadataCacheUri,
           source.token
         )
         setPinned(resultPinned?.results)
@@ -117,7 +118,7 @@ export default function Bookmarks(): ReactElement {
     return () => {
       source.cancel()
     }
-  }, [bookmarks, metadataCacheUri, networkName])
+  }, [bookmarks, appConfig.metadataCacheUri, networkName])
 
   return (
     <Table

src/components/molecules/Wallet/Details.tsx

@@ -9,21 +9,37 @@ import { useWeb3 } from '../../../providers/Web3'
 
 import Web3Feedback from '../Web3Feedback'
 import styles from './Details.module.css'
+import { getOceanTokenData } from '../../../utils/ocean'
 
 export default function Details(): ReactElement {
-  const { web3Provider, web3ProviderInfo, connect, logout, networkData } =
+  const {
+    web3Provider,
+    web3ProviderInfo,
+    connect,
+    logout,
+    networkData,
+    networkId,
+    balance
   } = useWeb3()
-  // const { balance, config } = useOcean()
+  const { oceanConfigs } = useOcean()
   const { locale } = useUserPreferences()
 
   const [mainCurrency, setMainCurrency] = useState<string>()
+  const [oceanTokenMetadata, setOceanTokenMetadata] =
+    useState<{
+      address: string
+      symbol: string
+    }>()
   // const [portisNetwork, setPortisNetwork] = useState<string>()
 
   useEffect(() => {
     if (!networkData) return
 
     setMainCurrency(networkData.nativeCurrency.symbol)
-  }, [networkData])
+
+    oceanConfigs &&
+      setOceanTokenMetadata(getOceanTokenData(networkId || 1, oceanConfigs))
+  }, [networkData, networkId, oceanConfigs])
 
   // Handle network change for Portis
   // async function handlePortisNetworkChange(e: ChangeEvent<HTMLSelectElement>) {
@@ -38,17 +54,17 @@ export default function Details(): ReactElement {
   return (
     <div className={styles.details}>
       <ul>
-        {/* {Object.entries(balance).map(([key, value]) => (
+        {Object.entries(balance).map(([key, value]) => (
           <li className={styles.balance} key={key}>
             <span className={styles.symbol}>
-              {key === 'eth' ? mainCurrency : config.oceanTokenSymbol}
+              {key === 'eth' ? mainCurrency : oceanTokenMetadata?.symbol}
             </span>{' '}
             {formatCurrency(Number(value), '', locale, false, {
               significantFigures: 4
             })}
             {key === 'ocean' && <Conversion price={value} />}
           </li>
-        ))} */}
+        ))}
 
         <li className={styles.actions}>
           <div title="Connected provider" className={styles.walletInfo}>
@@ -66,14 +82,14 @@ export default function Details(): ReactElement {
                 onChange={handlePortisNetworkChange}
               />
             )} */}
-            {/* {web3ProviderInfo?.name === 'MetaMask' && (
+            {web3ProviderInfo?.name === 'MetaMask' && (
               <AddToken
-                address={config.oceanTokenAddress}
+                address={oceanTokenMetadata?.address}
-                symbol={config.oceanTokenSymbol}
+                symbol={oceanTokenMetadata?.symbol}
                 logo="https://raw.githubusercontent.com/oceanprotocol/art/main/logo/token.png"
                 className={styles.addToken}
               />
-            )} */}
+            )}
           </div>
           <p>
             {web3ProviderInfo?.name === 'Portis' && (

src/components/organisms/AssetActions/Compute/index.tsx

@@ -55,7 +55,7 @@ export default function Compute({
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
   const { accountId } = useWeb3()
-  const { ocean, account, metadataCacheUri } = useOcean()
+  const { ocean, account } = useOcean()
   const { price, type, ddo, isAssetNetwork } = useAsset()
   const { buyDT, pricingError, pricingStepText } = usePricing()
   const [isJobStarting, setIsJobStarting] = useState(false)
@@ -150,13 +150,13 @@ export default function Compute({
         getQuerryString(
           computeService.attributes.main.privacy.publisherTrustedAlgorithms
         ),
-        metadataCacheUri,
+        appConfig.metadataCacheUri,
         source.token
       )
       setDdoAlgorithmList(gueryResults.results)
       algorithmSelectionList = await transformDDOToAssetSelection(
         gueryResults.results,
-        metadataCacheUri,
+        appConfig.metadataCacheUri,
         []
       )
     }

src/components/organisms/AssetActions/Edit/FormEditComputeDataset.tsx

@@ -16,6 +16,7 @@ import { useAsset } from '../../../../providers/Asset'
 import { ComputePrivacyForm } from '../../../../models/FormEditComputeDataset'
 import { publisherTrustedAlgorithm as PublisherTrustedAlgorithm } from '@oceanprotocol/lib'
 import axios from 'axios'
+import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 
 export default function FormEditComputeDataset({
   data,
@@ -26,8 +27,9 @@ export default function FormEditComputeDataset({
   title: string
   setShowEdit: (show: boolean) => void
 }): ReactElement {
+  const { appConfig } = useSiteMetadata()
   const { accountId } = useWeb3()
-  const { ocean, metadataCacheUri } = useOcean()
+  const { ocean } = useOcean()
   const { ddo } = useAsset()
   const { isValid, values }: FormikContextType<ComputePrivacyForm> =
     useFormikContext()
@@ -51,12 +53,12 @@ export default function FormEditComputeDataset({
     }
     const querryResult = await queryMetadata(
       query,
-      metadataCacheUri,
+      appConfig.metadataCacheUri,
       source.token
     )
     const algorithmSelectionList = await transformDDOToAssetSelection(
       querryResult.results,
-      metadataCacheUri,
+      appConfig.metadataCacheUri,
       publisherTrustedAlgorithms
     )
     return algorithmSelectionList
@@ -66,7 +68,7 @@ export default function FormEditComputeDataset({
     getAlgorithmList(publisherTrustedAlgorithms).then((algorithms) => {
       setAllAlgorithms(algorithms)
     })
-  }, [metadataCacheUri, publisherTrustedAlgorithms])
+  }, [appConfig.metadataCacheUri, publisherTrustedAlgorithms])
 
   return (
     <Form className={styles.form}>

src/components/pages/History/ComputeJobs/Details.tsx

@@ -10,6 +10,7 @@ import { retrieveDDO } from '../../../../utils/aquarius'
 import { useOcean } from '../../../../providers/Ocean'
 import Results from './Results'
 import styles from './Details.module.css'
+import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 
 function Asset({
   title,
@@ -41,7 +42,7 @@ function Asset({
 }
 
 function DetailsAssets({ job }: { job: ComputeJobMetaData }) {
-  const { metadataCacheUri } = useOcean()
+  const { appConfig } = useSiteMetadata()
   const [algoName, setAlgoName] = useState<string>()
   const [algoDtSymbol, setAlgoDtSymbol] = useState<string>()
 
@@ -49,14 +50,18 @@ function DetailsAssets({ job }: { job: ComputeJobMetaData }) {
     async function getAlgoMetadata() {
       const source = axios.CancelToken.source()
 
-      const ddo = await retrieveDDO(job.algoDID, metadataCacheUri, source.token)
+      const ddo = await retrieveDDO(
+        job.algoDID,
+        appConfig.metadataCacheUri,
+        source.token
+      )
       setAlgoDtSymbol(ddo.dataTokenInfo.symbol)
 
       const { attributes } = ddo.findServiceByType('metadata')
       setAlgoName(attributes?.main.name)
     }
     getAlgoMetadata()
-  }, [metadataCacheUri, job.algoDID])
+  }, [appConfig.metadataCacheUri, job.algoDID])
 
   return (
     <>

src/components/pages/History/ComputeJobs/index.tsx

@@ -17,6 +17,7 @@ import Details from './Details'
 import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/Compute'
 import { ReactComponent as Refresh } from '../../../../images/refresh.svg'
 import styles from './index.module.css'
+import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 
 const getComputeOrders = gql`
   query ComputeOrders($user: String!) {
@@ -99,7 +100,8 @@ async function getAssetMetadata(
 }
 
 export default function ComputeJobs(): ReactElement {
-  const { ocean, account, metadataCacheUri, config } = useOcean()
+  const { appConfig } = useSiteMetadata()
+  const { ocean, account } = useOcean()
   const { accountId } = useWeb3()
   const [isLoading, setIsLoading] = useState(true)
   const [jobs, setJobs] = useState<ComputeJobMetaData[]>([])
@@ -128,7 +130,7 @@ export default function ComputeJobs(): ReactElement {
       const source = axios.CancelToken.source()
       const assets = await getAssetMetadata(
         queryDtList,
-        metadataCacheUri,
+        appConfig.metadataCacheUri,
         source.token
       )
       const providers: Provider[] = []
@@ -232,12 +234,12 @@ export default function ComputeJobs(): ReactElement {
   }
 
   useEffect(() => {
-    if (data === undefined || !metadataCacheUri) {
+    if (data === undefined || !appConfig.metadataCacheUri) {
       setIsLoading(false)
       return
     }
     getJobs()
-  }, [ocean, account, data, metadataCacheUri])
+  }, [ocean, account, data, appConfig.metadataCacheUri])
 
   return (
     <>

src/components/pages/Home.tsx

@@ -15,16 +15,21 @@ import { queryMetadata } from '../../utils/aquarius'
 import { getHighestLiquidityDIDs } from '../../utils/subgraph'
 import { DDO, Logger } from '@oceanprotocol/lib'
 import { useWeb3 } from '../../providers/Web3'
+import { useSiteMetadata } from '../../hooks/useSiteMetadata'
+import { getOceanConfig } from '../../utils/ocean'
 
-const queryLatest = {
+// TODO: these queries need to adapt to chainIds
-  page: 1,
+function getQueryHighest(chainIds: number[]) {
-  offset: 9,
+  return {
-  query: {
+    page: 1,
-    query_string: {
+    offset: 9,
-      query: `-isInPurgatory:true`
+    query: {
-    }
+      query_string: {
-  },
+        query: `(price.type:pool) -isInPurgatory:true`
-  sort: { created: -1 }
+      }
+    },
+    sort: { 'price.ocean': -1 }
+  }
 }
 
 function sortElements(items: DDO[], sorted: string[]) {
@@ -34,6 +39,20 @@ function sortElements(items: DDO[], sorted: string[]) {
   return items
 }
 
+function getQueryLatest(chainIds: number[]) {
+  return {
+    page: 1,
+    offset: 9,
+    query: {
+      query_string: {
+        query: `-isInPurgatory:true`
+      }
+    },
+    sort: { created: -1 }
+  }
+  return items
+}
+
 function SectionQueryResult({
   title,
   query,
@@ -45,12 +64,12 @@ function SectionQueryResult({
   action?: ReactElement
   queryData?: string
 }) {
-  const { metadataCacheUri } = useOcean()
+  const { appConfig } = useSiteMetadata()
   const [result, setResult] = useState<QueryResult>()
   const [loading, setLoading] = useState<boolean>()
 
   useEffect(() => {
-    if (!metadataCacheUri) return
+    if (!appConfig.metadataCacheUri) return
     const source = axios.CancelToken.source()
 
     async function init() {
@@ -58,7 +77,7 @@ function SectionQueryResult({
         setLoading(true)
         const result = await queryMetadata(
           query,
-          metadataCacheUri,
+          appConfig.metadataCacheUri,
           source.token
         )
         if (result.totalResults <= 15) {
@@ -83,7 +102,7 @@ function SectionQueryResult({
     return () => {
       source.cancel()
     }
-  }, [metadataCacheUri, query])
+  }, [appConfig.metadataCacheUri, query])
 
   return (
     <section className={styles.section}>
@@ -99,8 +118,9 @@ function SectionQueryResult({
 }
 
 export default function HomePage(): ReactElement {
-  const { config, loading } = useOcean()
+  // TODO: appConfig.chainIds needs to come from UserPreferences instead
   const [queryAndDids, setQueryAndDids] = useState<[SearchQuery, string]>()
+  const { appConfig } = useSiteMetadata()
   const { web3Loading, web3Provider } = useWeb3()
 
   useEffect(() => {
@@ -135,13 +155,14 @@ export default function HomePage(): ReactElement {
         <SectionQueryResult
           title="Highest Liquidity"
           query={queryAndDids[0]}
+          // query={getQueryHighest(appConfig.chainIds)}
           queryData={queryAndDids[1]}
         />
       )}
 
       <SectionQueryResult
         title="Recently Published"
-        query={queryLatest}
+        query={getQueryLatest(appConfig.chainIds)}
         action={
           <Button style="text" to="/search?sort=created&sortOrder=desc">
             All data sets and algorithms →

src/components/templates/Search/index.tsx

@@ -9,8 +9,7 @@ import Sort from './sort'
 import { getResults } from './utils'
 import { navigate } from 'gatsby'
 import { updateQueryStringParameter } from '../../../utils'
-import Loader from '../../atoms/Loader'
+import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
-import { useOcean } from '../../../providers/Ocean'
 
 export default function SearchPage({
   location,
@@ -19,7 +18,7 @@ export default function SearchPage({
   location: Location
   setTotalResults: (totalResults: number) => void
 }): ReactElement {
-  const { metadataCacheUri } = useOcean()
+  const { appConfig } = useSiteMetadata()
   const parsed = queryString.parse(location.search)
   const { text, owner, tags, page, sort, sortOrder, serviceType } = parsed
   const [queryResult, setQueryResult] = useState<QueryResult>()
@@ -31,18 +30,27 @@ export default function SearchPage({
   )
 
   useEffect(() => {
-    if (!metadataCacheUri) return
+    if (!appConfig.metadataCacheUri) return
 
     async function initSearch() {
       setLoading(true)
       setTotalResults(undefined)
-      const queryResult = await getResults(parsed, metadataCacheUri)
+      const queryResult = await getResults(parsed, appConfig.metadataCacheUri)
       setQueryResult(queryResult)
       setTotalResults(queryResult.totalResults)
       setLoading(false)
     }
     initSearch()
-  }, [text, owner, tags, sort, page, serviceType, sortOrder, metadataCacheUri])
+  }, [
+    text,
+    owner,
+    tags,
+    sort,
+    page,
+    serviceType,
+    sortOrder,
+    appConfig.metadataCacheUri
+  ])
 
   function setPage(page: number) {
     const newUrl = updateQueryStringParameter(

src/helpers/wrapRootElement.tsx

@@ -12,13 +12,13 @@ export default function wrapRootElement({
 }): ReactElement {
   return (
     <Web3Provider>
-      <OceanProvider>
+      {/* <OceanProvider> */}
-        <ApolloClientProvider>
+      <ApolloClientProvider>
-          <UserPreferencesProvider>
+        <UserPreferencesProvider>
-            <PricesProvider>{element}</PricesProvider>
+          <PricesProvider>{element}</PricesProvider>
-          </UserPreferencesProvider>
+        </UserPreferencesProvider>
-        </ApolloClientProvider>
+      </ApolloClientProvider>
-      </OceanProvider>
+      {/* </OceanProvider> */}
     </Web3Provider>
   )
 }

src/hooks/useSiteMetadata.ts

@@ -20,6 +20,7 @@ interface UseSiteMetadata {
     polygon: string
   }
   appConfig: {
+    metadataCacheUri: string
     infuraProjectId: string
     chainIds: number[]
     marketFeeAddress: string
@@ -52,6 +53,7 @@ const query = graphql`
           polygon
         }
         appConfig {
+          metadataCacheUri
           infuraProjectId
           chainIds
           marketFeeAddress

src/pages/asset/index.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import { PageProps } from 'gatsby'
 import PageTemplateAssetDetails from '../../components/templates/PageAssetDetails'
 import AssetProvider from '../../providers/Asset'
+import OceanProvider from '../../providers/Ocean'
 
 export default function PageGatsbyAssetDetails(props: PageProps): ReactElement {
   const [did, setDid] = useState<string>()
@@ -12,7 +13,9 @@ export default function PageGatsbyAssetDetails(props: PageProps): ReactElement {
 
   return (
     <AssetProvider asset={did}>
-      <PageTemplateAssetDetails uri={props.location.pathname} />
+      <OceanProvider>
+        <PageTemplateAssetDetails uri={props.location.pathname} />
+      </OceanProvider>
     </AssetProvider>
   )
 }

src/providers/ApolloClientProvider.tsx

@@ -5,10 +5,11 @@ import {
   InMemoryCache,
   NormalizedCacheObject
 } from '@apollo/client'
-import { Logger, ConfigHelperConfig } from '@oceanprotocol/lib'
+import { Logger } from '@oceanprotocol/lib'
-import { useOcean } from './Ocean'
 import fetch from 'cross-fetch'
 import React, { useState, useEffect, ReactNode, ReactElement } from 'react'
+import { useWeb3 } from './Web3'
+import { getOceanConfig } from '../utils/ocean'
 let apolloClient: ApolloClient<NormalizedCacheObject>
 
 function createClient(subgraphUri: string) {
@@ -32,21 +33,23 @@ export default function ApolloClientProvider({
 }: {
   children: ReactNode
 }): ReactElement {
-  const { config } = useOcean()
+  const { networkId } = useWeb3()
   const [client, setClient] = useState<ApolloClient<NormalizedCacheObject>>()
 
   useEffect(() => {
-    if (!(config as ConfigHelperConfig)?.subgraphUri) {
+    const { subgraphUri } = getOceanConfig(networkId || 1)
+
+    if (!subgraphUri) {
       Logger.error(
         'No subgraphUri defined, preventing ApolloProvider from initialization.'
       )
       return
     }
 
-    const newClient = createClient((config as ConfigHelperConfig).subgraphUri)
+    const newClient = createClient(subgraphUri)
     apolloClient = newClient
     setClient(newClient)
-  }, [config])
+  }, [networkId])
 
   return client ? (
     <ApolloProvider client={client}>{children}</ApolloProvider>

src/providers/Asset.tsx

@@ -16,6 +16,8 @@ import { getPrice } from '../utils/subgraph'
 import { MetadataMarket } from '../@types/MetaData'
 import { useOcean } from './Ocean'
 import { useWeb3 } from './Web3'
+import { getOceanConfig } from '../utils/ocean'
+import { useSiteMetadata } from '../hooks/useSiteMetadata'
 
 interface AssetProviderValue {
   isInPurgatory: boolean
@@ -44,8 +46,9 @@ function AssetProvider({
   asset: string | DDO
   children: ReactNode
 }): ReactElement {
+  const { appConfig } = useSiteMetadata()
+
   const { networkId } = useWeb3()
-  const { metadataCacheUri } = useOcean()
   const [isInPurgatory, setIsInPurgatory] = useState(false)
   const [purgatoryData, setPurgatoryData] = useState<PurgatoryData>()
   const [ddo, setDDO] = useState<DDO>()
@@ -60,7 +63,11 @@ function AssetProvider({
 
   const fetchDdo = async (token?: CancelToken) => {
     Logger.log('[asset] Init asset, get DDO')
-    const ddo = await retrieveDDO(asset as string, metadataCacheUri, token)
+    const ddo = await retrieveDDO(
+      asset as string,
+      appConfig.metadataCacheUri,
+      token
+    )
 
     if (!ddo) {
       setError(
@@ -82,7 +89,7 @@ function AssetProvider({
   // Get and set DDO based on passed DDO or DID
   //
   useEffect(() => {
-    if (!asset || !metadataCacheUri) return
+    if (!asset || !appConfig.metadataCacheUri) return
 
     const source = axios.CancelToken.source()
     let isMounted = true
@@ -99,7 +106,7 @@ function AssetProvider({
       isMounted = false
       source.cancel()
     }
-  }, [asset, metadataCacheUri])
+  }, [asset, appConfig.metadataCacheUri])
 
   const setPurgatory = useCallback(async (did: string): Promise<void> => {
     if (!did) return

src/providers/Ocean.tsx

@@ -16,112 +16,59 @@ import {
 } from '@oceanprotocol/lib'
 
 import { useWeb3 } from './Web3'
-import {
+import { getDevelopmentConfig, getOceanConfig } from '../utils/ocean'
-  getDevelopmentConfig,
+import { useAsset } from './Asset'
-  getOceanConfig,
-  getUserInfo
-} from '../utils/ocean'
-import { UserBalance } from '../@types/TokenBalance'
-import { useSiteMetadata } from '../hooks/useSiteMetadata'
-
-const refreshInterval = 20000 // 20 sec.
 
 interface OceanProviderValue {
-  oceanConfigs: ConfigHelperConfig[]
-  metadataCacheUri: string
   ocean: Ocean
-  config: ConfigHelperConfig
   account: Account
-  balance: UserBalance
+  connect: (config: Config) => Promise<void>
-  loading: boolean
-  connect: (config?: Config) => Promise<void>
-  refreshBalance: () => Promise<void>
 }
 
 const OceanContext = createContext({} as OceanProviderValue)
 
 function OceanProvider({ children }: { children: ReactNode }): ReactElement {
-  const { appConfig } = useSiteMetadata()
+  const { web3, accountId } = useWeb3()
-  const { web3, accountId, networkId } = useWeb3()
+  const { ddo } = useAsset()
 
-  const [oceanConfigs, setOceanConfigs] = useState<ConfigHelperConfig[]>()
-  const [metadataCacheUri, setMetadataCacheUri] = useState<string>()
   const [ocean, setOcean] = useState<Ocean>()
   const [account, setAccount] = useState<Account>()
-  const [balance, setBalance] = useState<UserBalance>({
-    eth: undefined,
-    ocean: undefined
-  })
-  const [config, setConfig] = useState<ConfigHelperConfig | Config>()
 
   // -----------------------------------
-  // Initially get all supported configs
+  // Helper: Create Ocean instance
-  // from ocean.js ConfigHelper
-  // -----------------------------------
-  useEffect(() => {
-    const allConfigs = appConfig.chainIds.map((chainId: number) =>
-      getOceanConfig(chainId)
-    )
-    setOceanConfigs(allConfigs)
-    setMetadataCacheUri(allConfigs[0].metadataCacheUri)
-  }, [])
-
-  // -----------------------------------
-  // Set active config
-  // -----------------------------------
-  // useEffect(() => {
-  //   const config = {
-  //     ...getOceanConfig(networkId || 'mainnet'),
-
-  //     // add local dev values
-  //     ...(networkId === 8996 && {
-  //       ...getDevelopmentConfig()
-  //     })
-  //   }
-  //   setConfig(config)
-  //   // Sync config.metadataCacheUri with metadataCacheUri
-  //   setMetadataCacheUri(config.metadataCacheUri)
-  // }, [networkId])
-
-  // -----------------------------------
-  // Create Ocean instance
   // -----------------------------------
   const connect = useCallback(
     async (config: ConfigHelperConfig | Config) => {
-      if (!web3) return
+      if (!web3 || !ddo) return
+
+      const newConfig: Config = {
+        ...config,
+        web3Provider: web3
+      }
 
       try {
-        Logger.log('[ocean] Connecting Ocean...', config)
+        Logger.log('[ocean] Connecting Ocean...', newConfig)
-
+        const newOcean = await Ocean.getInstance(newConfig)
-        config.web3Provider = web3
-        setConfig(config)
-
-        const newOcean = await Ocean.getInstance(config)
         setOcean(newOcean)
         Logger.log('[ocean] Ocean instance created.', newOcean)
       } catch (error) {
         Logger.error('[ocean] Error: ', error.message)
       }
     },
-    [web3]
+    [web3, ddo]
   )
 
-  // async function refreshBalance() {
-  //   if (!ocean || !account || !web3) return
-
-  //   const { balance } = await getUserInfo(ocean)
-  //   setBalance(balance)
-  // }
-
   // -----------------------------------
   // Initial connection
   // -----------------------------------
   useEffect(() => {
+    if (!ddo?.chainId) return
+
     const config = {
-      ...getOceanConfig('mainnet'),
+      ...getOceanConfig(ddo.chainId),
 
       // add local dev values
-      ...(networkId === 8996 && {
+      ...(ddo.chainId === 8996 && {
         ...getDevelopmentConfig()
       })
     }
@@ -130,39 +77,28 @@ function OceanProvider({ children }: { children: ReactNode }): ReactElement {
       await connect(config)
     }
     init()
-
+  }, [connect, ddo?.chainId])
-    // init periodic refresh of wallet balance
-    // const balanceInterval = setInterval(() => refreshBalance(), refreshInterval)
-
-    // return () => {
-    //   clearInterval(balanceInterval)
-    // }
-  }, [connect, networkId])
 
   // -----------------------------------
   // Get user info, handle account change from web3
   // -----------------------------------
-  // useEffect(() => {
+  useEffect(() => {
-  //   if (!ocean || !accountId || !web3) return
+    if (!ocean || !accountId || !web3) return
 
-  //   async function getInfo() {
+    async function getInfo() {
-  //     const { account, balance } = await getUserInfo(ocean)
+      const account = (await ocean.accounts.list())[0]
-  //     setAccount(account)
+      Logger.log('[ocean] Account: ', account)
-  //     setBalance(balance)
+      setAccount(account)
-  //   }
+    }
-  //   getInfo()
+    getInfo()
-  // }, [ocean, accountId, web3])
+  }, [ocean, accountId, web3])
 
   return (
     <OceanContext.Provider
       value={
         {
-          oceanConfigs,
-          metadataCacheUri,
           ocean,
           account,
-          balance,
-          config,
           connect
           // refreshBalance
         } as OceanProviderValue

src/providers/Web3.tsx

@@ -19,6 +19,8 @@ import {
   getNetworkDisplayName
 } from '../utils/web3'
 import { graphql, useStaticQuery } from 'gatsby'
+import { UserBalance } from '../@types/TokenBalance'
+import { getOceanBalance } from '../utils/ocean'
 
 interface Web3ProviderValue {
   web3: Web3
@@ -26,6 +28,7 @@ interface Web3ProviderValue {
   web3Modal: Web3Modal
   web3ProviderInfo: IProviderInfo
   accountId: string
+  balance: UserBalance
   networkId: number
   networkDisplayName: string
   networkData: EthereumListsChain
@@ -77,6 +80,8 @@ export const web3ModalOpts = {
   theme: web3ModalTheme
 }
 
+const refreshInterval = 20000 // 20 sec.
+
 const networksQuery = graphql`
   query {
     allNetworksMetadataJson {
@@ -115,7 +120,14 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
   const [isTestnet, setIsTestnet] = useState<boolean>()
   const [accountId, setAccountId] = useState<string>()
   const [web3Loading, setWeb3Loading] = useState<boolean>(true)
+  const [balance, setBalance] = useState<UserBalance>({
+    eth: '0',
+    ocean: '0'
+  })
 
+  // -----------------------------------
+  // Helper: connect to web3
+  // -----------------------------------
   const connect = useCallback(async () => {
     if (!web3Modal) {
       setWeb3Loading(false)
@@ -146,6 +158,24 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
     }
   }, [web3Modal])
 
+  // -----------------------------------
+  // Helper: Get user balance
+  // -----------------------------------
+  const getUserBalance = useCallback(async () => {
+    if (!accountId || !networkId || !web3) return
+
+    try {
+      const balance = {
+        eth: web3.utils.fromWei(await web3.eth.getBalance(accountId, 'latest')),
+        ocean: await getOceanBalance(accountId, networkId, web3)
+      }
+      setBalance(balance)
+      Logger.log('[web3] Balance: ', balance)
+    } catch (error) {
+      Logger.error('[web3] Error: ', error.message)
+    }
+  }, [accountId, networkId, web3])
+
   // -----------------------------------
   // Create initial Web3Modal instance
   // -----------------------------------
@@ -180,6 +210,20 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
     connectCached()
   }, [connect, web3Modal])
 
+  // -----------------------------------
+  // Get and set user balance
+  // -----------------------------------
+  useEffect(() => {
+    getUserBalance()
+
+    // init periodic refresh of wallet balance
+    const balanceInterval = setInterval(() => getUserBalance(), refreshInterval)
+
+    return () => {
+      clearInterval(balanceInterval)
+    }
+  }, [getUserBalance])
+
   // -----------------------------------
   // Get and set network metadata
   // -----------------------------------
@@ -274,6 +318,7 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
         web3Modal,
         web3ProviderInfo,
         accountId,
+        balance,
         networkId,
         networkDisplayName,
         networkData,
@@ -294,3 +339,6 @@ const useWeb3 = (): Web3ProviderValue => useContext(Web3Context)
 
 export { Web3Provider, useWeb3, Web3ProviderValue, Web3Context }
 export default Web3Provider
+function getTokenBalance() {
+  throw new Error('Function not implemented.')
+}

src/utils/ocean.ts

@@ -1,15 +1,13 @@
 import {
-  Account,
-  Logger,
-  Ocean,
   ConfigHelper,
   ConfigHelperConfig,
   ConfigHelperNetworkId,
-  ConfigHelperNetworkName
+  ConfigHelperNetworkName,
+  Logger
 } from '@oceanprotocol/lib'
 import contractAddresses from '@oceanprotocol/contracts/artifacts/address.json'
-
+import { AbiItem } from 'web3-utils/types'
-import { UserBalance } from '../@types/TokenBalance'
+import Web3 from 'web3'
 
 export function getOceanConfig(
   network: ConfigHelperNetworkName | ConfigHelperNetworkId
@@ -24,11 +22,7 @@ export function getOceanConfig(
       : process.env.GATSBY_INFURA_PROJECT_ID
   )
 
-  return {
+  return config as ConfigHelperConfig
-    ...config,
-    // TODO: remove faking one Aquarius for all networks
-    metadataCacheUri: 'https://aquarius.mainnet.oceanprotocol.com'
-  } as ConfigHelperConfig
 }
 
 export function getDevelopmentConfig(): Partial<ConfigHelperConfig> {
@@ -43,19 +37,54 @@ export function getDevelopmentConfig(): Partial<ConfigHelperConfig> {
   }
 }
 
-export async function getUserInfo(
+export async function getOceanBalance(
-  ocean: Ocean
+  accountId: string,
-): Promise<{ account: Account; balance: UserBalance }> {
+  networkId: number,
-  if (!ocean) return { account: null, balance: { eth: '0', ocean: '0' } }
+  web3: Web3
+): Promise<string> {
+  const minABI = [
+    {
+      constant: true,
+      inputs: [
+        {
+          name: '_owner',
+          type: 'address'
+        }
+      ],
+      name: 'balanceOf',
+      outputs: [
+        {
+          name: 'balance',
+          type: 'uint256'
+        }
+      ],
+      payable: false,
+      stateMutability: 'view',
+      type: 'function'
+    }
+  ] as AbiItem[]
 
-  const account = (await ocean.accounts.list())[0]
+  try {
-  Logger.log('[ocean] Account: ', account)
+    const token = new web3.eth.Contract(
-
+      minABI,
-  const balance = {
+      getOceanConfig(networkId).oceanTokenAddress,
-    eth: await account.getEtherBalance(),
+      { from: accountId }
-    ocean: await account.getOceanBalance()
+    )
+    const result = web3.utils.fromWei(
+      await token.methods.balanceOf(accountId).call()
+    )
+    return result
+  } catch (e) {
+    Logger.error(`ERROR: Failed to get the balance: ${e.message}`)
   }
-  Logger.log('[ocean] Balance: ', JSON.stringify(balance))
+}
-
+
-  return { account, balance }
+export function getOceanTokenData(
+  networkId: number,
+  configs: ConfigHelperConfig[]
+): { address: string; symbol: string } {
+  const { oceanTokenSymbol, oceanTokenAddress } = configs.filter(
+    (config) => config.networkId === networkId
+  )[0]
+  return { address: oceanTokenAddress, symbol: oceanTokenSymbol }
 }