Add DAITA display to main view

2 files changed, 33 insertions, 6 deletions

diff --git a/gui/src/renderer/components/ConnectionPanel.tsx b/gui/src/renderer/components/ConnectionPanel.tsx
index a99140bb43..4c709b7204 100644
--- a/gui/src/renderer/components/ConnectionPanel.tsx
+++ b/gui/src/renderer/components/ConnectionPanel.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { colors, strings } from '../../config.json';
 import {
   EndpointObfuscationType,
   ProxyType,
@@ -48,6 +48,7 @@ interface IProps {
   bridgeInfo?: IBridgeData;
   outAddress?: IOutAddress;
   obfuscationEndpoint?: IObfuscationData;
+  daita: boolean;
   onToggle: () => void;
   className?: string;
 }
@@ -146,13 +147,15 @@ export default class ConnectionPanel extends React.Component<IProps> {
   }
 
   private hostnameLine() {
+    let hostname = '';
+
     if (this.props.hostname && this.props.bridgeHostname) {
-      return sprintf(messages.pgettext('connection-info', '%(relay)s via %(entry)s'), {
+      hostname = sprintf(messages.pgettext('connection-info', '%(relay)s via %(entry)s'), {
         relay: this.props.hostname,
         entry: this.props.bridgeHostname,
       });
     } else if (this.props.hostname && this.props.entryHostname) {
-      return sprintf(
+      hostname = sprintf(
         // TRANSLATORS: The hostname line displayed below the country on the main screen
         // TRANSLATORS: Available placeholders:
         // TRANSLATORS: %(relay)s - the relay hostname
@@ -163,13 +166,31 @@ export default class ConnectionPanel extends React.Component<IProps> {
           entry: this.props.entryHostname,
         },
       );
+    } else if (this.props.bridgeInfo?.ip) {
+      hostname = sprintf(messages.pgettext('connection-info', '%(relay)s via %(entry)s'), {
+        relay: this.props.hostname,
+      });
     } else if (this.props.bridgeInfo !== undefined) {
-      return sprintf(messages.pgettext('connection-info', '%(relay)s via Custom bridge'), {
+      hostname = sprintf(messages.pgettext('connection-info', '%(relay)s via Custom bridge'), {
         relay: this.props.hostname,
       });
-    } else {
-      return this.props.hostname || '';
+    } else if (this.props.hostname) {
+      hostname = this.props.hostname;
+    }
+
+    if (hostname !== '' && this.props.daita) {
+      hostname = sprintf(
+        // TRANSLATORS: %(hostname)s - The current server the app is connected to, e.g. "se-got-wg-001 using DAITA"
+        // TRANSLATORS: %(daita)s - Will be replaced with "DAITA"
+        messages.pgettext('connection-info', '%(hostname)s using %(daita)s'),
+        {
+          hostname,
+          daita: strings.daita,
+        },
+      );
     }
+
+    return hostname;
   }
 
   private transportLine() {
diff --git a/gui/src/renderer/containers/ConnectionPanelContainer.tsx b/gui/src/renderer/containers/ConnectionPanelContainer.tsx
index 5311f1a8e4..b12902bc5d 100644
--- a/gui/src/renderer/containers/ConnectionPanelContainer.tsx
+++ b/gui/src/renderer/containers/ConnectionPanelContainer.tsx
@@ -94,6 +94,11 @@ const mapStateToProps = (state: IReduxState) => {
       ? tunnelEndpointToObfuscationEndpoint(status.details.endpoint)
       : undefined;
 
+  const daita =
+    ((status.state === 'connected' || status.state === 'connecting') &&
+      status.details?.endpoint.daita) ??
+    false;
+
   return {
     isOpen: state.userInterface.connectionPanelVisible,
     hostname: state.connection.hostname,
@@ -104,6 +109,7 @@ const mapStateToProps = (state: IReduxState) => {
     bridgeInfo,
     outAddress,
     obfuscationEndpoint,
+    daita,
   };
 };