Merge pull request #1814 from dusk-network/feature-1757

explorer: add visible version commit hash and build date
dusk-network · Jun 13, 2024 · 8ea08b0 · 8ea08b0
2 parents 3f00ea7 + b0f5559
commit 8ea08b0
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 85 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
@@ -11,44 +11,56 @@ exports[`Footer > renders the Footer component 1`] = `
       <span>
         © 2018 - 2024 Dusk Network B.V. All Rights Reserved.
       </span>
+       
+      <span>
+        Explorer v
+        0.0.0
+         (
+        hash1234 2024-01-12
+        )
+      </span>
     </div>
      
     <div
-      class="footer__links"
+      class="footer__links-test"
     >
-      <a
-        class="dusk-anchor dusk-anchor--off-surface footer__links-link"
-        href="https://dusk.network/privacy-policy"
+      <div
+        class="footer__links"
       >
-        Privacy policy
-      </a>
+        <a
+          class="dusk-anchor dusk-anchor--off-surface footer__links-link"
+          href="https://dusk.network/privacy-policy"
+        >
+          Privacy policy
+        </a>
+         
+        <a
+          class="dusk-anchor dusk-anchor--off-surface footer__links-link"
+          href="https://dusk.network/terms-of-use"
+        >
+          Terms of use
+        </a>
+      </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"
+          />
+           
+          <img
+            alt="Dusk Logo"
+            class="footer__logo-image"
+            sizes="(max-width:768px) 20px, 86px"
+            src="/some-base-path/dusk_logo.svg"
+          />
+        </picture>
       </a>
     </div>
-     
-    <a
-      class="dusk-anchor dusk-anchor--on-surface footer__logo"
-      href="https://dusk.network"
-    >
-      <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>
   </div>
 </div>
 `;
diff --git a/explorer/src/lib/components/footer/Footer.css b/explorer/src/lib/components/footer/Footer.css
@@ -3,21 +3,27 @@
   flex-direction: row;
   padding: 1.25rem 0;
   font-size: 0.875rem;
-  justify-content: flex-end;
+  justify-content: space-between;
 }
 
 .footer__copyright {
+  display: flex;
+  gap: 0.625rem;
   order: 1;
 }
 
-.footer__links {
-  padding-left: 1.25rem;
-  padding-right: 1.875rem;
+.footer__links-test {
   display: flex;
   gap: 1.25rem;
   order: 2;
 }
 
+.footer__links {
+  display: flex;
+  gap: 1.25rem;
+  order: 1;
+}
+
 .footer__links-link {
   text-decoration: underline;
   color: var(--primary-color);
@@ -32,13 +38,19 @@
 }
 
 .footer__logo {
-  order: 3;
+  order: 2;
 }
 
 .footer__logo-image {
   width: 5.375rem;
 }
 
+@media (max-width: 1200px) {
+  .footer__copyright {
+    flex-direction: column;
+  }
+}
+
 @media (max-width: 768px) {
   .footer {
     flex-wrap: wrap;
@@ -50,7 +62,13 @@
     order: 3;
     width: 100%;
     display: flex;
-    justify-content: flex-end;
+    flex-direction: column;
+  }
+
+  .footer__links-test {
+    justify-content: space-between;
+    width: 100%;
+    padding: 0;
   }
 
   .footer__links {

diff --git a/explorer/src/lib/components/footer/Footer.svelte b/explorer/src/lib/components/footer/Footer.svelte
@@ -9,28 +9,35 @@
 <div class="footer">
   <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
+    <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 class="footer__links-test">
+    <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>
diff --git a/explorer/src/routes/__tests__/__snapshots__/layout.spec.js.snap b/explorer/src/routes/__tests__/__snapshots__/layout.spec.js.snap
@@ -145,44 +145,56 @@ exports[`Main layout > should render the app's main layout 1`] = `
         <span>
           © 2018 - 2024 Dusk Network B.V. All Rights Reserved.
         </span>
+         
+        <span>
+          Explorer v
+          0.0.0
+           (
+          hash1234 2024-01-12
+          )
+        </span>
       </div>
        
       <div
-        class="footer__links"
+        class="footer__links-test"
       >
-        <a
-          class="dusk-anchor dusk-anchor--off-surface footer__links-link"
-          href="https://dusk.network/privacy-policy"
+        <div
+          class="footer__links"
         >
-          Privacy policy
-        </a>
+          <a
+            class="dusk-anchor dusk-anchor--off-surface footer__links-link"
+            href="https://dusk.network/privacy-policy"
+          >
+            Privacy policy
+          </a>
+           
+          <a
+            class="dusk-anchor dusk-anchor--off-surface footer__links-link"
+            href="https://dusk.network/terms-of-use"
+          >
+            Terms of use
+          </a>
+        </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"
+            />
+             
+            <img
+              alt="Dusk Logo"
+              class="footer__logo-image"
+              sizes="(max-width:768px) 20px, 86px"
+              src="/some-base-path/dusk_logo.svg"
+            />
+          </picture>
         </a>
       </div>
-       
-      <a
-        class="dusk-anchor dusk-anchor--on-surface footer__logo"
-        href="https://dusk.network"
-      >
-        <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>
     </div>
   </footer>
    

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