3 files changed, 29 insertions, 4 deletions
diff --git a/gui/src/renderer/components/SecuredLabel.tsx b/gui/src/renderer/components/SecuredLabel.tsx
index cda3c5174d..f622c8a847 100644
--- a/gui/src/renderer/components/SecuredLabel.tsx
+++ b/gui/src/renderer/components/SecuredLabel.tsx
@@ -5,8 +5,10 @@ import { messages } from '../../shared/gettext';
 
 export enum SecuredDisplayStyle {
   secured,
+  securedPq,
   blocked,
   securing,
+  securingPq,
   unsecured,
   unsecuring,
   failedToSecure,
@@ -14,8 +16,10 @@ export enum SecuredDisplayStyle {
 
 const securedDisplayStyleColorMap = {
   [SecuredDisplayStyle.securing]: colors.white,
+  [SecuredDisplayStyle.securingPq]: colors.white,
   [SecuredDisplayStyle.unsecuring]: colors.white,
   [SecuredDisplayStyle.secured]: colors.green,
+  [SecuredDisplayStyle.securedPq]: colors.green,
   [SecuredDisplayStyle.blocked]: colors.white,
   [SecuredDisplayStyle.unsecured]: colors.red,
   [SecuredDisplayStyle.failedToSecure]: colors.red,
@@ -45,12 +49,18 @@ function getLabelText(displayStyle: SecuredDisplayStyle) {
     case SecuredDisplayStyle.secured:
       return messages.gettext('SECURE CONNECTION');
 
+    case SecuredDisplayStyle.securedPq:
+      return messages.gettext('QUANTUM SECURE CONNECTION');
+
     case SecuredDisplayStyle.blocked:
       return messages.gettext('BLOCKED CONNECTION');
 
     case SecuredDisplayStyle.securing:
       return messages.gettext('CREATING SECURE CONNECTION');
 
+    case SecuredDisplayStyle.securingPq:
+      return messages.gettext('CREATING QUANTUM SECURE CONNECTION');
+
     case SecuredDisplayStyle.unsecured:
       return messages.gettext('UNSECURED CONNECTION');
 
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx
index c7617bfdda..4d210ed2c2 100644
--- a/gui/src/renderer/components/TunnelControl.tsx
+++ b/gui/src/renderer/components/TunnelControl.tsx
@@ -77,6 +77,7 @@ const SelectedLocationChevron = styled(AppButton.Icon)({
 export default class TunnelControl extends React.Component<ITunnelControlProps> {
   public render() {
     let state = this.props.tunnelState.state;
+    let pq = false;
 
     switch (this.props.tunnelState.state) {
       case 'disconnecting':
@@ -92,14 +93,23 @@ export default class TunnelControl extends React.Component<ITunnelControlProps>
             break;
         }
         break;
+      case 'connecting':
+        if (this.props.tunnelState.details) {
+          pq = this.props.tunnelState.details.endpoint.quantumResistant;
+        }
+        break;
+      case 'connected':
+        pq = this.props.tunnelState.details.endpoint.quantumResistant;
+        break;
     }
 
     switch (state) {
-      case 'connecting':
+      case 'connecting': {
+        const displayStyle = pq ? SecuredDisplayStyle.securingPq : SecuredDisplayStyle.securing;
         return (
           <Wrapper>
             <Body>
-              <Secured displayStyle={SecuredDisplayStyle.securing} />
+              <Secured displayStyle={displayStyle} />
               <Location>
                 {this.renderCountry()}
                 {this.renderCity()}
@@ -112,11 +122,14 @@ export default class TunnelControl extends React.Component<ITunnelControlProps>
             </Footer>
           </Wrapper>
         );
-      case 'connected':
+      }
+
+      case 'connected': {
+        const displayStyle = pq ? SecuredDisplayStyle.securedPq : SecuredDisplayStyle.secured;
         return (
           <Wrapper>
             <Body>
-              <Secured displayStyle={SecuredDisplayStyle.secured} />
+              <Secured displayStyle={displayStyle} />
               <Location>
                 {this.renderCountry()}
                 {this.renderCity()}
@@ -129,6 +142,7 @@ export default class TunnelControl extends React.Component<ITunnelControlProps>
             </Footer>
           </Wrapper>
         );
+      }
 
       case 'error':
         if (
diff --git a/gui/src/shared/daemon-rpc-types.ts b/gui/src/shared/daemon-rpc-types.ts
index 45af1c605e..8bee8003b0 100644
--- a/gui/src/shared/daemon-rpc-types.ts
+++ b/gui/src/shared/daemon-rpc-types.ts
@@ -92,6 +92,7 @@ export interface ITunnelEndpoint {
   address: string;
   protocol: RelayProtocol;
   tunnelType: TunnelType;
+  quantumResistant: boolean;
   proxy?: IProxyEndpoint;
   obfuscationEndpoint?: IObfuscationEndpoint;
   entryEndpoint?: IEndpoint;