refactor(sfox content)

packages/blockchain-wallet-v4-frontend/src/modals/CoinifyExchangeData/ISignThis/index.js

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { actions } from 'data'
-import { path, prop } from 'ramda'
+import { equals, path, prop } from 'ramda'
 import { Button, Text, Tooltip } from 'blockchain-info-components'
 import { FormattedMessage } from 'react-intl'
 
@@ -253,14 +253,14 @@ class ISignThisContainer extends Component {
             <Button nature='empty-secondary' fullwidth onClick={() => coinifyActions.cancelISX()}>
               <Text size='13px' weight={300} color='brand-secondary'>
                 {
-                  isxType && isxType === 'Trade'
+                  equals(isxType, 'Trade')
                     ? <FormattedMessage id='scenes.buysell.coinify.isx.finishlater' defaultMessage='Finish later' />
                     : <FormattedMessage id='scenes.buysell.coinify.isx.dolater' defaultMessage="I'll do this later" />
                 }
               </Text>
             </Button>
             {
-              isxType && isxType === 'Trade'
+              equals(isxType, 'Trade')
                 ? tradeFaqHelper()
                 : kycFaqHelper()
             }

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/OrderCheckout.js

@@ -1,8 +1,10 @@
 import React, { Fragment } from 'react'
+import { FormattedMessage } from 'react-intl'
+import { equals } from 'ramda'
+
 import { Text, Icon, Button } from 'blockchain-info-components'
 import { Wrapper as ExchangeCheckoutWrapper } from '../../ExchangeCheckout'
 import { flex, spacing } from 'services/StyleService'
-import { FormattedMessage } from 'react-intl'
 import QuoteInput from './QuoteInput'
 import FundingSource from 'components/BuySell/FundingSource'
 import { MethodContainer } from 'components/BuySell/styled.js'
@@ -23,19 +25,21 @@ const getCryptoMax = (q, max) => {
 const OrderCheckout = ({ quoteR, account, onFetchQuote, reason, finishAccountSetup, limits, type, disableButton, enableButton, buttonStatus }) => {
   const disableInputs = () => {
     if (limits.max < limits.min) return 'max_below_min'
-    if (reason.indexOf('has_remaining') < 0 && reason) return 'no_remaining'
+    if (!reason.includes('has_remaining') && reason) return 'no_remaining'
     if (limits.effectiveMax < limits.min) return 'not_enough_funds'
   }
 
-  const wantToHelper = () => type === 'buy'
+  const isBuy = equals(type, 'buy')
+
+  const wantToHelper = () => isBuy
     ? <FormattedMessage id='buy.sfoxcheckout.outputmethod.title.buy' defaultMessage='I want to buy' />
     : <FormattedMessage id='buy.sfoxcheckout.title.sell' defaultMessage='I want to sell' />
-  const payWithHelper = () => type === 'buy'
+  const payWithHelper = () => isBuy
     ? <FormattedMessage id='buy.sfoxcheckout.inputmethod.title.buywith' defaultMessage='I will pay with' />
     : <FormattedMessage id='buy.sfoxcheckout.outputmethod.title.sellwith' defaultMessage='I will receive funds into' />
 
   const submitButtonHelper = () => (
-    reason.indexOf('has_remaining') > -1
+    reason.includes('has_remaining')
       ? null
       : <div style={{ ...flex('col'), ...spacing('mt-15') }}>
         <Text size='14px' weight={300}>
@@ -82,7 +86,7 @@ const OrderCheckout = ({ quoteR, account, onFetchQuote, reason, finishAccountSet
         <FundingSource account={account} />
       </MethodContainer>
       {
-        reason.indexOf('has_remaining') > -1
+        reason.includes('has_remaining')
           ? <Fragment>
             <Text style={spacing('ml-10')} size='16px' weight={600}>
               <FormattedMessage id='buy.sfoxcheckout.amount' defaultMessage='Amount' />

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/QuoteInputTemplate.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
+import { equals, gt, prop } from 'ramda'
+
 import { StepTransition } from 'components/Utilities/Stepper'
 import { spacing } from 'services/StyleService'
 import { FormattedMessage } from 'react-intl'
 import { Remote } from 'blockchain-wallet-v4/src'
-
 import { Icon, TextInput, Text, Button } from 'blockchain-info-components'
 
 const Wrapper = styled.div`
@@ -67,23 +68,28 @@ const getErrorState = (meta) => {
 
 const getLimitsError = (val, limits, disabledReason, fiat, cryptoMax) => {
   if (limits.max < limits.min) return `Your limit of $${limits.max} is below the minimum allowed amount.`
-  if (disabledReason === 'not_enough_funds') return `There are not enough funds to meet the sell minimum of $${limits.min.toLocaleString()}`
-  if ((val && val > limits.max) || (fiat > cryptoMax)) return `Enter an amount under your $${limits.max.toLocaleString()} limit`
-  if (val && val < limits.min) return `Enter an amount above the $${limits.min.toLocaleString()} minimum`
+  if (equals(disabledReason, 'not_enough_funds')) return `There are not enough funds to meet the sell minimum of $${limits.min.toLocaleString()}`
+  if (gt(val, limits.max) || (fiat > cryptoMax)) return `Enter an amount under your $${limits.max.toLocaleString()} limit`
+  if (gt(limits.min, val)) return `Enter an amount above the $${limits.min.toLocaleString()} minimum`
   if (!val || !fiat) return
   if ((fiat * 1e8) > limits.effectiveMax) return `Enter an amount less than your balance minus the priority fee (${limits.effectiveMax / 1e8} BTC)`
 }
 
 const limitsHelper = (quoteR, limits) => {
   if (quoteR.error) return true
   return quoteR.map(q => {
-    if (q.baseCurrency === 'USD') return +q.baseAmount > limits.max || +q.baseAmount < limits.min || +q.quoteAmount > limits.effectiveMax
-    if (q.baseCurrency === 'BTC') return +q.quoteAmount > limits.max || +q.quoteAmount < limits.min || +q.baseAmount > limits.effectiveMax
-  }).data
+    switch (prop('baseCurrency', q)) {
+      case 'USD':
+        return +q.baseAmount > limits.max || +q.baseAmount < limits.min || +q.quoteAmount > limits.effectiveMax
+      case 'BTC':
+        return +q.quoteAmount > limits.max || +q.quoteAmount < limits.min || +q.baseAmount > limits.effectiveMax
+    }
+  }).getOrElse(null)
 }
 
 const FiatConvertor = (props) => {
-  const { value, fiat, disabled, handleBlur, handleCoinChange, handleFiatChange, handleFocus, handleErrorClick, meta, limits, quoteR, reason, cryptoMax } = props
+  const { value, fiat, disabled, handleBlur, handleCoinChange, handleFiatChange,
+    handleFocus, handleErrorClick, meta, limits, quoteR, reason, cryptoMax } = props
   const { currency, unit } = props.data.data
   const errorState = getErrorState(meta)
   const disabledReason = disabled()
@@ -92,26 +98,33 @@ const FiatConvertor = (props) => {
     <Wrapper>
       <FiatConvertorInput>
         <Container>
-          <TextInput placeholder='0' onBlur={handleBlur} onChange={handleCoinChange} onFocus={handleFocus} value={value} errorState={errorState} disabled={disabledReason} />
+          <TextInput placeholder='0' onBlur={handleBlur} onChange={handleCoinChange}
+            onFocus={handleFocus} value={value} errorState={errorState} disabled={disabledReason} />
           <Unit>{unit}</Unit>
         </Container>
         <ArrowLeft size='16px' name='left-arrow' />
         <ArrowRight size='16px' name='right-arrow' />
         <Container>
-          <TextInput placeholder='0' onBlur={handleBlur} onChange={handleFiatChange} onFocus={handleFocus} value={fiat} errorState={errorState} disabled={disabledReason} />
+          <TextInput placeholder='0' onBlur={handleBlur} onChange={handleFiatChange}
+            onFocus={handleFocus} value={fiat} errorState={errorState} disabled={disabledReason} />
           <Unit>{currency}</Unit>
         </Container>
       </FiatConvertorInput>
-      {meta.touched && meta.error && <Error onClick={handleErrorClick} size='13px' weight={300} color='error'>{meta.error}</Error>}
       {
-        limits && <Error size='13px' weight={300} color='error'>
-          { getLimitsError(value, limits, disabledReason, fiat, cryptoMax) }
-        </Error>
+        meta.touched && meta.error &&
+          <Error onClick={handleErrorClick} size='13px' weight={300} color='error'>{meta.error}</Error>
+      }
+      {
+        limits &&
+          <Error size='13px' weight={300} color='error'>
+            { getLimitsError(value, limits, disabledReason, fiat, cryptoMax) }
+          </Error>
       }
       {
-        reason.indexOf('has_remaining') > -1
+        reason.includes('has_remaining')
           ? <ButtonWrapper>
-            <StepTransition next Component={Button} style={spacing('mt-35')} nature='primary' fullwidth disabled={!Remote.Success.is(quoteR) || !value || !fiat || limitsHelper(quoteR, limits) || getLimitsError(value, limits, disabledReason, fiat, cryptoMax)}>
+            <StepTransition next Component={Button} style={spacing('mt-35')} nature='primary' fullwidth
+              disabled={!Remote.Success.is(quoteR) || !value || !fiat || limitsHelper(quoteR, limits) || getLimitsError(value, limits, disabledReason, fiat, cryptoMax)}>
               <FormattedMessage id='buy.sfoxcheckout.revieworder' defaultMessage='Review Order' />
             </StepTransition>
           </ButtonWrapper>

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/index.js

@@ -5,7 +5,7 @@ import { bindActionCreators } from 'redux'
 import { getBase, getData, getErrors, getQuote, getSellQuote, getTrades, getPayment } from './selectors'
 import Success from './template.success'
 import Loading from 'components/BuySell/Loading'
-import { path } from 'ramda'
+import { path, prop } from 'ramda'
 
 class SfoxCheckout extends React.PureComponent {
   constructor (props) {
@@ -59,7 +59,7 @@ class SfoxCheckout extends React.PureComponent {
         buttonStatus={this.state.buttonStatus}
         siftScienceEnabled={siftScienceEnabled}
       />,
-      Failure: (error) => <div>Failure: {error && error.message}</div>,
+      Failure: (error) => <div>Failure: {prop('message', error)}</div>,
       Loading: () => <Loading />,
       NotAsked: () => <div>Not Asked</div>
     })

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/selectors.js

@@ -1,4 +1,4 @@
-import { lift } from 'ramda'
+import { lift, path } from 'ramda'
 import settings from 'config'
 import { selectors } from 'data'
 
@@ -10,31 +10,20 @@ export const getData = (state) => {
   return lift((profile, accounts, nextAddress) => ({ profile, accounts, verificationStatus, nextAddress }))(profile, accounts, nextAddress)
 }
 
-export const getQuote = (state) => {
-  return selectors.core.data.sfox.getQuote(state)
-}
+export const getQuote = (state) =>
+  selectors.core.data.sfox.getQuote(state)
 
-export const getSellQuote = (state) => {
-  return selectors.core.data.sfox.getSellQuote(state)
-}
+export const getSellQuote = (state) =>
+  selectors.core.data.sfox.getSellQuote(state)
 
-export const getTrades = (state) => {
-  try {
-    return selectors.core.data.sfox.getTrades(state).data
-  } catch (e) {
-    return null
-  }
-}
+export const getTrades = (state) =>
+  selectors.core.data.sfox.getTrades(state).getOrElse(null)
 
-export const getBase = (state) => {
-  return state.form.exchangeCheckout && state.form.exchangeCheckout.active
-}
+export const getBase = (state) =>
+  path(['form', 'exchangeCheckout', 'active'], state)
 
-export const getErrors = (state) => {
-  const exchangeCheckoutForm = state.form && state.form.exchangeCheckout
-  return exchangeCheckoutForm && exchangeCheckoutForm.syncErrors
-}
+export const getErrors = (state) =>
+  path(['form', 'exchangeCheckout', 'syncErrors'], state)
 
-export const getPayment = (state) => {
-  return selectors.components.sendBtc.getPayment(state).data
-}
+export const getPayment = (state) =>
+  selectors.components.sendBtc.getPayment(state).getOrElse(null)

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/template.success.js

@@ -1,6 +1,7 @@
 import React from 'react'
-import { filter } from 'ramda'
+import { equals, filter, prop } from 'ramda'
 import styled from 'styled-components'
+
 import OrderHistoryTable from 'components/BuySell/OrderHistoryTable'
 import { Text } from 'blockchain-info-components'
 import { determineStep, determineReason } from 'services/SfoxService'
@@ -52,8 +53,8 @@ const faqList = [
 
 const faqListHelper = () => faqList.map(el => <Helper question={el.question} answer={el.answer} />)
 
-const isPending = (t) => t.state === 'processing'
-const isCompleted = (t) => t.state !== 'processing'
+const isPending = (t) => equals(prop('state', t), 'processing')
+const isCompleted = (t) => !isPending(t)
 
 const Success = props => {
   const {
@@ -205,13 +206,15 @@ const Success = props => {
             <Text size='15px' weight={400}>
               <FormattedMessage id='scenes.buysell.sfoxcheckout.trades.pending' defaultMessage='Pending Orders' />
             </Text>
-            <OrderHistoryTable trades={filter(isPending, trades)} conversion={conversion} handleDetailsClick={trade => showModal('SfoxTradeDetails', { trade })} />
+            <OrderHistoryTable trades={filter(isPending, trades)} conversion={conversion}
+              handleDetailsClick={trade => showModal('SfoxTradeDetails', { trade })} />
           </OrderHistoryContent>
           <OrderHistoryContent>
             <Text size='15px' weight={400}>
               <FormattedMessage id='scenes.buysell.sfoxcheckout.trades.completed' defaultMessage='Completed Orders' />
             </Text>
-            <OrderHistoryTable trades={filter(isCompleted, trades)} conversion={conversion} handleDetailsClick={trade => showModal('SfoxTradeDetails', { trade })} />
+            <OrderHistoryTable trades={filter(isCompleted, trades)} conversion={conversion}
+              handleDetailsClick={trade => showModal('SfoxTradeDetails', { trade })} />
           </OrderHistoryContent>
           {siftScienceEnabled ? <SiftScience /> : null}
         </OrderHistoryWrapper>