diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actions.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actions.ts index bd8d5af3968..536da2348e0 100644 --- a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actions.ts +++ b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actions.ts @@ -373,9 +373,13 @@ export const initializeBillingAddress = () => ({ type: AT.INITIALIZE_BILLING_ADDRESS }) -export const initializeCheckout = (orderType: 'BUY' | 'SELL') => ({ +export const initializeCheckout = ( + orderType: 'BUY' | 'SELL', + amount?: string +) => ({ type: AT.INITIALIZE_CHECKOUT, - orderType + orderType, + amount }) export const pollSBBalances = () => ({ diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts index d8027ce109e..bc8929db855 100644 --- a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts +++ b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts @@ -541,7 +541,8 @@ export default ({ } const initializeCheckout = function * ({ - orderType + orderType, + amount }: ReturnType) { try { yield call(createUser) @@ -554,7 +555,8 @@ export default ({ yield put( actions.form.initialize('simpleBuyCheckout', { - orderType + orderType, + amount } as SBCheckoutFormValuesType) ) } catch (e) { diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/index.tsx index 8d5cac09321..a44e8328348 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/index.tsx @@ -3,7 +3,7 @@ import { bindActionCreators, Dispatch } from 'redux' import { connect, ConnectedProps } from 'react-redux' import { getData } from './selectors' import { RootState } from 'data/rootReducer' -import { SBPairType, SupportedWalletCurrenciesType } from 'core/types' +import { SBPairType } from 'core/types' import React, { PureComponent } from 'react' import Success from './template.success' @@ -29,8 +29,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({ const connector = connect(mapStateToProps, mapDispatchToProps) export type OwnProps = { - onClick: (string) => void - supportedCoins: SupportedWalletCurrenciesType + onClick?: (string) => void value: SBPairType } export type SuccessStateType = ReturnType['data'] diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/selectors.ts index bab404c5870..58bd0a6b0cf 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/selectors.ts +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/selectors.ts @@ -10,9 +10,16 @@ export const getData = (state: RootState, ownProps: OwnProps) => { const coin = getCoinFromPair(ownProps.value.pair) const ratesR = selectors.core.data.misc.getRatesSelector(coin, state) const fiatCurrency = selectors.components.simpleBuy.getFiatCurrency(state) + const supportedCoinsR = selectors.core.walletOptions.getSupportedCoins(state) - return lift((rates: ExtractSuccess) => ({ - fiatCurrency, - rates - }))(ratesR) + return lift( + ( + rates: ExtractSuccess, + supportedCoins: ExtractSuccess + ) => ({ + fiatCurrency, + rates, + supportedCoins + }) + )(ratesR, supportedCoinsR) } diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/template.success.tsx index a468d300d52..f22bb832bd8 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/template.success.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/template.success.tsx @@ -30,13 +30,13 @@ const DisplayContainer = styled.div<{ background-color: ${props => props.theme.grey100}; } ` -const Display = styled.div` +const Display = styled.div<{ canClick: boolean }>` position: relative; display: flex; flex-direction: column; margin-left: 12px; width: 100%; - cursor: pointer; + cursor: ${props => (props.canClick ? 'pointer' : 'initial')}; font-size: 16px; font-weight: 500; color: ${props => props.theme.grey800}; @@ -65,7 +65,7 @@ const Success: React.FC = props => { onClick={props.onClick} > - + {displayName} {fiatToString({ @@ -75,7 +75,9 @@ const Success: React.FC = props => { - + {props.onClick && ( + + )} ) } diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/index.tsx index 119cc0a8057..e952c18e4a2 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/index.tsx @@ -72,7 +72,6 @@ const CryptoSelector: React.FC & handleSubmit(value as SBPairType)} /> ))} diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/selectors.ts index 0795aea37ef..07a68693ff5 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/selectors.ts +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/selectors.ts @@ -1,24 +1,21 @@ -import { ExtractSuccess, SupportedWalletCurrenciesType } from 'core/types' +import { ExtractSuccess } from 'core/types' import { lift } from 'ramda' import { selectors } from 'data' export const getData = state => { const eligibilityR = selectors.components.simpleBuy.getSBFiatEligible(state) const pairsR = selectors.components.simpleBuy.getSBPairs(state) - const supportedCoinsR = selectors.core.walletOptions.getSupportedCoins(state) const userDataR = selectors.modules.profile.getUserData(state) return lift( ( eligibility: ExtractSuccess, pairs: ExtractSuccess, - supportedCoins: SupportedWalletCurrenciesType, userData: ExtractSuccess ) => ({ eligibility, pairs, - supportedCoins, userData }) - )(eligibilityR, pairsR, supportedCoinsR, userDataR) + )(eligibilityR, pairsR, userDataR) } diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/index.tsx index e6e53565aa8..5f2e5f8a389 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/index.tsx @@ -7,8 +7,8 @@ import { } from '../index' import { getData } from './selectors' import { RootState } from 'data/rootReducer' +import { SBCheckoutFormValuesType, UserDataType } from 'data/types' import { SBPaymentTypes } from 'core/types' -import { UserDataType } from 'data/types' import Failure from '../template.failure' import Loading from './template.loading' import React, { PureComponent } from 'react' @@ -16,13 +16,15 @@ import Success from './template.success' class Checkout extends PureComponent { componentDidMount () { - this.props.simpleBuyActions.initializeCheckout('BUY') + const amount = this.props.formValues?.amount + this.props.simpleBuyActions.initializeCheckout('BUY', amount) } handleSubmit = () => { // if the user is < tier 2 go to kyc but save order info // if the user is tier 2 try to submit order, let BE fail - const { formValues, userData } = this.props.data.getOrElse({ + const { formValues } = this.props + const { userData } = this.props.data.getOrElse({ userData: { tiers: { current: 0, next: 0, selected: 0 } } as UserDataType } as SuccessStateType) @@ -87,9 +89,12 @@ class Checkout extends PureComponent { const mapStateToProps = (state: RootState) => ({ data: getData(state), - fiatCurrency: selectors.components.simpleBuy.getFiatCurrency(state), cryptoCurrency: - selectors.components.simpleBuy.getCryptoCurrency(state) || 'BTC' + selectors.components.simpleBuy.getCryptoCurrency(state) || 'BTC', + fiatCurrency: selectors.components.simpleBuy.getFiatCurrency(state), + formValues: selectors.form.getFormValues('simpleBuyCheckout')(state) as + | SBCheckoutFormValuesType + | undefined }) const mapDispatchToProps = dispatch => ({ diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/selectors.ts index 3c26e1542a1..a7ab8c3eb5b 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/selectors.ts +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/selectors.ts @@ -1,16 +1,12 @@ import { ExtractSuccess } from 'core/types' import { lift } from 'ramda' import { RootState } from 'data/rootReducer' -import { SBCheckoutFormValuesType } from 'data/types' import { selectors } from 'data' export const getData = (state: RootState) => { const formErrors = selectors.form.getFormSyncErrors('simpleBuyCheckout')( state ) - const formValues = selectors.form.getFormValues('simpleBuyCheckout')( - state - ) as SBCheckoutFormValuesType const invitationsR = selectors.core.settings.getInvitations(state) const suggestedAmountsR = selectors.components.simpleBuy.getSBSuggestedAmounts( state @@ -26,7 +22,6 @@ export const getData = (state: RootState) => { userData: ExtractSuccess ) => ({ formErrors, - formValues, invitations, sbBalances, suggestedAmounts, diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx index 9d6c20e5705..a00d564a76a 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx @@ -18,6 +18,7 @@ import { Icon, Text } from 'blockchain-info-components' import { Props as OwnProps, SuccessStateType } from '.' import { SBCheckoutFormValuesType } from 'data/types' import ActionButton from './ActionButton' +import CryptoItem from '../../CryptoSelection/CryptoSelector/CryptoItem' import Currencies from 'blockchain-wallet-v4/src/exchange/currencies' import Failure from '../template.failure' import Payment from './Payment' @@ -29,13 +30,16 @@ const CustomForm = styled(Form)` height: 100%; display: flex; flex-direction: column; - justify-content: space-between; ` const TopText = styled(Text)` display: flex; align-items: center; justify-content: space-between; - margin-bottom: 24px; + margin-bottom: 16px; +` +const LeftTopCol = styled.div` + display: flex; + align-items: center; ` // Hide the default field error for NumberBox > div > div:last-child const AmountFieldContainer = styled.div` @@ -130,8 +134,8 @@ const Success: React.FC & Props> = props => { getMaxMin( props.pair, prop, - props.formValues, props.sbBalances, + props.formValues, props.method ) ) @@ -140,12 +144,29 @@ const Success: React.FC & Props> = props => { return ( - + - + + + props.simpleBuyActions.setStep({ + step: 'CRYPTO_SELECTION', + fiatCurrency: props.fiatCurrency || 'USD' + }) + } + /> + + & Props> = props => { onClick={() => props.handleClose()} /> + + + {Currencies[fiatCurrency].units[fiatCurrency].symbol} @@ -187,8 +211,8 @@ const Success: React.FC & Props> = props => { value: getMaxMin( props.pair, 'max', - props.formValues, props.sbBalances, + props.formValues, props.method ), digits: 0 @@ -207,8 +231,8 @@ const Success: React.FC & Props> = props => { value: getMaxMin( props.pair, 'min', - props.formValues, props.sbBalances, + props.formValues, props.method ), digits: 0 diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/validation.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/validation.tsx index 3fca36e644d..ccc54173051 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/validation.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/validation.tsx @@ -7,8 +7,8 @@ import BigNumber from 'bignumber.js' export const getMaxMin = ( pair: SBPairType, minOrMax: 'min' | 'max', - allValues: SBCheckoutFormValuesType, sbBalances: SBBalancesType, + allValues?: SBCheckoutFormValuesType, method?: SBPaymentMethodType ) => { switch (minOrMax || 'max') { @@ -47,7 +47,7 @@ export const maximumAmount = ( if (!method) return true return Number(value) > - Number(getMaxMin(pair, 'max', allValues, sbBalances, method)) + Number(getMaxMin(pair, 'max', sbBalances, allValues, method)) ? 'ABOVE_MAX' : false } @@ -63,7 +63,7 @@ export const minimumAmount = ( if (!method) return true return Number(value) < - Number(getMaxMin(pair, 'min', allValues, sbBalances, method)) + Number(getMaxMin(pair, 'min', sbBalances, allValues, method)) ? 'BELOW_MIN' : false }