feat: remove redux and use providers (#98)

README.md

@@ -20,8 +20,7 @@
 StarkNet is a permissionless decentralized Rollup operating as an L2 network over Ethereum.\
 The _StarkNet bridge_ allows users to transfer ERC20 tokens from Ethereum to StarkNet and vice versa.
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and
-uses [Redux Toolkit](https://redux-toolkit.js.org/) for state management.
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
 ## Prerequisites
 

package.json

@@ -49,12 +49,10 @@
     "@argent/get-starknet": "^1.1.3",
     "@headlessui/react": "^1.4.2",
     "@metamask/onboarding": "^1.0.1",
-    "@reduxjs/toolkit": "^1.6.2",
     "js-logger": "^1.6.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.1.1",
-    "react-redux": "^7.2.6",
     "react-scripts": "4.0.3",
     "starknet": "^3.0.0",
     "use-async-memo": "^1.2.3",

src/components/Containers/Header/Header.js

@@ -1,17 +1,17 @@
 import React from 'react';
 
 import {ReactComponent as StarkGateLogo} from '../../../assets/img/starkgate.svg';
+import {useMenu} from '../../../providers/MenuProvider';
+import {useIsL1, useIsL2} from '../../../providers/TransferProvider';
 import {useL1Wallet, useL2Wallet, useWallets} from '../../../providers/WalletsProvider';
 import utils from '../../../utils';
-import {useBridgeActions} from '../../Features/Bridge/Bridge.hooks';
-import {useIsL1, useIsL2} from '../../Features/Transfer/Transfer.hooks';
 import {WalletButton} from '../../UI';
 import styles from './Header.module.scss';
 import {CHAIN_TXT} from './Header.strings';
 
 export const Header = () => {
   const {chainName, isConnected} = useWallets();
-  const {showAccountMenu, showTransferMenu} = useBridgeActions();
+  const {showAccountMenu, showTransferMenu} = useMenu();
   const [, swapToL1] = useIsL1();
   const [, swapToL2] = useIsL2();
   const {account: l1Account, isConnected: isL1AccountConnected, config: l1Config} = useL1Wallet();

src/components/Features/Account/Account.js

@@ -3,7 +3,9 @@ import React from 'react';
 
 import constants from '../../../config/constants';
 import {useCompleteTransferToL1} from '../../../hooks';
-import {useAccountTransfers} from '../../../providers/TransfersProvider';
+import {useMenu} from '../../../providers/MenuProvider';
+import {useTransfer} from '../../../providers/TransferProvider';
+import {useAccountTransfersLog} from '../../../providers/TransfersLogProvider';
 import {useWallets} from '../../../providers/WalletsProvider';
 import utils from '../../../utils';
 import {
@@ -15,19 +17,17 @@ import {
   TransferLogContainer
 } from '../../UI';
 import {LinkButton} from '../../UI/LinkButton/LinkButton';
-import {useBridgeActions} from '../Bridge/Bridge.hooks';
-import {useTransferData} from '../Transfer/Transfer.hooks';
 import {TransferLog} from '../TransferLog/TransferLog';
 import styles from './Account.module.scss';
 import {TITLE_TXT} from './Account.strings';
 
 const {LINKS} = constants;
 
 export const Account = ({transferId}) => {
-  const {showTransferMenu} = useBridgeActions();
+  const {showTransferMenu} = useMenu();
   const {account, chainId, resetWallet} = useWallets();
-  const transfers = useAccountTransfers(account);
-  const {isL1, isL2, fromNetwork} = useTransferData();
+  const transfers = useAccountTransfersLog(account);
+  const {isL1, isL2, fromNetwork} = useTransfer();
   const completeTransferToL1 = useCompleteTransferToL1();
 
   const renderTransfers = () => {

src/components/Features/Bridge/Bridge.js

@@ -2,11 +2,11 @@ import React from 'react';
 
 import {Account, SelectToken, ToastProvider, Transfer} from '..';
 import {MenuType} from '../../../enums';
-import {useBridgeData} from './Bridge.hooks';
+import {useMenu} from '../../../providers/MenuProvider';
 import styles from './Bridge.module.scss';
 
 export const Bridge = () => {
-  const {menu, menuProps} = useBridgeData();
+  const {menu, menuProps} = useMenu();
 
   const renderMenu = () => {
     switch (menu) {

src/components/Features/Login/Login.js

@@ -2,10 +2,10 @@ import React, {useEffect, useRef, useState} from 'react';
 
 import {NetworkType, toChainName, WalletStatus, WalletType} from '../../../enums';
 import {useConfig, useWalletHandlerProvider} from '../../../hooks';
+import {useHideModal, useProgressModal} from '../../../providers/ModalProvider';
 import {useL1Wallet, useL2Wallet, useWallets} from '../../../providers/WalletsProvider';
 import utils from '../../../utils';
 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 {

src/components/Features/SelectToken/SelectToken.js

@@ -3,19 +3,19 @@ import React, {useEffect, useState} from 'react';
 import L1Logo from '../../../assets/svg/tokens/eth.svg';
 import L2Logo from '../../../assets/svg/tokens/starknet.svg';
 import {useColors} from '../../../hooks';
+import {useMenu} from '../../../providers/MenuProvider';
 import {useTokens} from '../../../providers/TokensProvider';
+import {useTransfer} from '../../../providers/TransferProvider';
 import {BackButton, Menu, MenuTitle, SearchToken, SelectTokenList} from '../../UI';
-import {useBridgeActions} from '../Bridge/Bridge.hooks';
-import {useTransferActions, useTransferData} from '../Transfer/Transfer.hooks';
 import styles from './SelectToken.module.scss';
 import {TITLE_TXT} from './SelectToken.strings';
 
 export const SelectToken = () => {
   const {tokens} = useTokens();
   const {colorBeta} = useColors();
-  const {showTransferMenu} = useBridgeActions();
-  const {isL1, fromNetwork} = useTransferData();
-  const {selectToken} = useTransferActions();
+  const {showTransferMenu} = useMenu();
+  const {isL1, fromNetwork} = useTransfer();
+  const {selectToken} = useTransfer();
   const [searchTokens, setSearchTokens] = useState(tokens);
 
   useEffect(() => {

src/components/Features/ToastProvider/ToastProvider.js

@@ -5,21 +5,21 @@ import useDeepCompareEffect from 'use-deep-compare-effect';
 
 import {ActionType, isConsumed, isOnChain, isRejected, NetworkType} from '../../../enums';
 import {useCompleteTransferToL1, usePrevious} from '../../../hooks';
-import {useTransfers} from '../../../providers/TransfersProvider';
+import {useMenu} from '../../../providers/MenuProvider';
+import {useIsL1, useIsL2} from '../../../providers/TransferProvider';
+import {useTransfersLog} from '../../../providers/TransfersLogProvider';
 import utils from '../../../utils';
-import {ToastBody, TransferToast, CompleteTransferToL1Toast} from '../../UI';
-import {useBridgeActions} from '../Bridge/Bridge.hooks';
-import {useIsL1, useIsL2} from '../Transfer/Transfer.hooks';
+import {CompleteTransferToL1Toast, ToastBody, TransferToast} from '../../UI';
 import styles from './ToastProvider.module.scss';
 import {ALPHA_DISCLAIMER_MSG} from './ToastProvider.strings';
 
 export const ToastProvider = () => {
-  const {transfers} = useTransfers();
+  const {transfers} = useTransfersLog();
   const prevTransfers = usePrevious(transfers);
   const toastsMap = useRef({});
   const toastsDismissed = useRef({});
   const completeTransferToL1 = useCompleteTransferToL1();
-  const {showAccountMenu} = useBridgeActions();
+  const {showAccountMenu} = useMenu();
   const [, swapToL1] = useIsL1();
   const [, swapToL2] = useIsL2();