fix: unsupported chain id does not showing

.env.development

@@ -3,7 +3,7 @@ REACT_APP_AUTO_CONNECT=false
 # 20 seconds
 REACT_APP_POLL_BLOCK_NUMBER_INTERVAL=20000
 # goerli testnet
-REACT_APP_SUPPORTED_CHAIN_IDS=5
+REACT_APP_SUPPORTED_CHAIN_ID=5
 REACT_APP_STARKNET_CONTRACT_ADDRESS=0xde29d060D45901Fb19ED6C6e959EB22d8626708e
 REACT_APP_ETHERSCAN_URL=https://goerli.etherscan.io
 REACT_APP_VOYAGER_URL=https://goerli.voyager.online

.env.production

@@ -3,7 +3,7 @@ REACT_APP_AUTO_CONNECT=false
 # 30 seconds
 REACT_APP_POLL_BLOCK_NUMBER_INTERVAL=30000
 # mainnet
-REACT_APP_SUPPORTED_CHAIN_IDS=1
+REACT_APP_SUPPORTED_CHAIN_ID=1
 REACT_APP_STARKNET_CONTRACT_ADDRESS=
 REACT_APP_ETHERSCAN_URL=https://etherscan.io
 REACT_APP_VOYAGER_URL=https://voyager.online

.env.testing

@@ -3,7 +3,7 @@ REACT_APP_AUTO_CONNECT=false
 # 20 seconds
 REACT_APP_POLL_BLOCK_NUMBER_INTERVAL=20000
 # goerli testnet
-REACT_APP_SUPPORTED_CHAIN_IDS=5
+REACT_APP_SUPPORTED_CHAIN_ID=5
 REACT_APP_STARKNET_CONTRACT_ADDRESS=0xde29d060D45901Fb19ED6C6e959EB22d8626708e
 REACT_APP_ETHERSCAN_URL=https://goerli.etherscan.io
 REACT_APP_VOYAGER_URL=https://goerli.voyager.online

package.json

@@ -72,7 +72,7 @@
     "use-async-memo": "^1.2.3",
     "use-breakpoint": "^3.0.1",
     "use-deep-compare-effect": "^1.8.1",
-    "use-wallet": "^0.13.4",
+    "use-wallet": "^0.13.6",
     "uuid": "^8.3.2",
     "web3": "^1.7.0"
   },

src/App.js

@@ -1,36 +1,33 @@
 import React from 'react';
-import {Route, Routes, useLocation} from 'react-router-dom';
+import {Navigate, Route, Routes, useLocation} from 'react-router-dom';
 
 import styles from './App.module.scss';
 import {Footer, Header} from './components/Containers';
 import {StyledBackground} from './components/UI';
-import {useApp} from './providers/AppProvider';
-import {Faq, Bridge, Login, ProtectedRoute, Terms} from './routes';
+import {useApp, useLogin} from './providers/AppProvider';
+import {Bridge, Faq, Login, ProtectedRoute, Terms} from './routes';
 
 export const App = () => {
-  const {isLoggedIn, isAcceptTerms} = useApp();
+  const {isAcceptTerms} = useApp();
   const {pathname} = useLocation();
-  const informativeRoutes = ['/terms', '/faq'];
+  const {isLoggedIn} = useLogin();
 
   return (
     <div className={styles.app}>
       <Header />
-      <StyledBackground withLightAccent={!informativeRoutes.includes(pathname)}>
+      <StyledBackground withLightAccent={!['/terms', '/faq'].includes(pathname)}>
         <Routes>
           <Route
             element={
-              <ProtectedRoute
-                isAllowed={isLoggedIn && isAcceptTerms}
-                redirectPath={isLoggedIn ? '/terms' : '/login'}
-              >
-                <Bridge />
+              <ProtectedRoute isAllowed={isAcceptTerms} redirectPath={'/terms'}>
+                {isLoggedIn ? <Bridge /> : <Login />}
               </ProtectedRoute>
             }
             path="/"
           />
           <Route element={<Terms />} path="/terms" />
-          <Route element={<Login />} path="/login" />
           <Route element={<Faq />} path="/faq" />
+          <Route element={<Navigate replace to="/" />} path="*" />
         </Routes>
       </StyledBackground>
       <Footer />

src/components/Containers/Header/Header.js

@@ -1,63 +1,64 @@
 import React from 'react';
-import {useNavigate, useLocation} from 'react-router-dom';
+import {useLocation, useNavigate} from 'react-router-dom';
 import useBreakpoint from 'use-breakpoint';
 
 import {track} from '../../../analytics';
 import {ReactComponent as StarkGateLogo} from '../../../assets/img/starkgate.svg';
 import constants from '../../../config/constants';
+import envs from '../../../config/envs';
 import {Breakpoint} from '../../../enums';
 import {useColors} from '../../../hooks';
 import {useLogin} from '../../../providers/AppProvider';
 import {useMenu} from '../../../providers/MenuProvider';
 import {useIsL1, useIsL2} from '../../../providers/TransferProvider';
-import {useL1Wallet, useL2Wallet, useWallets} from '../../../providers/WalletsProvider';
+import {useL1Wallet, useL2Wallet} from '../../../providers/WalletsProvider';
 import utils from '../../../utils';
 import {Tab, WalletButton} from '../../UI';
 import styles from './Header.module.scss';
 import {CHAIN_TXT, TAB_DISCORD_TXT, TAB_FAQ_TXT, TAB_TERMS_TXT} from './Header.strings';
 
 const {DISCORD_LINK_URL} = constants;
+const {env} = envs;
 
 export const Header = () => {
   const navigate = useNavigate();
   const {pathname} = useLocation();
-  const {chainName} = useWallets();
   const {showAccountMenu, showTransferMenu} = useMenu();
   const [, swapToL1] = useIsL1();
   const [, swapToL2] = useIsL2();
-  const {account: l1Account, isConnected: isL1AccountConnected, config: l1Config} = useL1Wallet();
-  const {account: l2Account, isConnected: isL2AccountConnected, config: l2Config} = useL2Wallet();
+  const {account: l1Account, config: l1Config} = useL1Wallet();
+  const {account: l2Account, config: l2Config} = useL2Wallet();
   const {breakpoint} = useBreakpoint(Breakpoint);
   const {colorDiscord, colorWhiteOp50} = useColors();
   const {isLoggedIn} = useLogin();
 
-  const maybeNavigateToIndex = () => {
+  const maybeNavigateToBridge = () => {
     pathname !== '/' && navigate('/');
   };
 
   const onL2WalletButtonClick = () => {
-    maybeNavigateToIndex();
     swapToL2();
     showAccountMenu();
+    maybeNavigateToBridge();
   };
 
   const onL1WalletButtonClick = () => {
-    maybeNavigateToIndex();
     swapToL1();
     showAccountMenu();
+    maybeNavigateToBridge();
   };
 
   const onLogoClick = () => {
-    maybeNavigateToIndex();
     showTransferMenu();
+    maybeNavigateToBridge();
   };
 
   const onTabFaqClick = () => {
-    navigate('faq', {replace: true});
+    navigate('/faq');
   };
 
   const onTabTermsClick = () => {
-    navigate('terms', {replace: true});
+    navigate('/terms');
   };
 
   const onTabDiscordClick = () => {
@@ -71,23 +72,22 @@ export const Header = () => {
         <div className={utils.object.toClasses(styles.logo, 'row')} onClick={onLogoClick}>
           <StarkGateLogo />
         </div>
-        {isLoggedIn && (
-          <div className={utils.object.toClasses(styles.chain, 'row')}>{CHAIN_TXT(chainName)}</div>
+        {env !== 'production' && (
+          <div className={utils.object.toClasses(styles.chain, 'row')}>{CHAIN_TXT}</div>
         )}
       </div>
-
       <div className={utils.object.toClasses(styles.right, 'row')}>
+        <Tab color={colorDiscord} label={TAB_DISCORD_TXT} onClick={onTabDiscordClick} />
         <Tab color={colorWhiteOp50} label={TAB_TERMS_TXT} onClick={onTabTermsClick} />
         <Tab color={colorWhiteOp50} label={TAB_FAQ_TXT} onClick={onTabFaqClick} />
-        <Tab color={colorDiscord} label={TAB_DISCORD_TXT} onClick={onTabDiscordClick} />
-        {isL1AccountConnected && (
+        {isLoggedIn && (
           <WalletButton
             account={l1Account}
             logoPath={l1Config?.logoPath}
             onClick={onL1WalletButtonClick}
           />
         )}
-        {isL2AccountConnected && (
+        {isLoggedIn && (
           <WalletButton
             account={l2Account}
             logoPath={l2Config?.logoPath}

src/components/Containers/Header/Header.strings.js

@@ -1,12 +1,6 @@
 import utils from '../../../utils';
 
-export const CHAIN_TXT = chainName =>
-  utils.string.capitalize(
-    utils.object.evaluate(utils.getTranslation('containers.header.chain_txt'), {chainName})
-  );
-
+export const CHAIN_TXT = utils.getTranslation('containers.header.chain_txt');
 export const TAB_DISCORD_TXT = utils.getTranslation('containers.header.tab_discord_txt');
-
 export const TAB_FAQ_TXT = utils.getTranslation('containers.header.tab_faq_txt');
-
 export const TAB_TERMS_TXT = utils.getTranslation('containers.header.tab_terms_txt');

src/components/UI/LoginErrorMessage/LoginErrorMessage.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import styles from './LoginErrorMessage.module.scss';
+
+export const LoginErrorMessage = ({message}) => {
+  return <div className={styles.loginErrorMessage}>❗ {message}</div>;
+};
+
+LoginErrorMessage.propTypes = {
+  message: PropTypes.string
+};

src/components/UI/LoginErrorMessage/LoginErrorMessage.module.scss

@@ -0,0 +1,14 @@
+@import '../../../index';
+
+.loginErrorMessage {
+  text-align: center;
+  margin-top: 20px;
+  line-height: 20px;
+  padding: 7px;
+  font-size: 15px;
+  font-weight: 500;
+  border: 1px solid $--color-error;
+  color: $--color-error;
+  background-color: $--color-white;
+  border-radius: 7px;
+}

src/components/UI/index.js

@@ -32,5 +32,6 @@ export * from './RefreshIcon/RefreshIcon';
 export * from './Stepper/Stepper';
 export * from './StyledBackground/StyledBackground';
 export * from './FullScreenContainer/FullScreenContainer';
+export * from './LoginErrorMessage/LoginErrorMessage';
 export * from './Modal';
 export * from './Toast';

src/config/envs.js

@@ -6,7 +6,7 @@ const envs = {
   autoConnect: Boolean(process.env.REACT_APP_AUTO_CONNECT),
   pollBlockNumberInterval: Number(process.env.REACT_APP_POLL_BLOCK_NUMBER_INTERVAL),
   supportedTokens: process.env.REACT_APP_SUPPORTED_TOKENS.split(','),
-  supportedChainIds: process.env.REACT_APP_SUPPORTED_CHAIN_IDS.split(' ').map(id => Number(id)),
+  supportedChainId: Number(process.env.REACT_APP_SUPPORTED_CHAIN_ID),
   starknetContractAddress: process.env.REACT_APP_STARKNET_CONTRACT_ADDRESS,
   etherscanUrl: process.env.REACT_APP_ETHERSCAN_URL,
   etherscanTxUrl: tx =>

src/config/strings.js

@@ -1,7 +1,7 @@
 const strings = {
   containers: {
     header: {
-      chain_txt: '{{chainName}} testnet',
+      chain_txt: 'Goerli testnet',
       wallet_btn_txt: 'Account | {{address}}',
       tab_discord_txt: 'Discord',
       tab_terms_txt: 'Terms',
@@ -29,6 +29,7 @@ const strings = {
       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}}',
+      unsupported_chain_id_txt: 'Please select {{chainName}} in your wallet',
       unsupported_browser_txt:
         "Note - The current version of StarkGate (Alpha) doesn't support your browser. Use Chrome to connect."
     },

src/enums/ChainType.js

@@ -12,19 +12,19 @@ export const ChainType = {
 export const ChainInfo = {
   L1: {
     [ChainType.L1.MAIN]: {
-      NAME: 'main'
+      NAME: 'Ethereum Mainnet'
     },
     [ChainType.L1.GOERLI]: {
-      NAME: 'goerli'
+      NAME: 'Goerli Testnet'
     }
   },
   L2: {
     [ChainType.L2.MAIN]: {
-      NAME: 'main',
+      NAME: 'Ethereum Mainnet',
       ID_PREFIX: '23448594291968334'
     },
     [ChainType.L2.GOERLI]: {
-      NAME: 'goerli',
+      NAME: 'Goerli Testnet',
       ID_PREFIX: '1536727068981429685321'
     }
   }

src/enums/ErrorType.js

@@ -0,0 +1,4 @@
+export const ErrorType = {
+  UNSUPPORTED_BROWSER: 0,
+  UNSUPPORTED_CHAIN_ID: 1
+};

src/enums/index.js

@@ -12,3 +12,4 @@ export * from './Breakpoint';
 export * from './ToastType';
 export * from './TransferError';
 export * from './TransferStep';
+export * from './ErrorType';

src/providers/AppProvider/app-hooks.js

@@ -1,5 +1,6 @@
 import {useContext} from 'react';
 
+import {useL1Wallet, useL2Wallet} from '../WalletsProvider';
 import {AppContext} from './app-context';
 
 export const useApp = () => useContext(AppContext);
@@ -11,7 +12,8 @@ export const useTerms = () => {
 };
 
 export const useLogin = () => {
-  const {isLoggedIn, login, logout} = useApp();
+  const {isConnected: isL1Connected} = useL1Wallet();
+  const {isConnected: isL2Connected} = useL2Wallet();
 
-  return {isLoggedIn, login, logout};
+  return {isLoggedIn: isL1Connected && isL2Connected};
 };

src/providers/WalletProvider/WalletProvider.js

@@ -5,13 +5,14 @@ import {UseWalletProvider as UseWalletProviderWrapper} from 'use-wallet';
 import {useConfig} from '../../hooks';
 
 export const WalletProvider = ({children}) => {
-  const {pollBalanceInterval, pollBlockNumberInterval, supportedChainIds} = useConfig();
+  const {pollBalanceInterval, pollBlockNumberInterval, supportedChainId} = useConfig();
+
   return (
     <UseWalletProviderWrapper
       autoConnect={false}
       connectors={{
         injected: {
-          chainId: supportedChainIds
+          chainId: [supportedChainId]
         }
       }}
       pollBalanceInterval={pollBalanceInterval}

src/providers/WalletsProvider/WalletsProvider.js

@@ -74,12 +74,12 @@ export const WalletsProvider = ({children}) => {
 
   const maybeUpdateL1Wallet = () => {
     // To support serializable object in the store
-    const serialError = error ? {...error} : null;
+    const serializedError = status === 'error' ? {...error} : null;
     updateL1Wallet({
       account,
       status,
       chainId,
-      error: serialError,
+      error: serializedError,
       chainName: networkName,
       isConnected: isConnected()
     });