Update node view and support hosted version

src/pages/Nodes/Index.tsx

@@ -11,16 +11,17 @@ import { Map } from '@components/Map';
 import { NodeCard } from './NodeCard';
 
 export const Nodes = (): JSX.Element => {
-  const myNodeNum = useAppSelector(
-    (state) => state.meshtastic.radio.hardware,
-  ).myNodeNum;
+  const myNodeInfo = useAppSelector((state) => state.meshtastic.radio.hardware);
+
   const nodes = useAppSelector((state) => state.meshtastic.nodes)
     .slice()
     .sort((a, b) =>
-      a.number === myNodeNum
+      a.number === myNodeInfo.myNodeNum
         ? 1
         : b?.lastHeard.getTime() - a?.lastHeard.getTime(),
     );
+
+  const myNode = nodes.find((node) => node.number === myNodeInfo.myNodeNum);
   const [navOpen, setNavOpen] = React.useState(false);
 
   const { breakpoint } = useBreakpoint();
@@ -52,13 +53,12 @@ export const Nodes = (): JSX.Element => {
             No nodes found.
           </span>
         )}
-        {nodes.map((node) => (
-          <NodeCard
-            key={node.number}
-            node={node}
-            isMyNode={node.number === myNodeNum}
-          />
-        ))}
+        {myNode && <NodeCard node={myNode} myNodeInfo={myNodeInfo} />}
+        {nodes
+          .filter((node) => node.number !== myNodeInfo.myNodeNum)
+          .map((node) => (
+            <NodeCard key={node.number} node={node} />
+          ))}
       </Drawer>
       <Map />
     </div>

src/pages/Nodes/NodeCard.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { FaSatellite } from 'react-icons/fa';
 import { FiCode } from 'react-icons/fi';
+import { GiLightningFrequency } from 'react-icons/gi';
 import {
   MdAccountCircle,
   MdArrowDropDown,
@@ -9,6 +10,7 @@ import {
   MdGpsFixed,
   MdGpsNotFixed,
   MdGpsOff,
+  MdSdStorage,
   MdSignalCellularAlt,
 } from 'react-icons/md';
 import TimeAgo from 'timeago-react';
@@ -20,10 +22,10 @@ import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface NodeCardProps {
   node: Node;
-  isMyNode: boolean;
+  myNodeInfo?: Protobuf.MyNodeInfo;
 }
 
-export const NodeCard = ({ node, isMyNode }: NodeCardProps): JSX.Element => {
+export const NodeCard = ({ node, myNodeInfo }: NodeCardProps): JSX.Element => {
   const [snrAverage, setSnrAverage] = React.useState(0);
   const [satsAverage, setSatsAverage] = React.useState(0);
   React.useEffect(() => {
@@ -51,7 +53,7 @@ export const NodeCard = ({ node, isMyNode }: NodeCardProps): JSX.Element => {
       className="m-2 rounded-md shadow-md bg-gray-50 dark:bg-gray-700"
     >
       <Disclosure.Button className="flex w-full gap-2 p-2 bg-gray-100 rounded-md shadow-md dark:bg-primaryDark">
-        {isMyNode ? (
+        {myNodeInfo ? (
           <MdAccountCircle className="my-auto" />
         ) : (
           <div
@@ -69,7 +71,7 @@ export const NodeCard = ({ node, isMyNode }: NodeCardProps): JSX.Element => {
         <div className="my-auto">{node.user?.longName}</div>
 
         <div className="my-auto ml-auto text-xs font-semibold">
-          {!isMyNode && (
+          {!myNodeInfo && (
             <span>
               {node.lastHeard.getTime() ? (
                 <TimeAgo datetime={node.lastHeard} />
@@ -92,6 +94,24 @@ export const NodeCard = ({ node, isMyNode }: NodeCardProps): JSX.Element => {
         )}
       </Disclosure.Button>
       <Disclosure.Panel className="p-2">
+        {myNodeInfo && (
+          <div>
+            <div className="flex justify-between">
+              <span className="flex">
+                <MdSdStorage className="my-auto" />
+                Firmware Ver:
+              </span>
+              <span>{myNodeInfo.firmwareVersion}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="flex">
+                <GiLightningFrequency className="my-auto" />
+                Freq Bands:
+              </span>
+              <span>{myNodeInfo.numBands}</span>
+            </div>
+          </div>
+        )}
         <div className="flex">
           <div className="my-auto">
             {Protobuf.HardwareModel[node.user?.hwModel ?? 0]}