config refactor

app.config.js

@@ -1,28 +1,8 @@
-const { ConfigHelper } = require('@oceanprotocol/lib')
-
-const network = process.env.GATSBY_NETWORK || 'rinkeby'
-
-function getDefaultOceanConfig() {
-  return new ConfigHelper().getConfig(
-    network,
-    process.env.GATSBY_INFURA_PROJECT_ID
-  )
-}
-
-const appConfig = {
-  oceanConfig: {
-    ...getDefaultOceanConfig(),
-    verbose: 3
-  },
-  network,
+module.exports = {
+  network: process.env.GATSBY_NETWORK || 'rinkeby',
   infuraProjectId: process.env.GATSBY_INFURA_PROJECT_ID || 'xxx',
   marketFeeAddress:
     process.env.GATSBY_MARKET_FEE_ADDRESS ||
     '0x903322C7E45A60d7c8C3EA236c5beA9Af86310c7',
   marketFeeAmount: process.env.GATSBY_MARKET_FEE_AMOUNT || '0.1' // in %
 }
-
-module.exports = {
-  getDefaultOceanConfig,
-  appConfig
-}

src/helpers/wrapRootElement.tsx

@@ -1,16 +1,35 @@
 import React, { ReactElement } from 'react'
 import { OceanProvider } from '@oceanprotocol/react'
-import { appConfig } from '../../app.config'
+import { ConfigHelper } from '@oceanprotocol/lib'
 import { web3ModalOpts } from '../utils/wallet'
+import { network } from '../../app.config'
 
-const wrapRootElement = ({
+function getOceanConfig(network: string) {
+  return new ConfigHelper().getConfig(
+    network,
+    process.env.GATSBY_INFURA_PROJECT_ID
+  )
+}
+
+export default function wrapRootElement({
   element
 }: {
   element: ReactElement
-}): ReactElement => (
-  <OceanProvider config={appConfig.oceanConfig} web3ModalOpts={web3ModalOpts}>
+}): ReactElement {
+  const oceanInitialConfig = getOceanConfig(network)
+
+  async function handleNetworkChanged(chainId: number) {
+    const config = getOceanConfig(chainId)
+    connect(config)
+  }
+
+  return (
+    <OceanProvider
+      initialConfig={oceanInitialConfig}
+      handleNetworkChanged={handleNetworkChanged}
+      web3ModalOpts={web3ModalOpts}
+    >
       {element}
     </OceanProvider>
   )
-
-export default wrapRootElement
+}