Loading states for settings, Improve Ch editor

package.json

@@ -19,7 +19,6 @@
     "i18next": "^21.4.2",
     "i18next-browser-languagedetector": "^6.1.2",
     "react": "^17.0.2",
-    "react-apexcharts": "^1.3.9",
     "react-dom": "^17.0.2",
     "react-file-icon": "^1.1.0",
     "react-hook-form": "^7.19.4",
@@ -27,8 +26,9 @@
     "react-icons": "^4.3.1",
     "react-json-pretty": "^2.2.0",
     "react-redux": "^7.2.6",
-    "react-timeago": "^6.2.1",
+    "rfc4648": "^1.5.0",
     "swr": "^1.0.1",
+    "timeago-react": "^3.0.4",
     "type-route": "^0.6.0",
     "use-breakpoint": "^2.0.2"
   },
@@ -36,8 +36,6 @@
     "@types/react": "^17.0.34",
     "@types/react-dom": "^17.0.11",
     "@types/react-file-icon": "^1.0.1",
-    "@types/react-redux": "^7.1.20",
-    "@types/react-timeago": "^4.1.3",
     "@types/w3c-web-serial": "^1.0.2",
     "@types/web-bluetooth": "^0.0.11",
     "@typescript-eslint/eslint-plugin": "^5.3.1",

pnpm-lock.yaml

@@ -7,8 +7,6 @@ specifiers:
   '@types/react': ^17.0.34
   '@types/react-dom': ^17.0.11
   '@types/react-file-icon': ^1.0.1
-  '@types/react-redux': ^7.1.20
-  '@types/react-timeago': ^4.1.3
   '@types/w3c-web-serial': ^1.0.2
   '@types/web-bluetooth': ^0.0.11
   '@typescript-eslint/eslint-plugin': ^5.3.1
@@ -31,7 +29,6 @@ specifiers:
   postcss: ^8.3.11
   prettier: ^2.4.1
   react: ^17.0.2
-  react-apexcharts: ^1.3.9
   react-dom: ^17.0.2
   react-file-icon: ^1.1.0
   react-hook-form: ^7.19.4
@@ -39,10 +36,11 @@ specifiers:
   react-icons: ^4.3.1
   react-json-pretty: ^2.2.0
   react-redux: ^7.2.6
-  react-timeago: ^6.2.1
+  rfc4648: ^1.5.0
   swr: ^1.0.1
   tailwindcss: ^3.0.0-alpha.2
   tar: ^6.1.11
+  timeago-react: ^3.0.4
   type-route: ^0.6.0
   typescript: ^4.4.4
   use-breakpoint: ^2.0.2
@@ -52,13 +50,12 @@ specifiers:
 
 dependencies:
   '@headlessui/react': 1.4[email protected][email protected]
-  '@meshtastic/meshtasticjs': 0.6.27
+  '@meshtastic/meshtasticjs': link:../meshtastic.js
   '@reduxjs/toolkit': 1.6[email protected][email protected]
   boring-avatars: 1.5.8
   i18next: 21.4.2
   i18next-browser-languagedetector: 6.1.2
   react: 17.0.2
-  react-apexcharts: 1.3[email protected]
   react-dom: 17.0[email protected]
   react-file-icon: 1.1[email protected][email protected]
   react-hook-form: 7.19[email protected]
@@ -66,8 +63,9 @@ dependencies:
   react-icons: 4.3[email protected]
   react-json-pretty: 2.2[email protected][email protected]
   react-redux: 7.2[email protected][email protected]
-  react-timeago: 6.2[email protected]
+  rfc4648: 1.5.0
   swr: 1.0[email protected]
+  timeago-react: 3.0[email protected]
   type-route: 0.6.0
   use-breakpoint: 2.0[email protected][email protected]
 
@@ -75,8 +73,6 @@ devDependencies:
   '@types/react': 17.0.34
   '@types/react-dom': 17.0.11
   '@types/react-file-icon': 1.0.1
-  '@types/react-redux': 7.1.20
-  '@types/react-timeago': 4.1.3
   '@types/w3c-web-serial': 1.0.2
   '@types/web-bluetooth': 0.0.11
   '@typescript-eslint/eslint-plugin': 5.3.1_4653b7803b7453f5f37717b7e1448517
@@ -1359,13 +1355,6 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
-  /@meshtastic/meshtasticjs/0.6.27:
-    resolution: {integrity: sha512-WiM9v/3+YWtt6/wLJOyyhAQdtsIGcEs3geofRZA6y/TCQkbjo/mdvY8Y+ZMZERSFXIZXiovvZgJG0vSYq7JC9A==}
-    dependencies:
-      '@protobuf-ts/runtime': 2.0.7
-      sub-events: 1.8.9
-    dev: false
-
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -1387,10 +1376,6 @@ packages:
       fastq: 1.13.0
     dev: true
 
-  /@protobuf-ts/runtime/2.0.7:
-    resolution: {integrity: sha512-jT8FYEX7NkAzxZXVjshIhtCV/ReuZm/3sCH0GWnaa8woy9VG+He0N+dpj2svaJbkdUThSxJE3zwmJcH0/3vEsw==}
-    dev: false
-
   /@reduxjs/toolkit/[email protected][email protected]:
     resolution: {integrity: sha512-HbfI/hOVrAcMGAYsMWxw3UJyIoAS9JTdwddsjlr5w3S50tXhWb+EMyhIw+IAvCVCLETkzdjgH91RjDSYZekVBA==}
     peerDependencies:
@@ -1488,6 +1473,7 @@ packages:
     dependencies:
       '@types/react': 17.0.34
       hoist-non-react-statics: 3.3.2
+    dev: false
 
   /@types/json-schema/7.0.9:
     resolution: {integrity: sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==}
@@ -1527,12 +1513,7 @@ packages:
       '@types/react': 17.0.34
       hoist-non-react-statics: 3.3.2
       redux: 4.1.2
-
+    dev: false
-  /@types/react-timeago/4.1.3:
-    resolution: {integrity: sha512-XaaMBzuXLw7lxPPDs/fenlohcf3NDqM5qP4oOL/Meu+Hb1QChW4Igw/SruS1llEqch18RQB3wDTIwvqq4nivvw==}
-    dependencies:
-      '@types/react': 17.0.34
-    dev: true
 
   /@types/react/17.0.34:
     resolution: {integrity: sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg==}
@@ -3240,6 +3221,7 @@ packages:
     resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
     dependencies:
       react-is: 16.13.1
+    dev: false
 
   /html-parse-stringify/3.0.1:
     resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
@@ -4050,16 +4032,6 @@ packages:
       safe-buffer: 5.2.1
     dev: true
 
-  /react-apexcharts/[email protected]:
-    resolution: {integrity: sha512-KPonT5uQPHOHSVgTNEzpB0HhCkZtoicQYGjR9P+3DRDSgTsC+DM2vDUfo/B2Fn1m+wdgVeDXWL0VJYDc6JD/tw==}
-    peerDependencies:
-      apexcharts: ^3.18.0
-      react: '>=0.13'
-    dependencies:
-      prop-types: 15.7.2
-      react: 17.0.2
-    dev: false
-
   /react-dom/[email protected]:
     resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==}
     peerDependencies:
@@ -4157,14 +4129,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /react-timeago/[email protected]:
-    resolution: {integrity: sha512-b9EObWO8wy4qwfOzj+g/RQZRrPvtMv1Pz12FCdAWKWCXbDGt0rZLyiyTGEr0Lh1O8w5xa48CtRpl3LI+CtGCyw==}
-    peerDependencies:
-      react: ^16.0.0 || ^17.0.0
-    dependencies:
-      react: 17.0.2
-    dev: false
-
   /react/17.0.2:
     resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==}
     engines: {node: '>=0.10.0'}
@@ -4192,6 +4156,7 @@ packages:
     resolution: {integrity: sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==}
     dependencies:
       '@babel/runtime': 7.16.3
+    dev: false
 
   /regenerate-unicode-properties/9.0.0:
     resolution: {integrity: sha512-3E12UeNSPfjrgwjkR81m5J7Aw/T55Tu7nUyZVQYCKEOs+2dkxEY+DpPtZzO4YruuiPb7NkYLVcyJC4+zCbk5pA==}
@@ -4286,6 +4251,10 @@ packages:
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
     dev: true
 
+  /rfc4648/1.5.0:
+    resolution: {integrity: sha512-FA6W9lDNeX8WbMY31io1xWg+TpZCbeDKsBo0ocwACZiWnh9TUAyk9CCuBQuOPmYnwwdEQZmraQ2ZK7yJsxErBg==}
+    dev: false
+
   /rimraf/3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
     hasBin: true
@@ -4505,11 +4474,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /sub-events/1.8.9:
-    resolution: {integrity: sha512-RhhA2amqVzL6nO+aiZOqxBCgcA3ZLfp4W9iHFUELwq8132TS7pUReJV+bcRjtNKdqm/Ep1sD/h01eAcTBtgrBQ==}
-    engines: {node: '>=10.0.0'}
-    dev: false
-
   /supports-color/5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -4620,6 +4584,19 @@ packages:
     resolution: {integrity: sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=}
     dev: true
 
+  /timeago-react/[email protected]:
+    resolution: {integrity: sha512-cv6Bnm01VKyHoQCBKzk24+L9ycj3jLq3uEFpYILKGJT7UUXWEzC0TBCxforsvL4NSjcwqqHNKdEeqEFMNNoN2A==}
+    peerDependencies:
+      react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+    dependencies:
+      react: 17.0.2
+      timeago.js: 4.0.2
+    dev: false
+
+  /timeago.js/4.0.2:
+    resolution: {integrity: sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==}
+    dev: false
+
   /tinycolor2/1.4.2:
     resolution: {integrity: sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==}
     dev: false

src/components/Channel.tsx

@@ -3,54 +3,50 @@ import React from 'react';
 import { useForm } from 'react-hook-form';
 import { FiEdit3, FiSave } from 'react-icons/fi';
 
+import { Loading } from '@components/generic/Loading';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 import { connection } from '../core/connection';
+import { Checkbox } from './generic/form/Checkbox';
 import { Input } from './generic/form/Input';
-import { Select } from './generic/form/Select';
 import { IconButton } from './generic/IconButton';
 
 export interface ChannelProps {
   channel: Protobuf.Channel;
 }
-interface DotProps {
-  role: Protobuf.Channel_Role;
-  admin: boolean;
-}
-const Dot = ({ role, admin }: DotProps): JSX.Element => (
-  <div
-    className={`h-3 my-auto w-3 rounded-full ${
-      role === Protobuf.Channel_Role.PRIMARY
-        ? 'bg-green-500'
-        : admin
-        ? 'bg-amber-400'
-        : role === Protobuf.Channel_Role.SECONDARY
-        ? 'bg-cyan-500'
-        : 'bg-gray-400'
-    }`}
-  />
-);
 
 export const Channel = ({ channel }: ChannelProps): JSX.Element => {
   const [edit, setEdit] = React.useState(false);
   const [loading, setLoading] = React.useState(false);
 
   const { register, handleSubmit, formState } = useForm<{
-    role: Protobuf.Channel_Role;
+    enabled: boolean;
     settings: {
       name: string;
       bandwidth?: number;
       codingRate?: number;
       spreadFactor?: number;
+      downlinkEnabled?: boolean;
+      uplinkEnabled?: boolean;
+      txPower?: number;
+      psk?: string;
     };
   }>({
     defaultValues: {
-      role: channel.role,
+      enabled:
+        channel.role ===
+        (Protobuf.Channel_Role.PRIMARY || Protobuf.Channel_Role.SECONDARY)
+          ? true
+          : false,
       settings: {
         name: channel.settings?.name,
         bandwidth: channel.settings?.bandwidth,
         codingRate: channel.settings?.codingRate,
         spreadFactor: channel.settings?.spreadFactor,
+        downlinkEnabled: channel.settings?.downlinkEnabled,
+        uplinkEnabled: channel.settings?.uplinkEnabled,
+        txPower: channel.settings?.txPower,
+        psk: new TextDecoder().decode(channel.settings?.psk),
       },
     },
   });
@@ -58,9 +54,14 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
   const onSubmit = handleSubmit(async (data) => {
     setLoading(true);
     const adminChannel = Protobuf.Channel.create({
-      role: data.role,
+      role: data.enabled
+        ? Protobuf.Channel_Role.SECONDARY
+        : Protobuf.Channel_Role.DISABLED,
       index: channel.index,
-      settings: data.settings,
+      settings: {
+        ...data.settings,
+        psk: new TextEncoder().encode(data.settings.psk),
+      },
     });
 
     await connection.setChannel(adminChannel, (): Promise<void> => {
@@ -73,28 +74,18 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
     <div className="relative flex justify-between p-3 bg-gray-100 rounded-md dark:bg-gray-700">
       {edit ? (
         <>
-          {loading && (
+          {loading && <Loading />}
-            <div className="absolute top-0 bottom-0 left-0 right-0 z-10 flex rounded-md backdrop-filter backdrop-blur-sm">
-              <div className="m-auto text-lg font-medium text-gray-400">
-                Loading
-              </div>
-            </div>
-          )}
           <div className="my-auto space-x-2">
             <form>
               <div className="flex space-x-2">
                 {/* @todo: change to disable & make primary buttons */}
-                <Select
+                <Checkbox
-                  label="Channel Type"
+                  label="Enabled"
-                  optionsEnum={Protobuf.Channel_Role}
+                  {...register('enabled', { valueAsNumber: true })}
-                  {...register('role', { valueAsNumber: true })}
-                />
-                <Dot
-                  role={channel.role}
-                  admin={channel.settings?.name === 'admin'}
                 />
               </div>
               <Input label="Name" {...register('settings.name')} />
+              <Input label="Pre-Shared Key" {...register('settings.psk')} />
               <Input
                 label="Bandwidth"
                 type="number"
@@ -112,6 +103,19 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
                 type="number"
                 {...register('settings.codingRate', { valueAsNumber: true })}
               />
+              <Input
+                label="Transmit Power"
+                type="number"
+                {...register('settings.txPower', { valueAsNumber: true })}
+              />
+              <Checkbox
+                label="Upling Enabled"
+                {...register('settings.uplinkEnabled')}
+              />
+              <Checkbox
+                label="Downlink Enabled"
+                {...register('settings.downlinkEnabled')}
+              />
             </form>
           </div>
           <IconButton
@@ -126,9 +130,12 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
       ) : (
         <>
           <div className="flex my-auto space-x-2">
-            <Dot
+            <div
-              role={channel.role}
+              className={`h-3 my-auto w-3 rounded-full ${
-              admin={channel.settings?.name === 'admin'}
+                channel.role === Protobuf.Channel_Role.SECONDARY
+                  ? 'bg-green-500'
+                  : 'bg-gray-400'
+              }`}
             />
             <div>
               {channel.settings?.name.length

src/components/generic/Card.tsx

@@ -1,5 +1,7 @@
 import type React from 'react';
 
+import { Loading } from '@components/generic/Loading';
+
 type DefaultDivProps = JSX.IntrinsicElements['div'];
 
 interface CardProps extends DefaultDivProps {
@@ -17,13 +19,15 @@ export const Card = ({
   children,
   className,
   lgPlaceholder,
+  loading,
   ...props
 }: CardProps): JSX.Element => {
   return (
     <div
-      className={`flex flex-col flex-auto dark:text-white border-y md:border shadow-md select-none dark:bg-primaryDark border-gray-300 dark:border-transparent md:rounded-3xl  ${className}`}
+      className={`relative flex flex-col flex-auto dark:text-white border-y md:border shadow-md select-none dark:bg-primaryDark border-gray-300 dark:border-transparent md:rounded-md  ${className}`}
       {...props}
     >
+      {loading && <Loading />}
       {(title || description) && (
         <div className="flex items-center justify-between mx-10 mt-10">
           <div className="flex flex-col">

src/components/generic/Loading.tsx

@@ -0,0 +1,9 @@
+import type React from 'react';
+
+export const Loading = (): JSX.Element => {
+  return (
+    <div className="absolute top-0 bottom-0 left-0 right-0 z-10 flex rounded-md backdrop-filter backdrop-blur-sm">
+      <div className="m-auto text-lg font-medium text-gray-400">Loading</div>
+    </div>
+  );
+};

src/components/generic/form/Select.tsx

@@ -29,8 +29,8 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         <InputWrapper>
           <select
             ref={ref}
-            className={`w-full rounded-md bg-white dark:bg-transparent focus:outline-none focus:border-primary ${
+            className={`w-full rounded-md bg-transparent focus:outline-none focus:border-primary ${
-              small ? 'm-1' : 'h-10 mx-2'
+              small ? 'p-1' : 'h-10 px-2'
             }`}
             disabled={
               props.disabled

src/pages/Nodes/Node.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import { FiCode, FiMenu } from 'react-icons/fi';
 import JSONPretty from 'react-json-pretty';
-import TimeAgo from 'react-timeago';
+import TimeAgo from 'timeago-react';
 
 import { Cover } from '@app/components/generic/Cover';
 import { useAppSelector } from '@app/hooks/redux';
@@ -59,7 +59,7 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
             title="Last heard"
             value={
               node.lastHeard ? (
-                <TimeAgo date={new Date(node.lastHeard * 1000)} />
+                <TimeAgo datetime={new Date(node.lastHeard * 1000)} />
               ) : (
                 'Never'
               )
@@ -79,8 +79,8 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
         <Card title="Settings" description="Remote node settings">
           <div className="p-10">
             <form className="space-y-4">
-              <Input label={'Device Name'} />
+              <Input label="Device Name" />
-              <Input label={'Short Name'} maxLength={3} />
+              <Input label="Short Name" maxLength={3} />
               <Checkbox label="Licenced Operator?" />
             </form>
           </div>

src/pages/settings/Channels.tsx

@@ -23,7 +23,9 @@ export const Channels = ({
   setNavOpen,
 }: ChannelsProps): JSX.Element => {
   const { t } = useTranslation();
-  const channels = useAppSelector((state) => state.meshtastic.channels);
+  const channels = useAppSelector((state) => state.meshtastic.channels).filter(
+    (channel) => channel.index !== 0,
+  );
   const [debug, setDebug] = React.useState(false);
 
   return (
@@ -66,7 +68,7 @@ export const Channels = ({
               <Channel key={channel.index} channel={channel} />
             ))}
 
-            <div className="flex space-x-52">
+            <div className="flex justify-between">
               <div
                 onClick={(): Promise<void> => {
                   return connection.confirmSetChannel();

src/pages/settings/Index.tsx

@@ -54,16 +54,16 @@ export const Settings = (): JSX.Element => {
       description: 'LoRa settings',
       icon: <FiRadio className="flex-shrink-0 w-6 h-6" />,
     },
-    {
-      title: 'Interface',
-      description: 'Language and UI settings',
-      icon: <FiLayout className="flex-shrink-0 w-6 h-6" />,
-    },
     {
       title: 'Channels',
       description: 'Manage channels',
       icon: <FiLayers className="flex-shrink-0 w-6 h-6" />,
     },
+    {
+      title: 'Interface',
+      description: 'Language and UI settings',
+      icon: <FiLayout className="flex-shrink-0 w-6 h-6" />,
+    },
   ];
   return (
     <PageLayout
@@ -76,8 +76,8 @@ export const Settings = (): JSX.Element => {
         <User key={4} />,
         <Power key={5} />,
         <Radio key={6} />,
-        <Interface key={7} />,
         <Channels key={8} />,
+        <Interface key={7} />,
       ]}
     />
   );

src/pages/settings/Position.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
 import { FiCode, FiMenu } from 'react-icons/fi';
 import JSONPretty from 'react-json-pretty';
 
@@ -26,25 +25,28 @@ export const Position = ({
   navOpen,
   setNavOpen,
 }: PositionProps): JSX.Element => {
-  const { t } = useTranslation();
+  const preferences = useAppSelector((state) => state.meshtastic.preferences);
-  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
   const [debug, setDebug] = React.useState(false);
-
+  const [loading, setLoading] = React.useState(false);
   const { register, handleSubmit, formState, reset } =
     useForm<Protobuf.RadioConfig_UserPreferences>({
       defaultValues: {
-        ...radioConfig,
+        ...preferences,
         positionBroadcastSecs:
-          radioConfig.positionBroadcastSecs === 0
+          preferences.positionBroadcastSecs === 0
-            ? radioConfig.isRouter
+            ? preferences.isRouter
               ? 43200
               : 900
-            : radioConfig.positionBroadcastSecs,
+            : preferences.positionBroadcastSecs,
       },
     });
 
   const onSubmit = handleSubmit((data) => {
-    void connection.setPreferences(data);
+    setLoading(true);
+    void connection.setPreferences(data, async () => {
+      await Promise.resolve();
+      setLoading(false);
+    });
   });
   return (
     <PrimaryTemplate
@@ -75,12 +77,12 @@ export const Position = ({
         />
       }
     >
-      <Card>
+      <Card loading={loading}>
-        <Cover enabled={debug} content={<JSONPretty data={radioConfig} />} />
+        <Cover enabled={debug} content={<JSONPretty data={preferences} />} />
         <div className="w-full max-w-3xl p-10 md:max-w-xl">
           <form className="space-y-2" onSubmit={onSubmit}>
             <Input
-              label={'Broadcast Interval (seconds)'}
+              label="Broadcast Interval (seconds)"
               type="number"
               {...register('positionBroadcastSecs', { valueAsNumber: true })}
             />

src/pages/settings/Power.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
 import { FiCode, FiMenu } from 'react-icons/fi';
 import JSONPretty from 'react-json-pretty';
 
@@ -22,20 +21,23 @@ export interface PowerProps {
 }
 
 export const Power = ({ navOpen, setNavOpen }: PowerProps): JSX.Element => {
-  const { t } = useTranslation();
+  const preferences = useAppSelector((state) => state.meshtastic.preferences);
-  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
   const [debug, setDebug] = React.useState(false);
-
+  const [loading, setLoading] = React.useState(false);
   const { register, handleSubmit, formState, reset } =
     useForm<Protobuf.RadioConfig_UserPreferences>({
       defaultValues: {
-        ...radioConfig,
+        ...preferences,
-        isLowPower: radioConfig.isRouter ? true : radioConfig.isLowPower,
+        isLowPower: preferences.isRouter ? true : preferences.isLowPower,
       },
     });
 
   const onSubmit = handleSubmit((data) => {
-    void connection.setPreferences(data);
+    setLoading(true);
+    void connection.setPreferences(data, async () => {
+      await Promise.resolve();
+      setLoading(false);
+    });
   });
   return (
     <PrimaryTemplate
@@ -66,21 +68,21 @@ export const Power = ({ navOpen, setNavOpen }: PowerProps): JSX.Element => {
         />
       }
     >
-      <Card>
+      <Card loading={loading}>
-        <Cover enabled={debug} content={<JSONPretty data={radioConfig} />} />
+        <Cover enabled={debug} content={<JSONPretty data={preferences} />} />
         <div className="w-full max-w-3xl p-10 md:max-w-xl">
           <form className="space-y-2" onSubmit={onSubmit}>
             <Select
-              label={'Charge current'}
+              label="Charge current"
               optionsEnum={Protobuf.ChargeCurrent}
               {...register('chargeCurrent', { valueAsNumber: true })}
             />
             <Checkbox label="Always powered" {...register('isAlwaysPowered')} />
             <Checkbox
               label="Powered by low power source (solar)"
-              disabled={radioConfig.isRouter}
+              disabled={preferences.isRouter}
               validationMessage={
-                radioConfig.isRouter ? 'Enabled by default in router mode' : ''
+                preferences.isRouter ? 'Enabled by default in router mode' : ''
               }
               {...register('isLowPower')}
             />

src/pages/settings/Radio.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
 import { FiCode, FiMenu } from 'react-icons/fi';
 import JSONPretty from 'react-json-pretty';
 
@@ -22,17 +21,20 @@ export interface RadioProps {
 }
 
 export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
-  const { t } = useTranslation();
+  const preferences = useAppSelector((state) => state.meshtastic.preferences);
-  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
   const [debug, setDebug] = React.useState(false);
-
+  const [loading, setLoading] = React.useState(false);
   const { register, handleSubmit, formState, reset } =
     useForm<Protobuf.RadioConfig_UserPreferences>({
-      defaultValues: radioConfig,
+      defaultValues: preferences,
     });
 
   const onSubmit = handleSubmit((data) => {
-    void connection.setPreferences(data);
+    setLoading(true);
+    void connection.setPreferences(data, async () => {
+      await Promise.resolve();
+      setLoading(false);
+    });
   });
   return (
     <PrimaryTemplate
@@ -63,8 +65,8 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
         />
       }
     >
-      <Card>
+      <Card loading={loading}>
-        <Cover enabled={debug} content={<JSONPretty data={radioConfig} />} />
+        <Cover enabled={debug} content={<JSONPretty data={preferences} />} />
         <div className="w-full max-w-3xl p-10 md:max-w-xl">
           <form className="space-y-2" onSubmit={onSubmit}>
             <Checkbox label="Is Router" {...register('isRouter')} />

src/pages/settings/User.tsx

@@ -4,10 +4,9 @@ import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { FiCode, FiMenu } from 'react-icons/fi';
 import JSONPretty from 'react-json-pretty';
+import { base16 } from 'rfc4648';
 
 import { FormFooter } from '@app/components/FormFooter';
-import { connection } from '@app/core/connection';
-import { addUser } from '@app/core/slices/meshtasticSlice';
 import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
 import { Card } from '@components/generic/Card';
 import { Cover } from '@components/generic/Cover';
@@ -16,6 +15,8 @@ import { Input } from '@components/generic/form/Input';
 import { Select } from '@components/generic/form/Select';
 import { IconButton } from '@components/generic/IconButton';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
+import { connection } from '@core/connection';
+import { addUser } from '@core/slices/meshtasticSlice';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface UserProps {
@@ -26,6 +27,7 @@ export interface UserProps {
 export const User = ({ navOpen, setNavOpen }: UserProps): JSX.Element => {
   const { t } = useTranslation();
   const [debug, setDebug] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
   const dispatch = useAppDispatch();
   const myNodeInfo = useAppSelector((state) => state.meshtastic.myNodeInfo);
   const user = useAppSelector((state) => state.meshtastic.users).find(
@@ -46,9 +48,13 @@ export const User = ({ navOpen, setNavOpen }: UserProps): JSX.Element => {
   });
 
   const onSubmit = handleSubmit((data) => {
+    setLoading(true);
     // TODO: can be removed once getUser is implemented
     if (user) {
-      void connection.setOwner({ ...user.data, ...data });
+      void connection.setOwner({ ...user.data, ...data }, async () => {
+        await Promise.resolve();
+        setLoading(false);
+      });
       dispatch(addUser({ ...user, ...{ data: { ...user.data, ...data } } }));
     }
   });
@@ -82,13 +88,13 @@ export const User = ({ navOpen, setNavOpen }: UserProps): JSX.Element => {
         />
       }
     >
-      <Card>
+      <Card loading={loading}>
-        <Cover enabled={debug} content={<JSONPretty data={user} />} />
+        <Cover enabled={debug} content={<JSONPretty data={user?.data} />} />
         <div className="w-full max-w-3xl p-10 md:max-w-xl">
           <form className="space-y-2" onSubmit={onSubmit}>
-            <Input label={'Device ID'} value={user?.data.id} disabled />
+            <Input label="Device ID" value={user?.data.id} disabled />
             <Input
-              label={'Hardware'}
+              label="Hardware"
               value={
                 Protobuf.HardwareModel[
                   user?.data.hwModel ?? Protobuf.HardwareModel.UNSET
@@ -96,9 +102,19 @@ export const User = ({ navOpen, setNavOpen }: UserProps): JSX.Element => {
               }
               disabled
             />
-            <Input label={'Device Name'} {...register('longName')} />
             <Input
-              label={'Short Name'}
+              label="Mac Address"
+              defaultValue={
+                base16
+                  .stringify(user?.data.macaddr ?? [])
+                  .match(/.{1,2}/g)
+                  ?.join(':') ?? ''
+              }
+              disabled
+            />
+            <Input label="Device Name" {...register('longName')} />
+            <Input
+              label="Short Name"
               maxLength={3}
               {...register('shortName')}
             />

src/pages/settings/WiFi.tsx

@@ -23,12 +23,12 @@ export interface WiFiProps {
 
 export const WiFi = ({ navOpen, setNavOpen }: WiFiProps): JSX.Element => {
   const { t } = useTranslation();
-  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
+  const preferences = useAppSelector((state) => state.meshtastic.preferences);
   const [debug, setDebug] = React.useState(false);
-
+  const [loading, setLoading] = React.useState(false);
   const { register, handleSubmit, formState, reset, control } =
     useForm<Protobuf.RadioConfig_UserPreferences>({
-      defaultValues: radioConfig,
+      defaultValues: preferences,
     });
 
   const watchWifiApMode = useWatch({
@@ -38,7 +38,11 @@ export const WiFi = ({ navOpen, setNavOpen }: WiFiProps): JSX.Element => {
   });
 
   const onSubmit = handleSubmit((data) => {
-    void connection.setPreferences(data);
+    setLoading(true);
+    void connection.setPreferences(data, async () => {
+      await Promise.resolve();
+      setLoading(false);
+    });
   });
   return (
     <PrimaryTemplate
@@ -69,8 +73,8 @@ export const WiFi = ({ navOpen, setNavOpen }: WiFiProps): JSX.Element => {
         />
       }
     >
-      <Card>
+      <Card loading={loading}>
-        <Cover enabled={debug} content={<JSONPretty data={radioConfig} />} />
+        <Cover enabled={debug} content={<JSONPretty data={preferences} />} />
         <div className="w-full max-w-3xl p-10 md:max-w-xl">
           <form className="space-y-2" onSubmit={onSubmit}>
             <Checkbox label="Enable WiFi AP" {...register('wifiApMode')} />