fixes #3246

interface/src/app/status/APStatus.tsx

@@ -90,7 +90,10 @@ const APStatus = () => {
           <ListItemAvatar>
             <Avatar sx={{ bgcolor: 'primary.main' }}>IP</Avatar>
           </ListItemAvatar>
-          <ListItemText primary={LL.ADDRESS_OF('IP')} secondary={data.ip_address} />
+          <ListItemText
+            primary={LL.ADDRESS_OF('IP')}
+            secondary={data.ip_address || 'none'}
+          />
         </ListItem>
 
         <Divider variant="inset" component="li" />
@@ -103,7 +106,7 @@ const APStatus = () => {
           </ListItemAvatar>
           <ListItemText
             primary={LL.ADDRESS_OF('MAC')}
-            secondary={data.mac_address}
+            secondary={data.mac_address || 'none'}
           />
         </ListItem>
 

interface/src/app/status/NetworkStatus.tsx

@@ -7,11 +7,13 @@ import SettingsInputComponentIcon from '@mui/icons-material/SettingsInputCompone
 import WifiIcon from '@mui/icons-material/Wifi';
 import {
   Avatar,
+  Box,
   Divider,
   List,
   ListItem,
   ListItemAvatar,
   ListItemText,
+  Typography,
   useTheme
 } from '@mui/material';
 import type { Theme } from '@mui/material';
@@ -62,26 +64,40 @@ const networkQualityHighlight = ({ rssi }: NetworkStatusType, theme: Theme) => {
   return theme.palette.success.main;
 };
 
-const dnsServers = ({ dns_ip_1, dns_ip_2 }: NetworkStatusType) => {
-  if (!dns_ip_1) {
+// one address per line, with an optional dimmed note such as the IPv6 scope
+const AddressList = ({
+  addresses
+}: {
+  addresses: { value: string; note?: string }[];
+}) => {
+  if (addresses.length === 0) {
     return 'none';
   }
-  return dns_ip_1 + (!dns_ip_2 || dns_ip_2 === '0.0.0.0' ? '' : ', ' + dns_ip_2);
+  return addresses.map(({ value, note }) => (
+    <Box component="span" sx={{ display: 'block' }} key={value}>
+      {value}
+      {note && (
+        <Typography
+          component="span"
+          variant="body2"
+          sx={{ color: 'grey.600', ml: 1 }} // dimmer than the grey[500] secondary text
+        >
+          ({note})
+        </Typography>
+      )}
+    </Box>
+  ));
 };
 
-const IPs = (status: NetworkStatusType) => {
-  if (
-    !status.local_ipv6 ||
-    status.local_ipv6 === '0000:0000:0000:0000:0000:0000:0000:0000' ||
-    status.local_ipv6 === '::'
-  ) {
-    return status.local_ip;
-  }
-  if (!status.local_ip || status.local_ip === '0.0.0.0') {
-    return status.local_ipv6;
-  }
-  return status.local_ip + ', ' + status.local_ipv6;
-};
+const isSet = (ip?: string) => !!ip && ip !== '0.0.0.0' && ip !== '::';
+
+const ipAddresses = ({ local_ip, ipv6 }: NetworkStatusType) => [
+  ...(isSet(local_ip) ? [{ value: local_ip }] : []),
+  ...(ipv6 ?? []).map(({ address, scope }) => ({ value: address, note: scope }))
+];
+
+const dnsServers = ({ dns }: NetworkStatusType) =>
+  (dns ?? []).filter(isSet).map((value) => ({ value }));
 
 const getNetworkStatusText = (
   status: NetworkConnectionStatus,
@@ -178,7 +194,10 @@ const NetworkStatus = () => {
               <ListItemAvatar>
                 <Avatar>IP</Avatar>
               </ListItemAvatar>
-              <ListItemText primary={LL.ADDRESS_OF('IP')} secondary={IPs(data)} />
+              <ListItemText
+                primary={LL.ADDRESS_OF('IP')}
+                secondary={<AddressList addresses={ipAddresses(data)} />}
+              />
             </ListItem>
             <Divider variant="inset" component="li" />
             <ListItem>
@@ -223,7 +242,7 @@ const NetworkStatus = () => {
               </ListItemAvatar>
               <ListItemText
                 primary={LL.NETWORK_DNS()}
-                secondary={dnsServers(data)}
+                secondary={<AddressList addresses={dnsServers(data)} />}
               />
             </ListItem>
           </>

interface/src/types/network.ts

@@ -20,19 +20,23 @@ export enum WiFiEncryptionType {
   WIFI_AUTH_WPA2_WPA3_PSK = 7
 }
 
+export interface IPv6AddressType {
+  address: string;
+  scope: string; // global, unique local, site local or link local
+}
+
 export interface NetworkStatusType {
   status: NetworkConnectionStatus;
   local_ip: string;
-  local_ipv6: string;
+  ipv6?: IPv6AddressType[];
   mac_address: string;
   rssi: number;
   ssid: string;
   bssid: string;
   channel: number;
   subnet_mask: string;
-  gateway_ip: string;
-  dns_ip_1: string;
-  dns_ip_2: string;
+  gateway_ip?: string;
+  dns?: string[];
   hostname: string;
   reconnect_count: number;
 }