feat(sso): set wallet data after switching tabs

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

@@ -23,5 +23,6 @@ export default ({ api, coreSagas, networks }) => {
     yield takeLatest(actions.exchangeLogin.type, authSagas.exchangeLogin)
     yield takeLatest(actions.exchangeResetPassword.type, authSagas.exchangeResetPassword)
     yield takeLatest(actions.continueLoginProcess, authSagas.continueLoginProcess)
+    yield takeLatest(actions.setCachedWalletData.type, authSagas.setCachedWalletData)
   }
 }

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

@@ -524,6 +524,20 @@ export default ({ api, coreSagas, networks }) => {
     }
   }
 
+  const setCachedWalletData = function* () {
+    const storedGuid = yield select(selectors.cache.getStoredGuid)
+    const lastGuid = yield select(selectors.cache.getLastGuid)
+    const email = yield select(selectors.cache.getEmail)
+    yield put(actions.auth.setProductAuthMetadata({ product: ProductAuthOptions.WALLET }))
+    if (storedGuid || lastGuid) {
+      yield put(actions.form.change(LOGIN_FORM, 'guid', lastGuid || storedGuid))
+      yield put(actions.form.change(LOGIN_FORM, 'email', email))
+      yield put(actions.form.change(LOGIN_FORM, 'step', LoginSteps.ENTER_PASSWORD_WALLET))
+    } else {
+      yield put(actions.form.change(LOGIN_FORM, 'step', LoginSteps.ENTER_EMAIL_GUID))
+    }
+  }
+
   const initializeLogin = function* () {
     try {
       // set loading
@@ -565,7 +579,6 @@ export default ({ api, coreSagas, networks }) => {
         // no guid on path, use cached/stored guid if exists
         case (storedGuid || lastGuid) && !walletGuidOrMagicLinkFromUrl:
           // select required data
-          const isMobileConnected = yield select(selectors.cache.getMobileConnected)
           const email = yield select(selectors.cache.getEmail)
           // logic to be compatible with lastGuid in cache make sure that email matches
           // guid being used for login eventually can be cleared after some time
@@ -807,6 +820,7 @@ export default ({ api, coreSagas, networks }) => {
     resetAccount,
     restore,
     restoreFromMetadata,
+    setCachedWalletData,
     triggerWalletMagicLink
   }
 }

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

@@ -199,6 +199,7 @@ const authSlice = createSlice({
     setAuthType: (state, action) => {
       state.auth_type = action.payload
     },
+    setCachedWalletData: () => {},
     setFirstLogin: (state, action: PayloadAction<AuthStateType['firstLogin']>) => {
       state.firstLogin = action.payload
     },

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

@@ -6,9 +6,10 @@ import styled from 'styled-components'
 import { HeartbeatLoader, Image, Text } from 'blockchain-info-components'
 import { FormGroup, FormItem, TextBox } from 'components/Form'
 import { Wrapper } from 'components/Public'
-import { ProductAuthOptions } from 'data/types'
+import { LoginSteps, ProductAuthOptions } from 'data/types'
 import { isBrowserSupported } from 'services/browser'
 import { required, validEmail } from 'services/forms'
+import { media } from 'services/styles'
 
 import { Props } from '../..'
 import {
@@ -28,17 +29,18 @@ const isSupportedBrowser = isBrowserSupported()
 
 const LoginWrapper = styled(Wrapper)`
   padding: 0 0 32px 0;
+  ${media.mobile`
+  padding: 0 0 16px 0;
+`}
 `
 
 const EnterEmail = (props: Props) => {
   const { authActions, busy, formValues, invalid, submitting } = props
+
   return (
     <LoginWrapper>
       <TabWrapper>
-        <ProductTab
-          backgroundColor='grey000'
-          onClick={() => authActions.setProductAuthMetadata({ product: ProductAuthOptions.WALLET })}
-        >
+        <ProductTab backgroundColor='grey000' onClick={authActions.setCachedWalletData}>
           <Image name='wallet-grayscale' height='28px' style={{ marginRight: '12px' }} />
           <Text size='20px' weight={600} color='grey400'>
             <FormattedMessage id='copy.wallet' defaultMessage='Wallet' />

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

@@ -9,6 +9,7 @@ import { Wrapper } from 'components/Public'
 import { ExchangeErrorCodes, LoginSteps, ProductAuthOptions } from 'data/types'
 import { isBrowserSupported } from 'services/browser'
 import { required } from 'services/forms'
+import { media } from 'services/styles'
 
 import { Props } from '../..'
 import {
@@ -28,6 +29,9 @@ const isSupportedBrowser = isBrowserSupported()
 
 const LoginWrapper = styled(Wrapper)`
   padding: 0 0 32px 0;
+  ${media.mobile`
+  padding: 0 0 16px 0;
+`}
 `
 
 const EnterPasswordExchange = (props: Props) => {
@@ -42,14 +46,10 @@ const EnterPasswordExchange = (props: Props) => {
   } = props
   const passwordError = exchangeError && exchangeError === ExchangeErrorCodes.INVALID_CREDENTIALS
 
-  const onWalletTabClick = () => {
-    authActions.setProductAuthMetadata({ product: ProductAuthOptions.WALLET })
-    props.setStep(LoginSteps.ENTER_EMAIL_GUID)
-  }
   return (
     <LoginWrapper>
       <TabWrapper>
-        <ProductTab backgroundColor='grey000' onClick={onWalletTabClick}>
+        <ProductTab backgroundColor='grey000' onClick={authActions.setCachedWalletData}>
           <Image name='wallet-grayscale' height='28px' style={{ marginRight: '12px' }} />
           <Text size='20px' weight={600} color='grey400'>
             <FormattedMessage id='copy.wallet' defaultMessage='Wallet' />

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

@@ -8,6 +8,7 @@ import { FormError, FormGroup, FormItem, FormLabel, TextBox } from 'components/F
 import { Wrapper } from 'components/Public'
 import { ExchangeErrorCodes } from 'data/types'
 import { required } from 'services/forms'
+import { media } from 'services/styles'
 
 import { Props } from '../..'
 import {

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

@@ -5,6 +5,7 @@ import styled from 'styled-components'
 import { Button, Icon, Text } from 'blockchain-info-components'
 import { Wrapper } from 'components/Public'
 import { LoginSteps } from 'data/types'
+import { media } from 'services/styles'
 
 import { Props as OwnProps } from '../..'
 import { BackArrowFormHeader, CircleBackground, SignUpLink, WrapperWithPadding } from '../../model'
@@ -19,6 +20,9 @@ const LoginWrapper = styled(Wrapper)`
   display: flex;
   flex-direction: column;
   padding: 32px 0;
+  ${media.mobile`
+  padding: 16px 0;
+`}
 `
 
 const CheckEmail = (props: Props) => {

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

@@ -9,6 +9,7 @@ import { Wrapper } from 'components/Public'
 import { ProductAuthOptions } from 'data/types'
 import { isBrowserSupported } from 'services/browser'
 import { required, validWalletIdOrEmail } from 'services/forms'
+import { media } from 'services/styles'
 
 import { Props } from '../..'
 import {
@@ -29,6 +30,9 @@ const LoginWrapper = styled(Wrapper)`
   display: flex;
   flex-direction: column;
   padding: 0 0 32px 0;
+  ${media.mobile`
+  padding: 0 0 16px 0;
+`}
 `
 
 const isSupportedBrowser = isBrowserSupported()

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

@@ -46,6 +46,9 @@ const FormWrapper = styled(Wrapper)`
   flex-direction: column;
   z-index: 1;
   padding: 0 0 32px 0;
+  ${media.mobile`
+  padding: 0 0 16px 0;
+`}
 `
 
 const MobileAuthSideWrapper = styled(Wrapper)`

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

@@ -15,7 +15,7 @@ import {
 import { FormLabel } from 'components/Form'
 import { Wrapper } from 'components/Public'
 import { LoginFormType, LoginSteps } from 'data/types'
-import { media } from 'services/styles'
+import { isMobile, media } from 'services/styles'
 
 export const removeWhitespace = (string) => string.replace(/\s/g, ``)
 
@@ -86,7 +86,7 @@ export const RectangleBackground = styled.div`
   border-radius: 8px;
   margin-top: 24px;
 `
-const TopRow = styled.div<{ marginTop?: string }>`
+const BackArrowWrapper = styled.div<{ marginTop?: string }>`
   display: flex;
   justify-content: space-between;
   margin-bottom: 24px;
@@ -142,7 +142,7 @@ export const BackArrowFormHeader = (props: {
   const lastPartGuid = guid && guid.slice(-4)
   return (
     <>
-      <TopRow marginTop={props.marginTop}>
+      <BackArrowWrapper marginTop={props.marginTop}>
         <BackArrow onClick={() => props.handleBackArrowClick()}>
           {!props.hideBackArrow && (
             <Icon
@@ -159,7 +159,7 @@ export const BackArrowFormHeader = (props: {
           </Text>
         </BackArrow>
         <EmailAndGuid>
-          {props.hideGuid || props.formValues.email ? (
+          {props.hideGuid || props.formValues.email || (props.formValues.email && isMobile()) ? (
             <Text
               color='blue600'
               size='12px'
@@ -176,13 +176,14 @@ export const BackArrowFormHeader = (props: {
           )}
           {props.formValues.step !== LoginSteps.CHECK_EMAIL &&
             props.formValues.email &&
-            !props.hideGuid && (
+            !props.hideGuid &&
+            !isMobile() && (
               <Text size='12px' weight={500} color='grey400'>
                 ({firstPartGuid}...{lastPartGuid})
               </Text>
             )}
         </EmailAndGuid>
-      </TopRow>
+      </BackArrowWrapper>
     </>
   )
 }