From ee24ba4fe0f0d32135f039d4b939612ce0e61414 Mon Sep 17 00:00:00 2001 From: Philip London Date: Thu, 23 Jul 2020 12:58:01 +0200 Subject: [PATCH 01/11] feat(wip): no-verify --- .../src/data/components/simpleBuy/sagas.ts | 8 +++++++- .../src/modals/SimpleBuy/EnterAmount/Checkout/index.tsx | 9 +++++---- .../modals/SimpleBuy/EnterAmount/Checkout/selectors.ts | 7 ++----- .../modals/SimpleBuy/EnterAmount/Checkout/validation.tsx | 1 + 4 files changed, 15 insertions(+), 10 deletions(-) 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 e53bb6e0f3c..d57e39b135b 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 @@ -30,6 +30,7 @@ import { NO_PAIR_SELECTED } from './model' import { errorHandler } from 'blockchain-wallet-v4/src/utils' +import { Remote } from 'blockchain-wallet-v4/src' import { SBAddCardErrorType, SBAddCardFormValuesType, @@ -458,7 +459,12 @@ export default ({ ) } yield call(createUser) - yield put(A.fetchSBPaymentMethodsLoading()) + + // Only show Loading if NotAsked + const sbMethodsR = S.getSBPaymentMethods(yield select()) + if (Remote.NotAsked.is(sbMethodsR)) + yield put(A.fetchSBPaymentMethodsLoading()) + const methods = yield call( api.getSBPaymentMethods, currency, 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 a5bfb63372a..e6e53565aa8 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 @@ -55,12 +55,13 @@ class Checkout extends PureComponent { case 'USER_CARD': this.props.simpleBuyActions.createSBOrder(this.props.method.id) break + case 'FUNDS': case 'BANK_ACCOUNT': - this.props.simpleBuyActions.createSBOrder() + this.props.simpleBuyActions.createSBOrder( + undefined, + this.props.method.type + ) break - case 'FUNDS': - // eslint-disable-next-line - console.log('Payment method type not supported.') } } } 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 a073b8e95df..9e11d5a5f6b 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,4 +1,4 @@ -import { ExtractSuccess, SupportedCoinsType } from 'core/types' +import { ExtractSuccess } from 'core/types' import { lift } from 'ramda' import { RootState } from 'data/rootReducer' import { SBCheckoutFormValuesType } from 'data/types' @@ -15,22 +15,19 @@ export const getData = (state: RootState) => { const suggestedAmountsR = selectors.components.simpleBuy.getSBSuggestedAmounts( state ) - const supportedCoinsR = selectors.core.walletOptions.getSupportedCoins(state) const userDataR = selectors.modules.profile.getUserData(state) return lift( ( invitations: ExtractSuccess, suggestedAmounts: ExtractSuccess, - supportedCoins: SupportedCoinsType, userData: ExtractSuccess ) => ({ formErrors, formValues, invitations, suggestedAmounts, - supportedCoins, userData }) - )(invitationsR, suggestedAmountsR, supportedCoinsR, userDataR) + )(invitationsR, suggestedAmountsR, userDataR) } 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 ab7a2f26f0a..c00977870ed 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 @@ -40,6 +40,7 @@ export const maximumAmount = ( if (!value) return true const { pair, method } = restProps + console.log(restProps) if (!method) return true return Number(value) > Number(getMaxMin(pair, 'max', allValues, method)) From 62e5c3ec22b43ce8d288c40a4868b803532d2623 Mon Sep 17 00:00:00 2001 From: Philip London Date: Thu, 23 Jul 2020 13:42:36 +0200 Subject: [PATCH 02/11] feat(sb): limit validation for FUNDS --- .../EnterAmount/Checkout/selectors.ts | 5 +++- .../EnterAmount/Checkout/template.success.tsx | 10 +++++++- .../EnterAmount/Checkout/validation.tsx | 23 +++++++++++-------- 3 files changed, 27 insertions(+), 11 deletions(-) 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 9e11d5a5f6b..3c26e1542a1 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 @@ -15,19 +15,22 @@ export const getData = (state: RootState) => { const suggestedAmountsR = selectors.components.simpleBuy.getSBSuggestedAmounts( state ) + const sbBalancesR = selectors.components.simpleBuy.getSBBalances(state) const userDataR = selectors.modules.profile.getUserData(state) return lift( ( invitations: ExtractSuccess, + sbBalances: ExtractSuccess, suggestedAmounts: ExtractSuccess, userData: ExtractSuccess ) => ({ formErrors, formValues, invitations, + sbBalances, suggestedAmounts, userData }) - )(invitationsR, suggestedAmountsR, userDataR) + )(invitationsR, sbBalancesR, suggestedAmountsR, userDataR) } 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 fb7158b1e7d..9d6c20e5705 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 @@ -127,7 +127,13 @@ const Success: React.FC & Props> = props => { const prop = amtError === 'ABOVE_MAX' ? 'max' : 'min' const value = convertStandardToBase( 'FIAT', - getMaxMin(props.pair, prop, props.formValues, props.method) + getMaxMin( + props.pair, + prop, + props.formValues, + props.sbBalances, + props.method + ) ) props.simpleBuyActions.handleSBSuggestedAmountClick(value) } @@ -182,6 +188,7 @@ const Success: React.FC & Props> = props => { props.pair, 'max', props.formValues, + props.sbBalances, props.method ), digits: 0 @@ -201,6 +208,7 @@ const Success: React.FC & Props> = props => { props.pair, 'min', props.formValues, + props.sbBalances, 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 c00977870ed..3fca36e644d 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 @@ -1,13 +1,14 @@ import { convertBaseToStandard } from 'data/components/exchange/services' import { Props } from './template.success' +import { SBBalancesType, SBPairType, SBPaymentMethodType } from 'core/types' import { SBCheckoutFormValuesType } from 'data/types' -import { SBPairType, SBPaymentMethodType } from 'core/types' import BigNumber from 'bignumber.js' export const getMaxMin = ( pair: SBPairType, - minOrMax?: 'min' | 'max', - allValues?: SBCheckoutFormValuesType, + minOrMax: 'min' | 'max', + allValues: SBCheckoutFormValuesType, + sbBalances: SBBalancesType, method?: SBPaymentMethodType ) => { switch (minOrMax || 'max') { @@ -17,7 +18,10 @@ export const getMaxMin = ( if (!method) return defaultMax if (!pair) return defaultMax - const max = BigNumber.minimum(method.limits.max, pair.buyMax).toString() + let max = BigNumber.minimum(method.limits.max, pair.buyMax).toString() + + if (method.type === 'FUNDS' && sbBalances) + max = sbBalances[method.currency].available return convertBaseToStandard('FIAT', max) case 'min': @@ -39,11 +43,11 @@ export const maximumAmount = ( ) => { if (!value) return true - const { pair, method } = restProps - console.log(restProps) + const { pair, method, sbBalances } = restProps if (!method) return true - return Number(value) > Number(getMaxMin(pair, 'max', allValues, method)) + return Number(value) > + Number(getMaxMin(pair, 'max', allValues, sbBalances, method)) ? 'ABOVE_MAX' : false } @@ -55,10 +59,11 @@ export const minimumAmount = ( ) => { if (!value) return true - const { pair, method } = restProps + const { pair, method, sbBalances } = restProps if (!method) return true - return Number(value) < Number(getMaxMin(pair, 'min', allValues, method)) + return Number(value) < + Number(getMaxMin(pair, 'min', allValues, sbBalances, method)) ? 'BELOW_MIN' : false } From e2a2300f6ea96a3c99468c0ffabd2e344c956a2b Mon Sep 17 00:00:00 2001 From: Philip London Date: Thu, 23 Jul 2020 16:25:57 +0200 Subject: [PATCH 03/11] feat(sb): default to previous amt, add coin --- .../src/data/components/simpleBuy/actions.ts | 8 +++- .../src/data/components/simpleBuy/sagas.ts | 6 ++- .../CryptoSelector/CryptoItem/index.tsx | 5 +-- .../CryptoSelector/CryptoItem/selectors.ts | 15 +++++-- .../CryptoItem/template.success.tsx | 10 +++-- .../CryptoSelection/CryptoSelector/index.tsx | 1 - .../SimpleBuy/CryptoSelection/selectors.ts | 7 +-- .../SimpleBuy/EnterAmount/Checkout/index.tsx | 15 ++++--- .../EnterAmount/Checkout/selectors.ts | 5 --- .../EnterAmount/Checkout/template.success.tsx | 44 ++++++++++++++----- .../EnterAmount/Checkout/validation.tsx | 6 +-- 11 files changed, 78 insertions(+), 44 deletions(-) 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 } From a03eab3fbd775206ab74fa6e121f75026a161f7b Mon Sep 17 00:00:00 2001 From: Milan Date: Thu, 23 Jul 2020 16:35:49 +0200 Subject: [PATCH 04/11] feat: code improvements --- .../SimpleBuy/EnterAmount/Checkout/Payment/index.tsx | 8 +++++++- .../src/modals/SimpleBuy/EnterAmount/index.tsx | 5 +---- .../src/modals/SimpleBuy/EnterAmount/selectors.ts | 6 ++---- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/Payment/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/Payment/index.tsx index 998ceb28b06..5ca53b12520 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/Payment/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/Payment/index.tsx @@ -112,7 +112,13 @@ const getIcon = (value: SBPaymentMethodType): ReactElement => { /> ) case 'FUNDS': - return <> + return ( + + ) default: return <> } 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 15ab18089ba..c276fc10bf8 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 @@ -5,7 +5,6 @@ import { FiatEligibleType, FiatType, RemoteDataType, - SBCardType, SBOrderType, SBPairType, SBPaymentMethodsType, @@ -20,9 +19,8 @@ import Success from './template.success' class EnterAmount extends PureComponent { componentDidMount () { - if (this.props.fiatCurrency) { + if (this.props.fiatCurrency && !this.props.method) { this.props.simpleBuyActions.fetchSBPaymentMethods(this.props.fiatCurrency) - this.props.simpleBuyActions.fetchSBCards() this.props.simpleBuyActions.fetchSBOrders() } } @@ -57,7 +55,6 @@ export type OwnProps = { pair: SBPairType } export type SuccessStateType = { - cards: Array eligibility: FiatEligibleType paymentMethods: SBPaymentMethodsType } 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 616b2cc5709..b5550ebb5d7 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 @@ -2,15 +2,13 @@ import { lift } from 'ramda' import { selectors } from 'data' export const getData = state => { - const cardsR = selectors.components.simpleBuy.getSBCards(state) const eligibilityR = selectors.components.simpleBuy.getSBFiatEligible(state) const paymentMethodsR = selectors.components.simpleBuy.getSBPaymentMethods( state ) - return lift((cards, eligibility, paymentMethods) => ({ - cards, + return lift((eligibility, paymentMethods) => ({ eligibility, paymentMethods - }))(cardsR, eligibilityR, paymentMethodsR) + }))(eligibilityR, paymentMethodsR) } From 841b1ac3fbca37ba5dc1e90aa5e62eea83ca3938 Mon Sep 17 00:00:00 2001 From: Philip London Date: Thu, 23 Jul 2020 17:44:32 +0200 Subject: [PATCH 05/11] feat(sb): add avail to buy amt form --- .../src/assets/locales/index.d.ts | 1 + .../EnterAmount/Checkout/Payment/index.tsx | 62 +++++++++---------- .../Checkout/SelectPayment/index.tsx | 2 +- .../EnterAmount/Checkout/template.success.tsx | 13 ++-- 4 files changed, 38 insertions(+), 40 deletions(-) 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 f867ef8be81..f345fee2930 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 @@ -288,6 +288,7 @@ type MessagesType = { 'components.txlistitem.watchonly': 'Non-Spendable' 'copy.address': 'Address' 'copy.amount': 'Amount' + 'copy.available': 'Available' 'copy.balance': 'Balance' 'copy.date': 'Date' 'copy.failed': 'Failed' diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/Payment/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/Payment/index.tsx index 998ceb28b06..e2eee244ecf 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/Payment/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/Payment/index.tsx @@ -5,14 +5,16 @@ import { import { convertBaseToStandard } from 'data/components/exchange/services' import { DisplayIcon } from 'components/SimpleBuy' import { fiatToString } from 'core/exchange/currency' -import { FiatType, SBPaymentMethodType } from 'core/types' import { FormattedMessage } from 'react-intl' +import { IcoMoonType } from 'blockchain-info-components/src/Icons/Icomoon' import { Icon, Text } from 'blockchain-info-components' -import { Props } from '..' -import { Title } from 'components/Flyout' +import { SBBalancesType, SBPaymentMethodType, WalletFiatType } from 'core/types' +import { Title, Value } from 'components/Flyout' import React, { ReactElement } from 'react' import styled from 'styled-components' +import { Props } from '../template.success' + const PaymentContainer = styled.div` border: 1px solid ${props => props.theme.grey100}; box-sizing: border-box; @@ -39,23 +41,11 @@ const PaymentArrowContainer = styled.div` justify-content: center; ` const DisplayTitle = styled(Title)` - align-items: left; - font-weight: 600; - display: flex; - flex-direction: column; - line-height: 24px; - color: ${props => props.theme.textBlack}; - width: 100%; + margin-top: 4px; ` -const DisplaySubTitle = styled(Title)` - align-items: left; - font-weight: 500; - font-size: 12px; - line-height: 24px; - color: ${props => props.theme.grey600}; - width: 100%; +const DisplayValue = styled(Value)` + margin-top: 0px; ` - const DisplayPaymentIcon = styled(DisplayIcon)` justify-content: center; ` @@ -70,31 +60,35 @@ const renderCardText = (value: SBPaymentMethodType): string => { const renderCard = (value: SBPaymentMethodType) => ( <> - {renderCardText(value)} - + {renderCardText(value)} + - + ) -const renderFund = (value: SBPaymentMethodType) => ( +const renderFund = (value: SBPaymentMethodType, sbBalances: SBBalancesType) => ( <> - {value.currency} - + {value.currency} + {fiatToString({ - value: convertBaseToStandard('FIAT', value.limits.max), - unit: String(value.currency) as FiatType - })} - + value: convertBaseToStandard( + 'FIAT', + sbBalances[value.currency as WalletFiatType]?.available + ), + unit: String(value.currency) as WalletFiatType + })}{' '} + + ) @@ -112,7 +106,13 @@ const getIcon = (value: SBPaymentMethodType): ReactElement => { /> ) case 'FUNDS': - return <> + return ( + + ) default: return <> } @@ -135,7 +135,7 @@ const Payment: React.FC = props => ( {props.method.type === 'USER_CARD' ? renderCard(props.method) - : renderFund(props.method)} + : renderFund(props.method, props.sbBalances)} )} diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/SelectPayment/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/SelectPayment/index.tsx index 823651ff99c..7224c7efaf4 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/SelectPayment/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/SelectPayment/index.tsx @@ -10,11 +10,11 @@ const SelectPaymentContainer = styled.div` width: 400px; height: 80px; border-radius: 8px; + padding: 24px; margin-bottom: 24px; display: flex; flex-direction: row; cursor: pointer; - padding: 23px 28px 28px 28px; line-height: 32px; justify-content: space-between; ` 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 a00d564a76a..ec27f2be4fb 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 @@ -97,8 +97,6 @@ const ErrorText = styled(Text)` margin-bottom: 16px; ` -export type Props = OwnProps & SuccessStateType - const normalizeAmount = ( value, prevValue, @@ -214,8 +212,7 @@ const Success: React.FC & Props> = props => { props.sbBalances, props.formValues, props.method - ), - digits: 0 + ) }), orderType: props.formValues.orderType === 'BUY' ? 'Buy' : 'Sell' @@ -234,8 +231,7 @@ const Success: React.FC & Props> = props => { props.sbBalances, props.formValues, props.method - ), - digits: 0 + ) }), orderType: props.formValues.orderType === 'BUY' ? 'Buy' : 'Sell' @@ -279,8 +275,7 @@ const Success: React.FC & Props> = props => { > {fiatToString({ unit: fiatCurrency, - value: convertBaseToStandard('FIAT', amount), - digits: 0 + value: convertBaseToStandard('FIAT', amount) })} ) @@ -315,6 +310,8 @@ const Success: React.FC & Props> = props => { ) } +export type Props = OwnProps & SuccessStateType + export default reduxForm<{}, Props>({ form: 'simpleBuyCheckout', destroyOnUnmount: false From cfc72a9875beb2551ca4e71cd9e423c10f7011f5 Mon Sep 17 00:00:00 2001 From: Philip London Date: Thu, 23 Jul 2020 19:44:04 +0200 Subject: [PATCH 06/11] feat(sb): default method --- .../src/data/components/simpleBuy/actions.ts | 2 -- .../src/data/components/simpleBuy/reducers.ts | 4 ---- .../data/components/simpleBuy/selectors.ts | 21 +++++++++++++++++-- .../src/data/components/simpleBuy/types.ts | 3 --- .../CryptoSelection/CryptoSelector/index.tsx | 11 ++++++---- .../SimpleBuy/CryptoSelection/selectors.ts | 7 ++++++- .../EnterAmount/Checkout/Payment/index.tsx | 1 + .../General/LinkedCards/template.success.tsx | 12 +++-------- 8 files changed, 36 insertions(+), 25 deletions(-) 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 536da2348e0..5af146e7db2 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 @@ -411,7 +411,6 @@ const getPayloadObjectForStep = (payload: StepActionsPayload) => { return { step: payload.step, cryptoCurrency: payload.cryptoCurrency, - defaultMethod: payload.defaultMethod, fiatCurrency: payload.fiatCurrency, order: payload.order, pair: payload.pair @@ -420,7 +419,6 @@ const getPayloadObjectForStep = (payload: StepActionsPayload) => { return { step: payload.step, cryptoCurrency: payload.cryptoCurrency, - defaultMethod: payload.defaultMethod, fiatCurrency: payload.fiatCurrency, method: payload.method, pair: payload.pair diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts index 3b9c559b023..a4c6362f8ff 100644 --- a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts +++ b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts @@ -9,7 +9,6 @@ const INITIAL_STATE: SimpleBuyState = { cardId: undefined, cards: Remote.NotAsked, cryptoCurrency: undefined, - defaultMethod: undefined, everypay3DS: Remote.NotAsked, fiatCurrency: undefined, fiatEligible: Remote.NotAsked, @@ -67,7 +66,6 @@ export function simpleBuyReducer ( ...state, account: Remote.NotAsked, cardId: undefined, - defaultMethod: undefined, order: undefined, pairs: Remote.NotAsked, quote: Remote.NotAsked, @@ -241,7 +239,6 @@ export function simpleBuyReducer ( return { ...state, cryptoCurrency: action.payload.cryptoCurrency, - defaultMethod: action.payload.defaultMethod, fiatCurrency: action.payload.fiatCurrency, step: action.payload.step, pair: action.payload.pair, @@ -260,7 +257,6 @@ export function simpleBuyReducer ( return { ...state, cryptoCurrency: action.payload.cryptoCurrency, - defaultMethod: action.payload.defaultMethod, fiatCurrency: action.payload.fiatCurrency, step: action.payload.step, order: action.payload.order diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts index 5fffb78b319..fafb12e71a9 100644 --- a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts +++ b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts @@ -1,3 +1,5 @@ +import { ExtractSuccess } from 'core/types' +import { lift } from 'ramda' import { RootState } from 'data/rootReducer' export const getEverypay3DSDetails = (state: RootState) => @@ -12,8 +14,23 @@ export const getCryptoCurrency = (state: RootState) => export const getFiatCurrency = (state: RootState) => state.components.simpleBuy.fiatCurrency || state.preferences.sbFiatCurrency -export const getDefaultMethod = (state: RootState) => - state.components.simpleBuy.defaultMethod +export const getDefaultPaymentMethod = (state: RootState) => { + const ordersR = getSBOrders(state) + const sbMethodsR = getSBPaymentMethods(state) + + const transform = ( + orders: ExtractSuccess, + sbMethods: ExtractSuccess + ) => { + const { paymentType: type, inputCurrency } = orders[0] + + return sbMethods.methods.find( + method => method.type === type && method.currency === inputCurrency + ) + } + + return lift(transform)(ordersR, sbMethodsR) +} export const getSBBalances = (state: RootState) => state.components.simpleBuy.balances 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 729e8d6579e..103e6d6cd93 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 @@ -70,7 +70,6 @@ export type SimpleBuyState = { cardId: undefined | string cards: RemoteDataType> cryptoCurrency: undefined | CoinType - defaultMethod: undefined | SBPaymentMethodType everypay3DS: RemoteDataType fiatCurrency: undefined | FiatType fiatEligible: RemoteDataType @@ -290,7 +289,6 @@ export type StepActionsPayload = } | { cryptoCurrency?: CoinType - defaultMethod?: SBPaymentMethodType fiatCurrency: FiatType method?: SBPaymentMethodType order?: SBOrderType @@ -308,7 +306,6 @@ export type StepActionsPayload = } | { cryptoCurrency: CoinType - defaultMethod?: SBPaymentMethodType fiatCurrency: FiatType order?: SBOrderType pair: SBPairType 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 e952c18e4a2..dce7c969519 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 @@ -3,7 +3,7 @@ import { Form, InjectedFormProps, reduxForm } from 'redux-form' import { FormattedMessage } from 'react-intl' import { Icon, Text } from 'blockchain-info-components' import { Props as OwnProps, SuccessStateType } from '../index' -import { SBPairType } from 'core/types' +import { SBPairType, SBPaymentMethodType } from 'core/types' import CryptoItem from './CryptoItem' import React from 'react' import styled from 'styled-components' @@ -32,12 +32,13 @@ export type Props = OwnProps & SuccessStateType const CryptoSelector: React.FC & Props> = props => { - const handleSubmit = (pair: SBPairType) => { + const handleSubmit = (pair: SBPairType, method?: SBPaymentMethodType) => { props.simpleBuyActions.destroyCheckout() props.simpleBuyActions.setStep({ step: 'ENTER_AMOUNT', fiatCurrency: props.fiatCurrency, - pair + pair, + method }) } @@ -72,7 +73,9 @@ const CryptoSelector: React.FC & handleSubmit(value as SBPairType)} + onClick={() => + handleSubmit(value as SBPairType, props.defaultMethod) + } /> ))} 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 07a68693ff5..8c22688726f 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 @@ -4,18 +4,23 @@ import { selectors } from 'data' export const getData = state => { const eligibilityR = selectors.components.simpleBuy.getSBFiatEligible(state) + const defaultMethodR = selectors.components.simpleBuy.getDefaultPaymentMethod( + state + ) const pairsR = selectors.components.simpleBuy.getSBPairs(state) const userDataR = selectors.modules.profile.getUserData(state) return lift( ( eligibility: ExtractSuccess, + defaultMethod: ExtractSuccess, pairs: ExtractSuccess, userData: ExtractSuccess ) => ({ eligibility, + defaultMethod, pairs, userData }) - )(eligibilityR, pairsR, userDataR) + )(eligibilityR, defaultMethodR, pairsR, userDataR) } diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/Payment/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/Payment/index.tsx index e2eee244ecf..25b442f7d3a 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/Payment/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/Payment/index.tsx @@ -120,6 +120,7 @@ const getIcon = (value: SBPaymentMethodType): ReactElement => { const Payment: React.FC = props => ( props.simpleBuyActions.setStep({ step: 'PAYMENT_METHODS', diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/template.success.tsx index cdeaa30a4c4..dccb0fcd60a 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/template.success.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/template.success.tsx @@ -5,7 +5,7 @@ import { } from 'components/Form/CreditCardBox/model' import { convertBaseToStandard } from 'data/components/exchange/services' import { fiatToString } from 'core/exchange/currency' -import { FiatType, SBPaymentMethodType } from 'core/types' +import { FiatType } from 'core/types' import { FormattedMessage } from 'react-intl' import { InjectedFormProps, reduxForm } from 'redux-form' import { Props as OwnProps, SuccessStateType } from '.' @@ -94,13 +94,7 @@ const Success: React.FC { if (props.submitting) return - props.handleCreditCardClick({ - ...card, - type: 'USER_CARD', - limits: ccPaymentMethod - ? ccPaymentMethod.limits - : { min: '500', max: '50000' } - }) + props.handleCreditCardClick() }} > @@ -170,7 +164,7 @@ const Success: React.FC void + handleCreditCardClick: () => void } export default reduxForm<{}, Props>({ form: 'linkedCards' })(Success) From ceb5c1a1810c7ee0fc3941ed4f4d2ca793248216 Mon Sep 17 00:00:00 2001 From: Milan Date: Thu, 23 Jul 2020 19:55:58 +0200 Subject: [PATCH 07/11] feat: add back button --- .../src/data/components/simpleBuy/actions.ts | 4 +- .../src/data/components/simpleBuy/reducers.ts | 14 ++++-- .../data/components/simpleBuy/selectors.ts | 3 ++ .../src/data/components/simpleBuy/types.ts | 3 ++ .../PaymentMethods/Payments/index.tsx | 4 +- .../SimpleBuy/TransferDetails/index.tsx | 13 +++++- .../TransferDetails/template.success.tsx | 46 ++++++++++++++++--- .../src/modals/SimpleBuy/index.tsx | 5 +- 8 files changed, 77 insertions(+), 15 deletions(-) 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..e00bd4a2424 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 @@ -430,7 +430,9 @@ const getPayloadObjectForStep = (payload: StepActionsPayload) => { case 'TRANSFER_DETAILS': return { step: payload.step, - fiatCurrency: payload.fiatCurrency + fiatCurrency: payload.fiatCurrency, + pair: payload.pair, + displayBack: payload.displayBack } case 'CHECKOUT_CONFIRM': case 'ORDER_SUMMARY': diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts index 3b9c559b023..e070cd9f202 100644 --- a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts +++ b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts @@ -8,6 +8,7 @@ const INITIAL_STATE: SimpleBuyState = { card: Remote.NotAsked, cardId: undefined, cards: Remote.NotAsked, + displayBack: undefined, cryptoCurrency: undefined, defaultMethod: undefined, everypay3DS: Remote.NotAsked, @@ -246,7 +247,8 @@ export function simpleBuyReducer ( step: action.payload.step, pair: action.payload.pair, method: action.payload.method, - order: undefined + order: undefined, + displayBack: undefined } case 'CRYPTO_SELECTION': return { @@ -263,7 +265,8 @@ export function simpleBuyReducer ( defaultMethod: action.payload.defaultMethod, fiatCurrency: action.payload.fiatCurrency, step: action.payload.step, - order: action.payload.order + order: action.payload.order, + displayBack: undefined } case '3DS_HANDLER': case 'CHECKOUT_CONFIRM': @@ -278,12 +281,15 @@ export function simpleBuyReducer ( return { ...state, step: action.payload.step, - fiatCurrency: action.payload.fiatCurrency + fiatCurrency: action.payload.fiatCurrency, + pair: action.payload.pair, + displayBack: action.payload.displayBack } default: { return { ...state, - step: action.payload.step + step: action.payload.step, + displayBack: undefined } } } diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts index 5fffb78b319..e2355a40f8b 100644 --- a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts +++ b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts @@ -9,6 +9,9 @@ export const getSBAccount = (state: RootState) => export const getCryptoCurrency = (state: RootState) => state.components.simpleBuy.cryptoCurrency +export const getDisplayBack = (state: RootState) => + state.components.simpleBuy.displayBack + export const getFiatCurrency = (state: RootState) => state.components.simpleBuy.fiatCurrency || state.preferences.sbFiatCurrency 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 729e8d6579e..3560b7f7304 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 @@ -71,6 +71,7 @@ export type SimpleBuyState = { cards: RemoteDataType> cryptoCurrency: undefined | CoinType defaultMethod: undefined | SBPaymentMethodType + displayBack: undefined | boolean everypay3DS: RemoteDataType fiatCurrency: undefined | FiatType fiatEligible: RemoteDataType @@ -303,7 +304,9 @@ export type StepActionsPayload = step: 'CRYPTO_SELECTION' } | { + displayBack?: boolean fiatCurrency: FiatType + pair: SBPairType step: 'TRANSFER_DETAILS' } | { diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/index.tsx index ba92f90d6d2..d5a3c7665bc 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/index.tsx @@ -227,7 +227,9 @@ class Payments extends PureComponent & Props> { onClick={() => this.props.simpleBuyActions.setStep({ step: 'TRANSFER_DETAILS', - fiatCurrency + fiatCurrency, + pair: this.props.pair, + displayBack: true }) } /> diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/TransferDetails/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/TransferDetails/index.tsx index 220fef5f819..1e75ed58e56 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/TransferDetails/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/TransferDetails/index.tsx @@ -1,7 +1,14 @@ import { actions } from 'data' import { bindActionCreators, Dispatch } from 'redux' +import { + CoinType, + FiatType, + RemoteDataType, + SBAccountType, + SBOrderType, + SBPairType +} from 'core/types' import { connect, ConnectedProps } from 'react-redux' -import { FiatType, RemoteDataType, SBAccountType } from 'core/types' import { getData } from './selectors' import { RootState } from 'data/rootReducer' import { UserDataType } from 'data/types' @@ -39,8 +46,12 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({ const connector = connect(mapStateToProps, mapDispatchToProps) export type OwnProps = { + cryptoCurrency?: CoinType + displayBack?: boolean fiatCurrency: FiatType handleClose: () => void + order?: SBOrderType + pair: SBPairType } export type SuccessStateType = { account: SBAccountType diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/TransferDetails/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/TransferDetails/template.success.tsx index c6b512f40c6..3201e5216ed 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/TransferDetails/template.success.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/TransferDetails/template.success.tsx @@ -68,10 +68,49 @@ const Copy = styled.div` display: flex; ` +const BackIcon = styled(Icon)` + position: absolute; + left: 40px; + top: 20px; +` + +const CloseIcon = styled(Icon)` + position: absolute; + right: 28px; + top: 28px; +` + const Success: React.FC = props => { return (
+ {props.displayBack && ( + + props.simpleBuyActions.setStep({ + step: 'PAYMENT_METHODS', + fiatCurrency: props.fiatCurrency || 'USD', + pair: props.pair, + cryptoCurrency: props.cryptoCurrency || 'BTC', + order: props.order + }) + } + /> + )} + + props.handleClose()} + /> = props => { currency: Currencies[props.fiatCurrency].displayName }} /> - props.handleClose()} - /> ({ method: selectors.components.simpleBuy.getSBPaymentMethod(state), order: selectors.components.simpleBuy.getSBOrder(state), cryptoCurrency: selectors.components.simpleBuy.getCryptoCurrency(state), - fiatCurrency: selectors.components.simpleBuy.getFiatCurrency(state) + fiatCurrency: selectors.components.simpleBuy.getFiatCurrency(state), + displayBack: selectors.components.simpleBuy.getDisplayBack(state) }) const mapDispatchToProps = (dispatch: Dispatch): LinkDispatchPropsType => ({ @@ -167,7 +168,9 @@ type LinkStatePropsType = | 'CC_BILLING_ADDRESS' } | { + displayBack?: boolean fiatCurrency: FiatType + pair: SBPairType step: 'TRANSFER_DETAILS' } | { From 8e4c666da90aa68c73def1d3c504626249c948d2 Mon Sep 17 00:00:00 2001 From: Philip London Date: Fri, 24 Jul 2020 09:33:28 +0200 Subject: [PATCH 08/11] feat(sb): address pr comments --- .../src/data/components/simpleBuy/actions.ts | 3 ++- .../src/data/components/simpleBuy/model.ts | 3 ++- .../src/data/components/simpleBuy/selectors.ts | 7 +++++-- .../src/data/components/simpleBuy/types.ts | 3 ++- .../src/network/api/simpleBuy/index.ts | 5 +++-- .../src/network/api/simpleBuy/types.ts | 3 ++- 6 files changed, 16 insertions(+), 8 deletions(-) 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 5af146e7db2..acacdf86efe 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 @@ -8,6 +8,7 @@ import { SBAccountType, SBBalancesType, SBCardType, + SBOrderActionType, SBOrderType, SBPairType, SBPaymentMethodsType, @@ -374,7 +375,7 @@ export const initializeBillingAddress = () => ({ }) export const initializeCheckout = ( - orderType: 'BUY' | 'SELL', + orderType: SBOrderActionType, amount?: string ) => ({ type: AT.INITIALIZE_CHECKOUT, diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/model.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/model.ts index 21e3c2a2c11..c2688beead7 100644 --- a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/model.ts +++ b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/model.ts @@ -4,6 +4,7 @@ import { FiatType, FiatTypeEnum, SBCardType, + SBOrderActionType, SBOrderType, SBPairsType, SBQuoteType @@ -30,7 +31,7 @@ export const splitPair = ( return pair.split('-') as [FiatType | CoinType, '-', FiatType | CoinType] } -export const getOrderType = (pair: SBPairsType): 'BUY' | 'SELL' => { +export const getOrderType = (pair: SBPairsType): SBOrderActionType => { return splitPair(pair)[0] in FiatTypeEnum ? 'SELL' : 'BUY' } diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts index fafb12e71a9..b6fca0e9620 100644 --- a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts +++ b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts @@ -22,10 +22,13 @@ export const getDefaultPaymentMethod = (state: RootState) => { orders: ExtractSuccess, sbMethods: ExtractSuccess ) => { - const { paymentType: type, inputCurrency } = orders[0] + const lastOrder = orders.shift() + if (!lastOrder) return undefined return sbMethods.methods.find( - method => method.type === type && method.currency === inputCurrency + method => + method.type === lastOrder.paymentType && + method.currency === lastOrder.inputCurrency ) } 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 103e6d6cd93..04958f206ac 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 @@ -9,6 +9,7 @@ import { SBAccountType, SBBalancesType, SBCardType, + SBOrderActionType, SBOrderType, SBPairType, SBPaymentMethodsType, @@ -34,7 +35,7 @@ export type SBAddCardErrorType = export type SBBillingAddressFormValuesType = NabuAddressType export type SBCheckoutFormValuesType = { amount: string - orderType: 'BUY' | 'SELL' + orderType: SBOrderActionType } export type SBCurrencySelectFormType = { search: string diff --git a/packages/blockchain-wallet-v4/src/network/api/simpleBuy/index.ts b/packages/blockchain-wallet-v4/src/network/api/simpleBuy/index.ts index d33ab6b2b28..ce4e94cfdd1 100644 --- a/packages/blockchain-wallet-v4/src/network/api/simpleBuy/index.ts +++ b/packages/blockchain-wallet-v4/src/network/api/simpleBuy/index.ts @@ -6,6 +6,7 @@ import { SBBalancesType, SBCardType, SBMoneyType, + SBOrderActionType, SBOrderType, SBPairsType, SBPairType, @@ -70,7 +71,7 @@ export default ({ const createSBOrder = ( pair: SBPairsType, - action: 'BUY' | 'SELL', + action: SBOrderActionType, pending: boolean, input: SBMoneyType, output: { @@ -211,7 +212,7 @@ export default ({ const getSBQuote = ( currencyPair: SBPairsType, - action: 'BUY' | 'SELL', + action: SBOrderActionType, amount: string ): SBQuoteType => authorizedGet({ diff --git a/packages/blockchain-wallet-v4/src/network/api/simpleBuy/types.ts b/packages/blockchain-wallet-v4/src/network/api/simpleBuy/types.ts index 07a4c7e03ef..e3ef2a1eebc 100644 --- a/packages/blockchain-wallet-v4/src/network/api/simpleBuy/types.ts +++ b/packages/blockchain-wallet-v4/src/network/api/simpleBuy/types.ts @@ -178,6 +178,7 @@ export type ISBBuyOrderType = { state: SBOrderStateType updatedAt: string } +export type SBOrderActionType = 'BUY' | 'SELL' export type SBBuyOrderType = ISBBuyOrderType & { inputCurrency: FiatType outputCurrency: CoinType @@ -200,7 +201,7 @@ export type SBOrderStateType = | 'EXPIRED' export type SBQuoteType = { - action: 'BUY' | 'SELL' + action: SBOrderActionType fee: string pair: SBPairsType rate: string From 354ded25fad1edef4a474baec9630c80b58cb15c Mon Sep 17 00:00:00 2001 From: Philip London Date: Fri, 24 Jul 2020 11:18:09 +0200 Subject: [PATCH 09/11] feat(sb): fallback to default method instead of passing thru props --- .../data/components/simpleBuy/selectors.ts | 42 +++++++++++++++---- .../CryptoSelection/CryptoSelector/index.tsx | 11 ++--- .../SimpleBuy/CryptoSelection/selectors.ts | 7 +--- .../SimpleBuy/EnterAmount/Checkout/index.tsx | 21 ++++------ .../EnterAmount/Checkout/template.success.tsx | 24 +++++------ .../EnterAmount/Checkout/validation.tsx | 6 ++- .../modals/SimpleBuy/EnterAmount/index.tsx | 10 +---- .../modals/SimpleBuy/EnterAmount/selectors.ts | 22 +++++++--- 8 files changed, 81 insertions(+), 62 deletions(-) diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts index b6fca0e9620..89daee538b0 100644 --- a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts +++ b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts @@ -1,5 +1,5 @@ -import { ExtractSuccess } from 'core/types' -import { lift } from 'ramda' +import { ExtractSuccess, SBPaymentMethodType } from 'core/types' +import { head, lift } from 'ramda' import { RootState } from 'data/rootReducer' export const getEverypay3DSDetails = (state: RootState) => @@ -16,23 +16,47 @@ export const getFiatCurrency = (state: RootState) => export const getDefaultPaymentMethod = (state: RootState) => { const ordersR = getSBOrders(state) + const sbCardsR = getSBCards(state) const sbMethodsR = getSBPaymentMethods(state) const transform = ( orders: ExtractSuccess, + sbCards: ExtractSuccess, sbMethods: ExtractSuccess - ) => { - const lastOrder = orders.shift() + ): SBPaymentMethodType | undefined => { + const lastOrder = head(orders) if (!lastOrder) return undefined - return sbMethods.methods.find( - method => - method.type === lastOrder.paymentType && - method.currency === lastOrder.inputCurrency + const methodsOfType = sbMethods.methods.filter( + method => method.type === lastOrder.paymentType ) + + switch (lastOrder.paymentType) { + case 'PAYMENT_CARD': + const method = head(methodsOfType) + if (!method) return + const sbCard = sbCards.find( + value => value.id === lastOrder.paymentMethodId + ) + const card = sbCard?.card || undefined + + return { + ...method, + type: 'USER_CARD', + card + } + case 'FUNDS': + return methodsOfType.find( + method => method.currency === lastOrder.inputCurrency + ) + case 'BANK_ACCOUNT': + case 'USER_CARD': + case undefined: + return undefined + } } - return lift(transform)(ordersR, sbMethodsR) + return lift(transform)(ordersR, sbCardsR, sbMethodsR) } export const getSBBalances = (state: RootState) => 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 dce7c969519..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 @@ -3,7 +3,7 @@ import { Form, InjectedFormProps, reduxForm } from 'redux-form' import { FormattedMessage } from 'react-intl' import { Icon, Text } from 'blockchain-info-components' import { Props as OwnProps, SuccessStateType } from '../index' -import { SBPairType, SBPaymentMethodType } from 'core/types' +import { SBPairType } from 'core/types' import CryptoItem from './CryptoItem' import React from 'react' import styled from 'styled-components' @@ -32,13 +32,12 @@ export type Props = OwnProps & SuccessStateType const CryptoSelector: React.FC & Props> = props => { - const handleSubmit = (pair: SBPairType, method?: SBPaymentMethodType) => { + const handleSubmit = (pair: SBPairType) => { props.simpleBuyActions.destroyCheckout() props.simpleBuyActions.setStep({ step: 'ENTER_AMOUNT', fiatCurrency: props.fiatCurrency, - pair, - method + pair }) } @@ -73,9 +72,7 @@ const CryptoSelector: React.FC & - handleSubmit(value as SBPairType, props.defaultMethod) - } + onClick={() => 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 8c22688726f..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 @@ -4,23 +4,18 @@ import { selectors } from 'data' export const getData = state => { const eligibilityR = selectors.components.simpleBuy.getSBFiatEligible(state) - const defaultMethodR = selectors.components.simpleBuy.getDefaultPaymentMethod( - state - ) const pairsR = selectors.components.simpleBuy.getSBPairs(state) const userDataR = selectors.modules.profile.getUserData(state) return lift( ( eligibility: ExtractSuccess, - defaultMethod: ExtractSuccess, pairs: ExtractSuccess, userData: ExtractSuccess ) => ({ eligibility, - defaultMethod, pairs, userData }) - )(eligibilityR, defaultMethodR, pairsR, 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 5f2e5f8a389..3c917e33af1 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 @@ -8,7 +8,6 @@ import { import { getData } from './selectors' import { RootState } from 'data/rootReducer' import { SBCheckoutFormValuesType, UserDataType } from 'data/types' -import { SBPaymentTypes } from 'core/types' import Failure from '../template.failure' import Loading from './template.loading' import React, { PureComponent } from 'react' @@ -28,17 +27,16 @@ class Checkout extends PureComponent { userData: { tiers: { current: 0, next: 0, selected: 0 } } as UserDataType } as SuccessStateType) + const method = this.props.method || this.props.defaultMethod + if (userData.tiers.current < 2) { this.props.identityVerificationActions.verifyIdentity( 2, false, 'SBEnterAmountCheckout' ) - this.props.simpleBuyActions.createSBOrder( - undefined, - this.props.method?.type as SBPaymentTypes - ) - } else if (!this.props.method) { + this.props.simpleBuyActions.createSBOrder(undefined, method?.type) + } else if (!method) { const fiatCurrency = this.props.fiatCurrency || 'USD' this.props.simpleBuyActions.setStep({ step: 'PAYMENT_METHODS', @@ -47,22 +45,19 @@ class Checkout extends PureComponent { cryptoCurrency: this.props.cryptoCurrency, order: this.props.order }) - } else if (formValues && this.props.method) { - switch (this.props.method.type) { + } else if (formValues && method) { + switch (method.type) { case 'PAYMENT_CARD': this.props.simpleBuyActions.setStep({ step: 'ADD_CARD' }) break case 'USER_CARD': - this.props.simpleBuyActions.createSBOrder(this.props.method.id) + this.props.simpleBuyActions.createSBOrder(method.id) break case 'FUNDS': case 'BANK_ACCOUNT': - this.props.simpleBuyActions.createSBOrder( - undefined, - this.props.method.type - ) + this.props.simpleBuyActions.createSBOrder(undefined, method.type) break } } 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 ec27f2be4fb..98c76c2eafd 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 @@ -107,7 +107,8 @@ const normalizeAmount = ( } const Success: React.FC & Props> = props => { - const { fiatCurrency, method } = props + const { fiatCurrency, method: selectedMethod, defaultMethod } = props + const method = selectedMethod || defaultMethod if (!props.formValues) return null if (!fiatCurrency) @@ -129,13 +130,7 @@ const Success: React.FC & Props> = props => { const prop = amtError === 'ABOVE_MAX' ? 'max' : 'min' const value = convertStandardToBase( 'FIAT', - getMaxMin( - props.pair, - prop, - props.sbBalances, - props.formValues, - props.method - ) + getMaxMin(props.pair, prop, props.sbBalances, props.formValues, method) ) props.simpleBuyActions.handleSBSuggestedAmountClick(value) } @@ -211,7 +206,7 @@ const Success: React.FC & Props> = props => { 'max', props.sbBalances, props.formValues, - props.method + method ) }), orderType: @@ -230,7 +225,7 @@ const Success: React.FC & Props> = props => { 'min', props.sbBalances, props.formValues, - props.method + method ) }), orderType: @@ -275,7 +270,8 @@ const Success: React.FC & Props> = props => { > {fiatToString({ unit: fiatCurrency, - value: convertBaseToStandard('FIAT', amount) + value: convertBaseToStandard('FIAT', amount), + digits: 0 })} ) @@ -292,7 +288,11 @@ const Success: React.FC & Props> = props => { )} - {method ? : } + {method ? ( + + ) : ( + + )} {props.error && ( 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 ccc54173051..09d7b301248 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 @@ -43,7 +43,8 @@ export const maximumAmount = ( ) => { if (!value) return true - const { pair, method, sbBalances } = restProps + const { pair, method: selectedMethod, defaultMethod, sbBalances } = restProps + const method = selectedMethod || defaultMethod if (!method) return true return Number(value) > @@ -59,7 +60,8 @@ export const minimumAmount = ( ) => { if (!value) return true - const { pair, method, sbBalances } = restProps + const { pair, method: selectedMethod, defaultMethod, sbBalances } = restProps + const method = selectedMethod || defaultMethod if (!method) return true return Number(value) < 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 15ab18089ba..844926a54f2 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 @@ -2,13 +2,11 @@ import { actions, selectors } from 'data' import { bindActionCreators, Dispatch } from 'redux' import { connect, ConnectedProps } from 'react-redux' import { - FiatEligibleType, + ExtractSuccess, FiatType, RemoteDataType, - SBCardType, SBOrderType, SBPairType, - SBPaymentMethodsType, SBPaymentMethodType } from 'core/types' import { getData } from './selectors' @@ -56,11 +54,7 @@ export type OwnProps = { order?: SBOrderType pair: SBPairType } -export type SuccessStateType = { - cards: Array - eligibility: FiatEligibleType - paymentMethods: SBPaymentMethodsType -} +export type SuccessStateType = ExtractSuccess> export type LinkStatePropsType = { data: RemoteDataType fiatCurrency: undefined | FiatType 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 616b2cc5709..dc79ec6353c 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 @@ -1,16 +1,28 @@ +import { ExtractSuccess } from 'core/types' import { lift } from 'ramda' import { selectors } from 'data' export const getData = state => { const cardsR = selectors.components.simpleBuy.getSBCards(state) + const defaultMethodR = selectors.components.simpleBuy.getDefaultPaymentMethod( + state + ) const eligibilityR = selectors.components.simpleBuy.getSBFiatEligible(state) const paymentMethodsR = selectors.components.simpleBuy.getSBPaymentMethods( state ) - return lift((cards, eligibility, paymentMethods) => ({ - cards, - eligibility, - paymentMethods - }))(cardsR, eligibilityR, paymentMethodsR) + return lift( + ( + cards: ExtractSuccess, + defaultMethod: ExtractSuccess, + eligibility: ExtractSuccess, + paymentMethods: ExtractSuccess + ) => ({ + cards, + defaultMethod, + eligibility, + paymentMethods + }) + )(cardsR, defaultMethodR, eligibilityR, paymentMethodsR) } From 5a6fcf08a7e3065dfe817390b6abc54cc3daefcf Mon Sep 17 00:00:00 2001 From: Philip London Date: Fri, 24 Jul 2020 12:13:38 +0200 Subject: [PATCH 10/11] feat(sb): show back button --- .../src/data/components/simpleBuy/actions.ts | 1 - .../src/data/components/simpleBuy/reducers.ts | 15 ++++------- .../src/data/components/simpleBuy/types.ts | 5 ++-- .../modals/SimpleBuy/EnterAmount/index.tsx | 1 + .../PaymentMethods/Payments/index.tsx | 1 - .../src/scenes/Transactions/index.tsx | 27 ++++++++++++++++--- 6 files changed, 32 insertions(+), 18 deletions(-) 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 3bae453865f..6465b9cc46b 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 @@ -434,7 +434,6 @@ const getPayloadObjectForStep = (payload: StepActionsPayload) => { return { step: payload.step, fiatCurrency: payload.fiatCurrency, - pair: payload.pair, displayBack: payload.displayBack } case 'CHECKOUT_CONFIRM': diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts index 24de633c8c3..0a1a68042ae 100644 --- a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts +++ b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts @@ -8,7 +8,7 @@ const INITIAL_STATE: SimpleBuyState = { card: Remote.NotAsked, cardId: undefined, cards: Remote.NotAsked, - displayBack: undefined, + displayBack: false, cryptoCurrency: undefined, everypay3DS: Remote.NotAsked, fiatCurrency: undefined, @@ -244,16 +244,14 @@ export function simpleBuyReducer ( step: action.payload.step, pair: action.payload.pair, method: action.payload.method, - order: undefined, - displayBack: undefined + order: undefined } case 'CRYPTO_SELECTION': return { ...state, cryptoCurrency: action.payload.cryptoCurrency, fiatCurrency: action.payload.fiatCurrency, - step: action.payload.step, - order: undefined + step: action.payload.step } case 'PAYMENT_METHODS': return { @@ -261,8 +259,7 @@ export function simpleBuyReducer ( cryptoCurrency: action.payload.cryptoCurrency, fiatCurrency: action.payload.fiatCurrency, step: action.payload.step, - order: action.payload.order, - displayBack: undefined + order: action.payload.order } case '3DS_HANDLER': case 'CHECKOUT_CONFIRM': @@ -278,14 +275,12 @@ export function simpleBuyReducer ( ...state, step: action.payload.step, fiatCurrency: action.payload.fiatCurrency, - pair: action.payload.pair, displayBack: action.payload.displayBack } default: { return { ...state, - step: action.payload.step, - displayBack: undefined + step: action.payload.step } } } 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 a85e72b27eb..0f4cb2eaafc 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 @@ -71,7 +71,7 @@ export type SimpleBuyState = { cardId: undefined | string cards: RemoteDataType> cryptoCurrency: undefined | CoinType - displayBack: undefined | boolean + displayBack: boolean everypay3DS: RemoteDataType fiatCurrency: undefined | FiatType fiatEligible: RemoteDataType @@ -303,9 +303,8 @@ export type StepActionsPayload = step: 'CRYPTO_SELECTION' } | { - displayBack?: boolean + displayBack: boolean fiatCurrency: FiatType - pair: SBPairType step: 'TRANSFER_DETAILS' } | { 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 bd490245aba..961ec70a92d 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 @@ -21,6 +21,7 @@ class EnterAmount extends PureComponent { if (this.props.fiatCurrency && !this.props.method) { this.props.simpleBuyActions.fetchSBPaymentMethods(this.props.fiatCurrency) this.props.simpleBuyActions.fetchSBOrders() + this.props.simpleBuyActions.fetchSBCards() } } diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/index.tsx index d5a3c7665bc..66880af4ddb 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/index.tsx @@ -228,7 +228,6 @@ class Payments extends PureComponent & Props> { this.props.simpleBuyActions.setStep({ step: 'TRANSFER_DETAILS', fiatCurrency, - pair: this.props.pair, displayBack: true }) } diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/index.tsx index 8d6f717759c..43c060ef8b3 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/index.tsx @@ -1,16 +1,17 @@ import { actions, model } from 'data' import { bindActionCreators, compose, Dispatch } from 'redux' +import { Button, Icon, Text } from 'blockchain-info-components' import { CoinType, CoinTypeEnum, FiatType, FiatTypeEnum, - SupportedCoinType + SupportedCoinType, + WalletFiatType } from 'core/types' import { connect, ConnectedProps } from 'react-redux' import { getData } from './selectors' import { getHeaderExplainer } from './template.headerexplainer' -import { Icon, Text } from 'blockchain-info-components' import { path, toLower } from 'ramda' import { reduxForm } from 'redux-form' import { SceneWrapper } from 'components/Layout' @@ -123,6 +124,22 @@ class TransactionsContainer extends React.PureComponent { {displayName} + {coin in FiatTypeEnum && ( + + )} {getHeaderExplainer(coinModel)} @@ -194,7 +211,11 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps) => { dispatch(actions.components.fiatTransactions.loadMore(coin)), initTxs: () => dispatch(actions.components.fiatTransactions.initialized(coin)), - miscActions: bindActionCreators(actions.core.data.misc, dispatch) + miscActions: bindActionCreators(actions.core.data.misc, dispatch), + simpleBuyActions: bindActionCreators( + actions.components.simpleBuy, + dispatch + ) } } return { From 29872ba5ccb4929126db84b4629570ed071b4ae3 Mon Sep 17 00:00:00 2001 From: Philip London Date: Fri, 24 Jul 2020 12:49:12 +0200 Subject: [PATCH 11/11] feat(sb): style deposit button on tx list --- .../src/scenes/Transactions/index.tsx | 52 ++++++++++++------- 1 file changed, 32 insertions(+), 20 deletions(-) diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/index.tsx index 43c060ef8b3..e309d94cb74 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/index.tsx @@ -29,6 +29,11 @@ import TransactionList from './TransactionList' import WalletBalanceDropdown from './WalletBalanceDropdown' const PageTitle = styled.div` + display: flex; + justify-content: space-between; + align-items: center; +` +const CoinTitle = styled.div` display: flex; flex-direction: row; width: 100%; @@ -38,6 +43,7 @@ const PageTitle = styled.div` margin-right: 14px; } ` +const TitleActionContainer = styled.div`` const Header = styled.div` width: 100%; ` @@ -120,26 +126,32 @@ class TransactionsContainer extends React.PureComponent {
- - - {displayName} - - {coin in FiatTypeEnum && ( - - )} + + + + {displayName} + + + + {coin in FiatTypeEnum && ( + + )} + {getHeaderExplainer(coinModel)}