version numbers as component, fetch Brizo & Aquarius

client/src/components/atoms/VersionNumbers.module.scss

@@ -0,0 +1,21 @@
+@import '../../styles/variables';
+
+.version {
+    font-family: $font-family-monospace;
+    font-size: $font-size-mini;
+    margin-top: $spacer;
+}
+
+.more {
+    cursor: help;
+    display: inline-block;
+    margin-left: $spacer / 4;
+    margin-bottom: -.1rem;
+    vertical-align: middle;
+
+    svg {
+        width: $font-size-mini;
+        height: $font-size-mini;
+        fill: currentColor;
+    }
+}

client/src/components/atoms/VersionNumbers.tsx

@@ -0,0 +1,73 @@
+import React, { PureComponent } from 'react'
+import { version } from '../../../package.json'
+import { version as versionSquid } from '@oceanprotocol/squid/package.json'
+import styles from './VersionNumbers.module.scss'
+
+import {
+    aquariusHost,
+    aquariusPort,
+    aquariusScheme,
+    brizoHost,
+    brizoPort,
+    brizoScheme
+} from '../../config'
+import { Logger } from '@oceanprotocol/squid'
+
+const commonsVersion =
+    process.env.NODE_ENV === 'production' ? `v${version}` : `v${version}-dev`
+
+export default class VersionNumbers extends PureComponent {
+    public state = {
+        commons: commonsVersion,
+        squidJs: `v${versionSquid}`,
+        aquarius: 'v0.0.0',
+        brizo: 'v0.0.0'
+    }
+
+    public async componentDidMount() {
+        try {
+            const {
+                versionAquarius,
+                versionBrizo
+            } = await this.getComponentVersions()
+
+            this.setState({
+                aquarius: `v${versionAquarius}`,
+                brizo: `v${versionBrizo}`
+            })
+        } catch (error) {
+            Logger.error(error.message)
+        }
+    }
+
+    private async getComponentVersions() {
+        const responseAquarius = await fetch(
+            `${aquariusScheme}://${aquariusHost}:${aquariusPort}`
+        )
+        const jsonAquarius = await responseAquarius.json()
+        const versionAquarius = jsonAquarius.version
+
+        const responseBrizo = await fetch(
+            `${brizoScheme}://${brizoHost}:${brizoPort}`
+        )
+        const jsonBrizo = await responseBrizo.json()
+        const versionBrizo = jsonBrizo.version
+
+        return { versionAquarius, versionBrizo }
+    }
+
+    public render() {
+        const { commons, squidJs, brizo, aquarius } = this.state
+
+        return (
+            <p className={styles.version}>
+                <a
+                    title={`Squid-js ${squidJs} - Brizo ${brizo} - Aquarius ${aquarius}`}
+                    href={`https://github.com/oceanprotocol/commons/releases/tag/${commons}`}
+                >
+                    {commons}
+                </a>
+            </p>
+        )
+    }
+}

client/src/components/organisms/Footer.module.scss

@@ -91,9 +91,3 @@
         }
     }
 }
-
-.version {
-    font-family: $font-family-monospace;
-    font-size: $font-size-mini;
-    margin-top: $spacer;
-}

client/src/components/organisms/Footer.tsx

@@ -5,33 +5,7 @@ import { ReactComponent as AiCommons } from '../../img/aicommons.svg'
 import styles from './Footer.module.scss'
 
 import meta from '../../data/meta.json'
-import { version } from '../../../package.json'
-import { version as versionSquid } from '@oceanprotocol/squid/package.json'
-
-const VersionNumber = () => {
-    const versionOutput =
-        process.env.NODE_ENV === 'production'
-            ? `v${version}`
-            : `v${version}-dev`
-
-    return (
-        <p className={styles.version}>
-            <a
-                title="See commons release on GitHub"
-                href={`https://github.com/oceanprotocol/commons/releases/tag/v${version}`}
-            >
-                {versionOutput}
-            </a>{' '}
-            &mdash;{' '}
-            <a
-                title="See squid-js release on GitHub"
-                href={`https://github.com/oceanprotocol/squid-js/releases/tag/v${versionSquid}`}
-            >
-                squid-js v{versionSquid}
-            </a>
-        </p>
-    )
-}
+import VersionNumbers from '../atoms/VersionNumbers'
 
 const Footer = () => (
     <footer className={styles.footer}>
@@ -57,7 +31,7 @@ const Footer = () => (
                         <AiCommons />
                     </a>
                 </p>
-                <VersionNumber />
+                <VersionNumbers />
             </Content>
         </aside>