enhancement: better detect apple silicon

Author: ljharb

apps/site/hooks/react-client/useDetectOS.ts

@@ -15,6 +15,32 @@ type UserOSState = {
   architecture: Architecture | '';
 };
 
+// taken from https://github.com/faisalman/ua-parser-js/issues/732#issue-2348848266
+function isAppleSilicon() {
+  try {
+    // Best guess if the device uses Apple Silicon: https://stackoverflow.com/a/65412357
+    const w = document.createElement('canvas').getContext('webgl');
+    if (w == null) {
+      return false;
+    }
+    const d = w.getExtension('WEBGL_debug_renderer_info');
+    const g = (d && w.getParameter(d.UNMASKED_RENDERER_WEBGL)) || '';
+    if (g.match(/Apple/) && !g.match(/Apple GPU/)) {
+      return true;
+    }
+
+    if (
+      w.getSupportedExtensions()?.includes('WEBGL_compressed_texture_s3tc_srgb')
+    ) {
+      return true;
+    }
+  } catch {
+    /**/
+  }
+
+  return false;
+}
+
 const useDetectOS = () => {
   const [userOSState, setUserOSState] = useState<UserOSState>({
     os: 'LOADING',
@@ -41,7 +67,7 @@ const useDetectOS = () => {
         // If there is no getHighEntropyValues API on the Browser or it failed to resolve
         // we attempt to fallback to what the User Agent indicates
         bitness = uaIndicates64 ? '64' : '32',
-        architecture = 'x86',
+        architecture = isAppleSilicon() ? 'arm64' : 'x86',
       }) => {
         setUserOSState(current => ({
           ...current,