Merge branch 'pq-gui-setting'

2 files changed, 67 insertions, 0 deletions

diff --git a/gui/src/renderer/components/SecuredLabel.tsx b/gui/src/renderer/components/SecuredLabel.tsx
index f622c8a847..736297b480 100644
--- a/gui/src/renderer/components/SecuredLabel.tsx
+++ b/gui/src/renderer/components/SecuredLabel.tsx
@@ -50,6 +50,7 @@ function getLabelText(displayStyle: SecuredDisplayStyle) {
       return messages.gettext('SECURE CONNECTION');
 
     case SecuredDisplayStyle.securedPq:
+      // TRANSLATORS: The connection is secure and isn't breakable by quantum computers.
       return messages.gettext('QUANTUM SECURE CONNECTION');
 
     case SecuredDisplayStyle.blocked:
@@ -59,6 +60,7 @@ function getLabelText(displayStyle: SecuredDisplayStyle) {
       return messages.gettext('CREATING SECURE CONNECTION');
 
     case SecuredDisplayStyle.securingPq:
+      // TRANSLATORS: Creating a secure connection that isn't breakable by quantum computers.
       return messages.gettext('CREATING QUANTUM SECURE CONNECTION');
 
     case SecuredDisplayStyle.unsecured:
diff --git a/gui/src/renderer/components/WireguardSettings.tsx b/gui/src/renderer/components/WireguardSettings.tsx
index 18c39a7396..edcc397e4a 100644
--- a/gui/src/renderer/components/WireguardSettings.tsx
+++ b/gui/src/renderer/components/WireguardSettings.tsx
@@ -107,6 +107,10 @@ export default function WireguardSettings() {
                 </Cell.Group>
 
                 <Cell.Group>
+                  <QuantumResistantSetting />
+                </Cell.Group>
+
+                <Cell.Group>
                   <MultihopSetting />
                 </Cell.Group>
 
@@ -564,3 +568,64 @@ function MtuSetting() {
     </AriaInputGroup>
   );
 }
+
+function QuantumResistantSetting() {
+  const { setWireguardQuantumResistant } = useAppContext();
+  const quantumResistant = useSelector((state) => state.settings.wireguard.quantumResistant);
+
+  const items: SelectorItem<boolean>[] = useMemo(
+    () => [
+      {
+        label: messages.gettext('On'),
+        value: true,
+      },
+      {
+        label: messages.gettext('Off'),
+        value: false,
+      },
+    ],
+    [],
+  );
+
+  const selectQuantumResistant = useCallback(
+    async (quantumResistant: boolean | null) => {
+      await setWireguardQuantumResistant(quantumResistant ?? undefined);
+    },
+    [setWireguardQuantumResistant],
+  );
+
+  return (
+    <AriaInputGroup>
+      <StyledSelectorContainer>
+        <Selector
+          title={
+            // TRANSLATORS: The title for the WireGuard quantum resistance selector. This setting
+            // TRANSLATORS: makes the cryptography resistant to the future abilities of quantum
+            // TRANSLATORS: computers.
+            messages.pgettext('wireguard-settings-view', 'Quantum-resistant tunnel')
+          }
+          details={
+            <>
+              <ModalMessage>
+                {messages.pgettext(
+                  'wireguard-settings-view',
+                  'This feature makes the WireGuard tunnel resistant to potential attacks from quantum computers.',
+                )}
+              </ModalMessage>
+              <ModalMessage>
+                {messages.pgettext(
+                  'wireguard-settings-view',
+                  'It does this by performing an extra key exchange using a quantum safe algorithm and mixing the result into WireGuard’s regular encryption. This extra step uses approximately 500 kiB of traffic every time a new tunnel is established.',
+                )}
+              </ModalMessage>
+            </>
+          }
+          items={items}
+          value={quantumResistant ?? null}
+          onSelect={selectQuantumResistant}
+          automaticValue={null}
+        />
+      </StyledSelectorContainer>
+    </AriaInputGroup>
+  );
+}