Add disclaimer about supported browsers (#39)

Fixes #37
evertonstz · Apr 23, 2024 · 4db18be · 4db18be
1 parent be6b93d
commit 4db18be
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "lodash": "^4.17.21",
     "lucide-react": "^0.352.0",
     "react": "^18.2.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/MainContent/MainContent.tsx b/src/components/MainContent/MainContent.tsx
@@ -1,6 +1,8 @@
 import { useDevicesLocalStorage } from '@/hooks';
 import { Pax } from '@/pax';
+import { EarthIcon } from 'lucide-react';
 import { useState } from 'react';
+import { isChrome, isChromium, isEdgeChromium } from 'react-device-detect';
 
 import DevicesModal from '../DevicesModal';
 import { NoSelectedDevice } from './NoSelectedDevice';
@@ -14,6 +16,16 @@ const MainContent = () => {
   const renderDevicesContent = (
     currentDevice: Pax.lib.PaxSerial | undefined,
   ) => {
+    if (!(isChrome || isChromium || isEdgeChromium)) {
+      return (
+        <div className="mx-auto place-content-center">
+          <div className="flex justify-center">
+            <EarthIcon size={175} opacity={0.3} />
+          </div>
+          <h1>Unsupported browser, please use a chromium-based browser</h1>
+        </div>
+      );
+    }
     return !currentDevice ? (
       <div className="mx-3 flex flex-grow justify-center">
         <NoSelectedDevice />