chore(refactor): collocate usage of cache, unified, magic link product type

packages/blockchain-wallet-v4-frontend/src/data/auth/selectors.ts

@@ -50,6 +50,10 @@ export function getMagicLinkData(state: RootState): AuthStateType['magicLinkData
   return state.auth.magicLinkData
 }
 
+export function getMagicLinkDataPlatformType(state: RootState) {
+  return state.auth.magicLinkData?.platform_type
+}
+
 export function getManifest(state: RootState): AuthStateType['manifestFile'] {
   return state.auth.manifestFile
 }

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

@@ -26,14 +26,13 @@ const LoginWrapper = styled(Wrapper)`
 `
 
 const EnterEmail = (props: Props) => {
-  const { busy, formValues, invalid, magicLinkData, submitting, walletTabClicked } = props
+  const { busy, formValues, invalid, submitting, walletTabClicked } = props
 
   return (
     <LoginWrapper>
       <ProductTabMenu
         active={ProductAuthOptions.EXCHANGE}
         onWalletTabClick={walletTabClicked}
-        platform={magicLinkData?.platform_type}
         product={ProductAuthOptions.EXCHANGE}
       />
       <WrapperWithPadding>
@@ -74,7 +73,7 @@ const EnterEmail = (props: Props) => {
           </ActionButton>
         </LinkRow>
       </WrapperWithPadding>
-      <SignupLink platform={magicLinkData?.platform_type} />
+      <SignupLink />
     </LoginWrapper>
   )
 }

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

@@ -32,12 +32,10 @@ const LoginWrapper = styled(Wrapper)`
 
 const EnterPasswordExchange = (props: Props) => {
   const {
-    cache,
     exchangeError,
     formValues,
     handleBackArrowClickExchange,
     invalid,
-    magicLinkData,
     productAuthMetadata,
     submitting,
     walletTabClicked
@@ -65,7 +63,6 @@ const EnterPasswordExchange = (props: Props) => {
       <ProductTabMenu
         active={ProductAuthOptions.EXCHANGE}
         onWalletTabClick={walletTabClicked}
-        platform={magicLinkData?.platform_type}
         product={ProductAuthOptions.EXCHANGE}
       />
       <WrapperWithPadding>
@@ -74,7 +71,6 @@ const EnterPasswordExchange = (props: Props) => {
           handleBackArrowClick={handleBackArrowClickExchange}
           hideGuid
           marginTop='28px'
-          platform={magicLinkData?.platform_type}
           product={ProductAuthOptions.EXCHANGE}
         />
         <FormGroup>
@@ -131,11 +127,10 @@ const EnterPasswordExchange = (props: Props) => {
             origin='PASSWORD'
             platform={productAuthMetadata.platform}
             product={ProductAuthOptions.EXCHANGE}
-            unified={cache.unifiedAccount}
           />
         </CenteredColumn>
       </WrapperWithPadding>
-      <SignupLink platform={magicLinkData?.platform_type} />
+      <SignupLink />
     </LoginWrapper>
   )
 }

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

@@ -48,7 +48,6 @@ const InstitutionalPortal = (props: Props) => {
     formValues,
     handleBackArrowClickExchange,
     invalid,
-    magicLinkData,
     productAuthMetadata,
     submitting
   } = props
@@ -144,7 +143,7 @@ const InstitutionalPortal = (props: Props) => {
           />
         </LinkRow>
       </WrapperWithPadding>
-      <SignupLink platform={magicLinkData?.platform_type} />
+      <SignupLink />
     </LoginWrapper>
   )
 }

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

@@ -35,12 +35,10 @@ const LoginWrapper = styled(Wrapper)`
 const TwoFAExchange = (props: Props) => {
   const {
     busy,
-    cache,
     exchangeError,
     formValues,
     handleBackArrowClickExchange,
     invalid,
-    magicLinkData,
     productAuthMetadata,
     submitting
   } = props
@@ -71,7 +69,6 @@ const TwoFAExchange = (props: Props) => {
           formValues={formValues}
           handleBackArrowClick={handleBackArrowClickExchange}
           hideGuid
-          platform={magicLinkData?.platform_type}
         />
         <FormGroup>
           <FormItem>
@@ -129,11 +126,10 @@ const TwoFAExchange = (props: Props) => {
             origin='2FA'
             platform={productAuthMetadata.platform}
             product={ProductAuthOptions.EXCHANGE}
-            unified={cache.unifiedAccount}
           />
         </LinkRow>
       </WrapperWithPadding>
-      <SignupLink platform={magicLinkData?.platform_type} />
+      <SignupLink />
     </LoginWrapper>
   )
 }

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

@@ -149,7 +149,7 @@ const CheckEmail = (props: Props) => {
           )}
         </Button>
       </WrapperWithPadding>
-      <SignupLink platform={props.magicLinkData?.platform_type} />
+      <SignupLink />
     </LoginWrapper>
   )
 }

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

@@ -31,8 +31,7 @@ const LoginWrapper = styled(Wrapper)`
 `
 
 const EnterEmailOrGuid = (props: Props) => {
-  const { busy, exchangeTabClicked, formValues, invalid, magicLinkData, submitting, walletError } =
-    props
+  const { busy, exchangeTabClicked, formValues, invalid, submitting, walletError } = props
   const guidError = walletError?.toLowerCase().includes('unknown wallet id')
 
   const isMnemonicRecoveryEnabled = useSelector(getMnemonicRecoveryEnabled).getOrElse(false)
@@ -100,7 +99,7 @@ const EnterEmailOrGuid = (props: Props) => {
           )}
         </LinkRow>
       </WrapperWithPadding>
-      <SignupLink platform={magicLinkData?.platform_type} />
+      <SignupLink />
     </LoginWrapper>
   )
 }

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

@@ -80,7 +80,6 @@ const EnterPasswordWallet = (props: Props) => {
     formValues,
     handleBackArrowClickWallet,
     invalid,
-    magicLinkData,
     productAuthMetadata,
     submitting,
     walletError
@@ -112,7 +111,6 @@ const EnterPasswordWallet = (props: Props) => {
             <BackArrowHeader
               formValues={formValues}
               handleBackArrowClick={handleBackArrowClickWallet}
-              platform={magicLinkData?.platform_type}
               marginTop='28px'
             />
           )}

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

@@ -51,7 +51,6 @@ const TwoFAWallet = (props: Props) => {
     formValues,
     handleBackArrowClickWallet,
     invalid,
-    magicLinkData,
     productAuthMetadata,
     submitting,
     walletError
@@ -98,7 +97,6 @@ const TwoFAWallet = (props: Props) => {
           formValues={formValues}
           handleBackArrowClick={handleBackArrowClickWallet}
           marginTop='28px'
-          platform={magicLinkData?.platform_type}
           product={props.productAuthMetadata.product}
         />
         {twoFAType && (
@@ -191,7 +189,7 @@ const TwoFAWallet = (props: Props) => {
           />
         </CenteredColumn>
       </WrapperWithPadding>
-      <SignupLink platform={magicLinkData?.platform_type} />
+      <SignupLink />
     </LoginWrapper>
   )
 }

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

@@ -1,8 +1,10 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
+import { useSelector } from 'react-redux'
 import styled from 'styled-components'
 
 import { Icon, Text } from 'blockchain-info-components'
+import { getMagicLinkDataPlatformType } from 'data/auth/selectors'
 import { LoginFormType, LoginSteps, PlatformTypes, ProductAuthOptions } from 'data/auth/types'
 import { isMobile } from 'services/styles'
 
@@ -29,7 +31,6 @@ type Props = {
   handleBackArrowClick: () => void
   hideGuid?: boolean
   marginTop?: string
-  platform?: PlatformTypes
   product?: ProductAuthOptions
 }
 
@@ -38,9 +39,10 @@ const BackArrowHeader = ({
   handleBackArrowClick,
   hideGuid,
   marginTop,
-  platform,
   product
 }: Props) => {
+  const platform = useSelector(getMagicLinkDataPlatformType)
+
   const isExchangeLogin = product === ProductAuthOptions.EXCHANGE
   const email = isExchangeLogin
     ? formValues.exchangeEmail

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

@@ -1,16 +1,19 @@
 import React 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 { Link } from 'blockchain-info-components'
 import { trackEvent } from 'data/analytics/slice'
 import { Analytics } from 'data/analytics/types'
+import { getUnifiedAccountStatus } from 'data/cache/selectors'
 import { PlatformTypes, ProductAuthOptions } from 'data/types'
 
-const NeedHelpLink = ({ origin, platform, product, unified }: Props) => {
+const NeedHelpLink = ({ origin, platform, product }: Props) => {
   const dispatch = useDispatch()
 
+  const unified = useSelector(getUnifiedAccountStatus)
+
   const onClick = () => {
     dispatch(
       trackEvent({
@@ -40,7 +43,6 @@ type Props = {
   origin: string
   platform?: PlatformTypes
   product: ProductAuthOptions
-  unified?: boolean
 }
 
 export default NeedHelpLink

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

@@ -1,8 +1,10 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
+import { useSelector } from 'react-redux'
 import styled from 'styled-components'
 
 import { Image, Text } from 'blockchain-info-components'
+import { getMagicLinkDataPlatformType } from 'data/auth/selectors'
 import { PlatformTypes, ProductAuthOptions } from 'data/auth/types'
 
 const TabWrapper = styled.div`
@@ -29,6 +31,7 @@ const ProductTab = styled.div<{
   background-color: ${(props) =>
     !props.isActive || props.hideWalletTab ? props.theme.grey000 : 'none'};
 `
+
 const ProductIcon = styled(Image)`
   margin-right: 12px;
 `
@@ -37,15 +40,15 @@ const ProductTabMenu = ({
   active,
   onExchangeTabClick,
   onWalletTabClick,
-  platform,
   product
 }: {
   active: ProductAuthOptions
   onExchangeTabClick?: () => void
   onWalletTabClick?: () => void
-  platform?: PlatformTypes
   product?: ProductAuthOptions
 }) => {
+  const platform = useSelector(getMagicLinkDataPlatformType)
+
   const isWalletActive = active === ProductAuthOptions.WALLET
   // if webview is being opened from exchange mobile app
   // want to hide the wallet tab

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

@@ -1,9 +1,11 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
+import { useSelector } from 'react-redux'
 import { LinkContainer } from 'react-router-bootstrap'
 import styled from 'styled-components'
 
 import { Text } from 'blockchain-info-components'
+import { getMagicLinkDataPlatformType } from 'data/auth/selectors'
 import { PlatformTypes } from 'data/types'
 import { media } from 'services/styles'
 
@@ -37,7 +39,9 @@ const Row = styled.div`
   `}
 `
 
-const SignUpLink = ({ platform }: { platform?: PlatformTypes }) => {
+const SignUpLink = () => {
+  const platform = useSelector(getMagicLinkDataPlatformType)
+
   if (platform === PlatformTypes.ANDROID || platform === PlatformTypes.IOS) return null
 
   return (

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

@@ -207,7 +207,6 @@ const mapStateToProps = (state) => ({
   exchangeLoginDataR: selectors.auth.getExchangeLogin(state) as RemoteDataType<any, any>,
   formValues: selectors.form.getFormValues(LOGIN_FORM)(state) as LoginFormType,
   jwtToken: selectors.auth.getJwtToken(state),
-  magicLinkData: selectors.auth.getMagicLinkData(state),
   productAuthMetadata: selectors.auth.getProductAuthMetadata(state),
   walletLoginDataR: selectors.auth.getLogin(state) as RemoteDataType<any, any>
 })