Login refactor main

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

@@ -1,10 +1,11 @@
-import { path, prop } from 'ramda'
+import { path } from 'ramda'
 
 import { crypto as wCrypto } from '@core'
+import { RootState } from 'data/rootReducer'
 
 export const getLastAnnouncementState = (state): object | undefined =>
   path(['cache', 'announcements'], state)
-export const getCache = (state) => prop('cache', state)
+export const getCache = (state: RootState) => state.cache
 export const getEmail = (state): string | undefined => path(['cache', 'lastEmail'], state)
 export const getExchangeEmail = (state): string | undefined =>
   path(['cache', 'exchangeEmail'], state)

packages/blockchain-wallet-v4-frontend/src/data/form/actions.ts

@@ -35,8 +35,3 @@ export {
   untouch,
   updateSyncErrors
 } from 'redux-form'
-
-export const change2 = (form, field, value) => ({
-  payload: { field, form, value },
-  type: AT.CHANGE2
-})

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

@@ -26,16 +26,11 @@ const LoginWrapper = styled(Wrapper)`
 `
 
 const EnterEmail = (props: Props) => {
-  const { busy, formValues, invalid, magicLinkData, submitting, walletTabClicked } = props
+  const { busy, formValues, invalid, isMobilePlatform, submitting } = props
 
   return (
     <LoginWrapper>
-      <ProductTabMenu
-        active={ProductAuthOptions.EXCHANGE}
-        onWalletTabClick={walletTabClicked}
-        platform={magicLinkData?.platform_type}
-        product={ProductAuthOptions.EXCHANGE}
-      />
+      <ProductTabMenu isMobilePlatform={isMobilePlatform} product={ProductAuthOptions.EXCHANGE} />
       <WrapperWithPadding>
         <FormGroup>
           <FormItem style={{ marginTop: '40px' }}>
@@ -74,7 +69,7 @@ const EnterEmail = (props: Props) => {
           </ActionButton>
         </LinkRow>
       </WrapperWithPadding>
-      <SignupLink platform={magicLinkData?.platform_type} />
+      {isMobilePlatform && <SignupLink />}
     </LoginWrapper>
   )
 }

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

@@ -32,15 +32,13 @@ const LoginWrapper = styled(Wrapper)`
 
 const EnterPasswordExchange = (props: Props) => {
   const {
-    cache,
     exchangeError,
     formValues,
     handleBackArrowClickExchange,
     invalid,
-    magicLinkData,
+    isMobilePlatform,
     productAuthMetadata,
-    submitting,
-    walletTabClicked
+    submitting
   } = props
 
   const dispatch = useDispatch()
@@ -62,20 +60,14 @@ const EnterPasswordExchange = (props: Props) => {
 
   return (
     <LoginWrapper>
-      <ProductTabMenu
-        active={ProductAuthOptions.EXCHANGE}
-        onWalletTabClick={walletTabClicked}
-        platform={magicLinkData?.platform_type}
-        product={ProductAuthOptions.EXCHANGE}
-      />
+      <ProductTabMenu isMobilePlatform={isMobilePlatform} product={ProductAuthOptions.EXCHANGE} />
       <WrapperWithPadding>
         <BackArrowHeader
           formValues={formValues}
           handleBackArrowClick={handleBackArrowClickExchange}
           hideGuid
           marginTop='28px'
-          platform={magicLinkData?.platform_type}
-          product={ProductAuthOptions.EXCHANGE}
+          hideBackArrow={isMobilePlatform}
         />
         <FormGroup>
           <FormItem>
@@ -131,11 +123,10 @@ const EnterPasswordExchange = (props: Props) => {
             origin='PASSWORD'
             platform={productAuthMetadata.platform}
             product={ProductAuthOptions.EXCHANGE}
-            unified={cache.unifiedAccount}
           />
         </CenteredColumn>
       </WrapperWithPadding>
-      <SignupLink platform={magicLinkData?.platform_type} />
+      {isMobilePlatform && <SignupLink />}
     </LoginWrapper>
   )
 }

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

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

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,21 +34,21 @@ const LoginWrapper = styled(Wrapper)`
 `
 const TwoFAExchange = (props: Props) => {
   const {
-    authType,
     busy,
-    cache,
     exchangeError,
     formValues,
     handleBackArrowClickExchange,
     invalid,
-    magicLinkData,
+    isMobilePlatform,
     productAuthMetadata,
     submitting
   } = props
   const twoFactorError = exchangeError === ExchangeErrorCodes.WRONG_2FA
 
   const dispatch = useDispatch()
 
+  const authType = useSelector(getAuthType)
+
   useEffect(() => {
     const twoFAType = getTwoFaType(authType)
     dispatch(
@@ -69,7 +70,7 @@ const TwoFAExchange = (props: Props) => {
           formValues={formValues}
           handleBackArrowClick={handleBackArrowClickExchange}
           hideGuid
-          platform={magicLinkData?.platform_type}
+          hideBackArrow={isMobilePlatform}
         />
         <FormGroup>
           <FormItem>
@@ -127,11 +128,10 @@ const TwoFAExchange = (props: Props) => {
             origin='2FA'
             platform={productAuthMetadata.platform}
             product={ProductAuthOptions.EXCHANGE}
-            unified={cache.unifiedAccount}
           />
         </LinkRow>
       </WrapperWithPadding>
-      <SignupLink platform={magicLinkData?.platform_type} />
+      {isMobilePlatform && <SignupLink />}
     </LoginWrapper>
   )
 }

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

@@ -1,15 +1,13 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import { useDispatch } from 'react-redux'
+import { push } from 'connected-react-router'
 import styled from 'styled-components'
 
 import { Badge, Button, Image, Text } from 'blockchain-info-components'
 import { Wrapper } from 'components/Public'
-import { actions } from 'data'
-import { isBrowserAndroid, isBrowserIOS } from 'services/browser'
 import { isMobile, media } from 'services/styles'
 
-import { Props } from '../..'
 import { CircleBackground } from '../../model'
 
 const ContentWrapper = styled.div`
@@ -37,14 +35,7 @@ const AppButtons = styled.footer`
   `};
 `
 
-const ContinueOnMobile = (props: Props) => {
-  const dispatch = useDispatch()
-  // Add check here to make sure that there is wallet data
-  // route should navigate to login if there's no wallet data
-  const sofiWalletRedirect = () => {
-    dispatch(actions.router.push('/home'))
-  }
-
+const ContinueOnMobile = () => {
   const APP_URL = 'https://blockchainwallet.page.link/dashboard'
 
   const downloadMobileApp = () => {

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

@@ -17,6 +17,7 @@ import { media } from 'services/styles'
 
 import { Props } from '../..'
 import { ActionButton, LinkRow, LoginFormLabel, SoFiWrapperWithPadding } from '../../model'
+import { push } from 'connected-react-router'
 
 const LoginWrapper = styled(Wrapper)`
   display: flex;
@@ -43,22 +44,22 @@ const HelperText = styled(Text)`
 `
 
 const Email = (props: Props) => {
-  const { busy, formValues, invalid, routerActions, submitting } = props
+  const { busy, formValues, invalid, submitting } = props
 
   const { sofiJwtPayload } = useSelector((state: RootState) => state.profile.sofiData).getOrElse(
     {}
   ) as SofiMigrationStatusResponseType
 
   useEffect(() => {
     if (!sofiJwtPayload) {
-      routerActions.push('/sofi-error')
+      push('/sofi-error')
     }
   }, [])
 
   return (
     <LoginWrapper>
       <SoFiWrapperWithPadding>
-        <BackArrow onClick={() => routerActions.push('/sofi')}>
+        <BackArrow onClick={() => push('/sofi')}>
           <Icon
             data-e2e='signupBack'
             name='arrow-back'

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

@@ -1,29 +1,27 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import { useDispatch } from 'react-redux'
+import { push } from 'connected-react-router'
 import styled from 'styled-components'
 
 import { Button, Image, Text } from 'blockchain-info-components'
 import { Wrapper } from 'components/Public'
-import { actions } from 'data'
 import { isBrowserAndroid, isBrowserIOS } from 'services/browser'
 import { isMobile } from 'services/styles'
 
-import { Props } from '../..'
-
 const ContentWrapper = styled.div`
   display: flex;
   text-align: center;
   align-items: center;
   flex-direction: column;
 `
 
-const SofiSuccess = (props: Props) => {
+const SofiSuccess = () => {
   const dispatch = useDispatch()
   // Add check here to make sure that there is wallet data
   // route should navigate to login if there's no wallet data
   const sofiWalletRedirect = () => {
-    dispatch(actions.router.push('/home'))
+    dispatch(push('/home'))
   }
   const APP_URL = 'https://blockchainwallet.page.link/dashboard'
 

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

@@ -11,17 +11,10 @@ import TextBox from 'components/Form/TextBox'
 import { Wrapper } from 'components/Public'
 import { actions } from 'data'
 import { Analytics } from 'data/types'
-import { removeWhitespace } from 'services/forms/normalizers'
 import { media } from 'services/styles'
 
 import { Props } from '../..'
-import {
-  ActionButton,
-  GuidError,
-  LinkRow,
-  LoginFormLabel,
-  SoFiWrapperWithPadding
-} from '../../model'
+import { ActionButton, LinkRow, LoginFormLabel, SoFiWrapperWithPadding } from '../../model'
 
 const LoginWrapper = styled(Wrapper)`
   display: flex;
@@ -38,7 +31,7 @@ const FormBody = styled.div`
 `
 
 const SofiVerifyID = (props: Props) => {
-  const { busy, formActions, formValues, invalid, submitting } = props
+  const { busy, formValues, invalid, submitting } = props
 
   const dispatch = useDispatch()
 

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

@@ -3,18 +3,17 @@ import React from 'react'
 import { getAuthorizeVerifyDevice } from 'data/auth/selectors'
 import { useRemote } from 'hooks'
 
-import { Props } from '..'
 import Error from './template.error'
 import Loading from './template.loading'
 import Success from './template.success'
 
-const VerifyMagicLink = (props: Props) => {
+const VerifyMagicLink = () => {
   const { data, error, isLoading, isNotAsked } = useRemote(getAuthorizeVerifyDevice)
 
   if (isLoading || isNotAsked) return <Loading />
 
   if (error) return <Error error={error} />
-  return <Success {...props} {...data} />
+  return <Success {...data} />
 }
 
 export default VerifyMagicLink