Merge pull request #306 from KomelT/feature/better-unknown

Unknown nodes

src/components/PageComponents/Messages/TraceRoute.tsx

@@ -1,5 +1,6 @@
 import { useDevice } from "@app/core/stores/deviceStore.js";
 import type { Protobuf } from "@meshtastic/js";
+import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 
 export interface TraceRouteProps {
   from?: Protobuf.Mesh.NodeInfo;
@@ -24,7 +25,10 @@ export const TraceRoute = ({
     <div className="ml-5 flex">
       <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
         {to?.user?.longName}↔
-        {route.map((hop) => `${nodes.get(hop)?.user?.longName ?? "Unknown"}↔`)}
+        {route.map((hop) => {
+          const node = nodes.get(hop);
+          return `${node?.user?.longName ?? (node?.num ? numberToHexUnpadded(node.num) : "Unknown")}↔`;
+        })}
         {from?.user?.longName}
       </span>
     </div>

src/pages/Messages.tsx

@@ -7,6 +7,7 @@ import { useToast } from "@core/hooks/useToast.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf, Types } from "@meshtastic/js";
+import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { getChannelName } from "@pages/Channels.js";
 import { HashIcon, LockIcon, LockOpenIcon, WaypointsIcon } from "lucide-react";
 import { useState } from "react";
@@ -28,6 +29,8 @@ export const MessagesPage = (): JSX.Element => {
   );
   const currentChannel = channels.get(activeChat);
   const { toast } = useToast();
+  const node = nodes.get(activeChat);
+  const nodeHex = node?.num ? numberToHexUnpadded(node.num) : "Unknown";
 
   return (
     <>
@@ -56,7 +59,7 @@ export const MessagesPage = (): JSX.Element => {
           {filteredNodes.map((node) => (
             <SidebarButton
               key={node.num}
-              label={node.user?.longName ?? "Unknown"}
+              label={node.user?.longName ?? `!${numberToHexUnpadded(node.num)}`}
               active={activeChat === node.num}
               onClick={() => {
                 setChatType("direct");
@@ -73,7 +76,7 @@ export const MessagesPage = (): JSX.Element => {
             chatType === "broadcast" && currentChannel
               ? getChannelName(currentChannel)
               : chatType === "direct" && nodes.get(activeChat)
-                ? nodes.get(activeChat)?.user?.longName ?? "Unknown"
+                ? nodes.get(activeChat)?.user?.longName ?? nodeHex
                 : "Loading..."
           }`}
           actions={

src/pages/Nodes.tsx

@@ -8,6 +8,7 @@ import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf } from "@meshtastic/js";
+import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { LockIcon, LockOpenIcon, TrashIcon } from "lucide-react";
 import { Fragment } from "react";
 import { base16 } from "rfc4648";
@@ -50,7 +51,7 @@ export const NodesPage = (): JSX.Element => {
                     ? `Meshtastic ${base16
                         .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
                         .toLowerCase()}`
-                    : `UNK: ${node.num}`)}
+                    : `!${numberToHexUnpadded(node.num)}`)}
               </h1>,
 
               <Mono key="model">