Merge pull request #5 from ZeroKnowledgeNetwork/4-feat-display-app-info-in-footer

feat: display app info in footer

Author: xendarboh

src-tauri/tauri.conf.json

@@ -1,7 +1,6 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "ZKNetwork",
-  "version": "0.1.0",
   "identifier": "com.zkn-client.app",
   "build": {
     "beforeDevCommand": "npm run dev",

src/App.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import * as app from "@tauri-apps/api/app";
 import * as log from "@tauri-apps/plugin-log";
 import * as path from "@tauri-apps/api/path";
 import { arch, platform } from "@tauri-apps/plugin-os";
@@ -42,6 +43,7 @@ function App() {
   const [networkId, setNetworkId] = useState("");
   const [dlProgress, setDlProgress] = useState(0);
   const [clientPid, setClientPid] = useState(0);
+  const [appVersion, setAppVersion] = useState("");
   const [platformArch, setPlatformArch] = useState("");
   const [platformSupported, setPlatformSupported] = useState(false);
   const [networks, setNetworks] = useState<string[]>([]);
@@ -50,11 +52,14 @@ function App() {
   // run once on startup (twice in dev mode)
   useEffect(() => {
     try {
-      log.info(`Platform: ${platform()}-${arch()}`);
-      setPlatformArch(getPlatformArch());
-      setPlatformSupported(true);
-
       (async () => {
+        const name = await app.getName();
+        const v = "v" + (await app.getVersion());
+        log.info(`Starting ${name} ${v} on ${platform()}-${arch()}`);
+
+        setAppVersion(v);
+        setPlatformArch(getPlatformArch());
+        setPlatformSupported(true);
         setNetworks(await getNetworks());
       })();
     } catch (error: any) {
@@ -206,8 +211,8 @@ function App() {
     return child.pid;
   }
 
-  return (
-    <main className="flex flex-col items-center justify-center min-h-screen gap-5">
+  const Main = () => (
+    <main className="flex flex-col flex-grow items-center justify-center gap-5">
       <h1 className="text-3xl font-extrabold">Zero Knowledge Network</h1>
 
       <img
@@ -268,6 +273,25 @@ function App() {
       )}
     </main>
   );
+
+  const Footer = () => (
+    <footer className="footer footer-center bg-base-200 text-base-content/30 p-4">
+      <div className="flex flex-row">
+        <span>ZKNetwork Client</span>
+        <span className="mx-2">|</span>
+        <span>Version: {appVersion}</span>
+        <span className="mx-2">|</span>
+        <span>Platform: {platformArch}</span>
+      </div>
+    </footer>
+  );
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Main />
+      <Footer />
+    </div>
+  );
 }
 
 export default App;