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
---
 .../gas-fee-display/gas-fee-display.component.js   | 35 ++++++++++------------
 .../test/gas-fee-display.component.test.js         | 12 ++++----
 2 files changed, 21 insertions(+), 26 deletions(-)

(limited to 'ui/app/components/send/send-content/send-gas-row')

diff --git a/ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js b/ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
index bb9a94428..9bbb67506 100644
--- a/ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
+++ b/ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
@@ -1,7 +1,7 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
-import CurrencyDisplay from '../../../../send/currency-display'
-
+import UserPreferencedCurrencyDisplay from '../../../../user-preferenced-currency-display'
+import { PRIMARY, SECONDARY } from '../../../../../constants/common'
 
 export default class GasFeeDisplay extends Component {
 
@@ -19,27 +19,24 @@ export default class GasFeeDisplay extends Component {
   };
 
   render () {
-    const {
-      conversionRate,
-      gasTotal,
-      onClick,
-      primaryCurrency = 'ETH',
-      convertedCurrency,
-      gasLoadingError,
-    } = this.props
+    const { gasTotal, onClick, gasLoadingError } = this.props
 
     return (
       <div className="send-v2__gas-fee-display">
         {gasTotal
-          ? <CurrencyDisplay
-              primaryCurrency={primaryCurrency}
-              convertedCurrency={convertedCurrency}
-              value={gasTotal}
-              conversionRate={conversionRate}
-              gasLoadingError={gasLoadingError}
-              convertedPrefix={'$'}
-              readOnly
-            />
+          ? (
+            <div className="currency-display">
+              <UserPreferencedCurrencyDisplay
+                value={gasTotal}
+                type={PRIMARY}
+              />
+              <UserPreferencedCurrencyDisplay
+                className="currency-display__converted-value"
+                value={gasTotal}
+                type={SECONDARY}
+              />
+            </div>
+          )
           : gasLoadingError
             ? <div className="currency-display.currency-display--message">
                 {this.context.t('setGasPrice')}
diff --git a/ui/app/components/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js b/ui/app/components/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
index 7cbe8d0df..9ff01493a 100644
--- a/ui/app/components/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
+++ b/ui/app/components/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
@@ -2,7 +2,7 @@ import React from 'react'
 import assert from 'assert'
 import {shallow} from 'enzyme'
 import GasFeeDisplay from '../gas-fee-display.component'
-import CurrencyDisplay from '../../../../../send/currency-display'
+import UserPreferencedCurrencyDisplay from '../../../../../user-preferenced-currency-display'
 import sinon from 'sinon'
 
 
@@ -29,17 +29,15 @@ describe('SendGasRow Component', function () {
 
   describe('render', () => {
     it('should render a CurrencyDisplay component', () => {
-      assert.equal(wrapper.find(CurrencyDisplay).length, 1)
+      assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 2)
     })
 
     it('should render the CurrencyDisplay with the correct props', () => {
       const {
-        conversionRate,
-        convertedCurrency,
+        type,
         value,
-      } = wrapper.find(CurrencyDisplay).props()
-      assert.equal(conversionRate, 20)
-      assert.equal(convertedCurrency, 'mockConvertedCurrency')
+      } = wrapper.find(UserPreferencedCurrencyDisplay).at(0).props()
+      assert.equal(type, 'PRIMARY')
       assert.equal(value, 'mockGasTotal')
     })
 
-- 
cgit