get all screens to render again

app.config.js

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

src/components/atoms/AssetType.tsx

@@ -37,9 +37,9 @@ export default function AssetType({
         {type === 'dataset' ? 'data set' : 'algorithm'}
       </div>
       {/* TODO: networkId needs to come from the multinetwork DDO for each asset */}
-      {config?.networkId && (
+      {(config?.networkId || 1) && (
         <NetworkName
-          networkId={config.networkId}
+          networkId={config?.networkId || 1}
           className={styles.network}
           minimal
         />

src/components/atoms/ExplorerLink.tsx

@@ -26,13 +26,13 @@ export default function ExplorerLink({
   })
 
   useEffect(() => {
-    setUrl((config as ConfigHelperConfig).explorerUri)
+    setUrl((config as ConfigHelperConfig)?.explorerUri)
   }, [config])
 
   return (
     <a
       href={`${url}/${path}`}
-      title={`View on ${(config as ConfigHelperConfig).explorerUri}`}
+      title={`View on ${(config as ConfigHelperConfig)?.explorerUri}`}
       target="_blank"
       rel="noreferrer"
       className={styleClasses}

src/components/molecules/FormFields/FilesInput/index.tsx

@@ -4,7 +4,6 @@ import { useField } from 'formik'
 import { toast } from 'react-toastify'
 import FileInfo from './Info'
 import FileInput from './Input'
-import { useOcean } from '../../../../providers/Ocean'
 import { InputProps } from '../../../atoms/Input'
 import { fileinfo } from '../../../../utils/provider'
 
@@ -12,19 +11,17 @@ export default function FilesInput(props: InputProps): ReactElement {
   const [field, meta, helpers] = useField(props.name)
   const [isLoading, setIsLoading] = useState(false)
   const [fileUrl, setFileUrl] = useState<string>()
-  const { config } = useOcean()
 
   function loadFileInfo() {
     const source = axios.CancelToken.source()
 
     async function validateUrl() {
+      // TODO: get the providerUri
+      const providerUri = ''
+
       try {
         setIsLoading(true)
-        const checkedFile = await fileinfo(
-          fileUrl,
-          config.providerUri,
-          source.token
-        )
+        const checkedFile = await fileinfo(fileUrl, providerUri, source.token)
         checkedFile && helpers.setValue([checkedFile])
       } catch (error) {
         toast.error('Could not fetch file info. Please check URL and try again')
@@ -43,7 +40,7 @@ export default function FilesInput(props: InputProps): ReactElement {
 
   useEffect(() => {
     loadFileInfo()
-  }, [fileUrl, config.providerUri])
+  }, [fileUrl])
 
   async function handleButtonClick(e: React.SyntheticEvent, url: string) {
     // hack so the onBlur-triggered validation does not show,

src/components/organisms/AssetContent/index.tsx

@@ -80,7 +80,7 @@ export default function AssetContent(props: AssetContentProps): ReactElement {
         {showPricing && <Pricing ddo={ddo} />}
         <div className={styles.content}>
           <MetaMain />
-          <Bookmark did={ddo.id} />
+          {/* <Bookmark did={ddo.id} /> */}
 
           {isInPurgatory ? (
             <Alert

src/components/pages/History/PublishedList.tsx

@@ -6,10 +6,11 @@ import axios from 'axios'
 import { queryMetadata } from '../../../utils/aquarius'
 import { useWeb3 } from '../../../providers/Web3'
 import { useOcean } from '../../../providers/Ocean'
+import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 
 export default function PublishedList(): ReactElement {
   const { accountId } = useWeb3()
-  const { metadataCacheUri } = useOcean()
+  const { appConfig } = useSiteMetadata()
 
   const [queryResult, setQueryResult] = useState<QueryResult>()
   const [isLoading, setIsLoading] = useState(false)
@@ -20,6 +21,8 @@ export default function PublishedList(): ReactElement {
   useEffect(() => {
     async function getPublished() {
       if (!accountId) return
+
+      // TODO: this query needs to adapt to chainIds
       const queryPublishedAssets = {
         page: page,
         offset: 9,
@@ -34,7 +37,7 @@ export default function PublishedList(): ReactElement {
         queryResult || setIsLoading(true)
         const result = await queryMetadata(
           queryPublishedAssets,
-          metadataCacheUri,
+          appConfig.metadataCacheUri,
           source.token
         )
         setQueryResult(result)
@@ -45,7 +48,7 @@ export default function PublishedList(): ReactElement {
       }
     }
     getPublished()
-  }, [accountId, page, metadataCacheUri])
+  }, [accountId, page, appConfig.metadataCacheUri])
 
   return accountId ? (
     <AssetList

src/components/pages/Home.tsx

@@ -7,16 +7,13 @@ import {
   SearchQuery
 } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
 import Container from '../atoms/Container'
-import { useOcean } from '../../providers/Ocean'
 import Button from '../atoms/Button'
 import Bookmarks from '../molecules/Bookmarks'
 import axios from 'axios'
 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'
 
 async function getQueryHighest(
   chainIds: number[]

src/providers/Ocean.tsx

@@ -22,6 +22,7 @@ import { useAsset } from './Asset'
 interface OceanProviderValue {
   ocean: Ocean
   account: Account
+  config: Config
   connect: (config: Config) => Promise<void>
 }
 
@@ -33,6 +34,7 @@ function OceanProvider({ children }: { children: ReactNode }): ReactElement {
 
   const [ocean, setOcean] = useState<Ocean>()
   const [account, setAccount] = useState<Account>()
+  const [config, setConfig] = useState<Config>()
 
   // -----------------------------------
   // Helper: Create Ocean instance
@@ -50,6 +52,7 @@ function OceanProvider({ children }: { children: ReactNode }): ReactElement {
         Logger.log('[ocean] Connecting Ocean...', newConfig)
         const newOcean = await Ocean.getInstance(newConfig)
         setOcean(newOcean)
+        setConfig(newConfig)
         Logger.log('[ocean] Ocean instance created.', newOcean)
       } catch (error) {
         Logger.error('[ocean] Error: ', error.message)
@@ -99,7 +102,8 @@ function OceanProvider({ children }: { children: ReactNode }): ReactElement {
         {
           ocean,
           account,
-          connect
+          connect,
+          config
           // refreshBalance
         } as OceanProviderValue
       }