feat: combine providers [skip ci]

src/components/Containers/Header/Header.js

@@ -2,15 +2,17 @@ import React from 'react';
 
 import StarkNetLogoPath from '../../../assets/img/starknet.png';
 import {ChainType} from '../../../enums';
+import {useCombineWallets} from '../../../providers/CombineWalletsProvider/hooks';
 import {toClasses} from '../../../utils';
-import {WalletButton} from '../../Features';
-import {useWallets} from '../../Features/Wallet/Wallet.hooks';
+import {useBridgeActions} from '../../Features/Bridge/Bridge.hooks';
+import {WalletButton} from '../../UI';
 import {STARKNET_LOGO_SIZE} from './Header.constants';
 import styles from './Header.module.scss';
 import {CHAIN_TXT} from './Header.strings';
 
 export const Header = () => {
-  const {chainName} = useWallets();
+  const {chainName, account, isConnected, config} = useCombineWallets();
+  const {showAccountMenu} = useBridgeActions();
 
   return (
     <div className={toClasses(styles.header, 'row')}>
@@ -23,7 +25,9 @@ export const Header = () => {
         )}
       </div>
       <div className={toClasses(styles.right, 'row')}>
-        <WalletButton />
+        {isConnected && (
+          <WalletButton account={account} logoPath={config?.logoPath} onClick={showAccountMenu} />
+        )}
       </div>
     </div>
   );

src/components/Containers/Main/Main.js

@@ -1,15 +1,15 @@
 import React, {useEffect, useState} from 'react';
 
 import {useVars, useWindowSize} from '../../../hooks';
+import {useCombineWallets} from '../../../providers/CombineWalletsProvider/hooks';
 import {Bridge} from '../../Features';
-import {Login} from '../../Features/Login/Login';
-import {useWallets} from '../../Features/Wallet/Wallet.hooks';
+import {Login} from '../../Features/Login/Login/Login';
 import styles from './Main.module.scss';
 
 export const Main = () => {
   const windowSize = useWindowSize();
   const {mainOffset} = useVars();
-  const {isConnected} = useWallets();
+  const {isConnected} = useCombineWallets();
   const [height, setHeight] = useState(null);
 
   useEffect(() => {

src/components/Features/Account/Account.constants.js → src/components/Features/Account/Account/Account.constants.js

@@ -1,4 +1,4 @@
-import {evaluate} from '../../../utils';
+import {evaluate} from '../../../../utils';
 
 export const LINKS = {
   ETHERSCAN: {

src/components/Features/Account/Account.js → src/components/Features/Account/Account/Account.js

@@ -1,18 +1,18 @@
 import React from 'react';
 
-import {AccountAddress, LogoutButton, TransferLogContainer} from '.';
-import {BackButton, Menu, MenuTitle} from '../../UI';
-import {useBridgeActions} from '../Bridge/Bridge.hooks';
-import {useTransferData} from '../Transfer/Transfer.hooks';
-import {useWallets} from '../Wallet/Wallet.hooks';
+import {useCombineWallets} from '../../../../providers/CombineWalletsProvider/hooks';
+import {BackButton, Menu, MenuTitle} from '../../../UI';
+import {useBridgeActions} from '../../Bridge/Bridge.hooks';
+import {useTransferData} from '../../Transfer/Transfer/Transfer.hooks';
+import {LinkButton} from '../LinkButton/LinkButton';
+import {AccountAddress, LogoutButton, TransferLogContainer} from '../index';
 import {LINKS} from './Account.constants';
 import styles from './Account.module.scss';
 import {TITLE_TXT} from './Account.strings';
-import {LinkButton} from './LinkButton/LinkButton';
 
 export const Account = () => {
   const {showTransferMenu} = useBridgeActions();
-  const {account, chainName, resetWallet} = useWallets();
+  const {account, chainName, resetWallet} = useCombineWallets();
   const {isEthereum, isStarknet} = useTransferData();
 
   return (

src/components/Features/Account/index.js

@@ -1,3 +1,4 @@
+export * from './Account/Account';
 export * from './TransferLog/TransferLog';
 export * from './TransferLogContainer/TransferLogContainer';
 export * from './LogoutButton/LogoutButton';

src/components/Features/Bridge/Bridge.js

@@ -1,9 +1,9 @@
 import React from 'react';
 
 import {MenuType} from '../../../enums';
-import {Account} from '../Account/Account';
-import {SelectToken} from '../SelectToken/SelectToken';
-import {Transfer} from '../Transfer/Transfer';
+import {Account} from '../Account/Account/Account';
+import {SelectToken} from '../SelectToken/SelectToken/SelectToken';
+import {Transfer} from '../Transfer/Transfer/Transfer';
 import {useBridgeData} from './Bridge.hooks';
 import styles from './Bridge.module.scss';
 

src/components/Features/Wallet/WalletButton/WalletButton.constants.js → src/components/Features/Login/Login/Login.constants.js

@@ -1,2 +1 @@
 export const MODAL_TIMEOUT_DURATION = 2000;
-export const WALLET_LOGO_SIZE = 30;

src/components/Features/Login/Login.js → src/components/Features/Login/Login/Login.js

@@ -1,36 +1,40 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {ChainUnsupportedError} from 'use-wallet';
 
-import {NetworkType, toChainName, WalletType} from '../../../enums';
-import {useWalletHandlerProvider} from '../../../hooks';
-import {capitalize, toClasses} from '../../../utils';
-import {BackButton, Menu} from '../../UI';
-import {useHideModal, useWalletConnectionModal} from '../ModalProvider/ModalProvider.hooks';
-import {useTransferData} from '../Transfer/Transfer.hooks';
-import {WalletStatus} from '../Wallet/Wallet.enums';
-import {useWallets} from '../Wallet/Wallet.hooks';
-import {MODAL_TIMEOUT_DURATION} from '../Wallet/WalletButton/WalletButton.constants';
-import {WalletLogin} from '../Wallet/WalletLogin/WalletLogin';
+import {NetworkType, toChainName, WalletStatus, WalletType} from '../../../../enums';
+import {useWalletHandlerProvider} from '../../../../hooks';
+import {useCombineWallets} from '../../../../providers/CombineWalletsProvider/hooks';
+import {capitalize, toClasses} from '../../../../utils';
+import {BackButton, Menu} from '../../../UI';
+import {
+  useHideModal,
+  useWalletConnectionModal
+} from '../../ModalProvider/ModalProvider/ModalProvider.hooks';
+import {useTransferData} from '../../Transfer/Transfer/Transfer.hooks';
+import {WalletLogin} from '../WalletLogin/WalletLogin';
+import {MODAL_TIMEOUT_DURATION} from './Login.constants';
 import styles from './Login.module.scss';
 import {DOWNLOAD_TEXT, SUBTITLE_TXT, TITLE_TXT} from './Login.strings';
 
 export const Login = () => {
   const {isEthereum, isStarknet} = useTransferData();
-  const [walletType, setWalletType] = useState(isEthereum ? WalletType.L1 : WalletType.L2);
+  const [walletType, setWalletType] = useState(
+    isEthereum ? WalletType.ETHEREUM : WalletType.STARKNET
+  );
   const [selectedWalletName, setSelectedWalletName] = useState('');
   const [errorMsg, setErrorMsg] = useState('');
   const modalTimeoutId = useRef(null);
   const hideModal = useHideModal();
   const showWalletConnectionModal = useWalletConnectionModal();
-  const {status, error, connectWallet, swapWallets} = useWallets();
+  const {status, error, connectWallet, swapWallets} = useCombineWallets();
   const {getWalletHandlers} = useWalletHandlerProvider();
 
   useEffect(() => {
     error && handleError(error);
   }, [error]);
 
   useEffect(() => {
-    setWalletType(isEthereum ? WalletType.L1 : WalletType.L2);
+    setWalletType(isEthereum ? WalletType.ETHEREUM : WalletType.STARKNET);
   }, [isEthereum]);
 
   useEffect(() => {
@@ -119,7 +123,9 @@ export const Login = () => {
           <div className={styles.title}>{TITLE_TXT}</div>
           <p>
             {SUBTITLE_TXT(
-              walletType === WalletType.L1 ? NetworkType.ETHEREUM.name : NetworkType.STARKNET.name
+              walletType === WalletType.ETHEREUM
+                ? NetworkType.ETHEREUM.name
+                : NetworkType.STARKNET.name
             )}
           </p>
           <div className={styles.container}>{renderLoginWallets()}</div>

src/components/Features/Login/Login.module.scss → src/components/Features/Login/Login/Login.module.scss

@@ -1,4 +1,4 @@
-@import '../../../index';
+@import '../../../../index';
 
 $background-color: $--color-alpha;
 $text-color: $--color-white;

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

@@ -1,4 +1,4 @@
-import {evaluate} from '../../../utils';
+import {evaluate} from '../../../../utils';
 
 export const TITLE_TXT = 'Login';
 

src/components/Features/Login/index.js

@@ -0,0 +1,2 @@
+export * from './Login/Login';
+export * from './WalletLogin/WalletLogin';

src/components/Features/ModalProvider/ModalProvider.hooks.js → src/components/Features/ModalProvider/ModalProvider/ModalProvider.hooks.js

@@ -1,7 +1,7 @@
 import {useCallback} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 
-import {ModalType} from '../../UI/Modal/Modal/Modal.constants';
+import {ModalType} from '../../../UI/Modal/Modal/Modal.constants';
 import {selectModal} from './ModalProvider.selectors';
 import {hideModalAction, showModalAction} from './ModalProvider.slice';
 

src/components/Features/ModalProvider/ModalProvider.js → src/components/Features/ModalProvider/ModalProvider/ModalProvider.js

@@ -1,7 +1,7 @@
 import React, {lazy, Suspense} from 'react';
 
-import {Loading, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle} from '../../UI';
-import {LoadingSize} from '../../UI/Loading/Loading.enums';
+import {Loading, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle} from '../../../UI';
+import {LoadingSize} from '../../../UI/Loading/Loading.enums';
 import {useHideModal, useModal} from './ModalProvider.hooks';
 
 export const ModalProvider = () => {

src/components/Features/ModalProvider/index.js

@@ -1 +1,2 @@
+export * from './ModalProvider/ModalProvider';
 export * from './WalletConnectionModal/WalletConnectionModal';

src/components/Features/SelectToken/SelectToken.js → src/components/Features/SelectToken/SelectToken/SelectToken.js

@@ -1,17 +1,16 @@
 import React, {useEffect, useState} from 'react';
 
-import EthereumLogo from '../../../assets/svg/tokens/eth.svg';
-import StarkNetLogo from '../../../assets/svg/tokens/starknet.svg';
-import {useColors} from '../../../hooks';
-import {useTokens} from '../../../hooks/useTokens';
-import {BackButton, Loading, Menu, MenuTitle} from '../../UI';
-import {LoadingSize} from '../../UI/Loading/Loading.enums';
-import {useBridgeActions} from '../Bridge/Bridge.hooks';
-import {useTransferActions, useTransferData} from '../Transfer/Transfer.hooks';
-import {SearchToken} from './SearchToken/SearchToken';
+import EthereumLogo from '../../../../assets/svg/tokens/eth.svg';
+import StarkNetLogo from '../../../../assets/svg/tokens/starknet.svg';
+import {useColors, useTokens} from '../../../../hooks';
+import {BackButton, Loading, Menu, MenuTitle} from '../../../UI';
+import {LoadingSize} from '../../../UI/Loading/Loading.enums';
+import {useBridgeActions} from '../../Bridge/Bridge.hooks';
+import {useTransferActions, useTransferData} from '../../Transfer/Transfer/Transfer.hooks';
+import {SearchToken} from '../SearchToken/SearchToken';
+import {SelectTokenList} from '../SelectTokenList/SelectTokenList';
 import styles from './SelectToken.module.scss';
 import {TITLE_TXT} from './SelectToken.strings';
-import {SelectTokenList} from './SelectTokenList/SelectTokenList';
 
 export const SelectToken = () => {
   const {isLoading, tokensData} = useTokens();

src/components/Features/SelectToken/SelectToken.module.scss → src/components/Features/SelectToken/SelectToken/SelectToken.module.scss

@@ -1,4 +1,4 @@
-@import '../../../index';
+@import '../../../../index';
 
 $color: $--color-white;
 $network-color: $--color-beta;

src/components/Features/SelectToken/index.js

@@ -1,3 +1,4 @@
+export * from './SelectToken/SelectToken';
 export * from './SearchToken/SearchToken';
 export * from './SelectTokenList/SelectTokenList';
 export * from './SelectTokenRow/SelectTokenRow';

src/components/Features/Transfer/Transfer.hooks.js → src/components/Features/Transfer/Transfer/Transfer.hooks.js

@@ -1,7 +1,7 @@
 import {useCallback} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 
-import {ActionType} from '../../../enums';
+import {ActionType} from '../../../../enums';
 import {
   fromNetworkSelector,
   fromStarknetSelector,

src/components/Features/Transfer/Transfer.js → src/components/Features/Transfer/Transfer/Transfer.js

@@ -1,13 +1,13 @@
 import React, {useEffect, useState} from 'react';
 
-import {NetworkMenu, NetworkSwap, TokenInput, TransferButton} from '.';
-import {ActionType, NetworkType} from '../../../enums';
-import {Menu} from '../../UI';
-import {useBridgeActions} from '../Bridge/Bridge.hooks';
+import {ActionType, NetworkType} from '../../../../enums';
+import {Menu} from '../../../UI';
+import {useBridgeActions} from '../../Bridge/Bridge.hooks';
+import {TransferMenuTab} from '../TransferMenuTab/TransferMenuTab';
+import {NetworkMenu, NetworkSwap, TokenInput, TransferButton} from '../index';
 import {useAmount, useIsEthereum, useIsStarknet, useTransferData} from './Transfer.hooks';
 import styles from './Transfer.module.scss';
 import {INSUFFICIENT_BALANCE_ERROR_MSG} from './Transfer.strings.js';
-import {TransferMenuTab} from './TransferMenuTab/TransferMenuTab';
 
 export const Transfer = () => {
   const [hasError, setHasError] = useState(false);

src/components/Features/Transfer/Transfer.module.scss → src/components/Features/Transfer/Transfer/Transfer.module.scss

@@ -1,4 +1,4 @@
-@import '../../../index';
+@import '../../../../index';
 
 $background-color: $--color-alpha-1;
 $error-msg-color: $--color-error;

src/components/Features/Transfer/Transfer.selectors.js → src/components/Features/Transfer/Transfer/Transfer.selectors.js

@@ -1,6 +1,6 @@
 import {createSelector} from '@reduxjs/toolkit';
 
-import {ActionType, NetworkType} from '../../../enums';
+import {ActionType, NetworkType} from '../../../../enums';
 
 export const selectTransfer = state => state.transfer;
 

src/components/Features/Transfer/Transfer.slice.js → src/components/Features/Transfer/Transfer/Transfer.slice.js

@@ -1,6 +1,6 @@
 import {createSlice} from '@reduxjs/toolkit';
 
-import {ActionType, NetworkType} from '../../../enums';
+import {ActionType, NetworkType} from '../../../../enums';
 
 const initialState = {
   selectedToken: {balance: 0, name: NetworkType.ETHEREUM.name, symbol: NetworkType.ETHEREUM.symbol},

src/components/Features/Transfer/index.js

@@ -1,3 +1,4 @@
+export * from './Transfer/Transfer';
 export * from './MaxButton/MaxButton';
 export * from './NetworkMenu/NetworkMenu';
 export * from './NetworkSwap/NetworkSwap';