diff --git a/src/components/Features/Login/Login.js b/src/components/Features/Login/Login.js index ebfec0dd..6e938884 100644 --- a/src/components/Features/Login/Login.js +++ b/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 = () => { onWalletConnect(walletHandler)} diff --git a/src/components/Features/Login/Login.strings.js b/src/components/Features/Login/Login.strings.js index b7c197b7..dfb60394 100644 --- a/src/components/Features/Login/Login.strings.js +++ b/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}); diff --git a/src/components/UI/WalletLogin/WalletLogin.js b/src/components/UI/WalletLogin/WalletLogin.js index 068bc661..a9e36eed 100644 --- a/src/components/UI/WalletLogin/WalletLogin.js +++ b/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}) => ( <> -
+
@@ -26,5 +30,6 @@ WalletLogin.propTypes = { name: PropTypes.string, description: PropTypes.string, logoPath: PropTypes.string, + isDisabled: PropTypes.bool, onClick: PropTypes.func }; diff --git a/src/components/UI/WalletLogin/WalletLogin.module.scss b/src/components/UI/WalletLogin/WalletLogin.module.scss index e3d3fd71..2fd5dd7a 100644 --- a/src/components/UI/WalletLogin/WalletLogin.module.scss +++ b/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; diff --git a/src/config/strings.js b/src/config/strings.js index b1e5491e..1a287a15 100644 --- a/src/config/strings.js +++ b/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', diff --git a/src/utils/browser.js b/src/utils/browser.js index 9a2a5a3b..9de3222e 100644 --- a/src/utils/browser.js +++ b/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); +};