diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/BuyGoal/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/BuyGoal/index.tsx
index c9daa818e83..f884ae424d9 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/BuyGoal/index.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/BuyGoal/index.tsx
@@ -71,56 +71,54 @@ const BuyGoal = (props: InjectedFormProps<{}> & SubviewProps) => {
}, [])
return (
- <>
-
-
-
-
-
+
+
+
+
+
+
+
+
+ {showBuyHeader && isCoinDataLoaded && (
+ <>
+
+
+
+
+ {Currencies[fiatCurrency].units[fiatCurrency].symbol}
+
+
+ {amount}
+
+
+
+
+
+
+ {window.coins[crypto].coinfig.name}
+
+
+ {crypto}
+
+
+
+
+
-
- {showBuyHeader && isCoinDataLoaded && (
- <>
-
-
-
-
- {Currencies[fiatCurrency].units[fiatCurrency].symbol}
-
-
- {amount}
-
-
-
-
-
-
- {window.coins[crypto].coinfig.name}
-
-
- {crypto}
-
-
-
-
-
-
-
- >
- )}
-
-
-
-
-
- >
+ >
+ )}
+
+
+
+
+
)
}
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/SofiSignupFailure/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/SofiSignupFailure/index.tsx
index 1953ea519d9..2adfa6e1e41 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/SofiSignupFailure/index.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/SofiSignupFailure/index.tsx
@@ -1,13 +1,9 @@
import React from 'react'
import { FormattedMessage } from 'react-intl'
-import { useDispatch } from 'react-redux'
import styled from 'styled-components'
-import { Button, Image, Text } from 'blockchain-info-components'
+import { Image, Text } from 'blockchain-info-components'
import { Wrapper } from 'components/Public'
-import { actions, selectors } from 'data'
-import { useRemote } from 'hooks'
-import { isMobile } from 'services/styles'
const ContentWrapper = styled.div`
display: flex;
@@ -17,15 +13,6 @@ const ContentWrapper = styled.div`
`
const MigrationError = () => {
- // Add check here to make sure that there is wallet data
- // route should navigate to login if there's no wallet data
-
- const {
- data: isMigrated,
- hasError: isAssociatedError,
- isLoading: isAssociatedLoading
- } = useRemote(selectors.modules.profile.getSofiAssociateNabuUserStatus)
-
return (
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SofiSignupCard/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SofiSignupCard/index.tsx
index 2e855625d52..1cf976e3ce2 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SofiSignupCard/index.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SofiSignupCard/index.tsx
@@ -7,7 +7,7 @@ import { Icon, Text } from 'blockchain-info-components'
import { isMobile } from 'services/styles'
import { SubviewProps } from '../../types'
-import { Card, CardTitle, CardWrapper, InfoItem, InfoTitle } from '..'
+import { Card, CardTitle, CardWrapper } from '..'
import QRsModal, { QRModalType } from '../SignupForm/QRsModal'
import SofiSignupForm from '../SofiSignupForm'
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SofiSignupForm/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SofiSignupForm/index.tsx
index bdd870b53a7..14798d92f5b 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SofiSignupForm/index.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SofiSignupForm/index.tsx
@@ -63,13 +63,11 @@ const SofiSignupForm = (props: Props) => {
bakktRedirectUSStates,
formActions,
formValues,
- goals,
initialValues,
invalid,
isFormSubmitting,
onSignupSubmit,
- routerActions,
- setShowModal
+ routerActions
} = props
const { sofiJwtPayload } = useSelector(selectors.modules.profile.getSofiUserData).getOrElse(
@@ -244,6 +242,6 @@ const SofiSignupForm = (props: Props) => {
)
}
-type Props = InjectedFormProps<{}> & SubviewProps & { setShowModal?: (e) => void }
+type Props = InjectedFormProps<{}> & SubviewProps
export default SofiSignupForm
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/index.tsx
index 17d7dd8bb93..8d0f609adbd 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/index.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/index.tsx
@@ -1,7 +1,6 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
import { connect, ConnectedProps } from 'react-redux'
-import axios from 'axios'
-import { find, pathOr, propEq } from 'ramda'
+import { pathOr } from 'ramda'
import { bindActionCreators, compose, Dispatch } from 'redux'
import { InjectedFormProps, reduxForm } from 'redux-form'
import styled from 'styled-components'
@@ -13,6 +12,7 @@ import { UkBanner } from 'components/Banner'
import { actions, selectors } from 'data'
import { RootState } from 'data/rootReducer'
import {
+ GoalsType,
ProductAuthMetadata,
ProductSignupMetadata,
RegisteringFailureType,
@@ -61,44 +61,29 @@ const UKHeaderWrapper = styled.div`
top: 0;
z-index: 2;
`
-
export const SIGNUP_FORM = 'register'
-const qsParams = new URLSearchParams(window.location.hash)
-const isLatam = qsParams.has('latam')
-
-class SignupContainer extends React.PureComponent<
- InjectedFormProps<{}, Props> & Props,
- StateProps
-> {
- constructor(props) {
- super(props)
- this.state = {
- showForm: true,
- showState: false
- }
- }
+const isLatam = new URLSearchParams(window.location.hash).has('latam')
- componentDidMount() {
- const { signupActions, websocketActions } = this.props
- // start sockets to ensure email verify flow is detected
- websocketActions.startSocket()
- signupActions.initializeSignup()
- if (window?._SardineContext) {
- window._SardineContext.updateConfig({
- flow: 'SIGNUP'
- })
- }
+const findGoalByName = (name: GoalsType, goals: GoalDataType) =>
+ goals.find((goal) => goal.name === name)
+
+const SignupContainer: React.FC & Props> = (props) => {
+ const [showForm, setShowForm] = useState(true)
+ const [showState, setShowState] = useState(false)
+
+ const setDefaultCountry = (country: string) => {
+ setShowState(country === 'US')
}
- onCountryChange = (e: React.ChangeEvent | undefined, value: string) => {
- this.setDefaultCountry(value)
- this.props.formActions.clearFields(SIGNUP_FORM, false, false, 'state')
+ const onCountryChange = (e: React.ChangeEvent | undefined, value: string) => {
+ setDefaultCountry(value)
+ props.formActions.clearFields(SIGNUP_FORM, false, false, 'state')
}
- onSubmit = (e) => {
+ const onSubmit = (e) => {
e.preventDefault()
- const { formValues, language, signupActions } = this.props
+ const { formValues, language, signupActions } = props
const { country, email, password, referral, state } = formValues
signupActions.register({
@@ -111,74 +96,84 @@ class SignupContainer extends React.PureComponent<
})
}
- setCountryOnLoad = (country: string) => {
- this.setDefaultCountry(country)
- this.props.formActions.change(SIGNUP_FORM, 'country', country)
+ const setCountryOnLoad = (country: string) => {
+ setDefaultCountry(country)
+ props.formActions.change(SIGNUP_FORM, 'country', country)
}
- setDefaultCountry = (country: string) => {
- this.setState({ showState: country === 'US' })
+ const toggleSignupFormVisibility = () => {
+ setShowForm(true)
}
- toggleSignupFormVisibility = () => {
- this.setState({ showForm: true })
- }
-
- render() {
- const { formValues, goals, isLoadingR, productAuthMetadata } = this.props
- const isFormSubmitting = Remote.Loading.is(isLoadingR)
- const isUserInUK = productAuthMetadata?.ipCountry === 'GB'
- const userSelectedUK = formValues?.country === 'GB'
- // pull email from simple buy goal if it exists or signup goal
- const email =
- pathOr('', ['data', 'email'], find(propEq('name', 'buySell'), goals)) ||
- pathOr('', ['data', 'email'], find(propEq('name', 'signup'), goals))
-
- const signupInitialValues = (email ? { email } : {}) as SignupFormInitValuesType
- const isLinkAccountGoal = !!find(propEq('name', 'linkAccount'), goals)
- const isBuyGoal = !!find(propEq('name', 'buySell'), goals)
- const isSofi = window.location.hash.includes('sofi')
-
- const subviewProps = {
- isFormSubmitting,
- isLinkAccountGoal,
- onCountrySelect: this.onCountryChange,
- onSignupSubmit: this.onSubmit,
- setDefaultCountry: this.setCountryOnLoad,
- showForm: this.state.showForm,
- showState: this.state.showState,
- toggleSignupFormVisibility: this.toggleSignupFormVisibility,
- ...this.props, // order here matters as we may need to override initial form values!
- initialValues: signupInitialValues
+ useEffect(() => {
+ const { signupActions, websocketActions } = props
+ // start sockets to ensure email verify flow is detected
+ websocketActions.startSocket()
+ signupActions.initializeSignup()
+ if (window?._SardineContext) {
+ window._SardineContext.updateConfig({
+ flow: 'SIGNUP'
+ })
}
+ }, [])
+
+ const { formValues, goals, isLoadingR, productAuthMetadata } = props
+ const isFormSubmitting = Remote.Loading.is(isLoadingR)
+ const isUserInUK = productAuthMetadata?.ipCountry === 'GB'
+ const userSelectedUK = formValues?.country === 'GB'
+
+ const buySellGoal = findGoalByName('buySell', goals)
+ const signupGoal = findGoalByName('signup', goals)
+ const linkAccountGoal = findGoalByName('linkAccount', goals)
+
+ // pull email from simple buy goal if it exists or signup goal
+ const email =
+ pathOr('', ['data', 'email'], buySellGoal) || pathOr('', ['data', 'email'], signupGoal)
+
+ const signupInitialValues = (email ? { email } : {}) as SignupFormInitValuesType
+ const isLinkAccountGoal = !!linkAccountGoal
+ const isBuyGoal = !!buySellGoal
+ const isSofi = window.location.hash.includes('sofi')
+
+ const subviewProps = {
+ isFormSubmitting,
+ isLinkAccountGoal,
+ onCountrySelect: onCountryChange,
+ onSignupSubmit: onSubmit,
+ setDefaultCountry: setCountryOnLoad,
+ showForm,
+ showState,
+ toggleSignupFormVisibility,
+ ...props, // order here matters as we may need to override initial form values!
+ initialValues: signupInitialValues
+ }
- return (
- <>
- {(isUserInUK || userSelectedUK) && (
-
-
-
+ return (
+ <>
+ {(isUserInUK || userSelectedUK) && (
+
+
+
+ )}
+
+ {isSofi && }
+ {isLatam && }
+ {isLinkAccountGoal && }
+ {isBuyGoal && }
+ {!isLinkAccountGoal && !isBuyGoal && !isLatam && !isSofi && (
+
)}
-
- {isSofi && }
- {isLatam && }
- {isLinkAccountGoal && }
- {isBuyGoal && }
- {!isLinkAccountGoal && !isBuyGoal && !isLatam && !isSofi && (
+ {!isLinkAccountGoal && !isBuyGoal && !isSofi && isLatam && (
+
- )}
- {!isLinkAccountGoal && !isBuyGoal && !isSofi && isLatam && (
-
-
-
-
-
-
- )}
-
- >
- )
- }
+
+
+
+
+ )}
+
+ >
+ )
}
const mapStateToProps = (state: RootState): LinkStatePropsType => ({
@@ -195,10 +190,7 @@ const mapStateToProps = (state: RootState): LinkStatePropsType => ({
isValidReferralCode: selectors.signup.getIsValidReferralCode(state),
language: selectors.preferences.getLanguage(state),
productAuthMetadata: selectors.auth.getProductAuthMetadata(state),
- registering: selectors.signup.getRegistering(state) as RemoteDataType<
- RegisteringFailureType,
- RegisteringSuccessType
- >,
+ registering: selectors.signup.getRegistering(state),
search: selectors.router.getSearch(state) as string,
signupMetadata: selectors.signup.getProductSignupMetadata(state) as ProductSignupMetadata
})
@@ -227,11 +219,6 @@ type LinkStatePropsType = {
search: string
signupMetadata: ProductSignupMetadata
}
-type StateProps = {
- geoCountryCode?: string
- showForm: boolean
- showState: boolean
-}
export type Props = ConnectedProps & LinkStatePropsType
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/app.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/app.tsx
index 4f90a234240..d97e8b33c97 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/app.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/app.tsx
@@ -66,11 +66,7 @@ const Dex = React.lazy(() => import('./Dex'))
// NFTs
const NftsView = React.lazy(() => import('./Nfts/View'))
-const NftsFirehose = React.lazy(() => import('./Nfts/Firehose'))
-const NftsCollection = React.lazy(() => import('./Nfts/Collection/Collection'))
const NftsAsset = React.lazy(() => import('./Nfts/AssetViewOnly'))
-const NftsAddress = React.lazy(() => import('./Nfts/Address/Address'))
-const NftsSettings = React.lazy(() => import('./Nfts/Settings'))
// WALLET
const Addresses = React.lazy(() => import('./Settings/Addresses'))
@@ -208,11 +204,6 @@ const App = ({
component={Signup}
pageTitle={`${BLOCKCHAIN_TITLE} | SoFi Signup`}
/>
-