Add daita toggle

11 files changed, 142 insertions, 37 deletions

diff --git a/gui/src/main/daemon-rpc.ts b/gui/src/main/daemon-rpc.ts
index 531ec80ced..91c63d268c 100644
--- a/gui/src/main/daemon-rpc.ts
+++ b/gui/src/main/daemon-rpc.ts
@@ -37,6 +37,7 @@ import {
   IAppVersionInfo,
   IBridgeConstraints,
   ICustomList,
+  IDaitaSettings,
   IDevice,
   IDeviceRemoval,
   IDnsOptions,
@@ -561,6 +562,15 @@ export class DaemonRpc {
     await this.callEmpty(this.client.updateDevice);
   }
 
+  public async setDaitaSettings(daitaSettings: IDaitaSettings): Promise<void> {
+    const grpcDaitaSettings = new grpcTypes.DaitaSettings();
+    grpcDaitaSettings.setEnabled(daitaSettings.enabled);
+    await this.call<grpcTypes.DaitaSettings, Empty>(
+      this.client.setDaitaSettings,
+      grpcDaitaSettings,
+    );
+  }
+
   public async listDevices(accountToken: AccountToken): Promise<Array<IDevice>> {
     try {
       const response = await this.callString<grpcTypes.DeviceList>(
@@ -1333,6 +1343,7 @@ function convertFromTunnelOptions(tunnelOptions: grpcTypes.TunnelOptions.AsObjec
       quantumResistant: convertFromQuantumResistantState(
         tunnelOptions.wireguard?.quantumResistant?.state,
       ),
+      daita: tunnelOptions.wireguard!.daita,
     },
     generic: {
       enableIpv6: tunnelOptions.generic!.enableIpv6,
diff --git a/gui/src/main/settings.ts b/gui/src/main/settings.ts
index 8bf60d9108..22238c72c4 100644
--- a/gui/src/main/settings.ts
+++ b/gui/src/main/settings.ts
@@ -107,6 +107,9 @@ export default class Settings implements Readonly<ISettings> {
       const settings = await fs.readFile(path);
       return this.daemonRpc.applyJsonSettings(settings.toString());
     });
+    IpcMainEventChannel.settings.handleSetDaitaSettings((daitaSettings) => {
+      return this.daemonRpc.setDaitaSettings(daitaSettings);
+    });
 
     IpcMainEventChannel.guiSettings.handleSetEnableSystemNotifications((flag: boolean) => {
       this.guiSettings.enableSystemNotifications = flag;
diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index a8c1901ae8..92c4cb5698 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -16,6 +16,7 @@ import {
   IAccountData,
   IAppVersionInfo,
   ICustomList,
+  IDaitaSettings,
   IDevice,
   IDeviceRemoval,
   IDnsOptions,
@@ -340,6 +341,8 @@ export default class AppRenderer {
     IpcRendererEventChannel.windowsSplitTunneling.forgetManuallyAddedApplication(application);
   public setObfuscationSettings = (obfuscationSettings: ObfuscationSettings) =>
     IpcRendererEventChannel.settings.setObfuscationSettings(obfuscationSettings);
+  public setDaitaSettings = (daitaSettings: IDaitaSettings) =>
+    IpcRendererEventChannel.settings.setDaitaSettings(daitaSettings);
   public collectProblemReport = (toRedact: string | undefined) =>
     IpcRendererEventChannel.problemReport.collectLogs(toRedact);
   public viewLog = (path: string) => IpcRendererEventChannel.problemReport.viewLog(path);
@@ -812,6 +815,7 @@ export default class AppRenderer {
     reduxSettings.updateWireguardQuantumResistant(
       newSettings.tunnelOptions.wireguard.quantumResistant,
     );
+    reduxSettings.updateWireguardDaita(newSettings.tunnelOptions.wireguard.daita);
     reduxSettings.updateBridgeState(newSettings.bridgeState);
     reduxSettings.updateDnsOptions(newSettings.tunnelOptions.dns);
     reduxSettings.updateSplitTunnelingState(newSettings.splitTunnel.enableExclusions);
diff --git a/gui/src/renderer/components/BetaLabel.tsx b/gui/src/renderer/components/BetaLabel.tsx
deleted file mode 100644
index ca19a9ef4b..0000000000
--- a/gui/src/renderer/components/BetaLabel.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import styled from 'styled-components';
-
-import { colors } from '../../config.json';
-import { messages } from '../../shared/gettext';
-
-const StyledBetaLabel = styled.span({
-  display: 'inline-block',
-  fontFamily: 'Open Sans',
-  color: colors.blue,
-  fontSize: '13px',
-  fontWeight: 800,
-  lineHeight: '20px',
-  padding: '2px 0',
-  background: colors.yellow,
-  borderRadius: '5px',
-  width: '50px',
-  textAlign: 'center',
-});
-
-interface IBetaLabelProps {
-  className?: string;
-}
-
-export default function BetaLabel(props: IBetaLabelProps) {
-  return <StyledBetaLabel {...props}>{messages.gettext('BETA')}</StyledBetaLabel>;
-}
diff --git a/gui/src/renderer/components/WireguardSettings.tsx b/gui/src/renderer/components/WireguardSettings.tsx
index 7cd93b98bd..892df0afbc 100644
--- a/gui/src/renderer/components/WireguardSettings.tsx
+++ b/gui/src/renderer/components/WireguardSettings.tsx
@@ -22,7 +22,7 @@ import * as AppButton from './AppButton';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
 import Selector, { SelectorItem, SelectorWithCustomItem } from './cell/Selector';
-import { InfoIcon } from './InfoButton';
+import InfoButton from './InfoButton';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
 import { ModalAlert, ModalAlertType, ModalMessage } from './Modal';
@@ -34,6 +34,7 @@ import {
   TitleBarItem,
 } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
+import YellowLabel from './YellowLabel';
 
 const MIN_WIREGUARD_MTU_VALUE = 1280;
 const MAX_WIREGUARD_MTU_VALUE = 1420;
@@ -44,22 +45,14 @@ function mapPortToSelectorItem(value: number): SelectorItem<number> {
   return { label: value.toString(), value };
 }
 
-export const StyledContent = styled.div({
+const StyledContent = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
   marginBottom: '2px',
 });
 
-export const StyledCellIcon = styled(Cell.UntintedIcon)({
-  marginRight: '8px',
-});
-
-export const StyledInfoIcon = styled(InfoIcon)({
-  marginRight: '16px',
-});
-
-export const StyledSelectorContainer = styled.div({
+const StyledSelectorContainer = styled.div({
   flex: 0,
 });
 
@@ -108,6 +101,10 @@ export default function WireguardSettings() {
                 </Cell.Group>
 
                 <Cell.Group>
+                  <DaitaSettings />
+                </Cell.Group>
+
+                <Cell.Group>
                   <QuantumResistantSetting />
                 </Cell.Group>
 
@@ -558,6 +555,69 @@ function MtuSetting() {
   );
 }
 
+function DaitaSettings() {
+  const { setDaitaSettings } = useAppContext();
+  const daita = useSelector((state) => state.settings.wireguard.daita);
+
+  const [confirmationDialogVisible, showConfirmationDialog, hideConfirmationDialog] = useBoolean();
+
+  const setDaita = useCallback((value: boolean) => {
+    if (value) {
+      showConfirmationDialog();
+    } else {
+      void setDaitaSettings({ enabled: value });
+    }
+  }, []);
+
+  const confirmDaita = useCallback(() => {
+    void setDaitaSettings({ enabled: true });
+    hideConfirmationDialog();
+  }, []);
+
+  return (
+    <>
+      <AriaInputGroup>
+        <Cell.Container>
+          <AriaLabel>
+            <Cell.InputLabel>
+              DAITA
+              <YellowLabel>{messages.gettext('BETA')}</YellowLabel>
+            </Cell.InputLabel>
+          </AriaLabel>
+          <InfoButton
+            message={messages.pgettext(
+              'wireguard-settings-view',
+              'When this feature is enabled it stops the device from contacting certain domains or websites known for distributing ads, malware, trackers and more.',
+            )}></InfoButton>
+          <AriaInput>
+            <Cell.Switch isOn={daita?.enabled ?? false} onChange={setDaita} />
+          </AriaInput>
+        </Cell.Container>
+      </AriaInputGroup>
+      <ModalAlert
+        isOpen={confirmationDialogVisible}
+        type={ModalAlertType.caution}
+        message={
+          // TRANSLATORS: Warning text in a dialog that is displayed after a setting is toggled.
+          messages.pgettext(
+            'wireguard-settings-view',
+            "This feature isn't available on all servers. You might need to change location after enabling.",
+          )
+        }
+        buttons={[
+          <AppButton.BlueButton key="confirm" onClick={confirmDaita}>
+            {messages.gettext('Enable anyway')}
+          </AppButton.BlueButton>,
+          <AppButton.BlueButton key="back" onClick={hideConfirmationDialog}>
+            {messages.gettext('Back')}
+          </AppButton.BlueButton>,
+        ]}
+        close={hideConfirmationDialog}
+      />
+    </>
+  );
+}
+
 function QuantumResistantSetting() {
   const { setWireguardQuantumResistant } = useAppContext();
   const quantumResistant = useSelector((state) => state.settings.wireguard.quantumResistant);
diff --git a/gui/src/renderer/components/YellowLabel.tsx b/gui/src/renderer/components/YellowLabel.tsx
new file mode 100644
index 0000000000..55059e223f
--- /dev/null
+++ b/gui/src/renderer/components/YellowLabel.tsx
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+import { colors } from '../../config.json';
+
+export default styled.span({
+  display: 'inline-block',
+  fontFamily: 'Open Sans',
+  color: colors.blue,
+  fontSize: '12px',
+  fontWeight: 800,
+  lineHeight: '20px',
+  padding: '1px 8px',
+  marginLeft: '8px',
+  background: colors.yellow,
+  borderRadius: '5px',
+  textAlign: 'center',
+  verticalAlign: 'middle',
+});
diff --git a/gui/src/renderer/components/cell/Label.tsx b/gui/src/renderer/components/cell/Label.tsx
index 729b7dc31d..f74e57b39c 100644
--- a/gui/src/renderer/components/cell/Label.tsx
+++ b/gui/src/renderer/components/cell/Label.tsx
@@ -8,6 +8,8 @@ import { CellButton } from './CellButton';
 import { CellDisabledContext } from './Container';
 
 const StyledLabel = styled.div<{ disabled: boolean }>(buttonText, (props) => ({
+  display: 'flex',
+  alignItems: 'center',
   margin: '10px 0',
   flex: 1,
   color: props.disabled ? colors.white40 : colors.white,
diff --git a/gui/src/renderer/redux/settings/actions.ts b/gui/src/renderer/redux/settings/actions.ts
index aa4e460e6f..ba6e4ce5a8 100644
--- a/gui/src/renderer/redux/settings/actions.ts
+++ b/gui/src/renderer/redux/settings/actions.ts
@@ -4,6 +4,7 @@ import {
   ApiAccessMethodSettings,
   BridgeState,
   CustomLists,
+  IDaitaSettings,
   IDnsOptions,
   IWireguardEndpointData,
   ObfuscationSettings,
@@ -77,6 +78,11 @@ export interface IUpdateWireguardQuantumResistantAction {
   quantumResistant?: boolean;
 }
 
+export interface IUpdateWireguardDaitaAction {
+  type: 'UPDATE_WIREGUARD_DAITA';
+  daita?: IDaitaSettings;
+}
+
 export interface IUpdateAutoStartAction {
   type: 'UPDATE_AUTO_START';
   autoStart: boolean;
@@ -136,6 +142,7 @@ export type SettingsAction =
   | IUpdateOpenVpnMssfixAction
   | IUpdateWireguardMtuAction
   | IUpdateWireguardQuantumResistantAction
+  | IUpdateWireguardDaitaAction
   | IUpdateAutoStartAction
   | IUpdateDnsOptionsAction
   | IUpdateSplitTunnelingStateAction
@@ -245,6 +252,13 @@ function updateWireguardQuantumResistant(
   };
 }
 
+function updateWireguardDaita(daita?: IDaitaSettings): IUpdateWireguardDaitaAction {
+  return {
+    type: 'UPDATE_WIREGUARD_DAITA',
+    daita,
+  };
+}
+
 function updateAutoStart(autoStart: boolean): IUpdateAutoStartAction {
   return {
     type: 'UPDATE_AUTO_START',
@@ -326,6 +340,7 @@ export default {
   updateOpenVpnMssfix,
   updateWireguardMtu,
   updateWireguardQuantumResistant,
+  updateWireguardDaita,
   updateAutoStart,
   updateDnsOptions,
   updateSplitTunnelingState,
diff --git a/gui/src/renderer/redux/settings/reducers.ts b/gui/src/renderer/redux/settings/reducers.ts
index 3c502ec103..2f8020ebf7 100644
--- a/gui/src/renderer/redux/settings/reducers.ts
+++ b/gui/src/renderer/redux/settings/reducers.ts
@@ -7,6 +7,7 @@ import {
   BridgeType,
   CustomLists,
   CustomProxy,
+  IDaitaSettings,
   IDnsOptions,
   IpVersion,
   IWireguardEndpointData,
@@ -109,6 +110,7 @@ export interface ISettingsReduxState {
   wireguard: {
     mtu?: number;
     quantumResistant?: boolean;
+    daita?: IDaitaSettings;
   };
   dns: IDnsOptions;
   splitTunneling: boolean;
@@ -271,6 +273,14 @@ export default function (
           quantumResistant: action.quantumResistant,
         },
       };
+    case 'UPDATE_WIREGUARD_DAITA':
+      return {
+        ...state,
+        wireguard: {
+          ...state.wireguard,
+          daita: action.daita,
+        },
+      };
 
     case 'UPDATE_AUTO_START':
       return {
diff --git a/gui/src/shared/daemon-rpc-types.ts b/gui/src/shared/daemon-rpc-types.ts
index 738eef5e95..fa4f53090b 100644
--- a/gui/src/shared/daemon-rpc-types.ts
+++ b/gui/src/shared/daemon-rpc-types.ts
@@ -143,6 +143,7 @@ export interface ITunnelEndpoint {
   proxy?: IProxyEndpoint;
   obfuscationEndpoint?: IObfuscationEndpoint;
   entryEndpoint?: IEndpoint;
+  daita: boolean;
 }
 
 export interface IEndpoint {
@@ -320,6 +321,7 @@ export interface ITunnelOptions {
   wireguard: {
     mtu?: number;
     quantumResistant?: boolean;
+    daita?: IDaitaSettings;
   };
   generic: {
     enableIpv6: boolean;
@@ -503,6 +505,10 @@ export interface RelayOverride {
   ipv6AddrIn?: string;
 }
 
+export interface IDaitaSettings {
+  enabled: boolean;
+}
+
 export function parseSocketAddress(socketAddrStr: string): ISocketAddress {
   const re = new RegExp(/(.+):(\d+)$/);
   const matches = socketAddrStr.match(re);
diff --git a/gui/src/shared/ipc-schema.ts b/gui/src/shared/ipc-schema.ts
index d90957764e..561ec924a0 100644
--- a/gui/src/shared/ipc-schema.ts
+++ b/gui/src/shared/ipc-schema.ts
@@ -14,6 +14,7 @@ import {
   IAccountData,
   IAppVersionInfo,
   ICustomList,
+  IDaitaSettings,
   IDevice,
   IDeviceRemoval,
   IDnsOptions,
@@ -192,6 +193,7 @@ export const ipcSchema = {
     testApiAccessMethodById: invoke<string, boolean>(),
     testCustomApiAccessMethod: invoke<CustomProxy, boolean>(),
     clearAllRelayOverrides: invoke<void, void>(),
+    setDaitaSettings: invoke<IDaitaSettings, void>(),
   },
   guiSettings: {
     '': notifyRenderer<IGuiSettingsState>(),