fix nodes page error, more cleanup is probably required for "undefined" hops away

src/pages/Nodes.tsx

@@ -1,7 +1,7 @@
-import { LocationResponseDialog } from "../components/Dialog/LocationResponseDialog.tsx";
+import { LocationResponseDialog } from "@components/Dialog/LocationResponseDialog.tsx";
-import { NodeOptionsDialog } from "../components/Dialog/NodeOptionsDialog.tsx";
+import { NodeOptionsDialog } from "@components/Dialog/NodeOptionsDialog.tsx";
-import { TracerouteResponseDialog } from "../components/Dialog/TracerouteResponseDialog.tsx";
+import { TracerouteResponseDialog } from "@components/Dialog/TracerouteResponseDialog.tsx";
-import Footer from "../components/UI/Footer.tsx";
+import Footer from "@components/UI/Footer.tsx";
 import { Sidebar } from "@components/Sidebar.tsx";
 import { Avatar } from "@components/UI/Avatar.tsx";
 import { Mono } from "@components/generic/Mono.tsx";
@@ -107,10 +107,9 @@ const NodesPage = () => {
               >
                 {node.user?.shortName ??
                   (node.user?.macaddr
-                    ? `${
+                    ? `${base16
-                      base16
+                      .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
-                        .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
+                      .toLowerCase()
-                        .toLowerCase()
                     }`
                     : `${numberToHexUnpadded(node.num).slice(-4)}`)}
               </h1>,
@@ -122,10 +121,9 @@ const NodesPage = () => {
               >
                 {node.user?.longName ??
                   (node.user?.macaddr
-                    ? `Meshtastic ${
+                    ? `Meshtastic ${base16
-                      base16
+                      .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
-                        .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
+                      .toLowerCase()
-                        .toLowerCase()
                     }`
                     : `!${numberToHexUnpadded(node.num)}`)}
               </h1>,
@@ -150,16 +148,17 @@ const NodesPage = () => {
                 {(node.snr + 10) * 5}raw
               </Mono>,
               <Mono key="pki">
-                {node.user?.publicKey && node.user?.publicKey.length > 0
+                {node.user?.publicKey && node.user?.publicKey.length > 0 ? (
-                  ? <LockIcon className="text-green-600" />
+                  <LockIcon className="text-green-600 mx-auto" />
-                  : <LockOpenIcon className="text-yellow-300 mx-auto" />}
+                ) : (
+                  <LockOpenIcon className="text-yellow-300 mx-auto" />
+                )}
               </Mono>,
               <Mono key="hops">
-                {node.lastHeard !== 0
+                {node?.lastHeard !== 0
-                  ? node.viaMqtt === false && node.hopsAway === 0
+                  ? node?.viaMqtt === false && node?.hopsAway === 0
                     ? "Direct"
-                    : `${node.hopsAway.toString()} ${
+                    : `${node?.hopsAway?.toString()} ${node?.hopsAway > 1 ? "hops" : "hop"
-                      node.hopsAway > 1 ? "hops" : "hop"
                     } away`
                   : "-"}
                 {node.viaMqtt === true ? ", via MQTT" : ""}