fix(Send BTC): custom fee max ux

blockchain · Jun 23, 2018 · 17ef5d8 · 17ef5d8
1 parent 5cc4f30
commit 17ef5d8
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 10 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json b/packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json
@@ -626,7 +626,7 @@
   "modals.sendbch.secondstep.back": "Go back",
   "modals.sendbch.title": "Send Bitcoin Cash",
   "modals.sendbtc.maximumamountlink.maximum": "maximum",
-  "modals.sendbtc.maximumfeelink.maximum": "maximum",
+  "modals.sendbtc.maximumfeelink.rec_upper_limit": "recommended upper limit",
   "modals.sendbtc.minimumamountlink.minimum": "minimum",
   "modals.sendbtc.minimumfeelink.minimum": "minimum",
   "modals.sendbtc.priorityfeelink.priority": "Priority: {fee}",
@@ -647,7 +647,7 @@
   "modals.sendbtc.firststep.continue": "Continue",
   "modals.sendbtc.amountnotzeromessage": "Invalid amount",
   "modals.sencbtc.maximumamountmessage": "Not enough funds. Use",
-  "modals.sencbtc.maximumfeemessage": "Unnecessarily high fee. Use",
+  "modals.sencbtc.maximumfeemessage": "Unnecessarily high fee. Use our",
   "modals.sencbtc.minimumamountmessage": "Below minimum amount. Use",
   "modals.sencbtc.minimumfeemessage": "Low fee not recommended. Use",
   "modals.sencbtc.minimumonesatoshimessage": "Minimum {sat} required",

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Form/NumberBoxDebounced/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Form/NumberBoxDebounced/index.js
@@ -14,11 +14,13 @@ const Container = styled.div`
   height: 40px;
 `
 const Error = styled(Text)`
+  white-space: nowrap;
   position: absolute;
   display: block;
   height: 15px;
+  right: ${props => props.errorLeft ? 'auto' : 0};
+  left: ${props => props.errorLeft ? '-2px' : 'auto'};
   top: ${props => props.errorBottom ? '40px' : '-20px'};
-  right: 0;
 `
 const getErrorState = (meta) => {
   return meta.touched && meta.invalid ? 'invalid' : 'initial'
@@ -72,7 +74,7 @@ class NumberBoxDebounced extends React.Component {
   }
 
   render () {
-    const { disabled, errorBottom, meta, placeholder, ...rest } = this.props
+    const { disabled, errorBottom, errorLeft, meta, placeholder, ...rest } = this.props
     const errorState = getErrorState(meta)
 
     return (
@@ -87,8 +89,8 @@ class NumberBoxDebounced extends React.Component {
           onBlur={this.handleBlur}
           {...rest}
         />
-        {meta.touched && meta.error && <Error size='12px' weight={300} color='error' errorBottom={errorBottom}>{meta.error}</Error>}
-        {meta.touched && !meta.error && meta.warning && <Error size='12px' weight={300} color='sent' errorBottom={errorBottom}>{meta.warning}</Error>}
+        {meta.touched && meta.error && <Error size='12px' weight={300} color='error' errorBottom={errorBottom} errorLeft={errorLeft}>{meta.error}</Error>}
+        {meta.touched && !meta.error && meta.warning && <Error size='12px' weight={300} color='sent' errorBottom={errorBottom} errorLeft={errorLeft}>{meta.warning}</Error>}
       </Container>
     )
   }

diff --git a/...es/blockchain-wallet-v4-frontend/src/modals/SendBitcoin/FirstStep/MaximumFeeLink/index.js b/...es/blockchain-wallet-v4-frontend/src/modals/SendBitcoin/FirstStep/MaximumFeeLink/index.js
@@ -8,7 +8,7 @@ import { Link } from 'blockchain-info-components'
 
 const MaximumFeeLink = props => (
   <Link size='12px' weight={300} onClick={() => props.actions.sendBtcFirstStepMaximumFeeClicked()}>
-    <FormattedMessage id='modals.sendbtc.maximumfeelink.maximum' defaultMessage='maximum' />
+    <FormattedMessage id='modals.sendbtc.maximumfeelink.rec_upper_limit' defaultMessage='recommended upper limit' />
   </Link>
 )
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SendBitcoin/FirstStep/template.success.js b/packages/blockchain-wallet-v4-frontend/src/modals/SendBitcoin/FirstStep/template.success.js
@@ -148,7 +148,7 @@ const FirstStep = props => {
             </FeeFormLabel>
             {feePerByteToggled &&
               <FeePerByteContainer>
-                <Field name='feePerByte' component={NumberBoxDebounced} validate={[required, minimumOneSatoshi]} warn={[minimumFeePerByte, maximumFeePerByte]} errorBottom />
+                <Field name='feePerByte' component={NumberBoxDebounced} validate={[required, minimumOneSatoshi]} warn={[minimumFeePerByte, maximumFeePerByte]} errorBottom errorLeft />
               </FeePerByteContainer>
             }
           </FeeFormContainer>

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SendBitcoin/FirstStep/validation.js b/packages/blockchain-wallet-v4-frontend/src/modals/SendBitcoin/FirstStep/validation.js
@@ -31,7 +31,7 @@ export const minimumFeePerByte = (value, allValues, props) => value && parseInt(
 
 export const minimumOneSatoshi = (value, allValues, props) => value >= 1 ? undefined : <MinimumOneSatoshiMessage />
 
-export const maximumFeePerByte = (value, allValues, props) => value && parseInt(value) < props.maxFeePerByte ? undefined : <MaximumFeeMessage />
+export const maximumFeePerByte = (value, allValues, props) => value && parseInt(value) <= props.maxFeePerByte ? undefined : <MaximumFeeMessage />
 
 export const shouldError = ({ values, nextProps, props, initialRender, structure }) => {
   if (initialRender) { return true }

diff --git a/...ages/blockchain-wallet-v4-frontend/src/modals/SendBitcoin/FirstStep/validationMessages.js b/...ages/blockchain-wallet-v4-frontend/src/modals/SendBitcoin/FirstStep/validationMessages.js
@@ -30,7 +30,7 @@ export const MaximumAmountMessage = () => (
 
 export const MaximumFeeMessage = () => (
   <Wrapper>
-    <FormattedMessage id='modals.sencbtc.maximumfeemessage' defaultMessage='Unnecessarily high fee. Use' />
+    <FormattedMessage id='modals.sencbtc.maximumfeemessage' defaultMessage='Unnecessarily high fee. Use our' />
     <MaximumFeeLink />
   </Wrapper>
 )