feat: shows an unsupported browser message when using Safari (#549)

Author: peetzweg

package.json

@@ -73,7 +73,7 @@
     "@vitejs/plugin-react-swc": "^3.6.0",
     "autoprefixer": "^10.4.17",
     "cross-env": "^7.0.3",
-    "cypress": "^12.17.4",
+    "cypress": "13.7.1",
     "cypress-file-upload": "^5.0.8",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^8.10.0",

src/ui/components/App.tsx

@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { Outlet } from 'react-router';
-import { AwaitApis } from 'ui/components';
+import { AwaitApis, CheckBrowserSupport } from 'ui/components';
 import {
   ApiContextProvider,
   DatabaseContextProvider,
-  TransactionsContextProvider,
   ThemeContextProvider,
+  TransactionsContextProvider,
 } from 'ui/contexts';
 import { Sidebar } from 'ui/layout/sidebar';
 
@@ -20,9 +20,11 @@ export default function App() {
             {/* we want the sidebar outside the outlet to prevent flickering in quicklinks */}
             <div className="relative inset-0 flex min-h-screen overflow-hidden text-black dark:bg-gray-900 dark:text-white md:fixed md:flex-row">
               <Sidebar />
-              <AwaitApis>
-                <Outlet />
-              </AwaitApis>
+              <CheckBrowserSupport>
+                <AwaitApis>
+                  <Outlet />
+                </AwaitApis>
+              </CheckBrowserSupport>
             </div>
           </TransactionsContextProvider>
         </DatabaseContextProvider>

src/ui/components/CheckBrowserSupport.tsx

@@ -0,0 +1,20 @@
+// Copyright 2022-2024 @paritytech/contracts-ui authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import type { HTMLAttributes } from 'react';
+import { useMemo } from 'react';
+import { UnsupportedBrowserMessage } from './common/UnsupportedBrowserMessage';
+
+export function CheckBrowserSupport({
+  children,
+}: HTMLAttributes<HTMLDivElement>): React.ReactElement {
+  const isSafari = useMemo(() => {
+    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+  }, []);
+
+  if (isSafari) {
+    return <UnsupportedBrowserMessage />;
+  } else {
+    return <>{children}</>;
+  }
+}

src/ui/components/common/Info.tsx

@@ -0,0 +1,18 @@
+// Copyright 2022-2024 @paritytech/contracts-ui authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { InformationCircleIcon } from '@heroicons/react/solid';
+import { classes } from 'lib/util';
+
+type Props = React.HTMLProps<HTMLDivElement>;
+
+export function Info({ children, className }: Props) {
+  return (
+    <div className={classes('page-error', className)} data-cy="error-card">
+      <div>
+        <InformationCircleIcon className="mb-1 h-10 w-10 text-blue-400" />
+        {children}
+      </div>
+    </div>
+  );
+}

src/ui/components/common/UnsupportedBrowserMessage.tsx

@@ -0,0 +1,32 @@
+// Copyright 2022-2024 @paritytech/contracts-ui authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { Info } from './Info';
+
+const SuggestedBrowsers = [
+  ['Mozilla Firefox', 'https://www.mozilla.org/firefox'],
+  ['Brave Browser', 'https://brave.com/'],
+  ['Google Chrome', 'https://www.google.com/chrome/'],
+];
+
+export function UnsupportedBrowserMessage() {
+  return (
+    <Info>
+      <div>Unsupported Browser</div>
+
+      <div className="text-left">
+        <p className="mb-3">
+          We currently do not support Apple's Safari browser. We recommend using this DApp with one
+          of the following browsers:
+        </p>
+        <div className="flex flex-col gap-2">
+          {SuggestedBrowsers.map(([title, url]) => (
+            <a className="hover:underline" href={url} key={title} rel="noreferrer" target="_blank">
+              {`> ${title}`}
+            </a>
+          ))}
+        </div>
+      </div>
+    </Info>
+  );
+}

src/ui/components/index.ts

@@ -9,3 +9,4 @@ export * from './homepage';
 export * from './instantiate';
 export * from './message';
 export * from './AwaitApis';
+export * from './CheckBrowserSupport';

yarn.lock

@@ -331,9 +331,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cypress/request@npm:2.88.12":
-  version: 2.88.12
-  resolution: "@cypress/request@npm:2.88.12"
+"@cypress/request@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "@cypress/request@npm:3.0.1"
   dependencies:
     aws-sign2: ~0.7.0
     aws4: ^1.8.0
@@ -348,12 +348,12 @@ __metadata:
     json-stringify-safe: ~5.0.1
     mime-types: ~2.1.19
     performance-now: ^2.1.0
-    qs: ~6.10.3
+    qs: 6.10.4
     safe-buffer: ^5.1.2
     tough-cookie: ^4.1.3
     tunnel-agent: ^0.6.0
     uuid: ^8.3.2
-  checksum: 2c6fbf7f3127d41bffca8374beaa8cf95450495a8a077b00309ea9d94dd2a4da450a77fe038e8ad26c97cdd7c39b65c53c850f8338ce9bc2dbe23ce2e2b48329
+  checksum: 7175522ebdbe30e3c37973e204c437c23ce659e58d5939466615bddcd58d778f3a8ea40f087b965ae8b8138ea8d102b729c6eb18c6324f121f3778f4a2e8e727
   languageName: node
   linkType: hard
 
@@ -2031,13 +2031,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^16.18.39":
-  version: 16.18.79
-  resolution: "@types/node@npm:16.18.79"
-  checksum: 60450f0966efad08719d60052991691c7ec42174ac81f750876ce2798f5ba2fa298ab6b66ae427c557b6daad3e2c128c8c61059d0080578beefe2d0925a79d3f
-  languageName: node
-  linkType: hard
-
 "@types/parse-json@npm:^4.0.0":
   version: 4.0.2
   resolution: "@types/parse-json@npm:4.0.2"
@@ -2935,7 +2928,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"buffer@npm:^5.6.0":
+"buffer@npm:^5.7.1":
   version: 5.7.1
   resolution: "buffer@npm:5.7.1"
   dependencies:
@@ -3400,7 +3393,7 @@ __metadata:
     buffer: ^6.0.3
     copy-to-clipboard: ^3.3.3
     cross-env: ^7.0.3
-    cypress: ^12.17.4
+    cypress: 13.7.1
     cypress-file-upload: ^5.0.8
     date-fns: ^2.30.0
     dexie: ^3.2.4
@@ -3541,19 +3534,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cypress@npm:^12.17.4":
-  version: 12.17.4
-  resolution: "cypress@npm:12.17.4"
+"cypress@npm:13.7.1":
+  version: 13.7.1
+  resolution: "cypress@npm:13.7.1"
   dependencies:
-    "@cypress/request": 2.88.12
+    "@cypress/request": ^3.0.0
     "@cypress/xvfb": ^1.2.4
-    "@types/node": ^16.18.39
     "@types/sinonjs__fake-timers": 8.1.1
     "@types/sizzle": ^2.3.2
     arch: ^2.2.0
     blob-util: ^2.0.2
     bluebird: ^3.7.2
-    buffer: ^5.6.0
+    buffer: ^5.7.1
     cachedir: ^2.3.0
     chalk: ^4.1.0
     check-more-types: ^2.24.0
@@ -3571,7 +3563,7 @@ __metadata:
     figures: ^3.2.0
     fs-extra: ^9.1.0
     getos: ^3.2.1
-    is-ci: ^3.0.0
+    is-ci: ^3.0.1
     is-installed-globally: ~0.4.0
     lazy-ass: ^1.6.0
     listr2: ^3.8.3
@@ -3590,7 +3582,7 @@ __metadata:
     yauzl: ^2.10.0
   bin:
     cypress: bin/cypress
-  checksum: c9c79f5493b23e9c8cfb92d45d50ea9d0fae54210dde203bfa794a79436faf60108d826fe9007a7d67fddf7919802ad8f006b7ae56c5c198c75d5bc85bbc851b
+  checksum: f6c3cafdc53f5737d3b981c9e8ace574398bc999c47e87bb8c8855052b6aa53c140d8361484b573f600acbcbcc113aad4c97a6953878e8c82f0a43864b58e17c
   languageName: node
   linkType: hard
 
@@ -5435,7 +5427,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-ci@npm:^3.0.0":
+"is-ci@npm:^3.0.1":
   version: 3.0.1
   resolution: "is-ci@npm:3.0.1"
   dependencies:
@@ -7967,7 +7959,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:~6.10.3":
+"qs@npm:6.10.4":
   version: 6.10.4
   resolution: "qs@npm:6.10.4"
   dependencies: