feat: handle browser support (#96)

src/components/Features/Login/Login.js

@@ -8,7 +8,13 @@ import {Menu, WalletLogin} from '../../UI';
 import {useHideModal, useProgressModal} from '../ModalProvider/ModalProvider.hooks';
 import {AUTO_CONNECT_TIMEOUT_DURATION, MODAL_TIMEOUT_DURATION} from './Login.constants';
 import styles from './Login.module.scss';
-import {DOWNLOAD_TEXT, MODAL_TXT, SUBTITLE_TXT, TITLE_TXT} from './Login.strings';
+import {
+  DOWNLOAD_TEXT,
+  MODAL_TXT,
+  SUBTITLE_TXT,
+  TITLE_TXT,
+  UNSUPPORTED_BROWSER_TXT
+} from './Login.strings';
 
 export const Login = () => {
   const {autoConnect} = useConfig();
@@ -25,6 +31,10 @@ export const Login = () => {
 
   useEffect(() => {
     let timeoutId;
+    if (!utils.browser.isChrome()) {
+      setErrorMsg(UNSUPPORTED_BROWSER_TXT);
+      return;
+    }
     if (autoConnect) {
       const handlers = getWalletHandlers(walletType);
       if (handlers.length > 0) {
@@ -116,6 +126,7 @@ export const Login = () => {
         <WalletLogin
           key={id}
           description={description}
+          isDisabled={!utils.browser.isChrome()}
           logoPath={logoPath}
           name={name}
           onClick={() => onWalletConnect(walletHandler)}

src/components/Features/Login/Login.strings.js

@@ -1,8 +1,10 @@
 import utils from '../../../utils';
 
-const {title_txt, subtitle_txt, download_txt, modal_txt} = utils.getTranslation('menus.login');
+const {title_txt, subtitle_txt, download_txt, modal_txt, unsupported_browser_txt} =
+  utils.getTranslation('menus.login');
 
 export const TITLE_TXT = title_txt;
 export const DOWNLOAD_TEXT = download_txt;
+export const UNSUPPORTED_BROWSER_TXT = unsupported_browser_txt;
 export const SUBTITLE_TXT = networkName => utils.object.evaluate(subtitle_txt, {networkName});
 export const MODAL_TXT = walletName => utils.object.evaluate(modal_txt, {walletName});

src/components/UI/WalletLogin/WalletLogin.js

@@ -3,12 +3,16 @@ import React from 'react';
 
 import {ReactComponent as ForwardIcon} from '../../../assets/svg/icons/forward.svg';
 import utils from '../../../utils';
+import {toClasses} from '../../../utils/object';
 import {DynamicIcon} from '../index';
 import styles from './WalletLogin.module.scss';
 
-export const WalletLogin = ({name, description, logoPath, onClick}) => (
+export const WalletLogin = ({name, description, logoPath, isDisabled, onClick}) => (
   <>
-    <div className={styles.walletLogin} onClick={onClick}>
+    <div
+      className={toClasses(styles.walletLogin, isDisabled && styles.isDisabled)}
+      onClick={onClick}
+    >
       <div className={styles.left}>
         <DynamicIcon path={logoPath} size={41} />
         <div className={styles.text}>
@@ -26,5 +30,6 @@ WalletLogin.propTypes = {
   name: PropTypes.string,
   description: PropTypes.string,
   logoPath: PropTypes.string,
+  isDisabled: PropTypes.bool,
   onClick: PropTypes.func
 };

src/components/UI/WalletLogin/WalletLogin.module.scss

@@ -11,6 +11,11 @@ $background-color-hover: $--color-alpha-1;
   align-items: center;
   justify-content: space-between;
 
+  &.isDisabled {
+    pointer-events: none;
+    opacity: 0.2;
+  }
+
   .left {
     display: flex;
 

src/config/strings.js

@@ -14,7 +14,8 @@ const strings = {
       title_txt: 'Login',
       subtitle_txt: 'Please select {{networkName}} wallet to connect with this dApp:',
       download_txt: ['Don’t have a wallet?', 'Download Here'],
-      modal_txt: 'Waiting for confirmation from {{walletName}}'
+      modal_txt: 'Waiting for confirmation from {{walletName}}',
+      unsupported_browser_txt: `Note - The current version of StarkGate (Alpha) doesn't support your browser. Use Chrome to connect.`
     },
     account: {
       title_txt: '{{network}} Account',

src/utils/browser.js

@@ -8,3 +8,7 @@ export const getUrlParameter = name => {
   const results = regex.exec(location.search);
   return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
 };
+
+export const isChrome = () => {
+  return /(?=.*(chrome)).*/i.test(navigator.userAgent);
+};