app: add APP_VERSION and COMMIT_HASH (#103)

The version is displayed in the footer for now.

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

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>

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,