Merge pull request #51 from oceanprotocol/feature/config

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
-}

gatsby-config.js

@@ -1,7 +1,7 @@
 require('dotenv').config()
 
 const siteContent = require('./content/site.json')
-const { appConfig } = require('./app.config')
+const appConfig = require('./app.config')
 
 module.exports = {
   siteMetadata: {

package-lock.json

@@ -3606,9 +3606,9 @@
       }
     },
     "@oceanprotocol/react": {
-      "version": "0.0.32",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.32.tgz",
-      "integrity": "sha512-MN0/kpAGfqod9mFKbynhfElMYqYSZuT5as/Nnr3YKAuaCDiuTGc7jqF2nnNZraN5nOcti8DKHkCLsLF9qNNRpw==",
+      "version": "0.0.34",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.34.tgz",
+      "integrity": "sha512-xgKNuVszU0eYtDnByPaI0PSZgO1S+haWlMOGvmLTfxiKv2A/m2qK09gFiY5SgiGsPozphG5daTw7M0dyf0tD1w==",
       "requires": {
         "@oceanprotocol/lib": "^0.1.11",
         "axios": "^0.19.2",

package.json

@@ -23,7 +23,7 @@
     "@loadable/component": "^5.13.1",
     "@oceanprotocol/art": "^3.0.0",
     "@oceanprotocol/lib": "^0.1.11",
-    "@oceanprotocol/react": "^0.0.32",
+    "@oceanprotocol/react": "^0.0.34",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
     "@tippyjs/react": "^4.1.0",

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(metadataStoreUri, Logger)
+        const metadataStore = new MetadataStore(config.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)

src/helpers/NetworkMonitor.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react'
+import { useOcean } from '@oceanprotocol/react'
+import { getOceanConfig } from './wrapRootElement'
+
+export function NetworkMonitor() {
+  const { connect, web3Provider } = useOcean()
+
+  const handleNetworkChanged = (chainId: number) => {
+    // temp hack
+    let network = ''
+    switch (chainId) {
+      case 1: {
+        network = 'mainnet'
+        break
+      }
+      case 4: {
+        network = 'rinkeby'
+        break
+      }
+    }
+    const config = getOceanConfig(network)
+    connect(config)
+  }
+  useEffect(() => {
+    if (!web3Provider) return
+
+    web3Provider.on('chainChanged', handleNetworkChanged)
+
+    return () => {
+      web3Provider.removeListener('chainChanged', handleNetworkChanged)
+    }
+  }, [web3Provider])
+
+  return <></>
+}

src/helpers/wrapRootElement.tsx

@@ -1,16 +1,31 @@
 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 { NetworkMonitor } from './NetworkMonitor'
+import appConfig from '../../app.config'
 
-const wrapRootElement = ({
+export function getOceanConfig(network: string): ConfigHelper {
+  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}>
-    {element}
-  </OceanProvider>
-)
+}): ReactElement {
+  const oceanInitialConfig = getOceanConfig(appConfig.network)
 
-export default wrapRootElement
+  return (
+    <OceanProvider
+      initialConfig={oceanInitialConfig}
+      web3ModalOpts={web3ModalOpts}
+    >
+      <NetworkMonitor />
+      {element}
+    </OceanProvider>
+  )
+}

src/utils/wallet.ts

@@ -1,7 +1,5 @@
 import loadable from '@loadable/component'
-import { appConfig } from '../../app.config'
-
-const { infuraProjectId, network, oceanConfig } = appConfig
+import { infuraProjectId, network } from '../../app.config'
 
 const web3ModalTheme = {
   background: 'var(--brand-white)',
@@ -27,7 +25,7 @@ const providerOptions = {
     package: Torus,
     options: {
       networkParams: {
-        host: oceanConfig.url // optional
+        // host: oceanConfig.url // optional
         // chainId: 1337, // optional
         // networkId: 1337 // optional
       }