Add formatting logic for multi-hop traceroutes

src/components/PageComponents/Messages/TraceRoute.tsx

@@ -1,9 +1,5 @@
-import type { MessageWithState } from "@app/core/stores/deviceStore.js";
+import { useDevice } from "@app/core/stores/deviceStore.js";
 import type { Protobuf } from "@meshtastic/js";
-import {
-  WaypointsIcon,
-  ArrowRightLeft,
-} from "lucide-react";
 
 export interface TraceRouteProps {
   from?: Protobuf.Mesh.NodeInfo;
@@ -11,11 +7,14 @@ export interface TraceRouteProps {
   route?: Protobuf.Mesh.RouteDiscovery;
 }
 
+
 export const TraceRoute = ({
   from,
   to,
   route,
 }: TraceRouteProps): JSX.Element => {
+  const { nodes } = useDevice();
+
   return route.length == 0 ? (
     <div className="ml-5 flex">
       <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
@@ -25,9 +24,12 @@ export const TraceRoute = ({
    ) : ( 
     <div className="ml-5 flex">
       <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
-      {route}
+      {from?.user?.longName}↔
+      {route.map((hop) => (
+         nodes.get(hop).user?.longName + "↔"
+     ))}
+      {to?.user?.longName}
       </span>
     </div>
-
   );
 };