chore(refactor): fix login wallet components (#6173)

blockchain · Dec 14, 2023 · 34a965e · 34a965e
1 parent ee44a8c
commit 34a965e
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 55 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Wallet/EnterEmailOrGuid/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Wallet/EnterEmailOrGuid/index.tsx
@@ -31,7 +31,7 @@ const LoginWrapper = styled(Wrapper)`
 const EnterEmailOrGuid = (props: Props) => {
   const { busy, exchangeTabClicked, formValues, invalid, magicLinkData, submitting, walletError } =
     props
-  const guidError = walletError && walletError.toLowerCase().includes('unknown wallet id')
+  const guidError = walletError?.toLowerCase().includes('unknown wallet id')
 
   return (
     <LoginWrapper>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Wallet/EnterPassword/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Wallet/EnterPassword/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
-import { connect, ConnectedProps } from 'react-redux'
-import { bindActionCreators } from 'redux'
+import { useSelector } from 'react-redux'
 import { Field } from 'redux-form'
 import styled from 'styled-components'
 
@@ -13,8 +12,8 @@ import FormLabel from 'components/Form/FormLabel'
 import PasswordBox from 'components/Form/PasswordBox'
 import { Wrapper } from 'components/Public'
 import QRCodeWrapper from 'components/QRCodeWrapper'
-import { actions, selectors } from 'data'
-import { LoginSteps, ProductAuthOptions, UnifiedAccountRedirectType } from 'data/types'
+import { getChannelPrivKeyForQrData } from 'data/cache/selectors'
+import { ProductAuthOptions, UnifiedAccountRedirectType } from 'data/types'
 import { required } from 'services/forms'
 import { isMobile, media } from 'services/styles'
 
@@ -35,13 +34,7 @@ const OuterWrapper = styled.div`
     padding: 0;
   `};
 `
-const SideWrapper = styled.div`
-  height: 96%;
-  width: 274px;
-  ${media.tabletL`
-    display: none;
-  `};
-`
+
 const FormWrapper = styled(Wrapper)`
   display: flex;
   flex-direction: column;
@@ -78,7 +71,7 @@ const SettingsGoalText = styled.div`
   margin: 36px 0 24px;
 `
 
-const EnterPasswordWallet = (props: Props) => {
+const EnterPasswordWallet = (props: OwnProps) => {
   const {
     busy,
     exchangeTabClicked,
@@ -89,12 +82,13 @@ const EnterPasswordWallet = (props: Props) => {
     isSofi,
     magicLinkData,
     productAuthMetadata,
-    qrData,
     submitting,
     walletError
   } = props
 
-  const passwordError = walletError && walletError.toLowerCase().includes('wrong_wallet_password')
+  const qrData = useSelector(getChannelPrivKeyForQrData)
+
+  const passwordError = walletError?.toLowerCase().includes('wrong_wallet_password')
   const accountLocked =
     walletError &&
     (walletError.toLowerCase().includes('this account has been locked') ||
@@ -114,7 +108,7 @@ const EnterPasswordWallet = (props: Props) => {
         <WrapperWithPadding>
           {!settingsRedirect && (
             <BackArrowHeader
-              {...props}
+              formValues={formValues}
               handleBackArrowClick={handleBackArrowClickWallet}
               platform={magicLinkData?.platform_type}
               marginTop='28px'
@@ -229,18 +223,4 @@ const EnterPasswordWallet = (props: Props) => {
   )
 }
 
-const mapStateToProps = (state) => ({
-  phonePubKey: selectors.cache.getPhonePubkey(state),
-  qrData: selectors.cache.getChannelPrivKeyForQrData(state),
-  walletLoginData: selectors.auth.getLogin(state)
-})
-
-const mapDispatchToProps = (dispatch) => ({
-  middlewareActions: bindActionCreators(actions.ws, dispatch)
-})
-
-const connector = connect(mapStateToProps, mapDispatchToProps)
-
-type Props = OwnProps & ConnectedProps<typeof connector>
-
-export default connector(EnterPasswordWallet)
+export default EnterPasswordWallet
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Wallet/TwoFA/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Wallet/TwoFA/index.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
+import { useDispatch } from 'react-redux'
 import { LinkContainer } from 'react-router-bootstrap'
 import { Field } from 'redux-form'
 import styled from 'styled-components'
@@ -12,6 +13,8 @@ import FormLabel from 'components/Form/FormLabel'
 import PasswordBox from 'components/Form/PasswordBox'
 import TextBox from 'components/Form/TextBox'
 import { Wrapper } from 'components/Public'
+import { auth } from 'data/actions'
+import { trackEvent } from 'data/analytics/slice'
 import { ProductAuthOptions } from 'data/auth/types'
 import { Analytics, ExchangeErrorCodes } from 'data/types'
 import { required } from 'services/forms'
@@ -42,8 +45,6 @@ const ResponsiveRow = styled(Row)`
 
 const TwoFAWallet = (props: Props) => {
   const {
-    analyticsActions,
-    authActions,
     authType,
     busy,
     exchangeError,
@@ -57,52 +58,57 @@ const TwoFAWallet = (props: Props) => {
   } = props
 
   const accountLocked =
-    walletError &&
-    (walletError.toLowerCase().includes('this account has been locked') ||
-      walletError.toLowerCase().includes('account is locked') ||
-      walletError.toLowerCase().includes('account deactivated'))
-  const sanctionedRegionError = exchangeError && exchangeError === ExchangeErrorCodes.NOT_ACCEPTABLE
-  const twoFactorError = walletError && walletError.toLowerCase().includes('authentication code')
-  const { product } = productAuthMetadata
+    walletError?.toLowerCase().includes('this account has been locked') ||
+    walletError?.toLowerCase().includes('account is locked') ||
+    walletError?.toLowerCase().includes('account deactivated')
+  const sanctionedRegionError = exchangeError === ExchangeErrorCodes.NOT_ACCEPTABLE
+  const twoFactorError = walletError?.toLowerCase().includes('authentication code')
+  const twoFAType = getTwoFaType(authType)
+
+  const dispatch = useDispatch()
+
   const handleSmsResend = () => {
     const email =
-      product === ProductAuthOptions.EXCHANGE ? formValues?.exchangeEmail : formValues.email
-    authActions.resendSmsCode({ email, guid: formValues?.guid })
+      productAuthMetadata.product === ProductAuthOptions.EXCHANGE
+        ? formValues?.exchangeEmail
+        : formValues.email
+    dispatch(auth.resendSmsCode({ email, guid: formValues?.guid }))
   }
 
   useEffect(() => {
-    const twoFAType = getTwoFaType(authType)
-    analyticsActions.trackEvent({
-      key: Analytics.LOGIN_2FA_PAGE_VIEWED,
-      properties: {
-        '2fa_type': twoFAType,
-        device_origin: product,
-        originalTimestamp: new Date().toISOString()
-      }
-    })
+    dispatch(
+      trackEvent({
+        key: Analytics.LOGIN_2FA_PAGE_VIEWED,
+        properties: {
+          '2fa_type': twoFAType,
+          device_origin: productAuthMetadata.product,
+          originalTimestamp: new Date().toISOString()
+        }
+      })
+    )
   }, [])
 
   return (
     <LoginWrapper>
       <WrapperWithPadding>
         <BackArrowHeader
-          {...props}
+          formValues={formValues}
           handleBackArrowClick={handleBackArrowClickWallet}
           marginTop='28px'
           platform={magicLinkData?.platform_type}
           product={props.productAuthMetadata.product}
         />
-        {authType > 0 && (
+        {twoFAType && (
           <FormGroup>
             <FormItem>
               <FormLabel htmlFor='code'>
-                {authType === 1 && (
+                {twoFAType === 'YUBIKEY' && (
                   <FormattedMessage
                     id='scenes.login.yubikey_verify'
                     defaultMessage='Verify with your Yubikey'
                   />
                 )}
-                {(authType === 4 || authType === 5) &&
+                {twoFAType === 'SMS' &&
                   (isMobile() ? (
                     <FormattedMessage
                       id='scenes.logins.twofa.enter_code.mobile_width'