refactor(Swap): split min/max buttons

packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/MinMaxButtons/MinMaxButtons.js

@@ -0,0 +1,104 @@
+import React from 'react'
+import styled from 'styled-components'
+import { bindActionCreators } from 'redux'
+import { FormattedMessage } from 'react-intl'
+import { connect } from 'react-redux'
+import { contains, equals, gte, isNil, prop } from 'ramda'
+
+import { actions, model } from 'data'
+import { getData } from './selectors'
+import { Row } from '../Layout'
+import { Button } from 'blockchain-info-components'
+
+const {
+  NO_LIMITS_ERROR,
+  REACHED_DAILY_ERROR,
+  REACHED_WEEKLY_ERROR,
+  REACHED_ANNUAL_ERROR,
+  MINIMUM_NO_LINK_ERROR
+} = model.components.exchange
+
+const MinMaxButton = styled(Button)`
+  width: 48%;
+  font-size: 10px;
+  justify-content: space-between;
+  > * {
+    color: ${props => props.theme['brand-primary']};
+  }
+`
+const MinMaxValue = styled.div`
+  font-weight: 600;
+  font-size: 14px;
+`
+
+const formatAmount = (isFiat, symbol, value) =>
+  isFiat ? `${symbol}${value}` : `${value} ${symbol}`
+
+class MinMaxButtons extends React.PureComponent {
+  render () {
+    const { error, min, max, actions } = this.props
+    const minMaxDisabled =
+      contains(error, [
+        NO_LIMITS_ERROR,
+        MINIMUM_NO_LINK_ERROR,
+        REACHED_DAILY_ERROR,
+        REACHED_WEEKLY_ERROR,
+        REACHED_ANNUAL_ERROR
+      ]) ||
+      (equals(prop('symbol', min), prop('symbol', max)) &&
+        gte(prop('amount', min), prop('amount', max))) ||
+      isNil(min) ||
+      isNil(max)
+    return (
+      <Row>
+        <MinMaxButton
+          fullwidth
+          disabled={minMaxDisabled}
+          onClick={actions.useMin}
+        >
+          <FormattedMessage
+            id='scenes.exchange.exchangeform.min'
+            defaultMessage='MIN'
+          />
+          &nbsp;
+          <MinMaxValue>
+            {!minMaxDisabled &&
+              formatAmount(
+                prop('fiat', min),
+                prop('symbol', min),
+                prop('amount', min)
+              )}
+          </MinMaxValue>
+        </MinMaxButton>
+        <MinMaxButton
+          fullwidth
+          disabled={minMaxDisabled}
+          onClick={actions.useMax}
+        >
+          <FormattedMessage
+            id='scenes.exchange.exchangeform.max'
+            defaultMessage='MAX'
+          />
+          &nbsp;
+          <MinMaxValue>
+            {!minMaxDisabled &&
+              formatAmount(
+                prop('fiat', max),
+                prop('symbol', max),
+                prop('amount', max)
+              )}
+          </MinMaxValue>
+        </MinMaxButton>
+      </Row>
+    )
+  }
+}
+
+const mapDispatchToProps = dispatch => ({
+  actions: bindActionCreators(actions.components.exchange, dispatch)
+})
+
+export default connect(
+  getData,
+  mapDispatchToProps
+)(MinMaxButtons)

packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/MinMaxButtons/index.js

@@ -0,0 +1,2 @@
+import MinMaxButtons from './MinMaxButtons'
+export default MinMaxButtons

packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/MinMaxButtons/selectors.js

@@ -0,0 +1,9 @@
+import { createDeepEqualSelector } from 'services/ReselectHelper'
+import { selectors } from 'data'
+
+export const { getMin, getMax } = selectors.components.exchange
+
+export const getData = createDeepEqualSelector(
+  [getMin, getMax],
+  (min, max) => ({ min, max })
+)

packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/index.js

@@ -5,14 +5,7 @@ import { compose, isEmpty } from 'ramda'
 
 import { debounce } from 'utils/helpers'
 import { actions, model } from 'data'
-import {
-  getData,
-  getMin,
-  getMax,
-  canUseExchange,
-  showError,
-  getTxError
-} from './selectors'
+import { getData, canUseExchange, showError, getTxError } from './selectors'
 
 import Loading from './template.loading'
 import Success from './template.success'
@@ -65,8 +58,6 @@ class ExchangeForm extends React.PureComponent {
       actions,
       formActions,
       data,
-      min,
-      max,
       canUseExchange,
       showError,
       txError
@@ -78,8 +69,6 @@ class ExchangeForm extends React.PureComponent {
         ) : (
           <Success
             {...value}
-            min={min}
-            max={max}
             canUseExchange={canUseExchange}
             showError={showError}
             txError={txError}
@@ -107,8 +96,6 @@ class ExchangeForm extends React.PureComponent {
               actions.changeFix,
               swapCoinAndFiat.bind(null, value.fix)
             )}
-            useMin={actions.useMin}
-            useMax={actions.useMax}
           />
         ),
       Failure: message => (
@@ -122,8 +109,6 @@ class ExchangeForm extends React.PureComponent {
 
 const mapStateToProps = state => ({
   canUseExchange: canUseExchange(state),
-  min: getMin(state),
-  max: getMax(state),
   showError: showError(state),
   txError: getTxError(state),
   data: getData(state)

packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/selectors.js

@@ -42,13 +42,11 @@ const {
   canUseExchange,
   getAmounts,
   getAvailablePairs,
-  getMax,
-  getMin,
   getTxError,
   showError
 } = selectors.components.exchange
 
-export { canUseExchange, getMin, getMax, showError, getTxError }
+export { canUseExchange, showError, getTxError }
 export const getData = createDeepEqualSelector(
   [
     getBlockLockbox,

packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/template.success.js

@@ -2,32 +2,26 @@ import React from 'react'
 import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'
 import { Field, reduxForm } from 'redux-form'
-import { contains, equals, gte, isNil, prop } from 'ramda'
+import { contains } from 'ramda'
 
 import { model } from 'data'
 import media from 'services/ResponsiveService'
 import { formatTextAmount } from 'services/ValidationHelper'
 
-import { Banner, Button, Icon, Text } from 'blockchain-info-components'
+import { Banner, Icon, Text } from 'blockchain-info-components'
 import { Form, AutosizeTextBox } from 'components/Form'
 import { ResizeableFontInputHOC } from 'components/ResizeableFontInputHOC'
 import { getErrorMessage } from './validationMessages'
 import { Wrapper as SummaryWrapper, Title, Note } from 'components/Exchange'
+import { Cell, Row } from './Layout'
 import CurrencySelect from './CurrencySelect'
 import ComplementaryAmount from './ComplementaryAmount'
-import { Cell, Row } from './Layout'
+import MinMaxButtons from './MinMaxButtons'
 import SubmitButton from './SubmitButton'
 import Summary from './Summary'
 import RatesBox from './RatesBox'
 
-const {
-  EXCHANGE_FORM,
-  NO_LIMITS_ERROR,
-  REACHED_DAILY_ERROR,
-  REACHED_WEEKLY_ERROR,
-  REACHED_ANNUAL_ERROR,
-  MINIMUM_NO_LINK_ERROR
-} = model.components.exchange
+const { EXCHANGE_FORM } = model.components.exchange
 const { fiatActive, formatPair } = model.rates
 
 const Wrapper = styled.div`
@@ -79,18 +73,6 @@ const AmountRow = styled(Row)`
   border: 4px solid transparent;
 `
 
-const MinMaxButton = styled(Button)`
-  width: 48%;
-  font-size: 10px;
-  justify-content: space-between;
-  > * {
-    color: ${props => props.theme['brand-primary']};
-  }
-`
-const MinMaxValue = styled.div`
-  font-weight: 600;
-  font-size: 14px;
-`
 const AmountTextBox = styled(ResizeableFontInputHOC(AutosizeTextBox))`
   height: 86px;
   max-width: 100%;
@@ -195,8 +177,6 @@ const Success = props => {
     handleSubmit,
     inputField,
     inputSymbol,
-    max,
-    min,
     showError,
     sourceActive,
     sourceCoin,
@@ -206,27 +186,12 @@ const Success = props => {
     targetActive,
     targetCoin,
     txError,
-    useMin,
-    useMax,
     volume
   } = props
   const swapDisabled = !contains(
     formatPair(targetCoin, sourceCoin),
     availablePairs
   )
-  const minMaxDisabled =
-    contains(error, [
-      NO_LIMITS_ERROR,
-      MINIMUM_NO_LINK_ERROR,
-      REACHED_DAILY_ERROR,
-      REACHED_WEEKLY_ERROR,
-      REACHED_ANNUAL_ERROR
-    ]) ||
-    (equals(prop('symbol', min), prop('symbol', max)) &&
-      gte(prop('amount', min), prop('amount', max))) ||
-    isNil(min) ||
-    isNil(max)
-
   return (
     <Wrapper>
       {!canUseExchange && <Cover />}
@@ -345,46 +310,7 @@ const Success = props => {
                 (error || txError) &&
                 getErrorMessage(txError || error)(props)}
             </ErrorRow>
-            <Row>
-              <MinMaxButton
-                fullwidth
-                disabled={minMaxDisabled}
-                onClick={useMin}
-              >
-                <FormattedMessage
-                  id='scenes.exchange.exchangeform.min'
-                  defaultMessage='MIN'
-                />
-                &nbsp;
-                <MinMaxValue>
-                  {!minMaxDisabled &&
-                    formatAmount(
-                      prop('fiat', max),
-                      prop('symbol', min),
-                      prop('amount', min)
-                    )}
-                </MinMaxValue>
-              </MinMaxButton>
-              <MinMaxButton
-                fullwidth
-                disabled={minMaxDisabled}
-                onClick={useMax}
-              >
-                <FormattedMessage
-                  id='scenes.exchange.exchangeform.max'
-                  defaultMessage='MAX'
-                />
-                &nbsp;
-                <MinMaxValue>
-                  {!minMaxDisabled &&
-                    formatAmount(
-                      prop('fiat', max),
-                      prop('symbol', max),
-                      prop('amount', max)
-                    )}
-                </MinMaxValue>
-              </MinMaxButton>
-            </Row>
+            <MinMaxButtons error={error} />
           </FieldsWrapper>
           <SubmitButton
             blockLockbox={blockLockbox}