From 2395c3ff21f27bda898d8dfeeb87c4c2b91e9577 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 28 May 2019 12:30:57 +0200
Subject: [PATCH] output version number in footer

---
 .../components/organisms/Footer.module.scss   |  6 ++++
 client/src/components/organisms/Footer.tsx    | 28 +++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/client/src/components/organisms/Footer.module.scss b/client/src/components/organisms/Footer.module.scss
index 6f933ed..72407d9 100644
--- a/client/src/components/organisms/Footer.module.scss
+++ b/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;
+}
diff --git a/client/src/components/organisms/Footer.tsx b/client/src/components/organisms/Footer.tsx
index 99b5f99..cbcf60d 100644
--- a/client/src/components/organisms/Footer.tsx
+++ b/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>