explorer: add visible version commit hash and build date

dusk-network · Jun 13, 2024 · b294ab8 · b294ab8
1 parent 3f00ea7
commit b294ab8
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 60 deletions.
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/Footer.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/Footer.spec.js.snap
@@ -6,49 +6,71 @@ exports[`Footer > renders the Footer component 1`] = `
     class="footer"
   >
     <div
-      class="footer__copyright"
+      class="footer__content"
     >
-      <span>
-        © 2018 - 2024 Dusk Network B.V. All Rights Reserved.
-      </span>
-    </div>
-     
-    <div
-      class="footer__links"
-    >
-      <a
-        class="dusk-anchor dusk-anchor--off-surface footer__links-link"
-        href="https://dusk.network/privacy-policy"
+      <div
+        class="footer__copyright"
       >
-        Privacy policy
-      </a>
+        <span>
+          © 2018 - 2024 Dusk Network B.V. All Rights Reserved.
+        </span>
+      </div>
+       
+      <div
+        class="footer__links"
+      >
+        <a
+          class="dusk-anchor dusk-anchor--off-surface footer__links-link"
+          href="https://dusk.network/privacy-policy"
+        >
+          Privacy policy
+        </a>
+        <!--&lt;Anchor&gt;-->
+         
+        <a
+          class="dusk-anchor dusk-anchor--off-surface footer__links-link"
+          href="https://dusk.network/terms-of-use"
+        >
+          Terms of use
+        </a>
+        <!--&lt;Anchor&gt;-->
+      </div>
        
       <a
-        class="dusk-anchor dusk-anchor--off-surface footer__links-link"
-        href="https://dusk.network/terms-of-use"
+        class="dusk-anchor dusk-anchor--on-surface footer__logo"
+        href="https://dusk.network"
       >
-        Terms of use
+        <picture>
+          <source
+            media="(max-width:768px)"
+            srcset="/some-base-path/dusk_logo_icon.svg"
+          />
+          <!--&lt;AppSource&gt;-->
+           
+          <img
+            alt="Dusk Logo"
+            class="footer__logo-image"
+            sizes="(max-width:768px) 20px, 86px"
+            src="/some-base-path/dusk_logo.svg"
+          />
+          <!--&lt;AppImage&gt;-->
+        </picture>
       </a>
+      <!--&lt;Anchor&gt;-->
+      <!--&lt;AppAnchor&gt;-->
     </div>
      
-    <a
-      class="dusk-anchor dusk-anchor--on-surface footer__logo"
-      href="https://dusk.network"
+    <div
+      class="footer__build-info"
     >
-      <picture>
-        <source
-          media="(max-width:768px)"
-          srcset="/some-base-path/dusk_logo_icon.svg"
-        />
-         
-        <img
-          alt="Dusk Logo"
-          class="footer__logo-image"
-          sizes="(max-width:768px) 20px, 86px"
-          src="/some-base-path/dusk_logo.svg"
-        />
-      </picture>
-    </a>
+      <span>
+        Explorer v
+        0.0.0
+         (
+        hash1234 2024-01-12
+        )
+      </span>
+    </div>
   </div>
 </div>
 `;
diff --git a/explorer/src/lib/components/footer/Footer.css b/explorer/src/lib/components/footer/Footer.css
@@ -1,9 +1,14 @@
 .footer {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   padding: 1.25rem 0;
   font-size: 0.875rem;
-  justify-content: flex-end;
+  align-items: flex-end;
+  gap: 0.625rem;
+}
+
+.footer__content {
+  display: flex;
 }
 
 .footer__copyright {
@@ -41,6 +46,10 @@
 
 @media (max-width: 768px) {
   .footer {
+    align-items: center;
+  }
+
+  .footer__content {
     flex-wrap: wrap;
     justify-content: space-between;
     gap: 0.625rem;

diff --git a/explorer/src/lib/components/footer/Footer.svelte b/explorer/src/lib/components/footer/Footer.svelte
@@ -7,30 +7,38 @@
 </script>
 
 <div class="footer">
-  <div class="footer__copyright">
-    <span>© 2018 - 2024 Dusk Network B.V. All Rights Reserved.</span>
+  <div class="footer__content">
+    <div class="footer__copyright">
+      <span>© 2018 - 2024 Dusk Network B.V. All Rights Reserved.</span>
+    </div>
+    <div class="footer__links">
+      <Anchor
+        onSurface={false}
+        href="https://dusk.network/privacy-policy"
+        className="footer__links-link">Privacy policy</Anchor
+      >
+      <Anchor
+        onSurface={false}
+        href="https://dusk.network/terms-of-use"
+        className="footer__links-link">Terms of use</Anchor
+      >
+    </div>
+    <AppAnchor href="https://dusk.network" className="footer__logo">
+      <picture>
+        <AppSource media="(max-width:768px)" srcset="/dusk_logo_icon.svg" />
+        <AppImage
+          src="/dusk_logo.svg"
+          alt="Dusk Logo"
+          sizes="(max-width:768px) 20px, 86px"
+          className="footer__logo-image"
+        />
+      </picture>
+    </AppAnchor>
   </div>
-  <div class="footer__links">
-    <Anchor
-      onSurface={false}
-      href="https://dusk.network/privacy-policy"
-      className="footer__links-link">Privacy policy</Anchor
-    >
-    <Anchor
-      onSurface={false}
-      href="https://dusk.network/terms-of-use"
-      className="footer__links-link">Terms of use</Anchor
+  <div class="footer__build-info">
+    <span
+      >Explorer v{import.meta.env.APP_VERSION} ({import.meta.env
+        .APP_BUILD_INFO})</span
     >
   </div>
-  <AppAnchor href="https://dusk.network" className="footer__logo">
-    <picture>
-      <AppSource media="(max-width:768px)" srcset="/dusk_logo_icon.svg" />
-      <AppImage
-        src="/dusk_logo.svg"
-        alt="Dusk Logo"
-        sizes="(max-width:768px) 20px, 86px"
-        className="footer__logo-image"
-      />
-    </picture>
-  </AppAnchor>
 </div>
diff --git a/explorer/vite.config.js b/explorer/vite.config.js
@@ -7,7 +7,7 @@ export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd());
   const buildDate = new Date().toISOString().substring(0, 10);
   const buildHash = execSync(
-    "git log -1 --grep='web-wallet:' --format=format:'%h'"
+    "git log -1 --grep='explorer:' --format=format:'%h'"
   );
   const APP_VERSION = process.env.npm_package_version ?? "unknown";
   const APP_BUILD_INFO = `${buildHash.toString() || "unknown"} ${buildDate}`;