From 4db18be19020875c6cd61d09583fae14ece4009b Mon Sep 17 00:00:00 2001
From: Everton Correia <1169768+evertonstz@users.noreply.github.com>
Date: Tue, 23 Apr 2024 17:04:44 -0300
Subject: [PATCH] Add disclaimer about supported browsers (#39)

Fixes #37
---
 package.json                               |  1 +
 pnpm-lock.yaml                             | 18 ++++++++++++++++++
 src/components/MainContent/MainContent.tsx | 12 ++++++++++++
 3 files changed, 31 insertions(+)

diff --git a/package.json b/package.json
index 1b7afbd..3d7906f 100644
--- 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
index 02253fb..c31280d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,9 @@ dependencies:
   react:
     specifier: ^18.2.0
     version: 18.2.0
+  react-device-detect:
+    specifier: ^2.2.3
+    version: 2.2.3(react-dom@18.2.0)(react@18.2.0)
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
@@ -5446,6 +5449,17 @@ packages:
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  /react-device-detect@2.2.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==}
+    peerDependencies:
+      react: '>= 0.14.0'
+      react-dom: '>= 0.14.0'
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      ua-parser-js: 1.0.37
+    dev: false
+
   /react-dom@18.2.0(react@18.2.0):
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
@@ -6230,6 +6244,10 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  /ua-parser-js@1.0.37:
+    resolution: {integrity: sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==}
+    dev: false
+
   /ufo@1.4.0:
     resolution: {integrity: sha512-Hhy+BhRBleFjpJ2vchUNN40qgkh0366FWJGqVLYBHev0vpHTrXSA0ryT+74UiW6KWsldNurQMKGqCm1M2zBciQ==}
     dev: true
diff --git a/src/components/MainContent/MainContent.tsx b/src/components/MainContent/MainContent.tsx
index 0ae1c0b..2962b2b 100644
--- 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 />