Fixed bug where macos chrome would get flagged as safari

package-lock.json

@@ -12,6 +12,7 @@
         "@fontsource/vollkorn": "^4.5.10",
         "@fontsource/zen-maru-gothic": "^4.5.11",
         "@tippyjs/react": "^4.2.6",
+        "@types/ua-parser-js": "^0.7.36",
         "autoprefixer": "^10.4.7",
         "graphql-request": "^4.3.0",
         "markdown-to-jsx": "^7.1.7",
@@ -23,7 +24,8 @@
         "react-hot-keys": "^2.7.2",
         "react-swipeable": "^7.0.0",
         "tippy.js": "^6.3.7",
-        "turndown": "^7.1.1"
+        "turndown": "^7.1.1",
+        "ua-parser-js": "^1.0.2"
       },
       "devDependencies": {
         "@graphql-codegen/cli": "^2.9.1",
@@ -2376,6 +2378,11 @@
       "integrity": "sha512-N8Ad4e3oJxh9n9BiZx9cbe/0M3kqDpOTm2wzj13wdDUxDPjfjloWIJaquZzWE1cYTAHpjOH3rcTnXQdpEfS/SQ==",
       "dev": true
     },
+    "node_modules/@types/ua-parser-js": {
+      "version": "0.7.36",
+      "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz",
+      "integrity": "sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ=="
+    },
     "node_modules/@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -4468,6 +4475,25 @@
       "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==",
       "dev": true
     },
+    "node_modules/fbjs/node_modules/ua-parser-js": {
+      "version": "0.7.31",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
+      "integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        }
+      ],
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -7775,10 +7801,9 @@
       }
     },
     "node_modules/ua-parser-js": {
-      "version": "0.7.31",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.2.tgz",
-      "integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==",
+      "integrity": "sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -10020,6 +10045,11 @@
       "integrity": "sha512-N8Ad4e3oJxh9n9BiZx9cbe/0M3kqDpOTm2wzj13wdDUxDPjfjloWIJaquZzWE1cYTAHpjOH3rcTnXQdpEfS/SQ==",
       "dev": true
     },
+    "@types/ua-parser-js": {
+      "version": "0.7.36",
+      "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz",
+      "integrity": "sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ=="
+    },
     "@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -11602,6 +11632,14 @@
         "promise": "^7.1.1",
         "setimmediate": "^1.0.5",
         "ua-parser-js": "^0.7.30"
+      },
+      "dependencies": {
+        "ua-parser-js": {
+          "version": "0.7.31",
+          "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
+          "integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==",
+          "dev": true
+        }
       }
     },
     "fbjs-css-vars": {
@@ -14035,10 +14073,9 @@
       "dev": true
     },
     "ua-parser-js": {
-      "version": "0.7.31",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.2.tgz",
-      "integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==",
+      "integrity": "sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg=="
-      "dev": true
     },
     "unbox-primitive": {
       "version": "1.0.2",

package.json

@@ -22,6 +22,7 @@
     "@fontsource/vollkorn": "^4.5.10",
     "@fontsource/zen-maru-gothic": "^4.5.11",
     "@tippyjs/react": "^4.2.6",
+    "@types/ua-parser-js": "^0.7.36",
     "autoprefixer": "^10.4.7",
     "graphql-request": "^4.3.0",
     "markdown-to-jsx": "^7.1.7",
@@ -33,7 +34,8 @@
     "react-hot-keys": "^2.7.2",
     "react-swipeable": "^7.0.0",
     "tippy.js": "^6.3.7",
-    "turndown": "^7.1.1"
+    "turndown": "^7.1.1",
+    "ua-parser-js": "^1.0.2"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^2.9.1",

src/components/AppLayout.tsx

@@ -28,6 +28,7 @@ import { OpenGraph } from "helpers/openGraph";
 import { getDefaultPreferredLanguages } from "helpers/locales";
 import useIsClient from "hooks/useIsClient";
 import { useBoolean } from "hooks/useBoolean";
+import UAParser from "ua-parser-js";
 
 /*
  *                                         ╭─────────────╮
@@ -198,11 +199,9 @@ export const AppLayout = ({
     useBoolean(false);
   const isSafari = useMemo<boolean>(() => {
     if (isClient) {
-      const useAgent = navigator.userAgent.toLowerCase();
+      const parser = new UAParser();
       return (
-        useAgent.includes("safari") ||
+        parser.getBrowser().name === "Safari" || parser.getOS().name === "iOS"
-        useAgent.includes("iphone") ||
-        useAgent.includes("ipad")
       );
     }
     return false;