fix: select arm64 by default

components/Downloads/Release/BitnessDropdown.tsx

@@ -9,18 +9,23 @@ import Select from '@/components/Common/Select';
 import { useDetectOS } from '@/hooks/react-client';
 import { ReleaseContext } from '@/providers/releaseProvider';
 import { bitnessItems, formatDropdownItems } from '@/util/downloadUtils';
+import { getUserBitnessByArchitecture } from '@/util/getUserBitnessByArchitecture';
 
 const parseNumericBitness = (bitness: string) =>
   /^\d+$/.test(bitness) ? Number(bitness) : bitness;
 
 const BitnessDropdown: FC = () => {
-  const { bitness: userBitness } = useDetectOS();
+  const { bitness: userBitness, architecture: userArchitecture } =
+    useDetectOS();
   const { bitness, os, release, setBitness } = useContext(ReleaseContext);
   const t = useTranslations();
 
   // we also reset the bitness when the OS changes, because different OSs have
   // different bitnesses available
-  useEffect(() => setBitness(userBitness), [setBitness, userBitness]);
+
+  useEffect(() => {
+    setBitness(getUserBitnessByArchitecture(userArchitecture, userBitness));
+  }, [userArchitecture, userBitness]);
 
   // @TODO: We should have a proper utility that gives
   // disabled OSs, Platforms, based on specific criteria

hooks/react-client/__tests__/useDetectOS.test.mjs

@@ -35,6 +35,7 @@ describe('useDetectOS', () => {
       expect(result.current).toStrictEqual({
         os: 'WIN',
         bitness: 64,
+        architecture: '',
       });
     });
   });
@@ -53,6 +54,7 @@ describe('useDetectOS', () => {
       expect(result.current).toStrictEqual({
         os: 'WIN',
         bitness: 64,
+        architecture: '',
       });
     });
   });
@@ -71,6 +73,7 @@ describe('useDetectOS', () => {
       expect(result.current).toStrictEqual({
         os: 'MAC',
         bitness: 86,
+        architecture: '',
       });
     });
   });

hooks/react-client/useDetectOS.ts

@@ -4,33 +4,40 @@ import { useEffect, useState } from 'react';
 
 import type { UserOS } from '@/types/userOS';
 import { detectOS } from '@/util/detectOS';
+import { getArchitecture } from '@/util/getArchitecture';
 import { getBitness } from '@/util/getBitness';
 
 type UserOSState = {
   os: UserOS;
   bitness: number;
+  architecture: string;
 };
 
 const useDetectOS = () => {
   const [userOSState, setUserOSState] = useState<UserOSState>({
     os: 'OTHER',
     bitness: 86,
+    architecture: 'ARM',
   });
 
   useEffect(() => {
-    getBitness().then(bitness => {
-      const userAgent = navigator?.userAgent;
-
-      setUserOSState({
-        os: detectOS(),
-        bitness:
-          bitness === '64' ||
-          userAgent?.includes('WOW64') ||
-          userAgent?.includes('Win64')
-            ? 64
-            : 86,
-      });
-    });
+    Promise.all([getBitness(), getArchitecture()]).then(
+      ([bitness, architecture]) => {
+        const userAgent: string | undefined =
+          (typeof navigator === 'object' && navigator.userAgent) || '';
+        const defaultBitness: number = 86; // Default bitness if unable to determine
+        setUserOSState({
+          os: detectOS(),
+          bitness:
+            bitness === '64' ||
+            userAgent?.includes('WOW64') ||
+            userAgent?.includes('Win64')
+              ? 64
+              : defaultBitness,
+          architecture: architecture ? architecture : '',
+        });
+      }
+    );
   }, []);
 
   return userOSState;

util/__tests__/getUserBitnessByArchitecture.test.mjs

@@ -0,0 +1,13 @@
+import { getUserBitnessByArchitecture } from '@/util/getUserBitnessByArchitecture'; 
+
+describe('getUserBitnessByArchitecture', () => {
+  it('should return "arm64" for arm architecture and 64-bit', () => {
+    const result = getUserBitnessByArchitecture('arm', 64);
+    expect(result).toBe('arm64');
+  });
+
+  it('should return the user bitness for other architectures', () => {
+    const result = getUserBitnessByArchitecture('x86', 32);
+    expect(result).toBe(32);
+  });
+});

util/getArchitecture.ts

@@ -0,0 +1,19 @@
+/// <reference types="user-agent-data-types" />
+
+export const getArchitecture = async () => {
+  // This is necessary to detect Windows 11 on Edge.
+  // [MDN](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/getHighEntropyValues)
+  // [MSFT](https://learn.microsoft.com/en-us/microsoft-edge/web-platform/how-to-detect-win11)
+  if (typeof navigator?.userAgentData?.getHighEntropyValues === 'function') {
+    const entropyValues = navigator.userAgentData.getHighEntropyValues([
+      'architecture',
+    ]);
+
+    // Apparently in some cases this is not a Promise, we can Promisify it.
+    return Promise.resolve(entropyValues)
+      .then(({ architecture }) => architecture)
+      .catch(() => undefined);
+  }
+
+  return undefined;
+};

util/getUserBitnessByArchitecture.ts

@@ -0,0 +1,10 @@
+export const getUserBitnessByArchitecture = (
+  userArchitecture: string,
+  userBitness: number
+) => {
+  if (userArchitecture === 'arm' && userBitness === 64) {
+    return 'arm64';
+  }
+
+  return userBitness;
+};