From 7247b7da6523f1d6de7496a2b18989db60b98125 Mon Sep 17 00:00:00 2001
From: Mario <mario.sarcevic@iota.org>
Date: Wed, 24 Jan 2024 17:07:33 +0100
Subject: [PATCH] feat: Show Explorer client version from package.json on the
 Footer (#1004)

---
 .../components/footer/ExplorerVersion.scss    | 25 +++++++++++++++++++
 .../app/components/footer/ExplorerVersion.tsx | 17 +++++++++++++
 client/src/app/components/footer/Footer.scss  |  2 +-
 client/src/app/components/footer/Footer.tsx   |  2 ++
 .../app/components/footer/ShimmerFooter.scss  |  1 +
 .../app/components/footer/ShimmerFooter.tsx   |  4 ++-
 client/vite-env.d.ts                          |  1 +
 client/vite.config.ts                         |  3 +++
 8 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 client/src/app/components/footer/ExplorerVersion.scss
 create mode 100644 client/src/app/components/footer/ExplorerVersion.tsx

diff --git a/client/src/app/components/footer/ExplorerVersion.scss b/client/src/app/components/footer/ExplorerVersion.scss
new file mode 100644
index 000000000..19377bce2
--- /dev/null
+++ b/client/src/app/components/footer/ExplorerVersion.scss
@@ -0,0 +1,25 @@
+@import "../../../scss/fonts";
+@import "../../../scss/media-queries";
+@import "../../../scss/mixins";
+@import "../../../scss/variables";
+
+.explorer-version {
+    display: flex;
+    width: 100%;
+    background-color: $gray-11;
+    justify-content: center;
+    padding-bottom: 12px;
+
+    &.shimmer-version {
+        position: absolute;
+        bottom: 0;
+        background-color: transparent;
+    }
+
+    span {
+        @include font-size(13px);
+
+        font-family: $inter;
+        color: $gray-6;
+    }
+}
diff --git a/client/src/app/components/footer/ExplorerVersion.tsx b/client/src/app/components/footer/ExplorerVersion.tsx
new file mode 100644
index 000000000..821baae6b
--- /dev/null
+++ b/client/src/app/components/footer/ExplorerVersion.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import classNames from "classnames";
+import "./ExplorerVersion.scss";
+
+export default function ExplorerVersion({ shimmerTheme }: { shimmerTheme?: boolean }): React.JSX.Element {
+    const explorerVersion = EXPLORER_VERSION ?? "";
+
+    return (
+        <>
+            {explorerVersion && (
+                <section className={classNames("explorer-version", { "shimmer-version": shimmerTheme })}>
+                    <span>v{explorerVersion}</span>
+                </section>
+            )}
+        </>
+    );
+}
diff --git a/client/src/app/components/footer/Footer.scss b/client/src/app/components/footer/Footer.scss
index 7dac793a3..c0f3b9110 100644
--- a/client/src/app/components/footer/Footer.scss
+++ b/client/src/app/components/footer/Footer.scss
@@ -7,7 +7,7 @@ footer {
     .footer--content {
         display: flex;
         justify-content: center;
-        padding: 40px 20px 64px 20px;
+        padding: 40px 20px 0px 20px;
         background-color: $gray-11;
         color: $white;
 
diff --git a/client/src/app/components/footer/Footer.tsx b/client/src/app/components/footer/Footer.tsx
index 8d3117e70..9826bdf22 100644
--- a/client/src/app/components/footer/Footer.tsx
+++ b/client/src/app/components/footer/Footer.tsx
@@ -11,6 +11,7 @@ import TwitterIcon from "~assets/twitter.svg?react";
 import YoutubeIcon from "~assets/youtube.svg?react";
 import { FoundationDataHelper } from "~helpers/foundationDataHelper";
 import AsyncComponent from "../AsyncComponent";
+import ExplorerVersion from "./ExplorerVersion";
 import "./Footer.scss";
 
 /**
@@ -135,6 +136,7 @@ class Footer extends AsyncComponent<FooterProps, FooterState> {
                         </div>
                     </div>
                 </section>
+                <ExplorerVersion />
                 <section className="social--media__wrapper">
                     {this.SOCIAL_LINKS.map((social, socialID) => (
                         <a
diff --git a/client/src/app/components/footer/ShimmerFooter.scss b/client/src/app/components/footer/ShimmerFooter.scss
index 1204665bf..9fc730bfe 100644
--- a/client/src/app/components/footer/ShimmerFooter.scss
+++ b/client/src/app/components/footer/ShimmerFooter.scss
@@ -4,6 +4,7 @@
 @import "../../../scss/variables";
 
 footer {
+    position: relative;
     .shimmer-footer--content {
         display: flex;
         justify-content: center;
diff --git a/client/src/app/components/footer/ShimmerFooter.tsx b/client/src/app/components/footer/ShimmerFooter.tsx
index b5f9b202b..711348026 100644
--- a/client/src/app/components/footer/ShimmerFooter.tsx
+++ b/client/src/app/components/footer/ShimmerFooter.tsx
@@ -6,8 +6,9 @@ import GithubIcon from "~assets/github.svg?react";
 import Logo from "~assets/shimmer-footer-bg.svg?react";
 import TwitterIcon from "~assets/twitter.svg?react";
 import { FoundationDataHelper } from "~helpers/foundationDataHelper";
-import "./ShimmerFooter.scss";
 import AsyncComponent from "../AsyncComponent";
+import ExplorerVersion from "./ExplorerVersion";
+import "./ShimmerFooter.scss";
 
 /**
  * Component which will show the footer.
@@ -114,6 +115,7 @@ class ShimmerFooter extends AsyncComponent<FooterProps, FooterState> {
                             </section>
                         </div>
                     </div>
+                    <ExplorerVersion shimmerTheme />
                 </section>
             </footer>
         );
diff --git a/client/vite-env.d.ts b/client/vite-env.d.ts
index 8827bbe8f..88c01eeb3 100644
--- a/client/vite-env.d.ts
+++ b/client/vite-env.d.ts
@@ -1,3 +1,4 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
+declare const EXPLORER_VERSION: string;
 
diff --git a/client/vite.config.ts b/client/vite.config.ts
index ab31aace8..6b1c0737b 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -23,6 +23,9 @@ export default defineConfig(() => {
             }),
             nodePolyfills()
         ],
+        define: {
+            EXPLORER_VERSION: JSON.stringify(process.env.npm_package_version)
+        },
         test: {
             globals: true,
             teardownTimeout: 100