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 };