chore(refactor): collocate sofi and auth type selectors (#6220)

packages/blockchain-wallet-v4-frontend/src/scenes/Login/Exchange/TwoFA/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { Field } from 'redux-form'
 import styled from 'styled-components'
 
@@ -12,6 +12,7 @@ import FormLabel from 'components/Form/FormLabel'
 import TextBox from 'components/Form/TextBox'
 import { Wrapper } from 'components/Public'
 import { trackEvent } from 'data/analytics/slice'
+import { getAuthType } from 'data/auth/selectors'
 import { ProductAuthOptions } from 'data/auth/types'
 import { Analytics, ExchangeErrorCodes } from 'data/types'
 import { required } from 'services/forms'
@@ -33,7 +34,6 @@ const LoginWrapper = styled(Wrapper)`
 `
 const TwoFAExchange = (props: Props) => {
   const {
-    authType,
     busy,
     cache,
     exchangeError,
@@ -48,6 +48,8 @@ const TwoFAExchange = (props: Props) => {
 
   const dispatch = useDispatch()
 
+  const authType = useSelector(getAuthType)
+
   useEffect(() => {
     const twoFAType = getTwoFaType(authType)
     dispatch(

packages/blockchain-wallet-v4-frontend/src/scenes/Login/Wallet/CheckEmail/index.tsx

@@ -1,11 +1,13 @@
 import React, { SyntheticEvent, useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import styled from 'styled-components'
 
 import { Button, Icon, Text } from 'blockchain-info-components'
 import { Wrapper } from 'components/Public'
+import { selectAlerts } from 'data/alerts/selectors'
 import { trackEvent } from 'data/analytics/slice'
+import { getIsSofi } from 'data/auth/selectors'
 import { Analytics, LoginSteps } from 'data/types'
 import { VERIFY_EMAIL_SENT_ERROR } from 'services/alerts'
 import { media } from 'services/styles'
@@ -39,6 +41,9 @@ const CheckEmail = (props: Props) => {
   const [disabled, setDisabled] = useState<boolean>(true)
   const [sentState, setSentState] = useState<'checkEmail' | 'sent'>('sent')
 
+  const alerts = useSelector(selectAlerts)
+  const isSofi = useSelector(getIsSofi)
+
   const dispatch = useDispatch()
 
   useEffect(() => {
@@ -63,15 +68,15 @@ const CheckEmail = (props: Props) => {
     )
   }, [])
 
-  const hasErrorAlert = props.alerts.find((alert) => alert.message === VERIFY_EMAIL_SENT_ERROR)
+  const hasErrorAlert = alerts.find((alert) => alert.message === VERIFY_EMAIL_SENT_ERROR)
 
   return (
     <LoginWrapper>
       <WrapperWithPadding>
         <BackArrowHeader
           {...props}
           handleBackArrowClick={() => {
-            if (props.isSofi) {
+            if (isSofi) {
               props.setStep(LoginSteps.SOFI_EMAIL)
             } else {
               props.handleBackArrowClickWallet()

packages/blockchain-wallet-v4-frontend/src/scenes/Login/Wallet/EnterPassword/index.tsx

@@ -12,12 +12,14 @@ import FormLabel from 'components/Form/FormLabel'
 import PasswordBox from 'components/Form/PasswordBox'
 import { Wrapper } from 'components/Public'
 import QRCodeWrapper from 'components/QRCodeWrapper'
+import { getIsSofi } from 'data/auth/selectors'
 import { getChannelPrivKeyForQrData } from 'data/cache/selectors'
+import { getInitialRedirect } from 'data/goals/selectors'
 import { ProductAuthOptions, UnifiedAccountRedirectType } from 'data/types'
 import { required } from 'services/forms'
 import { isMobile, media } from 'services/styles'
 
-import { Props as OwnProps } from '../..'
+import { Props } from '../..'
 import BackArrowHeader from '../../components/BackArrowHeader'
 import NeedHelpLink from '../../components/NeedHelpLink'
 import ProductTabMenu from '../../components/ProductTabMenu'
@@ -71,22 +73,22 @@ const SettingsGoalText = styled.div`
   margin: 36px 0 24px;
 `
 
-const EnterPasswordWallet = (props: OwnProps) => {
+const EnterPasswordWallet = (props: Props) => {
   const {
     busy,
     exchangeTabClicked,
     formValues,
     handleBackArrowClickWallet,
-    initialRedirect,
     invalid,
-    isSofi,
     magicLinkData,
     productAuthMetadata,
     submitting,
     walletError
   } = props
 
   const qrData = useSelector(getChannelPrivKeyForQrData)
+  const isSofi = useSelector(getIsSofi)
+  const initialRedirect = useSelector(getInitialRedirect) as UnifiedAccountRedirectType
 
   const passwordError = walletError?.toLowerCase().includes('wrong_wallet_password')
   const accountLocked =

packages/blockchain-wallet-v4-frontend/src/scenes/Login/Wallet/TwoFA/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { LinkContainer } from 'react-router-bootstrap'
 import { Field } from 'redux-form'
 import styled from 'styled-components'
@@ -15,6 +15,7 @@ import TextBox from 'components/Form/TextBox'
 import { Wrapper } from 'components/Public'
 import { auth } from 'data/actions'
 import { trackEvent } from 'data/analytics/slice'
+import { getAuthType } from 'data/auth/selectors'
 import { ProductAuthOptions } from 'data/auth/types'
 import { Analytics, ExchangeErrorCodes } from 'data/types'
 import { required } from 'services/forms'
@@ -45,7 +46,6 @@ const ResponsiveRow = styled(Row)`
 
 const TwoFAWallet = (props: Props) => {
   const {
-    authType,
     busy,
     exchangeError,
     formValues,
@@ -63,6 +63,9 @@ const TwoFAWallet = (props: Props) => {
     walletError?.toLowerCase().includes('account deactivated')
   const sanctionedRegionError = exchangeError === ExchangeErrorCodes.NOT_ACCEPTABLE
   const twoFactorError = walletError?.toLowerCase().includes('authentication code')
+
+  const authType = useSelector(getAuthType)
+
   const twoFAType = getTwoFaType(authType)
 
   const dispatch = useDispatch()

packages/blockchain-wallet-v4-frontend/src/scenes/Login/index.tsx

@@ -8,14 +8,12 @@ import Form from 'components/Form/Form'
 import { actions, selectors } from 'data'
 import { LOGIN_FORM } from 'data/auth/model'
 import {
-  AlertsState,
   Analytics,
   ExchangeErrorCodes,
   LoginFormType,
   LoginSteps,
   PlatformTypes,
-  ProductAuthOptions,
-  UnifiedAccountRedirectType
+  ProductAuthOptions
 } from 'data/types'
 
 import UrlNoticeBar from './components/UrlNoticeBar'
@@ -213,13 +211,10 @@ class Login extends PureComponent<InjectedFormProps<{}, Props> & Props> {
 
 const mapStateToProps = (state) => ({
   accountUnificationFlow: selectors.auth.getAccountUnificationFlowType(state),
-  alerts: selectors.alerts.selectAlerts(state) as AlertsState,
-  authType: selectors.auth.getAuthType(state) as number,
   cache: selectors.cache.getCache(state),
   data: getData(state),
   exchangeLoginDataR: selectors.auth.getExchangeLogin(state) as RemoteDataType<any, any>,
   formValues: selectors.form.getFormValues(LOGIN_FORM)(state) as LoginFormType,
-  initialRedirect: selectors.goals.getInitialRedirect(state) as UnifiedAccountRedirectType,
   initialValues: {
     step: LoginSteps.ENTER_EMAIL_GUID
   },

packages/blockchain-wallet-v4-frontend/src/scenes/Login/selectors.ts

@@ -8,7 +8,6 @@ import { LoginFormType } from 'data/types'
 
 export const getData = (state: RootState) => {
   const accountUnificationFlow = selectors.auth.getAccountUnificationFlowType(state)
-  const authType = selectors.auth.getAuthType(state)
   const formValues = selectors.form.getFormValues(LOGIN_FORM)(state) as LoginFormType
   const exchangeLoginR = selectors.auth.getExchangeLogin(state)
   const jwtToken = selectors.auth.getJwtToken(state)
@@ -23,7 +22,6 @@ export const getData = (state: RootState) => {
       walletLogin: ExtractSuccess<typeof walletLoginR>
     ) => ({
       accountUnificationFlow,
-      authType,
       exchangeLogin,
       formValues,
       jwtToken,