add providers with wrapRootElement

gatsby-browser.js

@@ -1,5 +1,8 @@
 import wrapPageElementWithStyles from './src/helpers/wrapPageElement'
+import wrapRootElementWithProviders from './src/helpers/wrapRootElement'
+
 export const wrapPageElement = wrapPageElementWithStyles
+export const wrapRootElement = wrapRootElementWithProviders
 
 // IntersectionObserver polyfill for gatsby-image (Safari, IE)
 if (typeof window.IntersectionObserver === 'undefined') {

gatsby-ssr.js

@@ -1,2 +1,5 @@
 import wrapPageElementWithStyles from './src/helpers/wrapPageElement'
+import wrapRootElementWithProviders from './src/helpers/wrapRootElement'
+
 export const wrapPageElement = wrapPageElementWithStyles
+export const wrapRootElement = wrapRootElementWithProviders

src/components/Layout.tsx

@@ -5,8 +5,6 @@ import Footer from './organisms/Footer'
 import PageHeader from './molecules/PageHeader'
 import styles from './Layout.module.css'
 import Seo from './atoms/Seo'
-import { Web3Provider, OceanProvider, Config } from '@oceanprotocol/react'
-import { config } from '../config/ocean'
 
 export interface LayoutProps {
   children: ReactNode
@@ -24,27 +22,23 @@ export default function Layout({
   noPageHeader
 }: LayoutProps): ReactElement {
   return (
-    <Web3Provider>
-      <OceanProvider config={config as Config}>
-        <div className={styles.app}>
-          <Helmet>
-            <link rel="icon" href="/icons/icon-96x96.png" />
-            <link rel="apple-touch-icon" href="icons/icon-256x256.png" />
-            <meta name="theme-color" content="#ca2935" />
-          </Helmet>
+    <div className={styles.app}>
+      <Helmet>
+        <link rel="icon" href="/icons/icon-96x96.png" />
+        <link rel="apple-touch-icon" href="icons/icon-256x256.png" />
+        <meta name="theme-color" content="#ca2935" />
+      </Helmet>
 
-          <Seo title={title} description={description} uri={uri} />
+      <Seo title={title} description={description} uri={uri} />
 
-          <Header />
-          <main className={styles.main}>
-            {title && !noPageHeader && (
-              <PageHeader title={title} description={description} />
-            )}
-            {children}
-          </main>
-          <Footer />
-        </div>
-      </OceanProvider>
-    </Web3Provider>
+      <Header />
+      <main className={styles.main}>
+        {title && !noPageHeader && (
+          <PageHeader title={title} description={description} />
+        )}
+        {children}
+      </main>
+      <Footer />
+    </div>
   )
 }

src/components/organisms/AssetList.tsx

@@ -6,6 +6,7 @@ import Pagination from '../molecules/Pagination'
 import { updateQueryStringParameter } from '../../utils'
 import styles from './AssetList.module.css'
 import { MetaDataMarket } from '../../@types/MetaData'
+import { DDO } from '@oceanprotocol/squid'
 
 declare type AssetListProps = {
   queryResult: QueryResult
@@ -38,10 +39,10 @@ const AssetList: React.FC<AssetListProps> = ({ queryResult }) => {
     <>
       <div className={styles.assetList}>
         {queryResult.results &&
-          queryResult.results.map((ddo) => {
-            const { attributes }: MetaDataMarket = ddo.findServiceByType(
-              'metadata'
-            )
+          queryResult.results.map((ddo: DDO) => {
+            const { attributes }: MetaDataMarket = new DDO(
+              ddo
+            ).findServiceByType('metadata')
 
             return (
               <AssetTeaser

src/helpers/wrapPageElement.tsx

@@ -1,8 +1,10 @@
 import React, { ReactElement } from 'react'
 import Styles from '../global/Styles'
 
-const wrapPageElement = ({ element }: { element: ReactElement }) => (
-  <Styles>{element}</Styles>
-)
+const wrapPageElement = ({
+  element
+}: {
+  element: ReactElement
+}): ReactElement => <Styles>{element}</Styles>
 
 export default wrapPageElement

src/helpers/wrapRootElement.tsx

@@ -0,0 +1,15 @@
+import React, { ReactElement } from 'react'
+import { Web3Provider, OceanProvider, Config } from '@oceanprotocol/react'
+import { config } from '../config/ocean'
+
+const wrapRootElement = ({
+  element
+}: {
+  element: ReactElement
+}): ReactElement => (
+  <Web3Provider>
+    <OceanProvider config={config as Config}>{element}</OceanProvider>
+  </Web3Provider>
+)
+
+export default wrapRootElement