diff options
4 files changed, 32 insertions, 2 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx index 9df8e1e143..b5362c21cb 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx @@ -6,7 +6,7 @@ import { strings } from '../../../../shared/constants'; import { messages } from '../../../../shared/gettext'; import { useAppContext } from '../../../context'; import { useScrollToListItem } from '../../../hooks'; -import { Button, Flex } from '../../../lib/components'; +import { Button, Flex, Icon, Text } from '../../../lib/components'; import { useHistory } from '../../../lib/history'; import { useBoolean } from '../../../lib/utility-hooks'; import { useSelector } from '../../../redux/store'; @@ -21,6 +21,7 @@ import { NavigationScrollbars } from '../../NavigationScrollbars'; import PageSlider from '../../PageSlider'; import SettingsHeader, { HeaderSubTitle, HeaderTitle } from '../../SettingsHeader'; import { ToggleListItem } from '../../toggle-list-item'; +import { useShowDaitaMultihopInfo } from './hooks'; const StyledHeaderSubTitle = styled(HeaderSubTitle)({ display: 'inline-block', @@ -35,6 +36,7 @@ const PATH_PREFIX = process.env.NODE_ENV === 'development' ? '../' : ''; export function DaitaSettingsView() { const { pop } = useHistory(); + const showDaitaMultihopInfo = useShowDaitaMultihopInfo(); return ( <BackAction action={pop}> @@ -46,6 +48,17 @@ export function DaitaSettingsView() { <NavigationScrollbars> <SettingsHeader> <HeaderTitle>{strings.daita}</HeaderTitle> + {showDaitaMultihopInfo && ( + <Flex $gap="small" $alignItems="center"> + <Icon icon="info-circle" color="whiteOnBlue60" size="small" /> + <Text variant="labelTiny" color="whiteAlpha60"> + {messages.pgettext( + 'wireguard-settings-view', + 'Multihop is being used to enable DAITA for your selected location', + )} + </Text> + </Flex> + )} <PageSlider content={[ <React.Fragment key="without-daita"> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/hooks/index.ts new file mode 100644 index 0000000000..ca6c191509 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/hooks/index.ts @@ -0,0 +1 @@ +export * from './use-show-daita-multihop-info'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/hooks/use-show-daita-multihop-info.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/hooks/use-show-daita-multihop-info.ts new file mode 100644 index 0000000000..79bef1644a --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/hooks/use-show-daita-multihop-info.ts @@ -0,0 +1,10 @@ +import { FeatureIndicator } from '../../../../../shared/daemon-rpc-types'; +import { useSelector } from '../../../../redux/store'; + +export const useShowDaitaMultihopInfo = () => { + const tunnelState = useSelector((state) => state.connection.status); + return ( + tunnelState.state === 'connected' && + tunnelState.featureIndicators?.includes(FeatureIndicator.daitaMultihop) + ); +}; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/hooks/use-get-feature-indicator/useGetFeatureIndicator.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/hooks/use-get-feature-indicator/useGetFeatureIndicator.ts index 5e09a00d54..52557c64a2 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/hooks/use-get-feature-indicator/useGetFeatureIndicator.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/hooks/use-get-feature-indicator/useGetFeatureIndicator.ts @@ -13,6 +13,12 @@ export const useGetFeatureIndicator = () => { const gotoDaitaFeature = React.useCallback(() => { history.push(RoutePath.daitaSettings, { transition: TransitionType.show, + }); + }, [history]); + + const gotoEnableDaitaFeature = React.useCallback(() => { + history.push(RoutePath.daitaSettings, { + transition: TransitionType.show, options: [ { type: 'scroll-to-anchor', @@ -149,7 +155,7 @@ export const useGetFeatureIndicator = () => { }, [history]); const featureMap: Record<FeatureIndicator, { label: string; onClick?: () => void }> = { - [FeatureIndicator.daita]: { label: strings.daita, onClick: gotoDaitaFeature }, + [FeatureIndicator.daita]: { label: strings.daita, onClick: gotoEnableDaitaFeature }, [FeatureIndicator.daitaMultihop]: { label: sprintf( // TRANSLATORS: This is used as a feature indicator to show that DAITA is enabled through |