fix: move EventManagerProvider to app-level (#197)

src/hooks/index.js

@@ -15,3 +15,4 @@ export * from './useConstants';
 export * from './useTranslation';
 export * from './useTracking';
 export * from './useBuyProviders';
+export * from './useAccountChange';

src/hooks/useAccountChange.js

@@ -0,0 +1,13 @@
+import {useEffect} from 'react';
+
+import {useAccountHash} from '../providers/WalletsProvider';
+
+export const useAccountChange = fn => {
+  const accountHash = useAccountHash();
+
+  useEffect(() => {
+    if (accountHash) {
+      fn();
+    }
+  }, [accountHash]);
+};

src/providers/EventManagerProvider/EventManagerProvider.js

@@ -1,17 +1,16 @@
 import PropTypes from 'prop-types';
-import React, {useEffect} from 'react';
+import React from 'react';
 
 import {EventName, SelectorName} from '../../enums';
-import {useL1TokenBridgeContract, useLogger} from '../../hooks';
+import {useAccountChange, useL1TokenBridgeContract, useLogger} from '../../hooks';
 import {starknet} from '../../libs';
-import {parseToFelt} from '../../utils/parser';
+import {parseToFelt} from '../../utils';
 import {useL1Tokens, useL2Tokens} from '../TokensProvider';
 import {useL1Wallet, useL2Wallet} from '../WalletsProvider';
 import {EventManagerContext} from './event-manager-context';
 
 const listeners = {};
 const filters = {};
-let emitters = [];
 
 export const EventManagerProvider = ({children}) => {
   const logger = useLogger(EventManagerProvider.displayName);
@@ -21,11 +20,10 @@ export const EventManagerProvider = ({children}) => {
   const l1Tokens = useL1Tokens();
   const l2Tokens = useL2Tokens();
 
-  useEffect(() => {
+  useAccountChange(() => {
     setEventFilters();
-    addDepositWithdrawalListeners();
-    return () => cleanEmittersAndRemoveListeners();
-  }, []);
+    addListeners();
+  });
 
   const addListener = (eventName, callback) => {
     logger.log(`Registered to ${eventName} event.`);
@@ -62,7 +60,7 @@ export const EventManagerProvider = ({children}) => {
     emitListeners(EventName.L1.LOG_DEPOSIT, error, event);
   };
 
-  const addDepositWithdrawalListeners = () => {
+  const addListeners = () => {
     l1Tokens.forEach(l1Token => {
       const bridgeContract = getTokenBridgeContract(l1Token.bridgeAddress);
       logger.log(`Add ${EventName.L1.LOG_DEPOSIT} listener for token ${l1Token.symbol}.`);
@@ -103,23 +101,14 @@ export const EventManagerProvider = ({children}) => {
   };
 
   const addContractEventListener = (contract, eventName, filter, handler) => {
-    emitters.push(
-      contract.events[eventName](
-        {
-          filter
-        },
-        handler
-      )
+    contract.events[eventName](
+      {
+        filter
+      },
+      handler
     );
   };
 
-  const cleanEmittersAndRemoveListeners = () => {
-    logger.log('Remove all listeners.');
-    emitters.forEach(emitter => emitter.removeAllListeners());
-    logger.log('Clean emitters.');
-    emitters = [];
-  };
-
   const value = {
     addListener,
     getPastEvents,

src/providers/TokensProvider/TokensProvider.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
-import React, {useEffect, useReducer} from 'react';
+import React, {useReducer} from 'react';
 
-import {useConstants, useLogger} from '../../hooks';
+import {useAccountChange, useConstants, useLogger} from '../../hooks';
 import {useL1TokenBalance, useL2TokenBalance} from '../../hooks/useTokenBalance';
 import {useL1Wallet, useL2Wallet} from '../WalletsProvider';
 import {TokensContext} from './tokens-context';
@@ -16,9 +16,9 @@ export const TokensProvider = ({children}) => {
   const getL1TokenBalance = useL1TokenBalance(l1Account);
   const getL2TokenBalance = useL2TokenBalance(l2Account);
 
-  useEffect(() => {
+  useAccountChange(() => {
     fetchBalances(tokens);
-  }, []);
+  });
 
   const updateTokenBalance = symbol => {
     logger.log(symbol ? `Update ${symbol} token balance` : 'Update all tokens balances');

src/providers/index.js

@@ -17,11 +17,8 @@ export const AppProviders = combineProviders([
   ModalProvider,
   WalletProvider,
   WalletsProvider,
-  BlockHashProvider
-]);
-
-export const BridgeProviders = combineProviders([
   TokensProvider,
-  EventManagerProvider,
-  TransfersLogProvider
+  EventManagerProvider
 ]);
+
+export const BridgeProviders = combineProviders([BlockHashProvider, TransfersLogProvider]);