feat: add a selector to know if the user is switching network

src/modules/wallet/reducer.spec.ts

@@ -8,6 +8,8 @@ import {
   EnableWalletSuccessAction,
   FetchWalletFailureAction,
   FetchWalletRequestAction,
+  SwitchNetworkFailureAction,
+  SwitchNetworkRequestAction,
   changeAccount,
   changeNetwork,
   connectWalletFailure,
@@ -20,7 +22,9 @@ import {
   fetchWalletFailure,
   fetchWalletRequest,
   fetchWalletSuccess,
-  setAppChainId
+  setAppChainId,
+  switchNetworkFailure,
+  switchNetworkRequest
 } from './actions'
 import { INITIAL_STATE, WalletState, walletReducer } from './reducer'
 import { ProviderType, Wallet } from './types'
@@ -33,7 +37,8 @@ const wallet = {} as Wallet
 const requestActions = [
   fetchWalletRequest(),
   enableWalletRequest(providerType),
-  connectWalletRequest()
+  connectWalletRequest(),
+  switchNetworkRequest(chainId)
 ]
 
 beforeEach(() => {})
@@ -185,6 +190,30 @@ describe('when reducing the failure action of enabling the wallet', () => {
     }
   })
 
+  describe('when reducing the failure action of switching the wallets network', () => {
+    let initialState: WalletState
+
+    let requestAction: SwitchNetworkRequestAction
+    let failureAction: SwitchNetworkFailureAction
+
+    beforeEach(() => {
+      requestAction = switchNetworkRequest(chainId)
+      failureAction = switchNetworkFailure(chainId, error)
+
+      initialState = {
+        ...INITIAL_STATE,
+        loading: loadingReducer([], requestAction)
+      }
+    })
+
+    it('should return a state with loading state cleared', () => {
+      expect(walletReducer(initialState, failureAction)).toEqual({
+        ...INITIAL_STATE,
+        loading: []
+      })
+    })
+  })
+
   it('should return a state with the error set and the loading state and data cleared', () => {
     expect(walletReducer(initialState, failureAction)).toEqual({
       ...INITIAL_STATE,

src/modules/wallet/reducer.ts

@@ -27,7 +27,13 @@ import {
   FETCH_WALLET_SUCCESS,
   FETCH_WALLET_FAILURE,
   SetAppChainIdAction,
-  SET_APP_CHAIN_ID
+  SET_APP_CHAIN_ID,
+  SWITCH_NETWORK_REQUEST,
+  SwitchNetworkRequestAction,
+  SwitchNetworkSuccessAction,
+  SwitchNetworkFailureAction,
+  SWITCH_NETWORK_SUCCESS,
+  SWITCH_NETWORK_FAILURE
 } from './actions'
 
 export type WalletState = {
@@ -48,6 +54,9 @@ export type WalletReducerAction =
   | ConnectWalletRequestAction
   | ConnectWalletSuccessAction
   | ConnectWalletFailureAction
+  | SwitchNetworkRequestAction
+  | SwitchNetworkSuccessAction
+  | SwitchNetworkFailureAction
   | EnableWalletRequestAction
   | EnableWalletSuccessAction
   | EnableWalletFailureAction
@@ -66,6 +75,7 @@ export function walletReducer(
   switch (action.type) {
     case FETCH_WALLET_REQUEST:
     case ENABLE_WALLET_REQUEST:
+    case SWITCH_NETWORK_REQUEST:
     case CONNECT_WALLET_REQUEST: {
       return {
         ...state,
@@ -83,6 +93,7 @@ export function walletReducer(
       }
     }
 
+    case SWITCH_NETWORK_SUCCESS:
     case ENABLE_WALLET_SUCCESS: {
       return {
         ...state,
@@ -91,6 +102,7 @@ export function walletReducer(
       }
     }
 
+    case SWITCH_NETWORK_FAILURE:
     case FETCH_WALLET_FAILURE: {
       return {
         ...state,

src/modules/wallet/selectors.spec.ts

@@ -1,6 +1,10 @@
 import { ChainId } from '@dcl/schemas/dist/dapps/chain-id'
 import { Network } from '@dcl/schemas/dist/dapps/network'
-import { connectWalletRequest, enableWalletRequest } from './actions'
+import {
+  connectWalletRequest,
+  enableWalletRequest,
+  switchNetworkRequest
+} from './actions'
 import { INITIAL_STATE, WalletState } from './reducer'
 import {
   getAddress,
@@ -15,7 +19,8 @@ import {
   getState,
   isConnected,
   isConnecting,
-  isEnabling
+  isEnabling,
+  isSwitchingNetwork
 } from './selectors'
 import { NetworkData, ProviderType, Wallet } from './types'
 import { Networks } from './types'
@@ -198,4 +203,28 @@ describe('Wallet selectors', () => {
       )
     })
   })
+
+  describe('when getting if the user is switching network', () => {
+    describe('and switch network request is loading', () => {
+      beforeEach(() => {
+        initialState.wallet.loading = [
+          switchNetworkRequest(ChainId.ETHEREUM_MAINNET)
+        ]
+      })
+
+      it('should return true', () => {
+        expect(isSwitchingNetwork(initialState)).toBe(true)
+      })
+    })
+
+    describe('and switch network request is not loading', () => {
+      beforeEach(() => {
+        initialState.wallet.loading = []
+      })
+
+      it('should return false', () => {
+        expect(isSwitchingNetwork(initialState)).toBe(false)
+      })
+    })
+  })
 })

src/modules/wallet/selectors.ts

@@ -1,7 +1,11 @@
 import { ChainId } from '@dcl/schemas/dist/dapps/chain-id'
 import { Network } from '@dcl/schemas/dist/dapps/network'
 import { isLoadingType } from '../loading/selectors'
-import { CONNECT_WALLET_REQUEST, ENABLE_WALLET_REQUEST } from './actions'
+import {
+  CONNECT_WALLET_REQUEST,
+  ENABLE_WALLET_REQUEST,
+  SWITCH_NETWORK_REQUEST
+} from './actions'
 import { WalletState } from './reducer'
 
 export const getState: (state: any) => WalletState = state => state.wallet
@@ -30,6 +34,9 @@ export const getNetwork = (state: any) =>
 export const getNetworks = (state: any) =>
   isConnected(state) ? getData(state)!.networks : undefined
 
+export const isSwitchingNetwork = (state: any) =>
+  isLoadingType(getLoading(state), SWITCH_NETWORK_REQUEST)
+
 // Casting as ChainId since it will be initialized at the beginning
 export const getAppChainId = (state: any) =>
   getState(state).appChainId as ChainId