chore(refactor): refactor verify magic link (#6175)

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

Hide file tree

Showing 4 changed files with 47 additions and 63 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/index.tsx
@@ -1,28 +1,20 @@
 import React from 'react'
-import { connect } from 'react-redux'
 
-import { selectors } from 'data'
+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'
 
-class VerifyMagicLink extends React.PureComponent<Props> {
-  render() {
-    return this.props.data.cata({
-      Failure: (val) => <Error error={val} />,
-      Loading: () => <Loading />,
-      NotAsked: () => <Loading />,
-      Success: (val) => <Success {...this.props} {...val} />
-    })
-  }
-}
+const VerifyMagicLink = (props: Props) => {
+  const { data, error, isLoading, isNotAsked } = useRemote(getAuthorizeVerifyDevice)
 
-const mapStateToProps = (state) => ({
-  data: selectors.auth.getAuthorizeVerifyDevice(state)
-})
+  if (isLoading || isNotAsked) return <Loading />
 
-const connector = connect(mapStateToProps)
+  if (error) return <Error error={error} />
+  return <Success {...props} {...data} />
+}
 
-export default connector(VerifyMagicLink)
+export default VerifyMagicLink
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/template.error.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/template.error.tsx
@@ -12,8 +12,7 @@ const ErrorWrapper = styled(Wrapper)`
   flex-direction: column;
 `
 
-const Error = (props) => {
-  const { error } = props
+const Error = ({ error }) => {
   return (
     <ErrorWrapper>
       <Icon color='error' name='close-circle' size='40px' />

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/template.loading.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/template.loading.tsx
@@ -12,18 +12,16 @@ const LoadingWrapper = styled(Wrapper)`
   flex-direction: column;
 `
 
-const Loading = () => {
-  return (
-    <LoadingWrapper>
-      <SpinningLoader width='40px' height='40px' />
-      <Text size='16px' weight={400} style={{ marginTop: '24px' }}>
-        <FormattedMessage
-          id='scenes.login.verify'
-          defaultMessage="We're verifying your login attempt. Please wait..."
-        />
-      </Text>
-    </LoadingWrapper>
-  )
-}
+const Loading = () => (
+  <LoadingWrapper>
+    <SpinningLoader width='40px' height='40px' />
+    <Text size='16px' weight={400} style={{ marginTop: '24px' }}>
+      <FormattedMessage
+        id='scenes.login.verify'
+        defaultMessage="We're verifying your login attempt. Please wait..."
+      />
+    </Text>
+  </LoadingWrapper>
+)
 
 export default Loading
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/template.success.tsx
@@ -3,18 +3,10 @@ import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 
 import { Banner, Button, Icon, Image, Text } from 'blockchain-info-components'
-import { Wrapper } from 'components/Public'
 import { media } from 'services/styles'
 
-import { Props } from '..'
 import { LoginWrapper } from '../model'
 
-const InfoWrapper = styled.div`
-  width: 100%;
-  text-align: left;
-  ${media.mobile`
-  text-align: center;`}
-`
 const DeviceInfoWrapper = styled.div`
   margin-top: 20px;
 `
@@ -86,29 +78,32 @@ const SuccessWrapper = styled.div`
   flex-direction: column;
 `
 
-const Success = (props) => {
-  const { approver, requester } = props
-  return props.deviceAuthorized ? (
-    <LoginWrapper>
-      <SuccessWrapper>
-        <Icon color='success' name='checkmark-circle-filled' size='40px' />
+const Success = ({ approver, authActions, deviceAuthorized, requester }) => {
+  if (deviceAuthorized) {
+    return (
+      <LoginWrapper>
+        <SuccessWrapper>
+          <Icon color='success' name='checkmark-circle-filled' size='40px' />
 
-        <Text size='20px' weight={600} color='black' style={{ marginTop: '8px' }}>
-          <FormattedMessage
-            id='scenes.login.device_verified'
-            defaultMessage='Your device is verified!'
-          />
-        </Text>
+          <Text size='20px' weight={600} color='black' style={{ marginTop: '8px' }}>
+            <FormattedMessage
+              id='scenes.login.device_verified'
+              defaultMessage='Your device is verified!'
+            />
+          </Text>
 
-        <Text color='grey900' style={{ marginTop: '8px' }} size='16px' weight={500}>
-          <FormattedMessage
-            id='scenes.login.device_verified.copy'
-            defaultMessage='Return to previous browser to continue logging in.'
-          />
-        </Text>
-      </SuccessWrapper>
-    </LoginWrapper>
-  ) : (
+          <Text color='grey900' style={{ marginTop: '8px' }} size='16px' weight={500}>
+            <FormattedMessage
+              id='scenes.login.device_verified.copy'
+              defaultMessage='Return to previous browser to continue logging in.'
+            />
+          </Text>
+        </SuccessWrapper>
+      </LoginWrapper>
+    )
+  }
+
+  return (
     <LoginWrapper>
       <FormBody>
         <Image name='blockchain-icon' width='40px' height='40px' />
@@ -236,7 +231,7 @@ const Success = (props) => {
         <ApproveRejectButtons
           data-e2e='approveLogin'
           nature='warning'
-          onClick={() => props.authActions.authorizeVerifyDevice(true)}
+          onClick={() => authActions.authorizeVerifyDevice(true)}
         >
           <FormattedMessage id='modals.mobilenumberverify.verify' defaultMessage='Verify' />
         </ApproveRejectButtons>
@@ -246,7 +241,7 @@ const Success = (props) => {
         <ApproveRejectButtons
           data-e2e='rejectLogin'
           nature='primary'
-          onClick={() => props.authActions.authorizeVerifyDevice(false)}
+          onClick={() => authActions.authorizeVerifyDevice(false)}
         >
           <FormattedMessage id='scenes.authorizelogin.reject' defaultMessage='Reject' />
         </ApproveRejectButtons>