Move EnableIpv6 component to separate folder

4 files changed, 65 insertions, 47 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/VpnSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/VpnSettingsView.tsx
index 50a7f004a3..3071fd41ff 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/VpnSettingsView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/VpnSettingsView.tsx
@@ -42,7 +42,7 @@ import { NavigationContainer } from '../../NavigationContainer';
 import { NavigationListItem } from '../../NavigationListItem';
 import { NavigationScrollbars } from '../../NavigationScrollbars';
 import SettingsHeader, { HeaderTitle } from '../../SettingsHeader';
-import { AllowLan, AutoConnect, AutoStart, DnsBlockers } from './components';
+import { AllowLan, AutoConnect, AutoStart, DnsBlockers, EnableIpv6 } from './components';
 
 const StyledInfoButton = styled(InfoButton)({
   marginRight: spacings.medium,
@@ -118,52 +118,6 @@ export function VpnSettingsView() {
   );
 }
 
-function EnableIpv6() {
-  const enableIpv6 = useSelector((state) => state.settings.enableIpv6);
-  const { setEnableIpv6: setEnableIpv6Impl } = useAppContext();
-
-  const setEnableIpv6 = useCallback(
-    async (enableIpv6: boolean) => {
-      try {
-        await setEnableIpv6Impl(enableIpv6);
-      } catch (e) {
-        const error = e as Error;
-        log.error('Failed to update enable IPv6', error.message);
-      }
-    },
-    [setEnableIpv6Impl],
-  );
-
-  return (
-    <AriaInputGroup>
-      <Cell.Container>
-        <AriaLabel>
-          <Cell.InputLabel>{messages.pgettext('vpn-settings-view', 'Enable IPv6')}</Cell.InputLabel>
-        </AriaLabel>
-        <AriaDetails>
-          <StyledInfoButton>
-            <ModalMessage>
-              {messages.pgettext(
-                'vpn-settings-view',
-                'When this feature is enabled, IPv6 can be used alongside IPv4 in the VPN tunnel to communicate with internet services.',
-              )}
-            </ModalMessage>
-            <ModalMessage>
-              {messages.pgettext(
-                'vpn-settings-view',
-                'IPv4 is always enabled and the majority of websites and applications use this protocol. We do not recommend enabling IPv6 unless you know you need it.',
-              )}
-            </ModalMessage>
-          </StyledInfoButton>
-        </AriaDetails>
-        <AriaInput>
-          <Cell.Switch isOn={enableIpv6} onChange={setEnableIpv6} />
-        </AriaInput>
-      </Cell.Container>
-    </AriaInputGroup>
-  );
-}
-
 function KillSwitchInfo() {
   const [killSwitchInfoVisible, showKillSwitchInfo, hideKillSwitchInfo] = useBoolean(false);
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6/EnableIpv6.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6/EnableIpv6.tsx
new file mode 100644
index 0000000000..00f2d6f370
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6/EnableIpv6.tsx
@@ -0,0 +1,62 @@
+import { useCallback } from 'react';
+import styled from 'styled-components';
+
+import { messages } from '../../../../../../shared/gettext';
+import log from '../../../../../../shared/logging';
+import { useAppContext } from '../../../../../context';
+import { spacings } from '../../../../../lib/foundations';
+import { useSelector } from '../../../../../redux/store';
+import { AriaDetails, AriaInput, AriaInputGroup, AriaLabel } from '../../../../AriaGroup';
+import * as Cell from '../../../../cell';
+import InfoButton from '../../../../InfoButton';
+import { ModalMessage } from '../../../../Modal';
+
+const StyledInfoButton = styled(InfoButton)({
+  marginRight: spacings.medium,
+});
+
+export function EnableIpv6() {
+  const enableIpv6 = useSelector((state) => state.settings.enableIpv6);
+  const { setEnableIpv6: setEnableIpv6Impl } = useAppContext();
+
+  const setEnableIpv6 = useCallback(
+    async (enableIpv6: boolean) => {
+      try {
+        await setEnableIpv6Impl(enableIpv6);
+      } catch (e) {
+        const error = e as Error;
+        log.error('Failed to update enable IPv6', error.message);
+      }
+    },
+    [setEnableIpv6Impl],
+  );
+
+  return (
+    <AriaInputGroup>
+      <Cell.Container>
+        <AriaLabel>
+          <Cell.InputLabel>{messages.pgettext('vpn-settings-view', 'Enable IPv6')}</Cell.InputLabel>
+        </AriaLabel>
+        <AriaDetails>
+          <StyledInfoButton>
+            <ModalMessage>
+              {messages.pgettext(
+                'vpn-settings-view',
+                'When this feature is enabled, IPv6 can be used alongside IPv4 in the VPN tunnel to communicate with internet services.',
+              )}
+            </ModalMessage>
+            <ModalMessage>
+              {messages.pgettext(
+                'vpn-settings-view',
+                'IPv4 is always enabled and the majority of websites and applications use this protocol. We do not recommend enabling IPv6 unless you know you need it.',
+              )}
+            </ModalMessage>
+          </StyledInfoButton>
+        </AriaDetails>
+        <AriaInput>
+          <Cell.Switch isOn={enableIpv6} onChange={setEnableIpv6} />
+        </AriaInput>
+      </Cell.Container>
+    </AriaInputGroup>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6/index.ts
new file mode 100644
index 0000000000..75ca28c325
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6/index.ts
@@ -0,0 +1 @@
+export * from './EnableIpv6';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/index.ts
index 14b08e40ba..377829e9be 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/index.ts
@@ -2,3 +2,4 @@ export * from './allow-lan';
 export * from './auto-connect';
 export * from './auto-start';
 export * from './dns-blockers';
+export * from './enable-ipv6';