Update node view and support hosted version

src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 import { DeviceStatus } from '@app/components/menu/buttons/DeviceStatus';
 import { useAppSelector } from '@app/hooks/redux';

src/components/Connection.tsx

@@ -7,19 +7,13 @@ import { Card } from '@components/generic/Card';
 import { Select } from '@components/generic/form/Select';
 import { Modal } from '@components/generic/Modal';
 import { DeviceStatus } from '@components/menu/buttons/DeviceStatus';
-import {
-  cleanupListeners,
-  connection,
-  connectionUrl,
-  setConnection,
-} from '@core/connection';
+import { connection, connectionUrl, setConnection } from '@core/connection';
 import {
   closeConnectionModal,
   connType,
   setConnectionParams,
   setConnType,
 } from '@core/slices/appSlice';
-import { resetState } from '@core/slices/meshtasticSlice';
 import { Types } from '@meshtastic/meshtasticjs';
 
 import { BLE } from './connection/BLE';
@@ -32,18 +26,20 @@ export const Connection = (): JSX.Element => {
   const appState = useAppSelector((state) => state.app);
 
   React.useEffect(() => {
-    dispatch(
-      setConnectionParams({
-        type: connType.HTTP,
-        params: {
-          address: connectionUrl,
-          tls: false,
-          receiveBatchRequests: false,
-          fetchInterval: 2000,
-        },
-      }),
-    );
-    void setConnection(connType.HTTP);
+    if (!import.meta.env.VITE_PUBLIC_HOSTED) {
+      dispatch(
+        setConnectionParams({
+          type: connType.HTTP,
+          params: {
+            address: connectionUrl,
+            tls: false,
+            receiveBatchRequests: false,
+            fetchInterval: 2000,
+          },
+        }),
+      );
+      void setConnection(connType.HTTP);
+    }
   }, [dispatch]);
 
   React.useEffect(() => {
@@ -56,7 +52,6 @@ export const Connection = (): JSX.Element => {
     <Modal
       className="w-full max-w-3xl"
       open={appState.connectionModalOpen}
-      // open={true}
       onClose={(): void => {
         dispatch(closeConnectionModal());
       }}
@@ -84,9 +79,7 @@ export const Connection = (): JSX.Element => {
                   padding={2}
                   border
                   onClick={async (): Promise<void> => {
-                    dispatch(resetState());
                     await connection.disconnect();
-                    cleanupListeners();
                   }}
                 >
                   Disconnect
@@ -102,8 +95,6 @@ export const Connection = (): JSX.Element => {
                 optionsEnum={connType}
                 value={appState.connType}
                 onChange={(e): void => {
-                  console.log(e.target.value);
-
                   dispatch(setConnType(parseInt(e.target.value)));
                 }}
               />

src/core/connection.ts

@@ -5,6 +5,7 @@ import {
   addNode,
   addPosition,
   addUser,
+  resetState,
   setDeviceStatus,
   setLastMeshInterraction,
   setMyNodeInfo,
@@ -94,6 +95,8 @@ const registerListeners = (): void => {
     }
     if (status === Types.DeviceStatusEnum.DEVICE_DISCONNECTED) {
       store.dispatch(setReady(false));
+      store.dispatch(resetState());
+      cleanupListeners();
     }
   });
 

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