output version number in footer

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

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

client/src/components/organisms/Footer.tsx

@@ -5,6 +5,33 @@ 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>
+    )
+}
 
 const Footer = () => (
     <footer className={styles.footer}>
@@ -30,6 +57,7 @@ const Footer = () => (
                         <AiCommons />
                     </a>
                 </p>
+                <VersionNumber />
             </Content>
         </aside>