feat(sb): default to previous amt, add coin

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 = () => ({

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

@@ -541,7 +541,8 @@ export default ({
   }
 
   const initializeCheckout = function * ({
-    orderType
+    orderType,
+    amount
   }: ReturnType<typeof A.initializeCheckout>) {
     try {
       yield call(createUser)
@@ -554,7 +555,8 @@ export default ({
 
       yield put(
         actions.form.initialize('simpleBuyCheckout', {
-          orderType
+          orderType,
+          amount
         } as SBCheckoutFormValuesType)
       )
     } catch (e) {

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<typeof getData>['data']

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<typeof ratesR>) => ({
-    fiatCurrency,
-    rates
-  }))(ratesR)
+  return lift(
+    (
+      rates: ExtractSuccess<typeof ratesR>,
+      supportedCoins: ExtractSuccess<typeof supportedCoinsR>
+    ) => ({
+      fiatCurrency,
+      rates,
+      supportedCoins
+    })
+  )(ratesR, supportedCoinsR)
 }

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> = props => {
       onClick={props.onClick}
     >
       <Icon size='32px' color={color} name={icon} />
-      <Display>
+      <Display canClick={!!props.onClick}>
         <Value style={{ marginTop: '0px' }}>{displayName}</Value>
         <DisplayTitle>
           {fiatToString({
@@ -75,7 +75,9 @@ const Success: React.FC<Props> = props => {
           <PriceMovement {...props} />
         </DisplayTitle>
       </Display>
-      <Icon name='chevron-right' size='32px' color='grey600' />
+      {props.onClick && (
+        <Icon name='chevron-right' size='32px' color='grey600' />
+      )}
     </DisplayContainer>
   )
 }

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/index.tsx

@@ -72,7 +72,6 @@ const CryptoSelector: React.FC<InjectedFormProps<{}, Props> &
             <CryptoItem
               key={index}
               value={value}
-              supportedCoins={props.supportedCoins}
               onClick={() => handleSubmit(value as SBPairType)}
             />
           ))}

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<typeof eligibilityR>,
       pairs: ExtractSuccess<typeof pairsR>,
-      supportedCoins: SupportedWalletCurrenciesType,
       userData: ExtractSuccess<typeof userDataR>
     ) => ({
       eligibility,
       pairs,
-      supportedCoins,
       userData
     })
-  )(eligibilityR, pairsR, supportedCoinsR, userDataR)
+  )(eligibilityR, pairsR, userDataR)
 }

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

@@ -7,22 +7,24 @@ 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'
 import Success from './template.success'
 
 class Checkout extends PureComponent<Props> {
   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<Props> {
 
 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 => ({

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<typeof userDataR>
     ) => ({
       formErrors,
-      formValues,
       invitations,
       sbBalances,
       suggestedAmounts,

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<InjectedFormProps<{}, Props> & Props> = props => {
       getMaxMin(
         props.pair,
         prop,
-        props.formValues,
         props.sbBalances,
+        props.formValues,
         props.method
       )
     )
@@ -140,12 +144,29 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
 
   return (
     <CustomForm onSubmit={props.handleSubmit}>
-      <FlyoutWrapper>
+      <FlyoutWrapper style={{ paddingBottom: '0px' }}>
         <TopText color='grey800' size='20px' weight={600}>
-          <FormattedMessage
-            id='modals.simplebuy.buycrypto'
-            defaultMessage='Buy Crypto'
-          />
+          <LeftTopCol>
+            <Icon
+              cursor
+              data-e2e='sbBackToCryptoSelection'
+              name='arrow-left'
+              size='20px'
+              color='grey600'
+              role='button'
+              style={{ marginRight: '8px' }}
+              onClick={() =>
+                props.simpleBuyActions.setStep({
+                  step: 'CRYPTO_SELECTION',
+                  fiatCurrency: props.fiatCurrency || 'USD'
+                })
+              }
+            />
+            <FormattedMessage
+              id='modals.simplebuy.buycrypto'
+              defaultMessage='Buy Crypto'
+            />
+          </LeftTopCol>
           <Icon
             cursor
             data-e2e='sbCloseModalIcon'
@@ -156,6 +177,9 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
             onClick={() => props.handleClose()}
           />
         </TopText>
+      </FlyoutWrapper>
+      <CryptoItem value={props.pair} />
+      <FlyoutWrapper style={{ paddingTop: '0px' }}>
         <AmountFieldContainer>
           <Text size='56px' color='grey400' weight={500}>
             {Currencies[fiatCurrency].units[fiatCurrency].symbol}
@@ -187,8 +211,8 @@ const Success: React.FC<InjectedFormProps<{}, Props> & 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<InjectedFormProps<{}, Props> & Props> = props => {
                       value: getMaxMin(
                         props.pair,
                         'min',
-                        props.formValues,
                         props.sbBalances,
+                        props.formValues,
                         props.method
                       ),
                       digits: 0

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
 }