blockchain · prwelber · Apr 3, 2018 · Apr 2, 2018 · Apr 2, 2018 · Apr 2, 2018
@@ -0,0 +1,43 @@
+import React from 'react'
+import styled from 'styled-components'
+import selectArrow from '../Images/img/select-arrow.png'
+
+const BaseSelectInput = styled.select`
+  height: 30px;
+  width: 160px;
+  font-size: 13px;
+  padding: 2px 6px;
+  outline: none;
+  appearance: none;
+  border-radius: 3px;
+  background: ${props => props.theme['white']};
+  background-image: url(${selectArrow});
+  background-size: 12px;
+  background-repeat: no-repeat;
+  background-position: center right 10px;
+  color: ${props => props.theme['gray-5']};
+  border: 1px solid ${props => props.theme['gray-2']};
+  margin-left: ${props => props.inline ? '5px' : '0px'};
+  &:active,
+  &:focus {
+    border: 1px solid ${props => props.theme['brand-secondary']};
+  }
+`
+
+const selectBorderColor = (state) => {
+  switch (state) {
+    case 'initial': return 'gray-2'
+    case 'invalid': return 'error'
+    case 'valid': return 'success'
+    default: return 'gray-2'
+  }
+}
+
+const SelectInput = props => {
+  const { errorState, disabled, input, ...rest } = props
+  const borderColor = selectBorderColor(errorState)
+
+  return <BaseSelectInput inline borderColor={borderColor} disabled={disabled} onChange={input.onChange} {...rest} />
+}
+
+export default SelectInput
@@ -1,6 +1,7 @@
 export { default as PlaceHolder } from './PlaceHolder'
 export { default as CheckBoxInput } from './CheckBoxInput'
 export { default as DateInput } from './DateInput'
+export { default as NativeSelect } from './NativeSelect'
 export { default as NumberInput } from './NumberInput'
 export { default as PasswordInput } from './PasswordInput'
 export { default as RadioButtonInput } from './RadioButtonInput'

@@ -12,6 +12,7 @@ import landingPageBannerOverlay from './img/landing-page-banner-overlay.jpg'
 import landingPageBannerSmOverlay from './img/landing-page-banner-sm-overlay.jpg'
 import qrCode from './img/qr-code.png'
 import rocket from './img/rocket.gif'
+import selectArrow from './img/select-arrow.png'
 import shapeshiftLogo from './img/shapeshift-logo.png'
 import smartphone from './img/smartphone.png'
 import sophisticated from './img/sophisticated.svg'
@@ -36,6 +37,7 @@ export default {
   'landing-page-banner-sm-overlay': landingPageBannerSmOverlay,
   'qr-code': qrCode,
   'rocket': rocket,
+  'select-arrow': selectArrow,
   'shapeshiftLogo': shapeshiftLogo,
   'smartphone': smartphone,
   'sophisticated': sophisticated,

@@ -7,7 +7,7 @@ export { Carousel } from './Carousels'
 export { Color, Palette } from './Colors'
 export { SimpleDropdown, ComponentDropdown } from './Dropdowns'
 export { ConfirmationGauge, PasswordGauge, SecurityGauge } from './Gauges'
-export { CheckBoxInput, DateInput, NumberInput, PasswordInput, PlaceHolder, RadioButtonInput, SelectInput, TextAreaInput, TextInput } from './Form'
+export { CheckBoxInput, DateInput, NativeSelect, NumberInput, PasswordInput, PlaceHolder, RadioButtonInput, SelectInput, TextAreaInput, TextInput } from './Form'
 export { Icon } from './Icons'
 export { Background, Image } from './Images'
 export { Link } from './Links'

@@ -68,14 +68,14 @@ const ImageLayout = props => {
 const imageKeys = keysIn(Images)
 
 storiesOf('Images', module)
-    .addDecorator(story => (<Layout>{story()}</Layout>))
-    .addDecorator((story, context) => withInfo({ text: 'Documentation', inline: true })(story)(context))
-    .add('All images', () =>
-      <ImageLayout>
-        { imageKeys.map((value, index) => {
-          return <ImageComponent key={index} name={value} />
-        })}
-      </ImageLayout>)
-    .add('Image', () => <Image name='blockchain-blue' />)
-    .add('Image width width', () => <Image name='blockchain-blue' width='750px' />)
-    .add('Image width height', () => <Image name='blockchain-blue' height='50px' />)
+  .addDecorator(story => (<Layout>{story()}</Layout>))
+  .addDecorator((story, context) => withInfo({ text: 'Documentation', inline: true })(story)(context))
+  .add('All images', () =>
+    <ImageLayout>
+      { imageKeys.map((value, index) => {
+        return <ImageComponent key={index} name={value} />
+      })}
+    </ImageLayout>)
+  .add('Image', () => <Image name='blockchain-blue' />)
+  .add('Image width width', () => <Image name='blockchain-blue' width='750px' />)
+  .add('Image width height', () => <Image name='blockchain-blue' height='50px' />)
@@ -17,7 +17,7 @@ const Container = styled.div`
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  padding-left: 10px;
+  padding-left: 5px;
 `
 
 const ComboDisplay = props => {

@@ -50,6 +50,7 @@ const ArrowRight = styled(Icon)`
 const Error = styled(Text)`
   position: absolute;
   display: block;
+  font-size: 12px;
   height: 15px;
   top: -20px;
   right: 0;

@@ -21,7 +21,6 @@ import SelectBoxBitcoinUnit from './SelectBoxBitcoinUnit'
 import SelectBoxCoin from './SelectBoxCoin'
 import SelectBoxCountry from './SelectBoxCountry'
 import SelectBoxCurrency from './SelectBoxCurrency'
-import SelectBoxFee from './SelectBoxFee'
 import SelectBoxLanguages from './SelectBoxLanguages'
 import SelectBoxTheme from './SelectBoxTheme'
 import SelectBoxUSState from './SelectBoxUSState'
@@ -54,7 +53,6 @@ export {
   SelectBoxCoin,
   SelectBoxCountry,
   SelectBoxCurrency,
-  SelectBoxFee,
   SelectBoxLanguages,
   SelectBoxTheme,
   SelectBoxUSState,

@@ -106,7 +106,7 @@ const FirstStep = props => {
               <FormattedMessage id='modals.sendbch.firststep.fee_tooltip' defaultMessage='Estimated confirmation time 1+ hour.' />
             </Tooltip>
           </FormLabel>
-          <ComboDisplay coin='BCH'>{fee}</ComboDisplay>
+          <ComboDisplay size={'14px'} coin='BCH'>{fee}</ComboDisplay>
         </FormItem>
       </FormGroup>
       <FormGroup>

@@ -54,6 +54,7 @@ class FirstStep extends React.Component {
   }
 
   handleClickFeeToggler () {
+    this.props.formActions.change('sendBitcoin', 'fee', this.props.data.data.initialValues.fee)
     this.props.updateUI({ feeEditToggled: !this.props.ui.feeEditToggled })
   }
 

@@ -22,7 +22,11 @@ export const getData = state => {
   const xpub = selectors.core.wallet.getDefaultAccountXpub(state)
   const defaultFromR = balancesR.map(x => prop('value', head(filter(y => equals(y.value.xpub, xpub), x))))
   const feeR = selectors.core.data.bitcoin.getFee(state)
-  const fees = { regular: feeR.map(path(['regular'])), priority: feeR.map(path(['priority'])) }
+  const fees = {
+    limits: feeR.map(path(['limits'])),
+    regular: feeR.map(path(['regular'])),
+    priority: feeR.map(path(['priority']))
+  }
   const defaultFeeR = feeR.map(path(['regular']))
   const coinsR = selectors.core.data.bitcoin.getCoins(state)
   const coin = formValueSelector('sendBitcoin')(state, 'coin')

@@ -6,8 +6,8 @@ import { FormattedMessage } from 'react-intl'
 import { Field, reduxForm } from 'redux-form'
 
 import { required, validBitcoinAddress } from 'services/FormHelper'
-import { Button, Icon, Link, Text, Tooltip } from 'blockchain-info-components'
-import { FiatConvertor, Form, FormGroup, FormItem, FormLabel, SelectBoxBitcoinAddresses, SelectBoxCoin, SelectBoxFee, TextBox, TextArea } from 'components/Form'
+import { Button, Icon, Link, NativeSelect, Text, Tooltip } from 'blockchain-info-components'
+import { FiatConvertor, Form, FormGroup, FormItem, FormLabel, NumberBox, SelectBoxBitcoinAddresses, SelectBoxCoin, TextBox, TextArea } from 'components/Form'
 import ComboDisplay from 'components/Display/ComboDisplay'
 import QRCodeCapture from 'components/QRCodeCapture'
 
@@ -20,12 +20,7 @@ const Row = styled.div`
 `
 const ColLeft = styled.div`
   width: 50%;
-  div:first-child {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-contenet: space-between;
-  }
+  position: relative;
 `
 const ColRight = ColLeft.extend`
   display: flex;
@@ -45,12 +40,11 @@ const AddressButton = styled.div`
 
   &:hover { background-color: ${props => props.theme['gray-1']}; }
 `
-const Unit = styled.span`
-  position: absolute;
-  padding: 0 15px;
-  color: ${props => props.theme['gray-4']};
-  bottom: 95px;
-  left: 240px;
+const FeeFormContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
 `
 const FeeContainer = styled.div`
   display: flex;  
@@ -63,13 +57,29 @@ const RowFlexEnd = Row.extend`
     padding-right: 8px;
   }
 `
-const SelectFeeContainer = styled.div`
-  width: 150px;
-`
 const CustomizeFeeLink = styled(Link)`
-  margin-top: 10px;
+  margin-top: 5px;
   font-size: 12px;
 `
+const FeeFormLabel = styled(FormLabel)`
+  width: 100%;
+  display: flex;
+  white-space: nowrap;
+  > div {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: ${props => props.flexEnd ? 'flex-end' : 'center'};
+  }
+`
+const FeeField = styled(Field)`
+  margin-top: 5px;
+`
+const FeeError = styled(Text)`
+  bottom: -18px;
+  cursor: pointer;
+  position: absolute;
+`
 
 const shouldValidate = ({ values, nextProps, props, initialRender, structure }) => {
   if (initialRender) { return true }
@@ -83,11 +93,12 @@ const emptyAmount = (value, allValues, props) => !isEmpty(props.coins) ? undefin
 const FirstStep = props => {
   const { invalid, submitting, addressSelectToggled, addressSelectOpened, feeEditToggled, selection, fee, totalFee, ...rest } = props
   const { handleSubmit, handleClickAddressToggler, handleClickFeeToggler } = rest
-  const priority = props.fees.priority.data
+  const limits = props.fees.limits.data
   const regular = props.fees.regular.data
+  const priority = props.fees.priority.data
 
   const renderFeeConfirmationTime = () => {
-    if (fee === regular) {
+    if (parseInt(fee) === parseInt(regular)) {
       return (<FormattedMessage id='modals.sendbitcoin.firststep.estimated' defaultMessage='Estimated confirmation time 1+ hour' />)
     } else return (<FormattedMessage id='modals.sendbitcoin.firststep.estimated' defaultMessage='Estimated confirmation time 0-60 minutes' />)
   }
@@ -148,33 +159,42 @@ const FirstStep = props => {
       </FormGroup>
       <FormGroup inline margin={'30px'}>
         <ColLeft>
-          <div>
-            <Text size='14px' weight={500}>
+          <FeeFormContainer>
+            <FeeFormLabel flexEnd={feeEditToggled}>
               <FormattedMessage id='modals.sendbitcoin.firststep.fee' defaultMessage='Transaction fee:' />
-            </Text>
-            {feeEditToggled
-              ? <FeeContainer>
-                <RowFlexEnd>
-                  <Link weight={300} size={'12px'} onClick={() => props.customFeeHandler(regular)}>Reg: {regular}</Link>
-                  <Link weight={300} size={'12px'} onClick={() => props.customFeeHandler(priority)}>Priority: {priority}</Link>
-                </RowFlexEnd>
-                {/* TODO: high and low limits for fee input */}
-                <Field name='fee' component={TextBox} validate={[required]} />
-                <Unit>sat/b</Unit>
-              </FeeContainer>
-              : <SelectFeeContainer>
-                <Field name='fee' component={SelectBoxFee} validate={[required]} />
-              </SelectFeeContainer>
-            }
-          </div>
-          {feeEditToggled
-            ? ''
-            : <Text size={'12px'} weight={300}>
-              {renderFeeConfirmationTime()}
-            </Text>}
+              {feeEditToggled
+                ? <FeeContainer>
+                  <RowFlexEnd>
+                    <Link weight={300} size='12px' onClick={() => props.customFeeHandler(regular)}>Reg: {regular}</Link>
+                    <Link weight={300} size='12px' onClick={() => props.customFeeHandler(priority)}>Priority: {priority}</Link>
+                  </RowFlexEnd>
+                </FeeContainer>
+                : <Field name='fee' inline component={NativeSelect} validate={[required]}>
+                  <option value={regular}>Regular</option>
+                  <option value={priority}>Priority</option>
+                </Field>
+              }
+            </FeeFormLabel>
+          </FeeFormContainer>
+          {
+            feeEditToggled && <FeeField name='fee' component={NumberBox} validate={[required]} />
+          }
+          {
+            !feeEditToggled && <Text size='12px' weight={300}>{renderFeeConfirmationTime()}</Text>
+          }
+          {
+            feeEditToggled && fee < limits.min && <FeeError size='12px' weight={300} color={'error'} onClick={() => props.customFeeHandler(limits.min)}>
+              <FormattedMessage id='modals.sendbitcoin.firststep.feebelowmin' defaultMessage='{min} sat/b or more is recommended' values={{min: limits.min}} />
+            </FeeError>
+          }
+          {
+            feeEditToggled && fee > limits.max && <FeeError size='12px' weight={300} color={'error'} onClick={() => props.customFeeHandler(limits.max)}>
+              <FormattedMessage id='modals.sendbitcoin.firststep.feeabovemax' defaultMessage='{max} sat/b or less is recommended' values={{max: limits.max}} />
+            </FeeError>
+          }
         </ColLeft>
         <ColRight>
-          <ComboDisplay coin='BTC'>{totalFee}</ComboDisplay>
+          <ComboDisplay size='14px' coin='BTC'>{totalFee}</ComboDisplay>
           <CustomizeFeeLink onClick={handleClickFeeToggler} size='13px' weight={300} uppercase>
             {feeEditToggled
               ? <FormattedMessage id='modals.sendbitcoin.firststep.cancel' defaultMessage='Cancel' />

@@ -72,7 +72,7 @@ const FirstStep = props => {
           <FormLabel>
             <FormattedMessage id='modals.sendether.firststep.fee' defaultMessage='Transaction fee :' />
           </FormLabel>
-          <ComboDisplay coin='ETH'>{fee}</ComboDisplay>
+          <ComboDisplay size='14px' coin='ETH'>{fee}</ComboDisplay>
         </FormItem>
       </FormGroup>
       <FormGroup>

@@ -135,13 +135,13 @@ const Success = props => {
     return (
       <OrderHistoryWrapper>
         <OrderHistoryContent>
-          <Text size={'16px'} weight={500}>
+          <Text size='16px' weight={500}>
             <FormattedMessage id='scenes.buysell.sfoxcheckout.trades.pending' defaultMessage='Pending Trades' />
           </Text>
           <OrderHistory trades={filter(isPending, trades)} conversion={1e8} />
         </OrderHistoryContent>
         <OrderHistoryContent>
-          <Text size={'16px'} weight={500}>
+          <Text size='16px' weight={500}>
             <FormattedMessage id='scenes.buysell.sfoxcheckout.trades.completed' defaultMessage='Completed Trades' />
           </Text>
           <OrderHistory trades={filter(isCompleted, trades)} conversion={1e8} />