first aggregated stats (#203)

* first stats

* styling

* url change, error catching

* styling, more output

* refactor, refetch every 10 sec when in viewport

* copy

* add axios cancel token

* cancel token logging

package-lock.json

@@ -28460,6 +28460,11 @@
         "prop-types": "^15.0.0"
       }
     },
+    "react-intersection-observer": {
+      "version": "8.30.1",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-8.30.1.tgz",
+      "integrity": "sha512-BGHGkmWz/d4Gs+44jWkrZBtJ6//HGwouZ9ub+kRRoRfguw2JoDlVrgTDwkQ/deDJAR9keTkQmMilNu+onhqfgw=="
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -68,6 +68,7 @@
     "react-dotdotdot": "^1.3.1",
     "react-dropzone": "^11.2.2",
     "react-helmet": "^6.1.0",
+    "react-intersection-observer": "^8.30.1",
     "react-markdown": "^5.0.2",
     "react-modal": "^3.11.2",
     "react-paginate": "^6.5.0",

src/components/molecules/MarketStats.module.css

@@ -0,0 +1,16 @@
+.stats {
+  margin-bottom: calc(var(--spacer) * 2);
+  font-size: var(--font-size-base);
+}
+
+.stats > div > div {
+  display: inline-block;
+}
+
+.stats > div strong {
+  font-size: var(--font-size-base) !important;
+}
+
+.total {
+  color: var(--color-secondary) !important;
+}

src/components/molecules/MarketStats.tsx

@@ -0,0 +1,74 @@
+import { Logger } from '@oceanprotocol/lib'
+import React, { ReactElement, useEffect, useState } from 'react'
+import PriceUnit from '../atoms/Price/PriceUnit'
+import axios from 'axios'
+import styles from './MarketStats.module.css'
+import { useInView } from 'react-intersection-observer'
+
+interface MarketStatsResponse {
+  datasets: {
+    pools: number
+    exchanges: number
+    none: number
+    total: number
+  }
+  owners: number
+  ocean: number
+  datatoken: number
+}
+
+export default function MarketStats(): ReactElement {
+  const [ref, inView] = useInView()
+  const [stats, setStats] = useState<MarketStatsResponse>()
+
+  useEffect(() => {
+    const source = axios.CancelToken.source()
+
+    async function getStats() {
+      try {
+        const response = await axios('https://market-stats.oceanprotocol.com', {
+          cancelToken: source.token
+        })
+        if (!response || response.status !== 200) return
+        setStats(response.data)
+      } catch (error) {
+        if (axios.isCancel(error)) {
+          Logger.log(error.message)
+        } else {
+          Logger.error(error.message)
+        }
+      }
+    }
+
+    // Update every 10 sec. when in viewport
+    const interval = setInterval(getStats, 10000)
+
+    if (!inView) {
+      clearInterval(interval)
+    }
+
+    getStats()
+
+    return () => {
+      clearInterval(interval)
+      source.cancel()
+    }
+  }, [inView])
+
+  return (
+    <div className={styles.stats} ref={ref}>
+      Total of <strong>{stats?.datasets.total}</strong> data sets & datatokens
+      published by <strong>{stats?.owners}</strong> accounts.
+      <br />
+      <PriceUnit
+        price={`${stats?.ocean}`}
+        small
+        className={styles.total}
+        conversion
+      />{' '}
+      in <strong>{stats?.datasets.pools}</strong> data set pools.
+      <br />
+      <strong>{stats?.datasets.none}</strong> data sets have no price set yet.
+    </div>
+  )
+}

src/components/organisms/Footer.tsx

@@ -3,6 +3,7 @@ import styles from './Footer.module.css'
 import Markdown from '../atoms/Markdown'
 import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 import { Link } from 'gatsby'
+import MarketStats from '../molecules/MarketStats'
 
 export default function Footer(): ReactElement {
   const { copyright } = useSiteMetadata()
@@ -11,7 +12,8 @@ export default function Footer(): ReactElement {
   return (
     <footer className={styles.footer}>
       <div className={styles.content}>
-        © {year} <Markdown text={copyright} /> — <Link to="/terms">Terms</Link>
+        <MarketStats />© {year} <Markdown text={copyright} /> —{' '}
+        <Link to="/terms">Terms</Link>
         {' — '}
         <a href="https://oceanprotocol.com/privacy">Privacy</a>
       </div>