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,8 +22,6 @@ 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" />
@@ -44,7 +40,5 @@ export default function Layout({
       </main>
       <Footer />
     </div>
-      </OceanProvider>
-    </Web3Provider>
   )
 }

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) => {
+          queryResult.results.map((ddo: DDO) => {
-            const { attributes }: MetaDataMarket = ddo.findServiceByType(
+            const { attributes }: MetaDataMarket = new DDO(
-              'metadata'
+              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 }) => (
+const wrapPageElement = ({
-  <Styles>{element}</Styles>
+  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