feat: Show Explorer client version from package.json on the Footer (#…

…1004)

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;
+    }
+}

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>
+            )}
+        </>
+    );
+}

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;
 

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

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;

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>
         );

client/vite-env.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
+declare const EXPLORER_VERSION: string;
 

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