app: add APP_VERSION and COMMIT_HASH (#103)

The version is displayed in the footer for now.
liquity · Apr 10, 2024 · 548c2e1 · 548c2e1
1 parent 7e4b362
commit 548c2e1
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 37 deletions.
diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -1,7 +1,18 @@
+const pkg = require("./package.json");
+
+const commitHash = require("child_process")
+  .execSync("git log --pretty=format:\"%h\" -n1")
+  .toString()
+  .trim();
+
 /** @type {import('next').NextConfig} */
 module.exports = {
   output: "export",
   reactStrictMode: false,
+  env: {
+    APP_VERSION: pkg.version,
+    COMMIT_HASH: commitHash,
+  },
   webpack: (config) => {
     // RainbowKit related dependencies
     config.externals.push("pino-pretty", "lokijs", "encoding");

diff --git a/frontend/src/comps/Footer/Footer.tsx b/frontend/src/comps/Footer/Footer.tsx
@@ -3,6 +3,7 @@
 import { palette } from "@/src/colors";
 import { TextButton } from "@/src/comps/Button/TextButton";
 import { useConfigModal } from "@/src/comps/ConfigModal/ConfigModal";
+import { APP_VERSION, COMMIT_HASH } from "@/src/env";
 import { css } from "@/styled-system/css";
 import Image from "next/image";
 import Link from "next/link";
@@ -12,11 +13,21 @@ import logo from "./footer-logo.svg";
 export function Footer() {
   const { open: openConfigModal } = useConfigModal();
 
-  const links: Array<[string, string | (() => void)]> = [
-    ["Liquity", "https://liquity.org"],
-    ["Disclaimer", "https://example.org"],
+  const links: Array<[
+    string | [string, string],
+    string | (() => void),
+  ]> = [
+    // ["Liquity", "https://liquity.org"],
+    // ["Disclaimer", "https://example.org"],
     // ["Privacy Policy", "https://example.org"],
     ["Settings", openConfigModal],
+    [
+      [
+        `${APP_VERSION}-${COMMIT_HASH}`,
+        `Version ${APP_VERSION} (${COMMIT_HASH})`,
+      ],
+      "https://github.com/liquity/bold/tree/" + COMMIT_HASH,
+    ],
   ];
 
   return (
@@ -61,40 +72,45 @@ export function Footer() {
             gap: 16,
           })}
         >
-          {links.map(([label, href], index) => (
-            <li key={label + href}>
-              {typeof href === "string"
-                ? (
-                  <Link
-                    href={href}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className={css({
-                      display: "flex",
-                      alignItems: "center",
-                      padding: 8,
-                      paddingRight: index === links.length - 1 ? 0 : 8,
-                      _active: {
-                        translate: "0 1px",
-                      },
-                    })}
-                    style={{ color: palette.rain }}
-                  >
-                    {label}
-                  </Link>
-                )
-                : (
-                  <TextButton
-                    label={label}
-                    onClick={href}
-                    style={{
-                      padding: 8,
-                      color: palette.rain,
-                    }}
-                  />
-                )}
-            </li>
-          ))}
+          {links.map(([labelTitle, href], index) => {
+            const [label, title] = Array.isArray(labelTitle) ? labelTitle : [labelTitle, undefined];
+            return (
+              <li key={label + href}>
+                {typeof href === "string"
+                  ? (
+                    <Link
+                      href={href}
+                      rel="noopener noreferrer"
+                      target="_blank"
+                      title={title}
+                      className={css({
+                        display: "flex",
+                        alignItems: "center",
+                        padding: 8,
+                        paddingRight: index === links.length - 1 ? 0 : 8,
+                        _active: {
+                          translate: "0 1px",
+                        },
+                      })}
+                      style={{ color: palette.rain }}
+                    >
+                      {label}
+                    </Link>
+                  )
+                  : (
+                    <TextButton
+                      label={label}
+                      onClick={href}
+                      title={title}
+                      style={{
+                        padding: 8,
+                        color: palette.rain,
+                      }}
+                    />
+                  )}
+              </li>
+            );
+          })}
         </ul>
       </div>
     </footer>

diff --git a/frontend/src/env.ts b/frontend/src/env.ts
@@ -2,7 +2,9 @@ import z from "zod";
 import { zAddress } from "./zod-utils";
 
 export const EnvSchema = z.object({
+  APP_VERSION: z.string(),
   CHAIN_ID: z.string(),
+  COMMIT_HASH: z.string(),
   CONTRACT_ACTIVE_POOL: zAddress(),
   CONTRACT_BOLD_TOKEN: zAddress(),
   CONTRACT_BORROWER_OPERATIONS: zAddress(),
@@ -24,7 +26,9 @@ export const EnvSchema = z.object({
 export type Env = z.infer<typeof EnvSchema>;
 
 export const {
+  APP_VERSION,
   CHAIN_ID,
+  COMMIT_HASH,
   CONTRACT_ACTIVE_POOL,
   CONTRACT_BOLD_TOKEN,
   CONTRACT_BORROWER_OPERATIONS,
@@ -39,7 +43,9 @@ export const {
   CONTRACT_TROVE_MANAGER,
   WALLET_CONNECT_PROJECT_ID,
 } = EnvSchema.parse({
+  APP_VERSION: process.env.APP_VERSION,
   CHAIN_ID: process.env.NEXT_PUBLIC_CHAIN_ID,
+  COMMIT_HASH: process.env.COMMIT_HASH,
   CONTRACT_ACTIVE_POOL: process.env.NEXT_PUBLIC_CONTRACT_ACTIVE_POOL,
   CONTRACT_BOLD_TOKEN: process.env.NEXT_PUBLIC_CONTRACT_BOLD_TOKEN,
   CONTRACT_BORROWER_OPERATIONS: process.env.NEXT_PUBLIC_CONTRACT_BORROWER_OPERATIONS,