Merge pull request #233 from loeck/master

Add rawValues in RequestAmount

src/components/RequestAmount/index.js

@@ -206,7 +206,13 @@ export class RequestAmount extends PureComponent<Props, State> {
     this.setState({
       value: newValue,
     })
-    onChange(newValue)
+    onChange({
+      values: newValue,
+      rawValues: {
+        left: Number(newValue.left) * 10 ** unit.left.magnitude,
+        right: Number(newValue.right),
+      },
+    })
   }
 
   handleClickMax = () => {

src/components/base/FormattedVal/index.js

@@ -22,10 +22,11 @@ type Props = {
   unit?: Unit | null,
   alwaysShowSign?: boolean,
   showCode?: boolean,
+  disableRounding?: boolean,
 }
 
 function FormattedVal(props: Props) {
-  const { fiat, isPercent, alwaysShowSign, showCode, ...p } = props
+  const { disableRounding, fiat, isPercent, alwaysShowSign, showCode, ...p } = props
   let { val, unit } = props
 
   if (isUndefined(val)) {
@@ -47,6 +48,7 @@ function FormattedVal(props: Props) {
     }
     text = formatCurrencyUnit(unit, val, {
       alwaysShowSign,
+      disableRounding,
       showCode,
     })
   }
@@ -59,11 +61,12 @@ function FormattedVal(props: Props) {
 }
 
 FormattedVal.defaultProps = {
-  unit: null,
-  isPercent: false,
   alwaysShowSign: false,
-  showCode: false,
+  disableRounding: false,
   fiat: null,
+  isPercent: false,
+  showCode: false,
+  unit: null,
 }
 
 export default FormattedVal

src/components/modals/Receive/index.js

@@ -88,7 +88,7 @@ class ReceiveModal extends PureComponent<Props, State> {
                       <RequestAmount
                         account={account}
                         value={amount}
-                        onChange={this.handleChangeInput('amount')}
+                        onChange={v => this.handleChangeInput('amount')(v.values)}
                       />
                     </Box>
                     <ReceiveBox account={account} amount={amount.left} />

src/components/modals/Send/Footer.js

@@ -18,17 +18,19 @@ type Props = {
   amount: DoubleVal,
   onNext: Function,
   canNext: boolean,
+  counterValue: string,
 }
 
-function Footer({ account, amount, t, onNext, canNext }: Props) {
+function Footer({ account, amount, t, onNext, canNext, counterValue }: Props) {
   return (
     <ModalFooter horizontal align="center">
       <Box grow>
         <Label>{t('send:totalSpent')}</Label>
         <Box horizontal flow={2} align="center">
           <FormattedVal
+            disableRounding
             color="dark"
-            val={amount.left * 10 ** account.unit.magnitude}
+            val={amount.left}
             unit={account.unit}
             showCode
           />
@@ -36,7 +38,14 @@ function Footer({ account, amount, t, onNext, canNext }: Props) {
             <Text ff="Rubik" fontSize={3}>
               {'('}
             </Text>
-            <FormattedVal color="grey" fontSize={3} val={amount.right} fiat="USD" showCode />
+            <FormattedVal
+              disableRounding
+              color="grey"
+              fontSize={3}
+              val={amount.right}
+              fiat={counterValue}
+              showCode
+            />
             <Text ff="Rubik" fontSize={3}>
               {')'}
             </Text>

src/components/modals/Send/index.js

@@ -1,6 +1,8 @@
 // @flow
 
 import React, { PureComponent } from 'react'
+import { compose } from 'redux'
+import { connect } from 'react-redux'
 import { translate } from 'react-i18next'
 import get from 'lodash/get'
 
@@ -9,6 +11,8 @@ import type { DoubleVal } from 'components/RequestAmount'
 
 import { MODAL_SEND } from 'constants'
 
+import { getCounterValue } from 'reducers/settings'
+
 import Breadcrumb from 'components/Breadcrumb'
 import Modal, { ModalBody, ModalTitle, ModalContent } from 'components/base/Modal'
 
@@ -19,14 +23,22 @@ import StepConnectDevice from './02-step-connect-device'
 import StepVerification from './03-step-verification'
 import StepConfirmation from './04-step-confirmation'
 
+const mapStateToProps = state => ({
+  counterValue: getCounterValue(state),
+})
+
 type Props = {
   t: T,
+  counterValue: string,
 }
 
 type State = {
   stepIndex: number,
   isDeviceReady: boolean,
-  amount: DoubleVal,
+  amount: {
+    values: DoubleVal,
+    rawValues: DoubleVal,
+  },
   account: Account | null,
   recipientAddress: string,
   fees: number,
@@ -45,8 +57,14 @@ const INITIAL_STATE = {
   account: null,
   recipientAddress: '',
   amount: {
-    left: 0,
-    right: 0,
+    values: {
+      left: 0,
+      right: 0,
+    },
+    rawValues: {
+      left: 0,
+      right: 0,
+    },
   },
   fees: 0,
 }
@@ -62,7 +80,7 @@ class SendModal extends PureComponent<Props, State> {
     // informations
     if (stepIndex === 0) {
       const { amount, recipientAddress } = this.state
-      return !!amount.left && !!recipientAddress && !!account
+      return !!amount.rawValues.left && !!recipientAddress && !!account
     }
 
     // connect device
@@ -87,21 +105,23 @@ class SendModal extends PureComponent<Props, State> {
   createChangeHandler = key => value => this.setState({ [key]: value })
 
   renderStep = acc => {
-    const { stepIndex, account } = this.state
+    const { stepIndex, account, amount, ...othersState } = this.state
     const step = this._steps[stepIndex]
     if (!step) {
       return null
     }
     const { Comp } = step
     const stepProps = {
-      ...this.state,
+      ...othersState,
+      amount: amount.values,
       account: account || acc,
     }
+
     return <Comp onChange={this.createChangeHandler} {...stepProps} {...this.props} />
   }
 
   render() {
-    const { t } = this.props
+    const { t, counterValue } = this.props
     const { stepIndex, amount, account } = this.state
 
     return (
@@ -120,10 +140,11 @@ class SendModal extends PureComponent<Props, State> {
               </ModalContent>
               {acc && (
                 <Footer
+                  counterValue={counterValue}
                   canNext={canNext}
                   onNext={this.handleNextStep}
                   account={acc}
-                  amount={amount}
+                  amount={amount.rawValues}
                   t={t}
                 />
               )}
@@ -135,4 +156,4 @@ class SendModal extends PureComponent<Props, State> {
   }
 }
 
-export default translate()(SendModal)
+export default compose(connect(mapStateToProps), translate())(SendModal)