feat: pricing

packages/blockchain-wallet-v4-frontend/src/data/components/buySell/sagas.ts

@@ -69,7 +69,7 @@ import {
 import * as S from './selectors'
 import { actions as A } from './slice'
 import * as T from './types'
-import { getDirection, getPreferredCurrency, setPreferredCurrency } from './utils'
+import { getDirection, getPreferredCurrency, reversePair, setPreferredCurrency } from './utils'
 
 export const logLocation = 'components/buySell/sagas'
 
@@ -823,32 +823,43 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
   }
 
   const fetchBuyQuote = function* ({ payload }: ReturnType<typeof A.fetchBuyQuote>) {
-    try {
-      yield put(A.fetchQuoteLoading())
-      const { amount, pair, paymentMethod } = payload
-      let paymentMethodId
+    while (true) {
+      try {
+        yield put(A.fetchBuyQuoteLoading())
 
-      if (paymentMethod === BSPaymentTypes.BANK_TRANSFER) {
-        paymentMethodId = 'd74992e0-a462-4aeb-903e-fc8e9a11bb40'
-      }
+        const { amount, pair, paymentMethod } = payload
+        const pairReversed = reversePair(pair)
+        let paymentMethodId: string | undefined
 
-      const quote: ReturnType<typeof api.getBuyQuote> = yield call(
-        api.getBuyQuote,
-        pair,
-        'SIMPLEBUY',
-        amount,
-        paymentMethod,
-        paymentMethodId
-      )
+        if (paymentMethod === BSPaymentTypes.BANK_TRANSFER) {
+          paymentMethodId = 'd74992e0-a462-4aeb-903e-fc8e9a11bb40'
+        }
 
-      yield put(A.fetchBuyQuoteSuccess({ quote }))
-      const refresh = -moment().diff(quote.quoteExpiresAt)
-      yield delay(refresh)
-    } catch (e) {
-      const error = errorHandler(e)
-      yield put(A.fetchBuyQuoteFailure(error))
-      yield delay(FALLBACK_DELAY)
-      yield put(A.startPollBuyQuote(payload))
+        const quote: ReturnType<typeof api.getBuyQuote> = yield call(
+          api.getBuyQuote,
+          pairReversed,
+          'SIMPLEBUY',
+          amount,
+          paymentMethod,
+          paymentMethodId
+        )
+
+        yield put(
+          A.fetchBuyQuoteSuccess({
+            fee: quote.feeDetails.fee.toString(),
+            pair,
+            quote,
+            rate: parseInt(quote.price)
+          })
+        )
+        const refresh = -moment().diff(quote.quoteExpiresAt)
+        yield delay(refresh)
+      } catch (e) {
+        const error = errorHandler(e)
+        yield put(A.fetchBuyQuoteFailure(error))
+        yield delay(FALLBACK_DELAY)
+        yield put(A.startPollBuyQuote(payload))
+      }
     }
   }
 
@@ -1122,17 +1133,20 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
         )).getOrElse(false)
 
         if (isFlexiblePricingModel) {
-          const pairArr = pair.pair.split('-')
-          const pairReversed = `${pairArr[1]}-${pairArr[0]}`
+          const pairReversed = reversePair(pair.pair)
+          const amount = '500'
 
-          // TODO: the below code is breaking, need to add price which is equivalent to rate
           yield put(
-            A.fetchBuyQuote({
-              amount: '0',
+            A.startPollBuyQuote({
+              amount,
               pair: pairReversed,
               paymentMethod: BSPaymentTypes.FUNDS
             })
           )
+          yield race({
+            failure: take(A.fetchBuyQuoteFailure.type),
+            success: take(A.fetchBuyQuoteSuccess.type)
+          })
         } else {
           yield put(A.fetchQuote({ amount: '0', orderType, pair: pair.pair }))
         }

packages/blockchain-wallet-v4-frontend/src/data/components/buySell/slice.ts

@@ -225,7 +225,10 @@ const buySellSlice = createSlice({
     fetchBuyQuoteSuccess: (
       state,
       action: PayloadAction<{
+        fee: string
+        pair: string
         quote: BuyQuoteType
+        rate: number
       }>
     ) => {
       state.buyQuote = Remote.Success(action.payload)

packages/blockchain-wallet-v4-frontend/src/data/components/buySell/types.ts

@@ -125,7 +125,7 @@ export type BuySellState = {
   account: RemoteDataType<string, BSAccountType>
   addBank: boolean | undefined
   balances: RemoteDataType<string, BSBalancesType>
-  buyQuote: RemoteDataType<string, { quote: BuyQuoteType }>
+  buyQuote: RemoteDataType<string, { fee: string; pair: string; quote: BuyQuoteType; rate: number }>
   card: RemoteDataType<string, BSCardType>
   cardId: undefined | string
   cards: RemoteDataType<string, Array<BSCardType>>

packages/blockchain-wallet-v4-frontend/src/data/components/buySell/utils.ts

@@ -28,3 +28,10 @@ export const getPreferredCurrency = (): WalletFiatType | null => {
 
   return null
 }
+
+export const reversePair = (pair: string) => {
+  const pairArr = pair.split('-')
+  const pairReversed = `${pairArr[1]}-${pairArr[0]}`
+
+  return pairReversed
+}

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/CheckoutConfirm/index.tsx

@@ -27,7 +27,7 @@ const { FORM_BS_CHECKOUT } = model.components.buySell
 
 class CheckoutConfirm extends PureComponent<Props> {
   componentDidMount() {
-    if (this.props.flexiblePricingModel) {
+    if (this.props.isFlexiblePricingModel) {
       this.props.buySellActions.fetchBuyQuote({
         amount: this.props.order.inputQuantity,
         pair: this.props.order.pair,
@@ -156,10 +156,10 @@ class CheckoutConfirm extends PureComponent<Props> {
 
 const mapStateToProps = (state: RootState) => ({
   data: getData(state),
-  flexiblePricingModel: selectors.core.walletOptions
+  formValues: selectors.form.getFormValues(FORM_BS_CHECKOUT)(state) as BSCheckoutFormValuesType,
+  isFlexiblePricingModel: selectors.core.walletOptions
     .getFlexiblePricingModel(state)
-    .getOrElse(false),
-  formValues: selectors.form.getFormValues(FORM_BS_CHECKOUT)(state) as BSCheckoutFormValuesType
+    .getOrElse(false)
 })
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/CheckoutConfirm/selectors.ts

@@ -6,13 +6,9 @@ import { RootState } from 'data/rootReducer'
 
 export const getData = (state: RootState) => {
   const bankAccountsR = selectors.components.brokerage.getBankTransferAccounts(state)
-
-  const quoteR = !selectors.core.walletOptions.getFlexiblePricingModel(state).getOrElse(false)
-    ? selectors.components.buySell.getBSQuote(
-        state
-      ) /* TODO @pricing @sean when quote.rate is added remove below code for this: selectors.components.buySell.getBuyQuote(state) */
+  const quoteR = selectors.core.walletOptions.getFlexiblePricingModel(state).getOrElse(false)
+    ? selectors.components.buySell.getBuyQuote(state)
     : selectors.components.buySell.getBSQuote(state)
-  const buyQuoteR = selectors.components.buySell.getBuyQuote(state)
   const sbBalancesR = selectors.components.buySell.getBSBalances(state)
   const userDataR = selectors.modules.profile.getUserData(state)
   const withdrawLockCheckR = selectors.components.send.getWithdrawLockCheckRule(state)

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/CheckoutConfirm/template.success.tsx

@@ -263,7 +263,7 @@ const Success: React.FC<InjectedFormProps<{ form: string }, Props> & Props> = (p
               </IconWrapper>
             </RowIcon>
             <RowText data-e2e='sbExchangeRate'>
-              {displayFiat(props.order, props.quote.rate)}
+              {displayFiat(props.order, props.quote.rate.toString())}
             </RowText>
           </TopRow>
           {isActiveCoinTooltip && (

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/EnterAmount/Checkout/index.tsx

@@ -216,6 +216,9 @@ const mapStateToProps = (state: RootState, ownProps: OwnProps) => ({
     | BSCheckoutFormValuesType
     | undefined,
   goals: selectors.goals.getGoals(state),
+  isFlexiblePricingModel: selectors.core.walletOptions
+    .getFlexiblePricingModel(state)
+    .getOrElse(false),
   isPristine: selectors.form.isPristine(FORM_BS_CHECKOUT)(state),
   preferences: selectors.preferences.getBSCheckoutPreferences(state),
   sbOrders: selectors.components.buySell.getBSOrders(state).getOrElse([])

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/EnterAmount/Checkout/selectors.ts

@@ -11,18 +11,14 @@ const { FORM_BS_CHECKOUT } = model.components.buySell
 const getData = (state: RootState, ownProps: OwnProps) => {
   const coin = selectors.components.buySell.getCryptoCurrency(state) || 'BTC'
   const formErrors = selectors.form.getFormSyncErrors(FORM_BS_CHECKOUT)(state)
-  // used for sell only now, eventually buy as well
-  // TODO: use swap2 quote for buy AND sell
   const paymentR = selectors.components.buySell.getPayment(state)
   const quoteR =
     ownProps.orderType === 'BUY' &&
-    !selectors.core.walletOptions.getFlexiblePricingModel(state).getOrElse(false)
-      ? selectors.components.buySell.getBSQuote(state)
+    selectors.core.walletOptions.getFlexiblePricingModel(state).getOrElse(false)
+      ? selectors.components.buySell.getBuyQuote(state)
       : ownProps.orderType === 'BUY' &&
-        selectors.core.walletOptions.getFlexiblePricingModel(state).getOrElse(false)
-      ? selectors.components.buySell.getBSQuote(
-          state
-        ) /* TODO @pricing @sean when quote.rate is added remove below code for this: selectors.components.buySell.getBuyQuote(state) */
+        !selectors.core.walletOptions.getFlexiblePricingModel(state).getOrElse(false)
+      ? selectors.components.buySell.getBSQuote(state)
       : selectors.components.buySell.getSellQuote(state)
   const ratesR = selectors.core.data.misc.getRatesSelector(coin, state)
   const sbBalancesR = selectors.components.buySell.getBSBalances(state)

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/EnterAmount/Checkout/template.success.tsx

@@ -180,6 +180,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
     method: selectedMethod,
     orderType
   } = props
+
   const [fontRatio, setFontRatio] = useState(1)
   const setOrderFrequncy = useCallback(() => {
     props.buySellActions.setStep({ step: 'FREQUENCY' })

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/EnterAmount/Checkout/validation.tsx

@@ -10,6 +10,7 @@ import {
   BSPaymentMethodType,
   BSPaymentTypes,
   BSQuoteType,
+  BuyQuoteType,
   OrderType,
   PaymentValue,
   SwapQuoteType,
@@ -61,7 +62,7 @@ export const getMaxMinSell = (
   minOrMax: 'min' | 'max',
   sbBalances: BSBalancesType,
   orderType: BSOrderActionType,
-  quote: { quote: SwapQuoteType; rate: number },
+  quote: { quote: SwapQuoteType | BuyQuoteType; rate: number },
   pair: BSPairType,
   payment?: PaymentValue,
   allValues?: BSCheckoutFormValuesType,
@@ -109,7 +110,10 @@ export const getMaxMin = (
   minOrMax: 'min' | 'max',
   sbBalances: BSBalancesType,
   orderType: BSOrderActionType,
-  QUOTE: BSQuoteType | { quote: SwapQuoteType; rate: number },
+  QUOTE:
+    | BSQuoteType
+    | { quote: SwapQuoteType; rate: number }
+    | { pair: string; quote: BuyQuoteType; rate: number },
   pair: BSPairType,
   payment?: PaymentValue,
   allValues?: BSCheckoutFormValuesType,
@@ -119,10 +123,13 @@ export const getMaxMin = (
   sddLimit = LIMIT,
   limits?: SwapUserLimitsType
 ): { CRYPTO: string; FIAT: string } => {
-  let quote: BSQuoteType | { quote: SwapQuoteType; rate: number }
+  let quote:
+    | BSQuoteType
+    | { quote: SwapQuoteType; rate: number }
+    | { pair: string; quote: BuyQuoteType; rate: number }
   switch (orderType as OrderType) {
     case OrderType.BUY:
-      quote = QUOTE as BSQuoteType
+      quote = QUOTE as BSQuoteType | { pair: string; quote: BuyQuoteType; rate: number }
       switch (minOrMax) {
         case 'max':
           // we need minimum of all max amounts including limits