feat(BTC Request) added limits

packages/blockchain-wallet-v4-frontend/src/modals/RequestBitcoin/FirstStep/template.success.js

@@ -5,6 +5,7 @@ import { FormattedMessage } from 'react-intl'
 import { Field, reduxForm } from 'redux-form'
 
 import { required } from 'services/FormHelper'
+import { invalidAmountMin, invalidAmountMax } from './validation'
 import { Button, Separator, Text, Tooltip } from 'blockchain-info-components'
 import { FiatConvertor, Form, FormGroup, FormItem, FormLabel, SelectBoxBitcoinAddresses, TextArea, SelectBoxCoin } from 'components/Form'
 import CopyClipboard from 'components/CopyClipboard'
@@ -71,7 +72,7 @@ const FirstStep = props => {
           <FormLabel for='amount'>
             <FormattedMessage id='modals.requestbitcoin.firststep.amount' defaultMessage='Enter Amount:' />
           </FormLabel>
-          <Field name='amount' component={FiatConvertor} validate={[required]} coin='BTC' />
+          <Field name='amount' component={FiatConvertor} validate={[required, invalidAmountMin, invalidAmountMax]} coin='BTC' />
         </FormItem>
       </FormGroup>
       <FormGroup margin={'15px'}>

packages/blockchain-wallet-v4-frontend/src/modals/RequestBitcoin/FirstStep/validation.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { prop } from 'ramda'
+import { Exchange } from 'blockchain-wallet-v4/src'
+import { InvalidAmountMessageMin, InvalidAmountMessageMax } from './validationMessages'
+
+export const invalidAmountMin = (value, allValues, props) => {
+  const valueBtc = prop('coin', value)
+  return valueBtc > 0 ? undefined : <InvalidAmountMessageMin />
+}
+
+export const invalidAmountMax = (value, allValues, props) => {
+  const valueBtc = prop('coin', value)
+  return valueBtc <= 21000000 ? undefined : <InvalidAmountMessageMax />
+}

packages/blockchain-wallet-v4-frontend/src/modals/RequestBitcoin/FirstStep/validationMessages.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import styled from 'styled-components'
+import { FormattedMessage } from 'react-intl'
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+
+  > * { margin: 0 0 0 2px; }
+`
+
+export const InvalidAmountMessageMin = () => (
+  <FormattedMessage id='modals.requestbtc.amountnotminmessage' defaultMessage='Must be greater than 0' />
+)
+
+export const InvalidAmountMessageMax = () => (
+  <FormattedMessage id='modals.requestbtc.amountnotmaxmessage' defaultMessage='Cannot exceed 21,000,000' />
+)