feat(sell-p3): format sell crypto picker, intialize checkout with swa…

…pAccount and cryptoAmount
blockchain · Nov 30, 2020 · 66bd21a · 66bd21a
1 parent 6c83d97
commit 66bd21a
Show file tree

Hide file tree

Showing 11 changed files with 36 additions and 134 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
@@ -424,15 +424,17 @@ export const initializeCheckout = (
   fix: SBFixType,
   pair?: SBPairType,
   amount?: string,
-  account?: SwapAccountType
+  account?: SwapAccountType,
+  cryptoAmount?: string
 ) => ({
   type: AT.INITIALIZE_CHECKOUT,
   account,
   amount,
   fix,
   orderType,
   pair,
-  pairs
+  pairs,
+  cryptoAmount
 })
 
 export const pollSBBalances = () => ({

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
@@ -261,6 +261,7 @@ export function simpleBuyReducer (
               getCoinFromPair(pair.pair) === state.cryptoCurrency &&
               getFiatFromPair(pair.pair) === state.fiatCurrency
           )
+        // swapAccount: action.account
       }
     case AT.UPDATE_PAYMENT_FAILURE: {
       return {

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
@@ -255,7 +255,6 @@ export default ({
       if (orderType === 'SELL') {
         const from = S.getSwapAccount(yield select())
         const quote = S.getSellQuote(yield select()).getOrFail(NO_QUOTE)
-
         if (!from) throw new Error(NO_ACCOUNT)
 
         const direction = getDirection(from)
@@ -308,6 +307,7 @@ export default ({
             options: { order: sellOrder }
           })
         )
+
         yield put(actions.components.swap.fetchTrades())
       }
 
@@ -716,7 +716,9 @@ export default ({
       )
 
       const cryptoAmt = formValues.fix === 'CRYPTO' ? formValues.amount : amt
-
+      yield put(
+        actions.form.change('simpleBuyCheckout', 'cryptoAmount', cryptoAmt)
+      )
       if (account.type === 'CUSTODIAL') return
       // @ts-ignore
       let payment = paymentGetOrElse(account.coin, paymentR)
@@ -800,7 +802,7 @@ export default ({
     const originalFiatCurrency = S.getFiatCurrency(yield select())
     const fiatCurrency = method.currency || S.getFiatCurrency(yield select())
     const pair = S.getSBPair(yield select())
-
+    const swapAccount = S.getSwapAccount(yield select())
     if (!pair) return NO_PAIR_SELECTED
     const isUserTier2 = yield call(isTier2)
 
@@ -855,7 +857,8 @@ export default ({
             fiatCurrency,
             method,
             orderType: values?.orderType,
-            pair
+            pair,
+            swapAccount
           })
         )
     }
@@ -895,7 +898,8 @@ export default ({
     fix,
     orderType,
     amount,
-    account
+    account,
+    cryptoAmount
   }: ReturnType<typeof A.initializeCheckout>) {
     try {
       yield call(waitForUserData)
@@ -904,22 +908,21 @@ export default ({
       if (!fiatCurrency) throw new Error(NO_FIAT_CURRENCY)
       const pair = S.getSBPair(yield select())
       if (!pair) throw new Error(NO_PAIR_SELECTED)
-
       // Fetch rates
       if (orderType === 'BUY') {
         yield put(A.fetchSBQuote(pair.pair, orderType, '0'))
         // used for sell only now, eventually buy as well
         // TODO: use swap2 quote for buy AND sell
       } else {
         if (!account) throw NO_ACCOUNT
+
         yield put(A.fetchSellQuote(pair.pair, account))
         yield put(A.startPollSellQuote(pair.pair, account))
         yield race({
           success: take(AT.FETCH_SELL_QUOTE_SUCCESS),
           failure: take(AT.FETCH_SELL_QUOTE_FAILURE)
         })
         const quote = S.getSellQuote(yield select()).getOrFail(NO_QUOTE)
-
         if (account.type === 'ACCOUNT') {
           let payment = yield call(
             calculateProvisionalPayment,
@@ -937,7 +940,8 @@ export default ({
         actions.form.initialize('simpleBuyCheckout', {
           fix,
           orderType,
-          amount
+          amount,
+          cryptoAmount
         } 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
@@ -39,6 +39,7 @@ export type SBCheckoutFormValuesType =
   | undefined
   | {
       amount: string
+      cryptoAmount: string
       fix: SBFixType
       orderType: SBOrderActionType
     }
@@ -302,10 +303,12 @@ interface FetchSellQuoteSuccess {
 }
 
 interface InitializeCheckout {
-  amount: string
-  orderType: SBOrderActionType
-  pair?: SBPairType
-  pairs: Array<SBPairType>
+  account?: SwapAccountType,
+  amount: string,
+  cryptoAmount?: string,
+  orderType: SBOrderActionType,
+  pair?: SBPairType,
+  pairs: Array<SBPairType>,
   type: typeof AT.INITIALIZE_CHECKOUT
 }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CheckoutConfirm/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CheckoutConfirm/index.tsx
@@ -17,7 +17,7 @@ import { getFiatFromPair, getOrderType } from 'data/components/simpleBuy/model'
 import { RootState } from 'data/rootReducer'
 import { UserDataType } from 'data/types'
 import DataError from 'components/DataError'
-import Loading from './template.loading'
+import Loading from '../template.loading.doingwork'
 import React, { PureComponent } from 'react'
 import Success from './template.success'
 

diff --git a/...v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/BalanceMovement/index.tsx b/...v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/BalanceMovement/index.tsx
diff --git a/...frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/BalanceMovement/selectors.ts b/...frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/BalanceMovement/selectors.ts
diff --git a/...ntend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/template.success.tsx b/...ntend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/template.success.tsx
@@ -12,7 +12,6 @@ import {
   SuccessStateType
 } from '.'
 import { Title, Value } from 'components/Flyout'
-import BalanceMovement from '../BalanceMovement'
 import PriceMovement from '../PriceMovement'
 
 const CheckoutDisplayContainer = styled(DisplayContainer)`
@@ -82,9 +81,6 @@ const Success: React.FC<Props> = props => {
               <PriceMovement {...props} />
             </>
           )}
-          {props.orderType === 'SELL' && (
-            <BalanceMovement {...props} coin={coin} />
-          )}
         </DisplayTitle>
       </Display>
       {props.onClick && (

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
@@ -20,14 +20,16 @@ class Checkout extends PureComponent<Props> {
     const dataGoal = find(propEq('name', 'simpleBuy'), this.props.goals)
     const goalAmount = pathOr('', ['data', 'amount'], dataGoal)
     const amount = goalAmount || this.props.formValues?.amount
+    const cryptoAmount = this.props.formValues?.cryptoAmount
 
     this.props.simpleBuyActions.initializeCheckout(
       this.props.pairs,
       this.props.orderType,
       this.props.preferences[this.props.orderType].fix,
       this.props.pair,
       amount,
-      this.props.swapAccount
+      this.props.swapAccount,
+      cryptoAmount
     )
   }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PreviewSell/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PreviewSell/index.tsx
@@ -29,6 +29,7 @@ import {
   SupportedWalletCurrenciesType
 } from 'core/types'
 import { SBCheckoutFormValuesType } from 'data/types'
+import Loading from '../template.loading.doingwork'
 
 class PreviewSell extends PureComponent<InjectedFormProps<{}, Props> & Props> {
   state = {}
@@ -58,16 +59,15 @@ class PreviewSell extends PureComponent<InjectedFormProps<{}, Props> & Props> {
     return this.props.quoteR.cata({
       Failure: () => null,
       NotAsked: () => null,
-      Loading: () => null,
+      Loading: () => <Loading />,
       Success: val => {
         if (!this.props.formValues) return null
         if (!this.props.account) return null
         const BASE = getInputFromPair(val.quote.pair)
         const COUNTER = getOutputFromPair(val.quote.pair)
-        const { account, coins } = this.props
+        const { account, coins, formValues } = this.props
         const baseCoinTicker = coins[BASE].coinTicker
         const counterCoinTicker = coins[COUNTER].coinTicker
-
         return (
           <>
             <FlyoutWrapper>
@@ -113,29 +113,11 @@ class PreviewSell extends PureComponent<InjectedFormProps<{}, Props> & Props> {
                 />
               </Title>
               <Value>
-                {this.props.paymentR.cata({
-                  Success: value => (
-                    <>
-                      {coinToString({
-                        value: convertBaseToStandard(
-                          account.coin,
-                          value && value.amount
-                            ? this.getAmount(value.amount)
-                            : 0
-                        ),
-                        unit: {
-                          symbol: coins[account.coin].coinTicker
-                        }
-                      })}
-                    </>
-                  ),
-                  Failure: e => e,
-                  Loading: () => (
-                    <SkeletonRectangle height='18px' width='70px' />
-                  ),
-                  NotAsked: () => (
-                    <SkeletonRectangle height='18px' width='70px' />
-                  )
+                {coinToString({
+                  value: formValues?.cryptoAmount,
+                  unit: {
+                    symbol: coins[account.coin].coinTicker
+                  }
                 })}
               </Value>
             </Row>

diff --git a/...eBuy/CheckoutConfirm/template.loading.tsx → .../SimpleBuy/template.loading.doingwork.tsx b/...eBuy/CheckoutConfirm/template.loading.tsx → .../SimpleBuy/template.loading.doingwork.tsx