Unsupported browser Dialog (#710)

* Unsupported Browser dialog

* Update src/views/studio/StudioLayout.tsx

Co-authored-by: Klaudiusz Dembler <accounts@kdembler.com>

* Cr

Co-authored-by: Klaudiusz Dembler <accounts@kdembler.com>

src/utils/broswer.ts

@@ -1,3 +1,14 @@
 export const copyToClipboard = (text: string) => {
   navigator.clipboard.writeText(text)
 }
+
+// @ts-ignore not worth typing
+export const isFirefox = (): boolean => typeof InstallTrigger !== 'undefined'
+// @ts-ignore not worth typing
+export const isChromiumBased = (): boolean => !!window.chrome
+
+// Seen in https://stackoverflow.com/a/9851769
+// it will check for the global chrome object for chromium based browsers and
+// it will check Firefox's API to install add-ons which as of now all firefox versions have
+// to detect if the users browser it's one where the polkadot extension can be installed on
+export const isAllowedBrowser = () => isFirefox() || isChromiumBased()

src/views/studio/StudioLayout.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Route, Routes } from 'react-router'
 import { useNavigate, useLocation } from 'react-router-dom'
 import styled from '@emotion/styled'
@@ -25,6 +25,7 @@ import {
   UploadManagerProvider,
   TransactionManagerProvider,
   DialogProvider,
+  useDialog,
 } from '@/hooks'
 
 import { relativeRoutes, absoluteRoutes } from '@/config/routes'
@@ -38,6 +39,7 @@ import {
   PrivateRoute,
   StudioLoading,
 } from '@/components'
+import { isAllowedBrowser } from '@/utils/broswer'
 
 const ENTRY_POINT_ROUTE = absoluteRoutes.studio.index()
 
@@ -55,6 +57,7 @@ const StudioLayout = () => {
     userInitialized,
   } = useUser()
 
+  const [openUnsupportedBrowserDialog, closeUnsupportedBrowserDialog] = useDialog()
   const [enterLocation] = useState(location.pathname)
   const hasMembership = !!memberships?.length
 
@@ -62,10 +65,27 @@ const StudioLayout = () => {
   const memberSet = accountSet && !!activeMemberId && hasMembership
   const channelSet = memberSet && !!activeChannelId && hasMembership
 
+  useEffect(() => {
+    if (!isAllowedBrowser()) {
+      openUnsupportedBrowserDialog({
+        variant: 'warning',
+        title: 'Unsupported browser detected',
+        description:
+          'It seems the browser you are using is not fully supported by Joystream Studio. Some of the features may not be accessible. For the best experience, please use a recent version of Chrome, Firefox or Edge.',
+        primaryButtonText: 'I understand',
+        onPrimaryButtonClick: () => {
+          closeUnsupportedBrowserDialog()
+        },
+        onExitClick: () => {
+          closeUnsupportedBrowserDialog()
+        },
+      })
+    }
+  }, [closeUnsupportedBrowserDialog, openUnsupportedBrowserDialog])
+
   // TODO: add route transition
   // TODO: remove dependency on PersonalDataProvider
   //  we need PersonalDataProvider because DismissibleMessage in video drafts depends on it
-
   return (
     <>
       <NoConnectionIndicator