Skip to content

Commit

Permalink
chore(refactor): clean up around login folder (#6218)
Browse files Browse the repository at this point in the history
  • Loading branch information
mperdomo-bc committed Jan 8, 2024
1 parent 1331624 commit e6e9daa
Show file tree
Hide file tree
Showing 8 changed files with 60 additions and 126 deletions.
64 changes: 25 additions & 39 deletions packages/blockchain-wallet-v4-frontend/src/data/cache/selectors.ts
Original file line number Diff line number Diff line change
@@ -1,46 +1,32 @@
import { path, prop } 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 getEmail = (state): string | undefined => path(['cache', 'lastEmail'], state)
export const getExchangeEmail = (state): string | undefined =>
path(['cache', 'exchangeEmail'], state)
export const getExchangeWalletGuid = (state): string | undefined =>
path(['cache', 'exchangeWalletGuid'], state)
export const getStoredGuid = (state): string | undefined => path(['cache', 'guidStored'], state)
export const getMobileConnected = (state): string | undefined =>
path(['cache', 'mobileConnected'], state)
export const getLastGuid = (state): string | undefined => path(['cache', 'lastGuid'], state)
export const getChannelChannelId = (state): string | undefined =>
path(['cache', 'channelChannelId'], state)
export const getChannelPrivKey = (state): string | undefined =>
path(['cache', 'channelPrivKey'], state)
export const getPhonePubkey = (state): string | undefined =>
path(['cache', 'channelPhonePubkey'], state)
export const getHasCloudBackup = (state): boolean | undefined =>
path(['cache', 'hasCloudBackup'], state)
export const getLastLogoutTimestamp = (state): boolean | undefined =>
path(['cache', 'lastLogoutTimestamp'], state)
export const getUnifiedAccountStatus = (state): boolean | undefined =>
path(['cache', 'unifiedAccount'], state)
export const getLastUnusedAmounts = (state): boolean | undefined =>
path(['cache', 'lastUnusedAmounts'], state)
export const getLastAnnouncementState = (state: RootState) => state.cache.announcements
export const getCache = (state: RootState) => state.cache
export const getEmail = (state: RootState) => state.cache.lastEmail
export const getExchangeEmail = (state: RootState) => state.cache.exchangeEmail
export const getExchangeWalletGuid = (state: RootState) => state.cache.exchangeWalletGuid
export const getStoredGuid = (state: RootState) => state.cache.guidStored
export const getMobileConnected = (state: RootState) => state.cache.mobileConnected
export const getLastGuid = (state: RootState) => state.cache.lastGuid
export const getChannelChannelId = (state: RootState) => state.cache.channelChannelId
export const getChannelPrivKey = (state: RootState) => state.cache.channelPrivKey
export const getPhonePubkey = (state: RootState) => state.cache.channelPhonePubkey
export const getHasCloudBackup = (state: RootState) => state.cache.hasCloudBackup
export const getLastLogoutTimestamp = (state: RootState) => state.cache.lastLogoutTimestamp
export const getUnifiedAccountStatus = (state: RootState) => state.cache.unifiedAccount
export const getLastUnusedAmounts = (state: RootState) => state.cache.lastUnusedAmounts

export const getNoActionRequiredSweep = (state): { guid: string; seen: boolean } | undefined =>
path(['cache', 'noActionRequiredSweep'], state)
export const getNoActionRequiredSweep = (state: RootState) => state.cache.noActionRequiredSweep

export const getChannelPrivKeyForQrData = (state) => {
export const getChannelPrivKeyForQrData = (state: RootState) => {
const channelPrivKey = getChannelPrivKey(state)

if (channelPrivKey) {
return JSON.stringify({
channelId: getChannelChannelId(state),
pubkey: wCrypto.derivePubFromPriv(Buffer.from(channelPrivKey, 'hex')).toString('hex'),
type: 'login_wallet'
})
}
return ''
if (!channelPrivKey) return ''

return JSON.stringify({
channelId: getChannelChannelId(state),
pubkey: wCrypto.derivePubFromPriv(Buffer.from(channelPrivKey, 'hex')).toString('hex'),
type: 'login_wallet'
})
}
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,3 @@ export {
untouch,
updateSyncErrors
} from 'redux-form'

export const change2 = (form, field, value) => ({
payload: { field, form, value },
type: AT.CHANGE2
})
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
import React from 'react'
import { FormattedMessage } from 'react-intl'
import { useDispatch } from 'react-redux'
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`
Expand Down Expand Up @@ -37,14 +33,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 = () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,16 @@ 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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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()

Expand Down
Original file line number Diff line number Diff line change
@@ -1,20 +1,14 @@
import React from 'react'
import { FormattedMessage } from 'react-intl'
import { useDispatch } from 'react-redux'
import styled from 'styled-components'

import { Banner, Button, Icon, Image, Text } from 'blockchain-info-components'
import { Wrapper } from 'components/Public'
import { auth } from 'data/actions'
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;
`
Expand Down Expand Up @@ -86,25 +80,31 @@ 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' />
<Text size='20px' weight={600} color='black' style={{ marginTop: '8px' }}>
<FormattedMessage id='scenes.login.device_verified' defaultMessage='Device verified!' />
</Text>
const Success = ({ approver, deviceAuthorized, requester }) => {
const dispatch = useDispatch()
const authorizeDevice = (state: boolean) => dispatch(auth.authorizeVerifyDevice(state))

<Text color='grey900' style={{ marginTop: '8px' }} size='16px' weight={500}>
<FormattedMessage
id='scenes.login.device_verified.copy'
defaultMessage='You can safely close this tab or page. Go back to the other Blockchain.com tab or page to continue.'
/>
</Text>
</SuccessWrapper>
</LoginWrapper>
) : (
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='Device verified!' />
</Text>

<Text color='grey900' style={{ marginTop: '8px' }} size='16px' weight={500}>
<FormattedMessage
id='scenes.login.device_verified.copy'
defaultMessage='You can safely close this tab or page. Go back to the other Blockchain.com tab or page to continue.'
/>
</Text>
</SuccessWrapper>
</LoginWrapper>
)
}

return (
<LoginWrapper>
<FormBody>
<Image name='blockchain-icon' width='40px' height='40px' />
Expand Down Expand Up @@ -232,7 +232,7 @@ const Success = (props) => {
<ApproveRejectButtons
data-e2e='approveLogin'
nature='warning'
onClick={() => props.authActions.authorizeVerifyDevice(true)}
onClick={() => authorizeDevice(true)}
>
<FormattedMessage id='modals.mobilenumberverify.verify' defaultMessage='Verify' />
</ApproveRejectButtons>
Expand All @@ -242,7 +242,7 @@ const Success = (props) => {
<ApproveRejectButtons
data-e2e='rejectLogin'
nature='primary'
onClick={() => props.authActions.authorizeVerifyDevice(false)}
onClick={() => authorizeDevice(false)}
>
<FormattedMessage id='scenes.authorizelogin.reject' defaultMessage='Reject' />
</ApproveRejectButtons>
Expand Down
30 changes: 2 additions & 28 deletions packages/blockchain-wallet-v4-frontend/src/scenes/Login/model.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import styled from 'styled-components'

import { Button, SpinningLoader, TextGroup } from 'blockchain-info-components'
import { Button, TextGroup } from 'blockchain-info-components'
import FormLabel from 'components/Form/FormLabel'
import { Wrapper } from 'components/Public'
import { media } from 'services/styles'
Expand All @@ -26,13 +26,6 @@ export const ActionButton = styled(Button)`
export const Row = styled.div`
display: flex;
`
export const CenterRow = styled.div`
display: flex;
justify-content: center;
`
export const CartridgeSentContainer = styled.div`
width: auto;
`
export const GuidError = styled(TextGroup)`
display: inline;
margin-top: 3px;
Expand All @@ -51,30 +44,11 @@ export const CircleBackground = styled.div<{ color?: string; size?: string }>`
border-radius: ${(props) => (props.size ? props.size : '40px')};
margin-bottom: 8px;
`
export const RectangleBackground = styled.div`
height: 48px;
width: 100%;
background-color: ${(props) => props.theme.grey000};
border-radius: 8px;
margin-top: 24px;
`
export const HelpRow = styled.div`
display: flex;
justify-content: space-between;
padding: 16px;
`
export const Column = styled.div`
export const CenteredColumn = styled.div`
display: flex;
flex-direction: column;
`
export const CenteredColumn = styled(Column)`
align-items: center;
`
export const Loader = styled(SpinningLoader)`
height: 75px;
width: 75px;
margin: 75px;
`
export const LinkRow = styled.div`
display: flex;
flex-direction: column;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export const getTwoFaType = (authType: number): string | null => {
export const getTwoFaType = (authType: number) => {
if (authType > 0) {
if (authType === 1) return 'YUBIKEY'
if (authType === 4 || authType === 5) return 'SMS'
Expand Down

0 comments on commit e6e9daa

Please sign in to comment.