From badebe017fe28b58ac742082368484c3a4b1c1bc Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Wed, 17 Oct 2018 07:03:29 +0800
Subject: Adds toggle for primary currency (#5421)

* Add UnitInput component

* Add CurrencyInput component

* Add UserPreferencedCurrencyInput component

* Add UserPreferencedCurrencyDisplay component

* Add updatePreferences action

* Add styles for CurrencyInput, CurrencyDisplay, and UnitInput

* Update SettingsTab page with Primary Currency toggle

* Refactor currency displays and inputs to use UserPreferenced displays and inputs

* Add TokenInput component

* Add UserPreferencedTokenInput component

* Use TokenInput in the send screen

* Fix unit tests

* Fix e2e and integration tests

* Remove send/CurrencyDisplay component

* Replace diamond unicode character with Eth logo. Fix typos
---
 .../currency-input/currency-input.component.js     | 120 +++++++++++++++++++++
 1 file changed, 120 insertions(+)
 create mode 100644 ui/app/components/currency-input/currency-input.component.js

(limited to 'ui/app/components/currency-input/currency-input.component.js')

diff --git a/ui/app/components/currency-input/currency-input.component.js b/ui/app/components/currency-input/currency-input.component.js
new file mode 100644
index 000000000..54cd0e1ac
--- /dev/null
+++ b/ui/app/components/currency-input/currency-input.component.js
@@ -0,0 +1,120 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import UnitInput from '../unit-input'
+import CurrencyDisplay from '../currency-display'
+import { getValueFromWeiHex, getWeiHexFromDecimalValue } from '../../helpers/conversions.util'
+import { ETH } from '../../constants/common'
+
+/**
+ * Component that allows user to enter currency values as a number, and props receive a converted
+ * hex value in WEI. props.value, used as a default or forced value, should be a hex value, which
+ * gets converted into a decimal value depending on the currency (ETH or Fiat).
+ */
+export default class CurrencyInput extends PureComponent {
+  static propTypes = {
+    conversionRate: PropTypes.number,
+    currentCurrency: PropTypes.string,
+    onChange: PropTypes.func,
+    onBlur: PropTypes.func,
+    suffix: PropTypes.string,
+    useFiat: PropTypes.bool,
+    value: PropTypes.string,
+  }
+
+  constructor (props) {
+    super(props)
+
+    const { value: hexValue } = props
+    const decimalValue = hexValue ? this.getDecimalValue(props) : 0
+
+    this.state = {
+      decimalValue,
+      hexValue,
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    const { value: prevPropsHexValue } = prevProps
+    const { value: propsHexValue } = this.props
+    const { hexValue: stateHexValue } = this.state
+
+    if (prevPropsHexValue !== propsHexValue && propsHexValue !== stateHexValue) {
+      const decimalValue = this.getDecimalValue(this.props)
+      this.setState({ hexValue: propsHexValue, decimalValue })
+    }
+  }
+
+  getDecimalValue (props) {
+    const { value: hexValue, useFiat, currentCurrency, conversionRate } = props
+    const decimalValueString = useFiat
+      ? getValueFromWeiHex({
+        value: hexValue, toCurrency: currentCurrency, conversionRate, numberOfDecimals: 2,
+      })
+      : getValueFromWeiHex({
+        value: hexValue, toCurrency: ETH, numberOfDecimals: 6,
+      })
+
+    return Number(decimalValueString) || 0
+  }
+
+  handleChange = decimalValue => {
+    const { useFiat, currentCurrency: fromCurrency, conversionRate, onChange } = this.props
+
+    const hexValue = useFiat
+      ? getWeiHexFromDecimalValue({
+        value: decimalValue, fromCurrency, conversionRate, invertConversionRate: true,
+      })
+      : getWeiHexFromDecimalValue({
+        value: decimalValue, fromCurrency: ETH, fromDenomination: ETH, conversionRate,
+      })
+
+    this.setState({ hexValue, decimalValue })
+    onChange(hexValue)
+  }
+
+  handleBlur = () => {
+    this.props.onBlur(this.state.hexValue)
+  }
+
+  renderConversionComponent () {
+    const { useFiat, currentCurrency } = this.props
+    const { hexValue } = this.state
+    let currency, numberOfDecimals
+
+    if (useFiat) {
+      // Display ETH
+      currency = ETH
+      numberOfDecimals = 6
+    } else {
+      // Display Fiat
+      currency = currentCurrency
+      numberOfDecimals = 2
+    }
+
+    return (
+      <CurrencyDisplay
+        className="currency-input__conversion-component"
+        currency={currency}
+        value={hexValue}
+        numberOfDecimals={numberOfDecimals}
+      />
+    )
+  }
+
+  render () {
+    const { suffix, ...restProps } = this.props
+    const { decimalValue } = this.state
+
+    return (
+      <UnitInput
+        {...restProps}
+        suffix={suffix}
+        onChange={this.handleChange}
+        onBlur={this.handleBlur}
+        value={decimalValue}
+      >
+        { this.renderConversionComponent() }
+      </UnitInput>
+    )
+  }
+}
-- 
cgit v1.2.3