diff --git a/src/helpers/wrapRootElement.tsx b/src/helpers/wrapRootElement.tsx
index bd53ab979..4dcbe930d 100644
--- a/src/helpers/wrapRootElement.tsx
+++ b/src/helpers/wrapRootElement.tsx
@@ -1,14 +1,23 @@
 import React, { ReactElement } from 'react'
 import { OceanProvider } from '@oceanprotocol/react'
-import { web3ModalOpts, getOceanConfig } from '../utils/wallet'
-import { network } from '../../app.config'
+import { ConfigHelper } from '@oceanprotocol/lib'
+import { web3ModalOpts } from '../utils/wallet'
+import { useSiteMetadata } from '../hooks/useSiteMetadata'
+
+function getOceanConfig(network: string): ConfigHelper {
+  return new ConfigHelper().getConfig(
+    network,
+    process.env.GATSBY_INFURA_PROJECT_ID
+  )
+}
 
 export default function wrapRootElement({
   element
 }: {
   element: ReactElement
 }): ReactElement {
-  const oceanInitialConfig = getOceanConfig(network)
+  const { appConfig } = useSiteMetadata()
+  const oceanInitialConfig = getOceanConfig(appConfig.network)
 
   return (
     <OceanProvider
diff --git a/src/utils/wallet.ts b/src/utils/wallet.ts
index 9aa3b7998..c39859427 100644
--- a/src/utils/wallet.ts
+++ b/src/utils/wallet.ts
@@ -1,13 +1,5 @@
 import loadable from '@loadable/component'
 import { infuraProjectId, network } from '../../app.config'
-import { ConfigHelper } from '@oceanprotocol/lib'
-
-export function getOceanConfig(network: string): ConfigHelper {
-  return new ConfigHelper().getConfig(
-    network,
-    process.env.GATSBY_INFURA_PROJECT_ID
-  )
-}
 
 const web3ModalTheme = {
   background: 'var(--brand-white)',