From 1ea574015764ae5894cf952631e0555c1af5500d Mon Sep 17 00:00:00 2001 From: Philip London Date: Mon, 13 Jul 2020 17:16:34 +0200 Subject: [PATCH] fix(sb): change step requirements to match data --- .../src/assets/locales/index.d.ts | 1 + .../src/data/components/simpleBuy/actions.ts | 2 - .../src/data/components/simpleBuy/sagas.ts | 10 +- .../src/data/components/simpleBuy/types.ts | 1 - .../CryptoSelection/CryptoItem/index.tsx | 93 +++++++ .../CryptoSelector/CryptoItem/index.tsx | 28 +-- .../CryptoSelection/CryptoSelector/index.tsx | 24 +- .../SimpleBuy/CryptoSelection/index.tsx | 3 +- .../{selectors.js => selectors.ts} | 0 .../CryptoSelection/template.success.tsx | 21 +- .../EnterAmount/Checkout/CoinSelect/index.tsx | 226 +++++++++--------- .../Checkout/MethodSelect/index.tsx | 4 +- .../SimpleBuy/EnterAmount/Checkout/index.tsx | 2 +- .../EnterAmount/Checkout/template.success.tsx | 9 +- .../EnterAmount/Checkout/validation.tsx | 27 ++- .../modals/SimpleBuy/EnterAmount/index.tsx | 4 +- .../modals/SimpleBuy/EnterAmount/selectors.ts | 6 +- .../EnterAmount/template.failure.tsx | 9 +- .../EnterAmount/template.loading.tsx | 4 +- .../EnterAmount/template.success.tsx | 4 - .../src/modals/SimpleBuy/index.tsx | 4 +- 21 files changed, 281 insertions(+), 201 deletions(-) create mode 100644 packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoItem/index.tsx rename packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/{selectors.js => selectors.ts} (100%) diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts b/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts index 2e1b4133038..7f1018b9d52 100644 --- a/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts +++ b/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts @@ -1092,6 +1092,7 @@ type MessagesType = { 'modals.signmessage.secondstep.message': 'Message:' 'modals.signmessage.secondstep.signature': 'Signature:' 'modals.signmessage.title': 'Sign Message' + 'modals.simplebuy.fetching_methods': 'Loading Payment Options...' 'modals.simplebuy.billing_address': 'Billing Address' 'modals.simplebuy.buycrypto': 'Buy Crypto' 'modals.simplebuy.canceled': 'Trade Canceled' 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 a66156180ee..6ccc9be72c3 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 @@ -374,13 +374,11 @@ export const initializeBillingAddress = () => ({ }) export const initializeCheckout = ( - pairs: Array, paymentMethods: SBPaymentMethodsType, cards: Array, orderType: 'BUY' | 'SELL' ) => ({ type: AT.INITIALIZE_CHECKOUT, - pairs, paymentMethods, cards, orderType 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 4f633a669c1..0db12e44fbf 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 @@ -192,7 +192,7 @@ export default ({ const values: SBCheckoutFormValuesType = yield select( selectors.form.getFormValues('simpleBuyCheckout') ) - const pair = values.pair + const pair = S.getSBPair(yield select()) const amount = convertStandardToBase('FIAT', values.amount) if (!pair) throw new Error(NO_PAIR_SELECTED) // TODO: Simple Buy - make dynamic @@ -531,7 +531,6 @@ export default ({ } const initializeCheckout = function * ({ - pairs, paymentMethods, cards, orderType @@ -540,7 +539,6 @@ export default ({ yield call(createUser) yield call(waitForUserData) - const cryptoCurrency = S.getCryptoCurrency(yield select()) const defaultMethod = S.getDefaultMethod(yield select()) const fiatCurrency = S.getFiatCurrency(yield select()) if (!fiatCurrency) throw new Error(NO_FIAT_CURRENCY) @@ -548,9 +546,6 @@ export default ({ yield put(A.fetchSBSuggestedAmounts(fiatCurrency)) const isSimpleBuyCCInvited = true - const pair = pairs.find( - pair => getCoinFromPair(pair.pair) === cryptoCurrency - ) const cardMethod = paymentMethods.methods.find( method => method.type === 'PAYMENT_CARD' ) @@ -575,8 +570,7 @@ export default ({ : paymentMethods.methods.find( method => method.type === 'BANK_ACCOUNT' ), - orderType, - pair: pair || pairs[0] + orderType } as SBCheckoutFormValuesType) ) } catch (e) { diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/types.ts index f4840c56455..f16c1e1136e 100644 --- a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/types.ts +++ b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/types.ts @@ -36,7 +36,6 @@ export type SBCheckoutFormValuesType = { amount: string method?: SBFormPaymentMethod orderType: 'BUY' | 'SELL' - pair?: SBPairType } export type SBCurrencySelectFormType = { search: string diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoItem/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoItem/index.tsx new file mode 100644 index 00000000000..13b5c872f42 --- /dev/null +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoItem/index.tsx @@ -0,0 +1,93 @@ +import { + CoinType, + SBPairType, + SupportedCoinsType, + SupportedCoinType +} from 'core/types' +import { fiatToString } from 'core/exchange/currency' +import { + getCoinFromPair, + getFiatFromPair +} from 'data/components/simpleBuy/model' +import { Icon, Text } from 'blockchain-info-components' +import { RatesType } from 'data/types' +import React from 'react' +import styled from 'styled-components' + +const DisplayContainer = styled.div<{ + coinType: SupportedCoinType +}>` + display: flex; + width: 100%; + align-items: center; + box-sizing: border-box; + padding: 16px 40px; + border-bottom: 1px solid ${props => props.theme.grey000}; + &hover { + background-color: ${props => props.theme.grey100}; + } +` +const Display = styled.div` + position: relative; + display: flex; + flex-direction: column; + margin-left: 12px; + width: 100%; + cursor: pointer; + font-size: 16px; + font-weight: 500; + color: ${props => props.theme.grey800}; +` +const DisplayName = styled(Text)` + font-weight: 600; +` + +const Rate = styled(Text)` + font-size: 14px; + font-weight: 500; + margin-top: 4px; + color: ${props => props.theme.grey600} !important; + > span { + color: ${props => props.theme.green500}; + } +` + +export type Props = { + onClick: (string) => void + rates: { [key in CoinType]: RatesType } + supportedCoins: SupportedCoinsType + value: SBPairType +} + +const CryptoItem: React.FC = props => { + const coin = getCoinFromPair(props.value.pair) + const fiat = getFiatFromPair(props.value.pair) + const coinType = props.supportedCoins[coin] + const displayName = coinType.displayName + const icon = coinType.icons.circleFilled + const color = coinType.colorCode + + return ( + + + + {displayName} + + {fiatToString({ + value: props.rates[coin][fiat].last, + unit: fiat + })} + + xx.x% + + + + + ) +} + +export default CryptoItem 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 13b5c872f42..e1174c449dc 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 @@ -1,3 +1,7 @@ +import { Icon } from 'blockchain-info-components' +import React from 'react' +import styled from 'styled-components' + import { CoinType, SBPairType, @@ -9,10 +13,8 @@ import { getCoinFromPair, getFiatFromPair } from 'data/components/simpleBuy/model' -import { Icon, Text } from 'blockchain-info-components' import { RatesType } from 'data/types' -import React from 'react' -import styled from 'styled-components' +import { Title, Value } from 'components/Flyout' const DisplayContainer = styled.div<{ coinType: SupportedCoinType @@ -38,19 +40,6 @@ const Display = styled.div` font-weight: 500; color: ${props => props.theme.grey800}; ` -const DisplayName = styled(Text)` - font-weight: 600; -` - -const Rate = styled(Text)` - font-size: 14px; - font-weight: 500; - margin-top: 4px; - color: ${props => props.theme.grey600} !important; - > span { - color: ${props => props.theme.green500}; - } -` export type Props = { onClick: (string) => void @@ -76,14 +65,13 @@ const CryptoItem: React.FC = props => { > - {displayName} - + {displayName} + {fiatToString({ value: props.rates[coin][fiat].last, unit: fiat })} - <span>+ xx.x%</span> - </Rate> + 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 e6b6db81179..9093be76afc 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 @@ -27,11 +27,7 @@ const TopText = styled(Text)` const SubTitleText = styled(Text)` margin-top: 0; ` -const CloseIcon = styled(Icon)` - position: absolute; - top: 28px; - right: 28px; -` + export type Props = OwnProps & SuccessStateType const CryptoSelector: React.FC & @@ -49,20 +45,20 @@ const CryptoSelector: React.FC &
- + ({ }) export const mapDispatchToProps = (dispatch: Dispatch) => ({ + analyticsActions: bindActionCreators(actions.analytics, dispatch), formActions: bindActionCreators(actions.form, dispatch), simpleBuyActions: bindActionCreators(actions.components.simpleBuy, dispatch) }) @@ -56,7 +56,6 @@ export type SuccessStateType = { cards: Array eligibility: FiatEligibleType pairs: Array - paymentMethods: SBPaymentMethodsType rates: { [key in CoinType]: RatesType } supportedCoins: SupportedCoinsType } diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/selectors.js b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/selectors.ts similarity index 100% rename from packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/selectors.js rename to packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/selectors.ts diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/template.success.tsx index 6f84ab1460b..12e831dbc6c 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/template.success.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/template.success.tsx @@ -1,12 +1,25 @@ +import React, { useEffect } from 'react' + import { LinkStatePropsType, Props as OwnProps, SuccessStateType } from '.' import CryptoSelector from './CryptoSelector' -import React from 'react' import Unsupported from './template.unsupported' const Success: React.FC = props => { - return props.pairs.length && - props.eligibility.eligible && - props.fiatCurrency ? ( + const isUserEligible = + props.pairs.length && props.eligibility.eligible && props.fiatCurrency + + useEffect(() => { + props.analyticsActions.logEvent([ + 'IS_USER_SB_ELIGIBLE', + JSON.stringify({ + pairs: props.pairs, + eligibility: props.eligibility, + doesWalletConsiderUserEligible: !!isUserEligible + }) + ]) + }, []) + + return isUserEligible ? ( ) : ( diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/CoinSelect/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/CoinSelect/index.tsx index d3ec6defe04..873947be784 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/CoinSelect/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/CoinSelect/index.tsx @@ -1,122 +1,122 @@ -import { fiatToString } from 'core/exchange/currency' -import { Field } from 'redux-form' -import { - getCoinFromPair, - getFiatFromPair -} from 'data/components/simpleBuy/model' -import { Icon, Text } from 'blockchain-info-components' -import { Props } from '../template.success' -import { SBPairType, SupportedCoinType } from 'core/types' -import { SelectBox } from 'components/Form' -import React, { PureComponent } from 'react' -import styled from 'styled-components' +// import { fiatToString } from 'core/exchange/currency' +// import { Field } from 'redux-form' +// import { +// getCoinFromPair, +// getFiatFromPair +// } from 'data/components/simpleBuy/model' +// import { Icon, Text } from 'blockchain-info-components' +// import { Props } from '../template.success' +// import { SBPairType, SupportedCoinType } from 'core/types' +// import { SelectBox } from 'components/Form' +// import React, { PureComponent } from 'react' +// import styled from 'styled-components' -const DisplayContainer = styled.div<{ - coinType: SupportedCoinType - isItem: boolean -}>` - display: flex; - width: 100%; - align-items: center; - box-sizing: border-box; - padding: ${props => (props.isItem ? '0px 6px' : '16px 12px')}; - > span { - color: ${props => props.theme[props.coinType.colorCode]} !important; - } -` +// const DisplayContainer = styled.div<{ +// coinType: SupportedCoinType +// isItem: boolean +// }>` +// display: flex; +// width: 100%; +// align-items: center; +// box-sizing: border-box; +// padding: ${props => (props.isItem ? '0px 6px' : '16px 12px')}; +// > span { +// color: ${props => props.theme[props.coinType.colorCode]} !important; +// } +// ` -const SelectBoxBuyCoin = styled(SelectBox)` - .bc__dropdown-indicator { - color: ${props => props.theme.grey600}; - } -` -const Display = styled.div` - position: relative; - display: flex; - flex-direction: column; - margin-left: 12px; - width: 100%; - cursor: pointer; - font-size: 16px; - font-weight: 500; - color: ${props => props.theme.grey800}; - .bc__single-value { - position: relative; - top: 0; - transform: initial; - margin: 0; - } - input { - height: 0; - } -` -const Rate = styled(Text)` - font-size: 14px; - font-weight: 500; - margin-top: 4px; - color: ${props => props.theme.grey600} !important; -` +// const SelectBoxBuyCoin = styled(SelectBox)` +// .bc__dropdown-indicator { +// color: ${props => props.theme.grey600}; +// } +// ` +// const Display = styled.div` +// position: relative; +// display: flex; +// flex-direction: column; +// margin-left: 12px; +// width: 100%; +// cursor: pointer; +// font-size: 16px; +// font-weight: 500; +// color: ${props => props.theme.grey800}; +// .bc__single-value { +// position: relative; +// top: 0; +// transform: initial; +// margin: 0; +// } +// input { +// height: 0; +// } +// ` +// const Rate = styled(Text)` +// font-size: 14px; +// font-weight: 500; +// margin-top: 4px; +// color: ${props => props.theme.grey600} !important; +// ` -class CoinSelect extends PureComponent { - state = {} +// class CoinSelect extends PureComponent { +// state = {} - renderElements = () => { - return [ - { - group: '', - items: this.props.pairs.map(value => ({ - text: this.props.supportedCoins[getCoinFromPair(value.pair)] - .displayName, - value - })) - } - ] - } +// renderElements = () => { +// return [ +// { +// group: '', +// items: this.props.pairs.map(value => ({ +// text: this.props.supportedCoins[getCoinFromPair(value.pair)] +// .displayName, +// value +// })) +// } +// ] +// } - renderDisplay = (props: { value: SBPairType }, children) => { - if (!props.value) return - if (!this.props.formValues) return +// renderDisplay = (props: { value: SBPairType }, children) => { +// if (!props.value) return +// if (!this.props.formValues) return - const coin = getCoinFromPair(props.value.pair) - const fiat = getFiatFromPair(props.value.pair) - const coinType = this.props.supportedCoins[coin] - const displayName = coinType.displayName - const coinTicker = coinType.coinTicker - const icon = coinType.icons.circleFilled - const color = coinType.colorCode - const isItem = !children +// const coin = getCoinFromPair(props.value.pair) +// const fiat = getFiatFromPair(props.value.pair) +// const coinType = this.props.supportedCoins[coin] +// const displayName = coinType.displayName +// const coinTicker = coinType.coinTicker +// const icon = coinType.icons.circleFilled +// const color = coinType.colorCode +// const isItem = !children - return ( - - - - {children || displayName} - - 1 {coinTicker} ={' '} - {fiatToString({ - value: this.props.rates[coin][fiat].last, - unit: fiat - })} - - - - ) - } +// return ( +// +// +// +// {children || displayName} +// +// 1 {coinTicker} ={' '} +// {fiatToString({ +// value: this.props.rates[coin][fiat].last, +// unit: fiat +// })} +// +// +// +// ) +// } - render () { - return ( - 1} - searchEnabled={false} - templateDisplay={this.renderDisplay} - templateItem={this.renderDisplay} - /> - ) - } -} +// render () { +// return ( +// 1} +// searchEnabled={false} +// templateDisplay={this.renderDisplay} +// templateItem={this.renderDisplay} +// /> +// ) +// } +// } -export default CoinSelect +// export default CoinSelect diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/MethodSelect/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/MethodSelect/index.tsx index 33394a5678a..416f55ec90f 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/MethodSelect/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/MethodSelect/index.tsx @@ -208,9 +208,9 @@ class MethodSelect extends PureComponent { ) => { if (!props.value) return if (!this.props.formValues) return - if (!this.props.formValues.pair) return + if (!this.props.pair) return - const fiat = getFiatFromPair(this.props.formValues.pair.pair) + const fiat = getFiatFromPair(this.props.pair.pair) const isCard = props.value.type === 'USER_CARD' const isItem = !children 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 0e92c4d2ca5..6b4320645d4 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 @@ -25,7 +25,6 @@ import Success from './template.success' class Checkout extends PureComponent { componentDidMount () { this.props.simpleBuyActions.initializeCheckout( - this.props.pairs, this.props.paymentMethods, this.props.cards, 'BUY' @@ -79,6 +78,7 @@ class Checkout extends PureComponent { ), Failure: () => ( & Props> = props => { if (!fiatCurrency) return ( & Props> = props => { const prop = amtError === 'ABOVE_MAX' ? 'max' : 'min' const value = convertStandardToBase( 'FIAT', - getMaxMin(props.formValues, prop) + getMaxMin(props.pair, prop, props.formValues) ) props.simpleBuyActions.handleSBSuggestedAmountClick(value) } @@ -166,7 +167,7 @@ const Success: React.FC & Props> = props => { }} /> - {props.formValues.pair && amtError && ( + {props.pair && amtError && ( {amtError === 'ABOVE_MAX' ? ( @@ -176,7 +177,7 @@ const Success: React.FC & Props> = props => { values={{ value: fiatToString({ unit: fiatCurrency, - value: getMaxMin(props.formValues, 'max'), + value: getMaxMin(props.pair, 'max', props.formValues), digits: 0 }), orderType: @@ -190,7 +191,7 @@ const Success: React.FC & Props> = props => { values={{ value: fiatToString({ unit: fiatCurrency, - value: getMaxMin(props.formValues, 'min'), + value: getMaxMin(props.pair, 'min', props.formValues), digits: 0 }), orderType: 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 d5fd49b2b6e..d5b64cb368e 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 @@ -2,20 +2,23 @@ import { convertBaseToStandard } from 'data/components/exchange/services' import { SBCheckoutFormValuesType } from 'data/types' import BigNumber from 'bignumber.js' +import { SBPairType } from 'core/types' + export const getMaxMin = ( - allValues?: SBCheckoutFormValuesType, - minOrMax?: 'min' | 'max' + pair: SBPairType, + minOrMax?: 'min' | 'max', + allValues?: SBCheckoutFormValuesType ) => { switch (minOrMax || 'max') { case 'max': const defaultMax = convertBaseToStandard('FIAT', 0) if (!allValues) return defaultMax if (!allValues.method) return defaultMax - if (!allValues.pair) return defaultMax + if (!pair) return defaultMax const max = BigNumber.minimum( allValues.method.limits.max, - allValues.pair.buyMax + pair.buyMax ).toString() return convertBaseToStandard('FIAT', max) @@ -23,11 +26,11 @@ export const getMaxMin = ( const defaultMin = convertBaseToStandard('FIAT', 0) if (!allValues) return defaultMin if (!allValues.method) return defaultMin - if (!allValues.pair) return defaultMin + if (!pair) return defaultMin const min = BigNumber.maximum( allValues.method.limits.min, - allValues.pair.buyMin + pair.buyMin ).toString() return convertBaseToStandard('FIAT', min) @@ -36,22 +39,22 @@ export const getMaxMin = ( export const maximumAmount = ( value: string, - allValues: SBCheckoutFormValuesType + allValues: SBCheckoutFormValuesType, + pair: SBPairType ) => { - if (!allValues.pair) return if (!value) return true - return Number(value) > Number(getMaxMin(allValues, 'max')) + return Number(value) > Number(getMaxMin(pair, 'max', allValues)) ? 'ABOVE_MAX' : false } export const minimumAmount = ( value: string, - allValues: SBCheckoutFormValuesType + allValues: SBCheckoutFormValuesType, + pair: SBPairType ) => { - if (!allValues.pair) return if (!value) return true - return Number(value) < Number(getMaxMin(allValues, 'min')) + return Number(value) < Number(getMaxMin(pair, 'min', allValues)) ? 'BELOW_MIN' : false } diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/index.tsx index 57094ef23f3..f15885fe4ba 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/index.tsx @@ -19,8 +19,6 @@ import Success from './template.success' class EnterAmount extends PureComponent { componentDidMount () { if (this.props.fiatCurrency) { - this.props.simpleBuyActions.fetchSBPairs(this.props.fiatCurrency) - this.props.simpleBuyActions.fetchSBFiatEligible(this.props.fiatCurrency) this.props.simpleBuyActions.fetchSBPaymentMethods(this.props.fiatCurrency) this.props.simpleBuyActions.fetchSBCards() } @@ -51,11 +49,11 @@ const connector = connect(mapStateToProps, mapDispatchToProps) export type OwnProps = { handleClose: () => void + pair: SBPairType } export type SuccessStateType = { cards: Array eligibility: FiatEligibleType - pairs: Array paymentMethods: SBPaymentMethodsType } export type LinkStatePropsType = { diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/selectors.ts index 7958fe39309..616b2cc5709 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/selectors.ts +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/selectors.ts @@ -4,15 +4,13 @@ import { selectors } from 'data' export const getData = state => { const cardsR = selectors.components.simpleBuy.getSBCards(state) const eligibilityR = selectors.components.simpleBuy.getSBFiatEligible(state) - const pairsR = selectors.components.simpleBuy.getSBPairs(state) const paymentMethodsR = selectors.components.simpleBuy.getSBPaymentMethods( state ) - return lift((cards, eligibility, pairs, paymentMethods) => ({ + return lift((cards, eligibility, paymentMethods) => ({ cards, eligibility, - pairs, paymentMethods - }))(cardsR, eligibilityR, pairsR, paymentMethodsR) + }))(cardsR, eligibilityR, paymentMethodsR) } diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/template.failure.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/template.failure.tsx index 13cf085f151..a8f56f4d871 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/template.failure.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/template.failure.tsx @@ -1,6 +1,6 @@ import { Button, Image, Text } from 'blockchain-info-components' import { FormattedMessage } from 'react-intl' -import { LinkDispatchPropsType } from '.' +import { LinkDispatchPropsType, LinkStatePropsType } from '.' import React from 'react' import styled from 'styled-components' @@ -18,7 +18,9 @@ const Title = styled(Text)` margin: 40px 0px 24px 0px; ` -const Failure: React.FC = props => { +const Failure: React.FC = props => { return (
@@ -42,7 +44,8 @@ const Failure: React.FC = props => { size='16px' onClick={() => props.simpleBuyActions.setStep({ - step: 'CURRENCY_SELECTION' + step: 'CRYPTO_SELECTION', + fiatCurrency: props.fiatCurrency || 'USD' }) } > diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/template.loading.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/template.loading.tsx index faaffb2cc6a..8292a006bf6 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/template.loading.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/template.loading.tsx @@ -20,8 +20,8 @@ const Loading: React.FC = () => { diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/template.success.tsx index 0ea7eb46490..cc12ec7b86b 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/template.success.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/template.success.tsx @@ -5,8 +5,6 @@ import Unsupported from './template.unsupported' const Success: React.FC = props => { const isUserEligible = - props.pairs.length && - props.eligibility.eligible && props.paymentMethods.methods.length && props.paymentMethods.methods.find(method => method.limits.max !== '0') @@ -14,8 +12,6 @@ const Success: React.FC = props => { props.analyticsActions.logEvent([ 'IS_USER_SB_ELIGIBLE', JSON.stringify({ - pairs: props.pairs, - eligibility: props.eligibility, paymentMethods: props.paymentMethods, doesWalletConsiderUserEligible: !!isUserEligible }) diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx index 603bdbe4a61..1c750436c22 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx @@ -161,11 +161,11 @@ type LinkStatePropsType = } | { cardId?: string - pair?: SBPairType + pair: SBPairType step: 'ADD_CARD' } | { - pair?: SBPairType + pair: SBPairType step: 'ENTER_AMOUNT' }