Update to more recent protobufs, align with updated meshtastic/js

package.json

@@ -22,7 +22,7 @@
   },
   "homepage": "https://meshtastic.org",
   "dependencies": {
-    "@bufbuild/protobuf": "^1.10.0",
+    "@bufbuild/protobuf": "^2.2.1",
     "@emeraldpay/hashicon-react": "^0.5.2",
     "@meshtastic/js": "2.3.7-5",
     "@noble/curves": "^1.5.0",
@@ -66,8 +66,8 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.2",
-    "@buf/meshtastic_protobufs.bufbuild_es": "1.10.0-20240906232734-3da561588c55.1",
     "@rsbuild/core": "^1.0.10",
+    "@rsbuild/plugin-node-polyfill": "^1.2.0",
     "@rsbuild/plugin-react": "^1.0.3",
     "@types/chrome": "^0.0.263",
     "@types/node": "^20.14.9",
@@ -84,4 +84,4 @@
     "tslib": "^2.6.3",
     "typescript": "^5.5.2"
   }
-}
+}

rsbuild.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "@rsbuild/core";
 import { pluginReact } from "@rsbuild/plugin-react";
 import { execSync } from "node:child_process";
+import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill'
 
 let hash = "";
 
@@ -11,7 +12,7 @@ try {
 }
 
 export default defineConfig({
-  plugins: [pluginReact()],
+  plugins: [pluginNodePolyfill(),pluginReact()],
   source: {
     define: {
       "process.env.COMMIT_HASH": JSON.stringify(hash),
@@ -24,6 +25,11 @@ export default defineConfig({
       "@layouts": "./src/layouts",
     },
   },
+  output: {
+    externals: {
+      'serialport': '{}',
+    },
+  },
   html: {
     title: "Meshtastic Web",
   },

src/components/Dialog/DeviceNameDialog.tsx

@@ -10,7 +10,7 @@ import {
 } from "@components/UI/Dialog.tsx";
 import { Input } from "@components/UI/Input.tsx";
 import { Label } from "@components/UI/Label.tsx";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 import { useForm } from "react-hook-form";
 
 export interface User {
@@ -40,7 +40,7 @@ export const DeviceNameDialog = ({
 
   const onSubmit = handleSubmit((data) => {
     connection?.setOwner(
-      new Protobuf.Mesh.User({
+      createProtobuf(Protobuf.Mesh.UserSchema, {
         ...myNode?.user,
         ...data,
       }),

src/components/Dialog/ImportDialog.tsx

@@ -12,22 +12,22 @@ import { Input } from "@components/UI/Input.tsx";
 import { Label } from "@components/UI/Label.tsx";
 import { Switch } from "@components/UI/Switch.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf, fromBinary } from "@meshtastic/js";
 import { toByteArray } from "base64-js";
 import { useEffect, useState } from "react";
 
 export interface ImportDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  loraConfig?: Protobuf.Config.Config_LoRaConfig;
+  loraConfig?: Protobuf.Config.Config_LoRaConfigSchema;
 }
 
 export const ImportDialog = ({
   open,
   onOpenChange,
 }: ImportDialogProps): JSX.Element => {
   const [importDialogInput, setImportDialogInput] = useState<string>("");
-  const [channelSet, setChannelSet] = useState<Protobuf.AppOnly.ChannelSet>();
+  const [channelSet, setChannelSet] = useState<Protobuf.AppOnly.ChannelSetSchema>();
   const [validUrl, setValidUrl] = useState<boolean>(false);
 
   const { connection } = useDevice();
@@ -55,7 +55,7 @@ export const ImportDialog = ({
         .replace(/-/g, "+")
         .replace(/_/g, "/");
       setChannelSet(
-        Protobuf.AppOnly.ChannelSet.fromBinary(toByteArray(paddedString)),
+       fromBinary(Protobuf.AppOnly.ChannelSetSchema, toByteArray(paddedString)),
       );
       setValidUrl(true);
     } catch (error) {
@@ -67,7 +67,7 @@ export const ImportDialog = ({
   const apply = () => {
     channelSet?.settings.map((ch, index) => {
       connection?.setChannel(
-        new Protobuf.Channel.Channel({
+        createProtobuf(Protobuf.Channel.ChannelSchema, {
           index,
           role:
             index === 0
@@ -80,7 +80,7 @@ export const ImportDialog = ({
 
     if (channelSet?.loraConfig) {
       connection?.setConfig(
-        new Protobuf.Config.Config({
+        createProtobuf(Protobuf.Config.ConfigSchema, {
           payloadVariant: {
             case: "lora",
             value: channelSet.loraConfig,

src/components/Dialog/QRDialog.tsx

@@ -9,7 +9,7 @@ import {
 } from "@components/UI/Dialog.tsx";
 import { Input } from "@components/UI/Input.tsx";
 import { Label } from "@components/UI/Label.tsx";
-import { Protobuf, type Types } from "@meshtastic/js";
+import { createProtobuf, toBinary, Protobuf, type Types } from "@meshtastic/js";
 import { fromByteArray } from "base64-js";
 import { ClipboardIcon } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
@@ -18,8 +18,8 @@ import { QRCode } from "react-qrcode-logo";
 export interface QRDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  loraConfig?: Protobuf.Config.Config_LoRaConfig;
-  channels: Map<Types.ChannelNumber, Protobuf.Channel.Channel>;
+  loraConfig?: Protobuf.Config.Config_LoRaConfigSchema;
+  channels: Map<Types.ChannelNumber, Protobuf.Channel.ChannelSchema>;
 }
 
 export const QRDialog = ({
@@ -39,13 +39,20 @@ export const QRDialog = ({
       .filter((ch) => selectedChannels.includes(ch.index))
       .map((channel) => channel.settings)
       .filter((ch): ch is Protobuf.Channel.ChannelSettings => !!ch);
-    const encoded = new Protobuf.AppOnly.ChannelSet(
-      new Protobuf.AppOnly.ChannelSet({
+
+    // TODO: This seems weird to have it wrapped twice?
+    // const encoded = new Protobuf.AppOnly.ChannelSet(
+    // new Protobuf.AppOnly.ChannelSet({
+    //   loraConfig,
+    //   settings: channelsToEncode,
+    // }),
+    const encoded = createProtobuf(Protobuf.AppOnly.ChannelSetSchema, 
+      {
         loraConfig,
         settings: channelsToEncode,
-      }),
-    );
-    const base64 = fromByteArray(encoded.toBinary())
+      });
+      
+    const base64 = fromByteArray(toBinary(Protobuf.AppOnly.ChannelSetSchema, encoded))
       .replace(/=/g, "")
       .replace(/\+/g, "-")
       .replace(/\//g, "_");

src/components/PageComponents/Channel.tsx

@@ -2,13 +2,13 @@ import type { ChannelValidation } from "@app/validation/channel.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useToast } from "@core/hooks/useToast.ts";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 import { fromByteArray, toByteArray } from "base64-js";
 import cryptoRandomString from "crypto-random-string";
 import { useState } from "react";
 
 export interface SettingsPanelProps {
-  channel: Protobuf.Channel.Channel;
+  channel: Protobuf.Channel.ChannelSchema;
 }
 
 export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
@@ -24,7 +24,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
   const [validationText, setValidationText] = useState<string>();
 
   const onSubmit = (data: ChannelValidation) => {
-    const channel = new Protobuf.Channel.Channel({
+    const channel = createProtobuf(Protobuf.Channel.ChannelSchema, {
       ...data,
       settings: {
         ...data.settings,

src/components/PageComponents/Config/Bluetooth.tsx

@@ -1,7 +1,7 @@
 import type { BluetoothValidation } from "@app/validation/config/bluetooth.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 import { useState } from "react";
 
 export const Bluetooth = (): JSX.Element => {
@@ -23,7 +23,7 @@ export const Bluetooth = (): JSX.Element => {
 
   const onSubmit = (data: BluetoothValidation) => {
     setWorkingConfig(
-      new Protobuf.Config.Config({
+      createProtobuf(Protobuf.Config.ConfigSchema, {
         payloadVariant: {
           case: "bluetooth",
           value: data,

src/components/PageComponents/Config/Device.tsx

@@ -1,14 +1,14 @@
 import type { DeviceValidation } from "@app/validation/config/device.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 
 export const Device = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
 
   const onSubmit = (data: DeviceValidation) => {
     setWorkingConfig(
-      new Protobuf.Config.Config({
+      createProtobuf(Protobuf.Config.ConfigSchema, {
         payloadVariant: {
           case: "device",
           value: data,

src/components/PageComponents/Config/Display.tsx

@@ -1,14 +1,14 @@
 import type { DisplayValidation } from "@app/validation/config/display.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 
 export const Display = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
 
   const onSubmit = (data: DisplayValidation) => {
     setWorkingConfig(
-      new Protobuf.Config.Config({
+      createProtobuf(Protobuf.Config.ConfigSchema, {
         payloadVariant: {
           case: "display",
           value: data,

src/components/PageComponents/Config/LoRa.tsx

@@ -1,14 +1,14 @@
 import type { LoRaValidation } from "@app/validation/config/lora.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 
 export const LoRa = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
 
   const onSubmit = (data: LoRaValidation) => {
     setWorkingConfig(
-      new Protobuf.Config.Config({
+      createProtobuf(Protobuf.Config.ConfigSchema, {
         payloadVariant: {
           case: "lora",
           value: data,

src/components/PageComponents/Config/Network.tsx

@@ -5,19 +5,19 @@ import {
   convertIntToIpAddress,
   convertIpAddressToInt,
 } from "@core/utils/ip.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 
 export const Network = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
 
   const onSubmit = (data: NetworkValidation) => {
     setWorkingConfig(
-      new Protobuf.Config.Config({
+      createProtobuf(Protobuf.Config.ConfigSchema, {
         payloadVariant: {
           case: "network",
           value: {
             ...data,
-            ipv4Config: new Protobuf.Config.Config_NetworkConfig_IpV4Config({
+            ipv4Config: createProtobuf(Protobuf.Config.Config_NetworkConfig_IpV4ConfigSchema, {
               ip: convertIpAddressToInt(data.ipv4Config.ip) ?? 0,
               gateway: convertIpAddressToInt(data.ipv4Config.gateway) ?? 0,
               subnet: convertIpAddressToInt(data.ipv4Config.subnet) ?? 0,

src/components/PageComponents/Config/Position.tsx

@@ -1,14 +1,14 @@
 import type { PositionValidation } from "@app/validation/config/position.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 
 export const Position = (): JSX.Element => {
   const { config, nodes, hardware, setWorkingConfig } = useDevice();
 
   const onSubmit = (data: PositionValidation) => {
     setWorkingConfig(
-      new Protobuf.Config.Config({
+      createProtobuf(Protobuf.Config.ConfigSchema, {
         payloadVariant: {
           case: "position",
           value: data,

src/components/PageComponents/Config/Power.tsx

@@ -1,14 +1,14 @@
 import type { PowerValidation } from "@app/validation/config/power.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 
 export const Power = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
 
   const onSubmit = (data: PowerValidation) => {
     setWorkingConfig(
-      new Protobuf.Config.Config({
+      createProtobuf(Protobuf.Config.ConfigSchema, {
         payloadVariant: {
           case: "power",
           value: data,

src/components/PageComponents/Config/Security.tsx

@@ -6,7 +6,7 @@ import {
 } from "@app/core/utils/x25519";
 import type { SecurityValidation } from "@app/validation/config/security.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 import { fromByteArray, toByteArray } from "base64-js";
 import { Eye, EyeOff } from "lucide-react";
 import { useState } from "react";
@@ -37,7 +37,7 @@ export const Security = (): JSX.Element => {
     if (privateKeyValidationText || adminKeyValidationText) return;
 
     setWorkingConfig(
-      new Protobuf.Config.Config({
+      createProtobuf(Protobuf.Config.ConfigSchema, {
         payloadVariant: {
           case: "security",
           value: {

src/components/PageComponents/ModuleConfig/AmbientLighting.tsx

@@ -1,14 +1,14 @@
 import { useDevice } from "@app/core/stores/deviceStore.ts";
 import type { AmbientLightingValidation } from "@app/validation/moduleConfig/ambientLighting.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 
 export const AmbientLighting = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: AmbientLightingValidation) => {
     setWorkingModuleConfig(
-      new Protobuf.ModuleConfig.ModuleConfig({
+      createProtobuf(Protobuf.ModuleConfig.ModuleConfigSchema, {
         payloadVariant: {
           case: "ambientLighting",
           value: data,

src/components/PageComponents/ModuleConfig/Audio.tsx

@@ -1,14 +1,14 @@
 import type { AudioValidation } from "@app/validation/moduleConfig/audio.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 
 export const Audio = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: AudioValidation) => {
     setWorkingModuleConfig(
-      new Protobuf.ModuleConfig.ModuleConfig({
+      createProtobuf(Protobuf.ModuleConfig.ModuleConfigSchema, {
         payloadVariant: {
           case: "audio",
           value: data,

src/components/PageComponents/ModuleConfig/CannedMessage.tsx

@@ -1,14 +1,14 @@
 import type { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 
 export const CannedMessage = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: CannedMessageValidation) => {
     setWorkingModuleConfig(
-      new Protobuf.ModuleConfig.ModuleConfig({
+      createProtobuf(Protobuf.ModuleConfig.ModuleConfigSchema, {
         payloadVariant: {
           case: "cannedMessage",
           value: data,

src/components/PageComponents/ModuleConfig/DetectionSensor.tsx

@@ -1,14 +1,14 @@
 import { useDevice } from "@app/core/stores/deviceStore.ts";
 import type { DetectionSensorValidation } from "@app/validation/moduleConfig/detectionSensor.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 
 export const DetectionSensor = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: DetectionSensorValidation) => {
     setWorkingModuleConfig(
-      new Protobuf.ModuleConfig.ModuleConfig({
+      createProtobuf(Protobuf.ModuleConfig.ModuleConfigSchema, {
         payloadVariant: {
           case: "detectionSensor",
           value: data,

src/components/PageComponents/ModuleConfig/ExternalNotification.tsx

@@ -1,14 +1,14 @@
 import type { ExternalNotificationValidation } from "@app/validation/moduleConfig/externalNotification.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 
 export const ExternalNotification = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: ExternalNotificationValidation) => {
     setWorkingModuleConfig(
-      new Protobuf.ModuleConfig.ModuleConfig({
+      createProtobuf(Protobuf.ModuleConfig.ModuleConfigSchema, {
         payloadVariant: {
           case: "externalNotification",
           value: data,

src/components/PageComponents/ModuleConfig/MQTT.tsx

@@ -1,20 +1,20 @@
 import { useDevice } from "@app/core/stores/deviceStore.ts";
 import type { MqttValidation } from "@app/validation/moduleConfig/mqtt.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 
 export const MQTT = (): JSX.Element => {
   const { config, moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: MqttValidation) => {
     setWorkingModuleConfig(
-      new Protobuf.ModuleConfig.ModuleConfig({
+      createProtobuf(Protobuf.ModuleConfig.ModuleConfigSchema,{
         payloadVariant: {
           case: "mqtt",
           value: {
             ...data,
             mapReportSettings:
-              new Protobuf.ModuleConfig.ModuleConfig_MapReportSettings(
+              createProtobuf(Protobuf.ModuleConfig.ModuleConfig_MapReportSettingsSchema,
                 data.mapReportSettings,
               ),
           },

src/components/PageComponents/ModuleConfig/NeighborInfo.tsx

@@ -1,14 +1,14 @@
 import { useDevice } from "@app/core/stores/deviceStore.ts";
 import type { NeighborInfoValidation } from "@app/validation/moduleConfig/neighborInfo.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 
 export const NeighborInfo = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: NeighborInfoValidation) => {
     setWorkingModuleConfig(
-      new Protobuf.ModuleConfig.ModuleConfig({
+      createProtobuf(Protobuf.ModuleConfig.ModuleConfigSchema, {
         payloadVariant: {
           case: "neighborInfo",
           value: data,

src/components/PageComponents/ModuleConfig/Paxcounter.tsx

@@ -1,14 +1,14 @@
 import type { PaxcounterValidation } from "@app/validation/moduleConfig/paxcounter.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 
 export const Paxcounter = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: PaxcounterValidation) => {
     setWorkingModuleConfig(
-      new Protobuf.ModuleConfig.ModuleConfig({
+      createProtobuf(Protobuf.ModuleConfig.ModuleConfigSchema, {
         payloadVariant: {
           case: "paxcounter",
           value: data,

src/components/PageComponents/ModuleConfig/RangeTest.tsx

@@ -1,14 +1,14 @@
 import type { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 
 export const RangeTest = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: RangeTestValidation) => {
     setWorkingModuleConfig(
-      new Protobuf.ModuleConfig.ModuleConfig({
+      createProtobuf(Protobuf.ModuleConfig.ModuleConfigSchema, {
         payloadVariant: {
           case: "rangeTest",
           value: data,

src/components/PageComponents/ModuleConfig/Serial.tsx

@@ -1,14 +1,14 @@
 import type { SerialValidation } from "@app/validation/moduleConfig/serial.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 
 export const Serial = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: SerialValidation) => {
     setWorkingModuleConfig(
-      new Protobuf.ModuleConfig.ModuleConfig({
+      createProtobuf(Protobuf.ModuleConfig.ModuleConfigSchema, {
         payloadVariant: {
           case: "serial",
           value: data,

src/components/PageComponents/ModuleConfig/StoreForward.tsx

@@ -1,14 +1,14 @@
 import type { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.ts";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 
 export const StoreForward = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: StoreForwardValidation) => {
     setWorkingModuleConfig(
-      new Protobuf.ModuleConfig.ModuleConfig({
+      createProtobuf(Protobuf.ModuleConfig.ModuleConfigSchema, {
         payloadVariant: {
           case: "storeForward",
           value: data,

src/components/PageComponents/ModuleConfig/Telemetry.tsx

@@ -1,14 +1,14 @@
 import type { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf, createProtobuf } from "@meshtastic/js";
 
 export const Telemetry = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: TelemetryValidation) => {
     setWorkingModuleConfig(
-      new Protobuf.ModuleConfig.ModuleConfig({
+      createProtobuf(Protobuf.ModuleConfig.ModuleConfigSchema, {
         payloadVariant: {
           case: "telemetry",
           value: data,

src/core/stores/deviceStore.ts

@@ -3,7 +3,7 @@ import { createContext, useContext } from "react";
 import { produce } from "immer";
 import { create } from "zustand";
 
-import { Protobuf, Types } from "@meshtastic/js";
+import { createProtobuf, Protobuf, Types } from "@meshtastic/js";
 
 export type Page = "messages" | "map" | "config" | "channels" | "nodes";
 
@@ -118,11 +118,11 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
           id,
           status: Types.DeviceStatusEnum.DeviceDisconnected,
           channels: new Map(),
-          config: new Protobuf.LocalOnly.LocalConfig(),
-          moduleConfig: new Protobuf.LocalOnly.LocalModuleConfig(),
+          config: createProtobuf(Protobuf.LocalOnly.LocalConfigSchema, {}),
+          moduleConfig: createProtobuf(Protobuf.LocalOnly.LocalModuleConfigSchema, {}),
           workingConfig: [],
           workingModuleConfig: [],
-          hardware: new Protobuf.Mesh.MyNodeInfo(),
+          hardware: createProtobuf(Protobuf.Mesh.MyNodeInfoSchema, {}),
           nodes: new Map(),
           metadata: new Map(),
           messages: {
@@ -442,7 +442,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                   return;
                 }
                 const currentNode =
-                  device.nodes.get(user.from) ?? new Protobuf.Mesh.NodeInfo();
+                  device.nodes.get(user.from) ?? createProtobuf(Protobuf.Mesh.NodeInfoSchema, {});
                 currentNode.user = user.data;
                 device.nodes.set(user.from, currentNode);
               }),
@@ -457,7 +457,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                 }
                 const currentNode =
                   device.nodes.get(position.from) ??
-                  new Protobuf.Mesh.NodeInfo();
+                  createProtobuf(Protobuf.Mesh.NodeInfoSchema, {});
                 currentNode.position = position.data;
                 device.nodes.set(position.from, currentNode);
               }),
@@ -612,7 +612,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                 } else {
                   device.nodes.set(
                     data.from,
-                    new Protobuf.Mesh.NodeInfo({
+                    createProtobuf(Protobuf.Mesh.NodeInfoSchema, {
                       num: data.from,
                       lastHeard: data.time,
                       snr: data.snr,

src/pages/Nodes.tsx

@@ -86,7 +86,7 @@ export const NodesPage = (): JSX.Element => {
                 {node.lastHeard !== 0
                   ? node.viaMqtt === false && node.hopsAway === 0
                     ? "Direct"
-                    : `${node.hopsAway.toString()} ${
+                    : `${node.hopsAway?.toString()} ${
                         node.hopsAway > 1 ? "hops" : "hop"
                       } away`
                   : "-"}