fix: update process.env to import.meta

src/components/DeviceSelector.tsx

@@ -5,9 +5,7 @@ import { Code } from "@components/UI/Typography/Code.tsx";
 import { useAppStore } from "@core/stores/appStore.ts";
 import { useDeviceStore } from "@core/stores/deviceStore.ts";
 import { HomeIcon, PlusIcon, SearchIcon } from "lucide-react";
-
-import { Avatar } from "./UI/Avatar.tsx";
-import process from "node:process";
+import { Avatar } from "@components/UI/Avatar.tsx";
 
 export const DeviceSelector = () => {
   const { getDevices } = useDeviceStore();
@@ -17,6 +15,7 @@ export const DeviceSelector = () => {
     setCommandPaletteOpen,
     setConnectDialogOpen,
   } = useAppStore();
+  console.log(import.meta.env.VITE_COMMIT_HASH);
 
   return (
     <nav className="flex flex-col justify-between border-r-[0.5px]  border-slate-300 pt-2 dark:border-slate-700">
@@ -71,7 +70,7 @@ export const DeviceSelector = () => {
         </button> */
         }
         <Separator />
-        <Code>{process.env.COMMIT_HASH}</Code>
+        <Code>{import.meta.env.VITE_COMMIT_HASH}</Code>
       </div>
     </nav>
   );

src/components/PageComponents/Config/Security/Security.tsx

@@ -58,8 +58,7 @@ export const Security = () => {
       if (input.length % 4 !== 0) {
         addError(
           fieldName,
-          `${
-            fieldName === "privateKey" ? "Private" : "Admin"
+          `${fieldName === "privateKey" ? "Private" : "Admin"
           } Key is required to be a 256 bit pre-shared key (PSK)`,
         );
         return;
@@ -74,8 +73,7 @@ export const Security = () => {
       console.error(e);
       addError(
         fieldName,
-        `Invalid ${
-          fieldName === "privateKey" ? "Private" : "Admin"
+        `Invalid ${fieldName === "privateKey" ? "Private" : "Admin"
         } Key format`,
       );
     }
@@ -85,8 +83,6 @@ export const Security = () => {
     if (hasErrors()) {
       return;
     }
-    console.log(toByteArray(state.adminKey));
-
     setWorkingConfig(
       create(Protobuf.Config.ConfigSchema, {
         payloadVariant: {
@@ -248,7 +244,7 @@ export const Security = () => {
                   ? getErrorMessage("adminKey")
                   : "",
                 inputChange: adminKeyInputChangeEvent,
-                selectChange: () => {},
+                selectChange: () => { },
                 bits: [{ text: "256 bit", value: "32", key: "bit256" }],
                 devicePSKBitCount: state.privateKeyBitCount,
                 hide: !state.adminKeyVisible,

src/components/UI/Footer.tsx

@@ -1,33 +1,32 @@
-import { cn } from "../../core/utils/cn.ts";
-import React from "react";
+import { cn } from "@core/utils/cn.ts"
 
-export interface FooterProps extends React.HTMLAttributes<HTMLElement> {}
+type FooterProps = {
+  className?: string;
+}
 
-const Footer = React.forwardRef<HTMLElement, FooterProps>(
-  ({ className, ...props }) => {
-    return (
-      <footer
-        className={cn("flex mt-auto justify-center p-2", className)}
-        {...props}
-      >
-        <p>
-          <a
-            href="https://vercel.com/?utm_source=meshtastic&utm_campaign=oss"
-            className="hover:underline text-link"
-          >
-            Powered by ▲ Vercel
-          </a>{" "}
-          | Meshtastic® is a registered trademark of Meshtastic LLC. |{" "}
-          <a
-            href="https://meshtastic.org/docs/legal"
-            className="hover:underline text-link"
-          >
-            Legal Information
-          </a>
-        </p>
-      </footer>
-    );
-  },
-);
+const Footer = ({ className, ...props }: FooterProps) => {
+  return (
+    <footer
+      className={cn("flex mt-auto justify-center p-2", className)}
+      {...props}
+    >
+      <p>
+        <a
+          href="https://vercel.com/?utm_source=meshtastic&utm_campaign=oss"
+          className="hover:underline text-link"
+        >
+          Powered by ▲ Vercel
+        </a>{" "}
+        | Meshtastic® is a registered trademark of Meshtastic LLC. |{" "}
+        <a
+          href="https://meshtastic.org/docs/legal"
+          className="hover:underline text-link"
+        >
+          Legal Information
+        </a>
+      </p>
+    </footer>
+  );
+}
 
 export default Footer;

src/components/UI/Generator.tsx

@@ -33,7 +33,7 @@ export interface GeneratorProps extends React.BaseHTMLAttributes<HTMLElement> {
   disabled?: boolean;
 }
 
-const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
+const Generator =
   (
     {
       type,
@@ -53,7 +53,7 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
       action,
       disabled,
       ...props
-    },
+    }: GeneratorProps
   ) => {
     const inputRef = React.useRef<HTMLInputElement>(null);
 
@@ -115,8 +115,7 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
         </div>
       </>
     );
-  },
-);
+  }
 Generator.displayName = "Button";
 
 export { Generator };

vite.config.ts

@@ -1,40 +1,48 @@
-import { defineConfig } from 'vitest/config'
+import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { VitePWA } from 'vite-plugin-pwa';
-import { execSync } from 'node:child_process';
 import path from 'node:path';
 
 let hash = '';
 try {
-  hash = execSync('git rev-parse --short HEAD').toString().trim();
+  const process = new Deno.Command('git', {
+    args: ['rev-parse', '--short', 'HEAD'],
+    stdout: 'piped'
+  });
+  const output = await process.output();
+  hash = new TextDecoder().decode(output.stdout).trim();
 } catch (error) {
+  console.error('Error getting git hash:', error);
   hash = 'DEV';
 }
 
+console.log('Commit hash:', hash);
+
 export default defineConfig({
-  plugins: [react(),
-  VitePWA({
-    registerType: 'autoUpdate',
-    strategies: 'generateSW',
-    devOptions: {
-      enabled: true
-    },
-    workbox: {
-      cleanupOutdatedCaches: true,
-      sourcemap: true
-    }
-  })
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      strategies: 'generateSW',
+      devOptions: {
+        enabled: true
+      },
+      workbox: {
+        cleanupOutdatedCaches: true,
+        sourcemap: true
+      }
+    })
   ],
   define: {
-    'process.env.COMMIT_HASH': JSON.stringify(hash),
+    'import.meta.env.VITE_COMMIT_HASH': JSON.stringify(hash),
   },
   resolve: {
     alias: {
-      '@app': path.resolve(__dirname, './src'),
-      '@pages': path.resolve(__dirname, './src/pages'),
-      '@components': path.resolve(__dirname, './src/components'),
-      '@core': path.resolve(__dirname, './src/core'),
-      '@layouts': path.resolve(__dirname, './src/layouts'),
+      '@app': path.resolve(Deno.cwd(), './src'),
+      '@pages': path.resolve(Deno.cwd(), './src/pages'),
+      '@components': path.resolve(Deno.cwd(), './src/components'),
+      '@core': path.resolve(Deno.cwd(), './src/core'),
+      '@layouts': path.resolve(Deno.cwd(), './src/layouts'),
     },
   },
   server: {