fix(Send BTC): custom fee ux

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

Hide file tree

Showing 5 changed files with 23 additions and 9 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
@@ -173,7 +173,15 @@
   "scenes.exchange.secondstep.expiry": "Quote expires in: {timeLeft}",
   "scenes.exchange.secondstep.expiry.tooltip1": "This rate will expire after {time}.",
   "scenes.exchange.secondstep.expiry.tooltip2": "If that happens please restart your trade.",
+  "components.form.selectboxbankaccounttype.checking": "Checking",
+  "components.form.selectboxbankaccounttype.savings": "Savings",
   "components.selectboxbitcoin.watchonly": "Non-Spendable",
+  "components.selectboxcountry.label": "Select country",
+  "components.selectboxtheme.default": "Default",
+  "components.selectboxtheme.complement": "Complement",
+  "components.selectboxtheme.grayscale": "Grayscale",
+  "components.selectboxtheme.invert": "Invert",
+  "components.selectboxstate.label": "Select country",
   "components.form.tabmenubuysell.buy": "Buy",
   "components.form.tabmenubuysell.sell": "Sell",
   "components.form.tabmenubuysell.orderhistory": "Order History",
@@ -623,6 +631,8 @@
   "modals.sendbtc.minimumfeelink.minimum": "minimum",
   "modals.sendbtc.priorityfeelink.priority": "Priority: {fee}",
   "modals.sendbtc.regularfeelink.regular": "Reg: {fee}, ",
+  "modals.sendbtc.firststep.fee.regular": "Regular",
+  "modals.sendbtc.firststep.fee.priority": "Priority",
   "modals.sendbtc.firststep.coin": "Currency:",
   "modals.sendbtc.firststep.from": "From:",
   "modals.sendbtc.firststep.to": "To:",
@@ -640,7 +650,7 @@
   "modals.sencbtc.maximumfeemessage": "Unnecessarily high fee. Use",
   "modals.sencbtc.minimumamountmessage": "Below minimum amount. Use",
   "modals.sencbtc.minimumfeemessage": "Low fee not recommended. Use",
-  "modals.sencbtc.minimumonesatoshimessage": "Invalid {sat}",
+  "modals.sencbtc.minimumonesatoshimessage": "Minimum {sat} required",
   "modals.sendbtc.insufficientfundsmessage": "Insufficient funds",
   "modals.sencbtc.addressprivmismatch": "This private key does not match the watch only address above",
   "modals.sendbtc.secondstep.from": "From:",
@@ -1016,7 +1026,6 @@
   "scenes.exchange.shapeshift.stateregistration.subheader": "Blockchain works with exchange partners to make exchanging coins in your wallet secure and seamless.",
   "scenes.exchange.shapeshift.stateregistration.selectstate": "Select your state of residency:",
   "scenes.exchange.shapeshift.stateregistration.continue": "Continue",
-  "scenes.exchange.shapeshift.stateregistration.unavailable": "This service is not yet available in your state.",
   "scenes.exchange.shapeshift.error": "An error has occurred. Please try again.",
   "modals.exchange.shapeshift.title.success": "Success! Your exchange is complete",
   "modals.exchange.shapeshift.title.inprogress": "Exchange In Progress",
@@ -1627,6 +1636,10 @@
   "formhelper.invalidstrongpassword": "Your password is not strong enough",
   "formhelper.invalidwalletidentifier": "Invalid wallet identifier",
   "formhelper.partnercountrywhitelist": "Country not available for buy & sell",
+  "formhelper.partnerstatewhitelist": "State not available for buy & sell",
+  "formhelper.passwordsdonotmatch": "Passwords do not match",
+  "formhelper.incorrectpassword": "Incorrect password",
+  "formhelper.samepasswordascurrent": "Password is the same as current",
   "formhelper.requireddob": "Must be a valid date",
   "formhelper.required": "Required",
   "formhelper.requirednumber": "Invalid number",

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
@@ -72,7 +72,7 @@ class NumberBoxDebounced extends React.Component {
   }
 
   render () {
-    const { meta, disabled, placeholder, ...rest } = this.props
+    const { disabled, errorBottom, meta, placeholder, ...rest } = this.props
     const errorState = getErrorState(meta)
 
     return (
@@ -87,8 +87,8 @@ class NumberBoxDebounced extends React.Component {
           onBlur={this.handleBlur}
           {...rest}
         />
-        {meta.touched && meta.error && <Error size='12px' weight={300} color='error'>{meta.error}</Error>}
-        {meta.touched && !meta.error && meta.warning && <Error size='12px' weight={300} color='sent'>{meta.warning}</Error>}
+        {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>}
       </Container>
     )
   }

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
@@ -68,7 +68,7 @@ const FeeOptionsContainer = styled.div`
 `
 const FeePerByteContainer = styled.div`
   width: 100%;
-  margin-top: 20px;
+  margin-bottom: 10px;
 `
 
 const FirstStep = props => {
@@ -141,13 +141,14 @@ const FirstStep = props => {
               {feePerByteToggled &&
                 <FeeOptionsContainer>
                   <RegularFeeLink fee={regularFeePerByte} />
+                  <span>&nbsp;</span>
                   <PriorityFeeLink fee={priorityFeePerByte} />
                 </FeeOptionsContainer>
               }
             </FeeFormLabel>
             {feePerByteToggled &&
               <FeePerByteContainer>
-                <Field name='feePerByte' component={NumberBoxDebounced} validate={[required, minimumOneSatoshi]} warn={[minimumFeePerByte, maximumFeePerByte]} />
+                <Field name='feePerByte' component={NumberBoxDebounced} validate={[required, minimumOneSatoshi]} warn={[minimumFeePerByte, maximumFeePerByte]} errorBottom />
               </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
@@ -27,7 +27,7 @@ export const maximumAmount = (value, allValues, props) => {
   return valueSatoshi <= props.effectiveBalance ? undefined : <MaximumAmountMessage />
 }
 
-export const minimumFeePerByte = (value, allValues, props) => value && parseInt(value) > props.minFeePerByte ? undefined : <MinimumFeeMessage />
+export const minimumFeePerByte = (value, allValues, props) => value && parseInt(value) >= props.minFeePerByte ? undefined : <MinimumFeeMessage />
 
 export const minimumOneSatoshi = (value, allValues, props) => value >= 1 ? undefined : <MinimumOneSatoshiMessage />
 

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
@@ -50,7 +50,7 @@ export const MinimumFeeMessage = () => (
 )
 
 export const MinimumOneSatoshiMessage = () => (
-  <FormattedMessage id='modals.sencbtc.minimumonesatoshimessage' defaultMessage='Invalid {sat}' values={{ sat: '(< 1sat/b)' }} />
+  <FormattedMessage id='modals.sencbtc.minimumonesatoshimessage' defaultMessage='Minimum {sat} required' values={{ sat: '1 sat/byte' }} />
 )
 
 export const InsufficientFundsMessage = () => (