Minifront version footer (#638)

* Minifront version footer

* review updates

apps/webapp/package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@tanstack/react-query": "^5.24.1",
     "bignumber.js": "^9.1.2",
+    "date-fns": "^3.3.1",
     "immer": "^10.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

apps/webapp/src/components/footer/index.tsx

@@ -0,0 +1,26 @@
+import { format } from 'date-fns';
+
+export const Footer = () => {
+  const shortenedCommitHash = __COMMIT_HASH__.slice(0, 7);
+  const dateObj = new Date(__COMMIT_DATE__);
+  const formattedDate = format(dateObj, "MMM dd yyyy HH:mm:ss 'GMT'x");
+
+  return (
+    <div className='my-4 flex justify-center'>
+      <div className='flex flex-col text-center text-stone-700'>
+        <div className='font-bold'>Frontend app version</div>
+        <div>
+          <a
+            target='_blank'
+            className='underline'
+            href={`${__GIT_ORIGIN_URL__}/commits/${__COMMIT_HASH__}`}
+            rel='noreferrer'
+          >
+            {shortenedCommitHash}
+          </a>{' '}
+          - {formattedDate}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/webapp/src/components/layout.tsx

@@ -6,6 +6,7 @@ import '@penumbra-zone/ui/styles/globals.css';
 import { isExtensionInstalled } from '../utils/is-connected';
 import { getChainId } from '../fetchers/chain-id';
 import { ExtensionNotInstalled } from './extension-not-installed';
+import { Footer } from './footer';
 
 export type LayoutLoaderResult =
   | { isInstalled: false }
@@ -34,6 +35,7 @@ export const Layout = () => {
         <main className='mx-auto w-full flex-1 px-6 pb-4 pt-5 md:px-[88px] md:pb-0 xl:max-w-[1276px] xl:px-12'>
           <Outlet />
         </main>
+        <Footer />
       </div>
       <Toaster />
     </>

apps/webapp/src/utils/commit-info-vite-plugin.ts

@@ -0,0 +1,28 @@
+import { Plugin } from 'vite';
+import { execSync } from 'child_process';
+
+// Vite plugin used to inject the current commit hash + commit date + origin into React
+// so the user can be informed the version of minifront they are using
+export const commitInfoPlugin = (): Plugin => {
+  const commitHash = execSync('git rev-parse HEAD').toString().trim();
+  const commitDate = execSync('git log -1 --format=%cI').toString().trim();
+  const gitOriginUrl = execSync('git remote get-url origin')
+    .toString()
+    .trim()
+    .replace(/\.git$/, ''); // Origin urls often appended with .git
+
+  return {
+    name: 'vite-plugin-commit-info',
+    enforce: 'pre',
+    config() {
+      return {
+        // Inject the env variables into the code
+        define: {
+          __COMMIT_HASH__: JSON.stringify(commitHash),
+          __COMMIT_DATE__: JSON.stringify(commitDate),
+          __GIT_ORIGIN_URL__: JSON.stringify(gitOriginUrl),
+        },
+      };
+    },
+  };
+};

apps/webapp/src/vite-env.d.ts

@@ -1 +1,4 @@
 /// <reference types="vite/client" />
+declare const __COMMIT_HASH__: string;
+declare const __COMMIT_DATE__: string;
+declare const __GIT_ORIGIN_URL__: string;

apps/webapp/vite.config.ts

@@ -1,10 +1,11 @@
 import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import basicSsl from '@vitejs/plugin-basic-ssl';
+import { commitInfoPlugin } from './src/utils/commit-info-vite-plugin';
 
 export default defineConfig({
   base: './',
-  plugins: [react(), splitVendorChunkPlugin(), basicSsl()],
+  plugins: [react(), splitVendorChunkPlugin(), basicSsl(), commitInfoPlugin()],
   build: {
     rollupOptions: {
       output: {