Use hook useTunnelProtocol to get tunnel protocol value

This way we can use its fallback value if
relaySettings.tunnelProtocol is undefined.

3 files changed, 7 insertions, 8 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
index 4b4c019da3..997d3956be 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
@@ -664,9 +664,8 @@ function LockdownMode() {
 }
 
 function TunnelProtocolSetting() {
-  const tunnelProtocol = useSelector((state) =>
-    mapRelaySettingsToProtocol(state.settings.relaySettings),
-  );
+  const tunnelProtocol = useTunnelProtocol();
+
   const relaySettingsUpdater = useRelaySettingsUpdater();
 
   const relaySettings = useSelector((state) => state.settings.relaySettings);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/RelayListContext.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/RelayListContext.tsx
index 3165a95824..693d1ae143 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/RelayListContext.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/RelayListContext.tsx
@@ -92,7 +92,7 @@ export function RelayListContextProvider(props: RelayListContextProviderProps) {
       daita,
       directOnly,
       locationType,
-      relaySettings?.tunnelProtocol ?? 'any',
+      tunnelProtocol,
       relaySettings?.wireguard.useMultihop ?? false,
     );
   }, [
@@ -100,7 +100,7 @@ export function RelayListContextProvider(props: RelayListContextProviderProps) {
     directOnly,
     locationType,
     relayListForEndpointType,
-    relaySettings?.tunnelProtocol,
+    tunnelProtocol,
     relaySettings?.wireguard.useMultihop,
   ]);
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
index 2bf725dc29..c7af9a306b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
@@ -9,7 +9,7 @@ import { useRelaySettingsUpdater } from '../../lib/constraint-updater';
 import { daitaFilterActive, filterSpecialLocations } from '../../lib/filter-locations';
 import { useHistory } from '../../lib/history';
 import { formatHtml } from '../../lib/html-formatter';
-import { useNormalRelaySettings } from '../../lib/relay-settings-hooks';
+import { useNormalRelaySettings, useTunnelProtocol } from '../../lib/relay-settings-hooks';
 import { RoutePath } from '../../lib/routes';
 import { useSelector } from '../../redux/store';
 import { AppNavigationHeader } from '../';
@@ -56,6 +56,7 @@ export default function SelectLocation() {
   const { expandSearchResults } = useRelayListContext();
 
   const relaySettings = useNormalRelaySettings();
+  const tunnelProtocol = useTunnelProtocol();
   const ownership = relaySettings?.ownership ?? Ownership.any;
   const providers = relaySettings?.providers ?? [];
   const filteredProviders = useFilteredProviders(providers, ownership);
@@ -65,7 +66,7 @@ export default function SelectLocation() {
     daita,
     directOnly,
     locationType,
-    relaySettings?.tunnelProtocol ?? 'any',
+    tunnelProtocol,
     relaySettings?.wireguard.useMultihop ?? false,
   );
 
@@ -74,7 +75,6 @@ export default function SelectLocation() {
   const onClose = useCallback(() => history.pop(), [history]);
   const onViewFilter = useCallback(() => history.push(RoutePath.filter), [history]);
 
-  const tunnelProtocol = relaySettings?.tunnelProtocol ?? 'any';
   const bridgeState = useSelector((state) => state.settings.bridgeState);
   const allowEntrySelection =
     (tunnelProtocol === 'openvpn' && bridgeState === 'on') ||