Make ipv6 conncheck optional, and only display ipv6 when available

src/composables/useConnection.ts

@@ -1,6 +1,6 @@
 import { InjectionKey, Ref, ref } from 'vue';
 import type { Connection } from '@/helpers/connCheck.types';
-import { connCheck } from '@/helpers/connCheck';
+import { connCheckIpv4, connCheckIpv6 } from '@/helpers/connCheck';
 
 //  Keep this outside of the hook to make it a singleton
 const connection = ref({} as Connection);
@@ -14,7 +14,21 @@ const useConnection = () => {
     isError.value = false;
     error.value = undefined;
     try {
-      connection.value = await connCheck();
+      const ipv4Promise = connCheckIpv4();
+      const ipv6Promise = connCheckIpv6();
+
+      // Wait for IPv4 result
+      connection.value = await ipv4Promise;
+
+      // Because IPV6 is not reliably working in socks proxy,
+      // don't wait IPv6 result so that it's non-blocking.
+      ipv6Promise
+        .then((ipv6) => {
+          connection.value = { ...connection.value, ipv6 };
+        })
+        .catch((e) => {
+          console.log(`IPv6 check error: ${e.message}`);
+        });
     } catch (e) {
       console.log({ useConnectionError: e });
       isError.value = true;

src/helpers/connCheck.ts

@@ -4,20 +4,11 @@ import type {
   Ipv4ServerResponse,
 } from '@/helpers/connCheck.types';
 
-/*
-n is an optional parameter to retry the connCheck any number of time.
+export const connCheckIpv4 = async (): Promise<Connection> => {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), 6000);
 
-By default, it will retry twice because after connecting/disconnecting to/from Mullvad server, the first request results in a NetworkError and the second is successful.
-
-It's a workaround for the following bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1706377
-Workaround can be removed when Mullvad Browser 14.0 is released (the bug is fixed!).
-*/
-
-export const connCheck = async (n = 3): Promise<Connection> => {
   try {
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), 6000);
-
     const response = await fetch('https://ipv4.am.i.mullvad.net/json', {
       method: 'GET',
       headers: {
@@ -28,34 +19,34 @@ export const connCheck = async (n = 3): Promise<Connection> => {
     clearTimeout(timeoutId);
     const data: Ipv4ServerResponse = await response.json();
 
-    let ipv6;
-    try {
-      const ipv6Response = await fetch('https://ipv6.am.i.mullvad.net/json', {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      });
-      const ipv6Data: AmIMullvadServerResponse = await ipv6Response.json();
-      ipv6 = ipv6Data.ip;
-    } catch (e) {
-      if (__DEV__) {
-        console.log(`[conCheck IPv6]: Error trying to get ipv6 data: ${(e as Error).message}`);
-      }
-    }
-
     return {
       city: data.city,
       country: data.country,
       ip: data.ip,
-      ipv6,
       server: data.mullvad_exit_ip_hostname,
       protocol: data.mullvad_server_type,
       provider: data.organization,
       isMullvad: data.mullvad_exit_ip ?? false,
     };
   } catch (error) {
-    if (n === 1) throw new Error('Connection check failed.');
-    return connCheck(n - 1);
+    throw new Error('IPv4 connection check failed.');
+  }
+};
+
+export const connCheckIpv6 = async (): Promise<string | undefined> => {
+  try {
+    const response = await fetch('https://ipv6.am.i.mullvad.net/json', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    const data: AmIMullvadServerResponse = await response.json();
+    return data.ip;
+  } catch (e) {
+    if (__DEV__) {
+      console.log(`[conCheck IPv6]: Error trying to get ipv6 data: ${(e as Error).message}`);
+    }
+    return undefined;
   }
 };