Add fetch metadata buttons on peers page

package.json

@@ -25,7 +25,7 @@
     "@heroicons/react": "^2.0.12",
     "@hookform/resolvers": "^2.9.8",
     "@meshtastic/eslint-config": "^1.0.8",
-    "@meshtastic/meshtasticjs": "^0.6.104",
+    "@meshtastic/meshtasticjs": "^0.6.105",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.7",
     "base64-js": "^1.5.1",

pnpm-lock.yaml

@@ -6,7 +6,7 @@ specifiers:
   '@heroicons/react': ^2.0.12
   '@hookform/resolvers': ^2.9.8
   '@meshtastic/eslint-config': ^1.0.8
-  '@meshtastic/meshtasticjs': ^0.6.104
+  '@meshtastic/meshtasticjs': ^0.6.105
   '@tailwindcss/forms': ^0.5.3
   '@tailwindcss/line-clamp': ^0.4.2
   '@tailwindcss/typography': ^0.5.7
@@ -56,7 +56,7 @@ dependencies:
   '@heroicons/react': 2.0[email protected]
   '@hookform/resolvers': 2.9[email protected]
   '@meshtastic/eslint-config': 1.0.8
-  '@meshtastic/meshtasticjs': 0.6.104
+  '@meshtastic/meshtasticjs': 0.6.105
   '@tailwindcss/line-clamp': 0.4[email protected]
   '@tailwindcss/typography': 0.5[email protected]
   base64-js: 1.5.1
@@ -619,8 +619,8 @@ packages:
       - supports-color
     dev: false
 
-  /@meshtastic/meshtasticjs/0.6.104:
-    resolution: {integrity: sha512-LFDbxbaKJeKXMeh1KdX1ALrd73CV9WSoZljL8W7egidT3iFu3nrDHfv4WwTJ93YOhZllPIojuL+MzlXwi0IiXA==}
+  /@meshtastic/meshtasticjs/0.6.105:
+    resolution: {integrity: sha512-A9e3aNGA5XiKmOt3QhnKINT5s1sUcUta9C7VhfYdXThHbpaEZheQLFaITDDWU+NUcGRzE0J9eZBw6mZdbcw82Q==}
     dependencies:
       '@protobuf-ts/runtime': 2.8.1
       '@serialport/stream': 10.3.0

src/pages/Peers.tsx

@@ -1,16 +1,20 @@
 import type React from "react";
 
+import toast from "react-hot-toast";
 import { base16 } from "rfc4648";
 
 import { IconButton } from "@app/components/IconButton.js";
 import { Mono } from "@app/components/Mono.js";
 import { useDevice } from "@core/providers/useDevice.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
-import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
+import {
+  ArrowPathRoundedSquareIcon,
+  EllipsisHorizontalIcon,
+} from "@heroicons/react/24/outline";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const PeersPage = (): JSX.Element => {
-  const { hardware, nodes } = useDevice();
+  const { connection, nodes } = useDevice();
 
   return (
     <div className="w-full overflow-y-auto">
@@ -36,6 +40,12 @@ export const PeersPage = (): JSX.Element => {
               >
                 MAC Address
               </th>
+              <th
+                scope="col"
+                className="py-3.5 text-left text-sm font-semibold text-gray-900"
+              >
+                Versions
+              </th>
               <th
                 scope="col"
                 className="py-3.5 text-left text-sm font-semibold text-gray-900"
@@ -78,6 +88,33 @@ export const PeersPage = (): JSX.Element => {
                       ?.join(":") ?? ""}
                   </Mono>
                 </td>
+                <td className="whitespace-nowrap py-2 text-sm text-gray-500">
+                  {node.metadata ? (
+                    <>
+                      <Mono>{node.metadata.firmwareVersion}</Mono>
+                      <span className="text-black">/</span>
+                      <Mono>{node.metadata.deviceStateVersion}</Mono>
+                    </>
+                  ) : (
+                    <IconButton
+                      size="sm"
+                      variant="secondary"
+                      onClick={() => {
+                        if (connection) {
+                          void toast.promise(
+                            connection.getMetadata(node.data.num),
+                            {
+                              loading: "Requesting Metadata...",
+                              success: "Recieved Metadata",
+                              error: "No response received",
+                            }
+                          );
+                        }
+                      }}
+                      icon={<ArrowPathRoundedSquareIcon className="h-4" />}
+                    />
+                  )}
+                </td>
                 <td className="whitespace-nowrap py-2 text-sm text-gray-500">
                   {new Date(node.data.lastHeard).toLocaleTimeString()}
                 </td>