output total assets in the marketplace, use new Market Provider for it

client/src/components/organisms/Footer.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Market } from '../../context'
 import Content from '../atoms/Content'
 import styles from './Footer.module.scss'
 
@@ -6,6 +7,14 @@ import meta from '../../data/meta.json'
 
 const Footer = () => (
     <footer className={styles.footer}>
+        <Market.Consumer>
+            {state =>
+                state.totalAssets > 0 && (
+                    <Content wide>{state.totalAssets} total assets</Content>
+                )
+            }
+        </Market.Consumer>
+
         <Content wide>
             <small>
                 &copy; {new Date().getFullYear()}{' '}

client/src/context/MarketProvider.tsx

@@ -0,0 +1,59 @@
+import React, { PureComponent } from 'react'
+import { Logger, Ocean } from '@oceanprotocol/squid'
+import { Market } from '.'
+
+interface MarketProviderProps {
+    ocean: Ocean
+}
+
+interface MarketProviderState {
+    totalAssets: number
+}
+
+export default class MarketProvider extends PureComponent<
+    MarketProviderProps,
+    MarketProviderState
+> {
+    public state = {
+        totalAssets: 0
+    }
+
+    public async componentDidMount() {}
+
+    public async componentDidUpdate(prevProps: any) {
+        // Using ocean prop instead of getting it from context to be able to compare.
+        // Cause there is no `prevContext`.
+        if (prevProps.ocean !== this.props.ocean) {
+            await this.getTotalAssets()
+        }
+    }
+
+    private getTotalAssets = async () => {
+        const searchQuery = {
+            offset: 1,
+            page: 1,
+            query: {
+                price: [-1, 1]
+            },
+            sort: {
+                value: 1
+            }
+        }
+
+        try {
+            const { ocean } = this.props
+            const search = await ocean.aquarius.queryMetadata(searchQuery)
+            this.setState({ totalAssets: search.totalResults })
+        } catch (error) {
+            Logger.error('Error', error.message)
+        }
+    }
+
+    public render() {
+        return (
+            <Market.Provider value={this.state}>
+                {this.props.children}
+            </Market.Provider>
+        )
+    }
+}

client/src/context/UserProvider.tsx

@@ -4,6 +4,7 @@ import { Logger, Ocean, Account } from '@oceanprotocol/squid'
 import { User } from '.'
 import { provideOcean, requestFromFaucet, FaucetResponse } from '../ocean'
 import { nodeHost, nodePort, nodeScheme } from '../config'
+import MarketProvider from './MarketProvider'
 
 const POLL_ACCOUNTS = 1000 // every 1s
 const POLL_NETWORK = POLL_ACCOUNTS * 60 // every 1 min
@@ -271,7 +272,9 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
     public render() {
         return (
             <User.Provider value={this.state}>
-                {this.props.children}
+                <MarketProvider ocean={this.state.ocean}>
+                    {this.props.children}
+                </MarketProvider>
             </User.Provider>
         )
     }

client/src/context/index.tsx

@@ -21,3 +21,5 @@ export const User = React.createContext({
     },
     message: ''
 })
+
+export const Market = React.createContext({ totalAssets: 0 })