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
---
 .../confirm-detail-row.component.js                | 66 ++++++++++++++++------
 1 file changed, 49 insertions(+), 17 deletions(-)

(limited to 'ui/app/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js')

diff --git a/ui/app/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js b/ui/app/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js
index f0703dde2..c7262d2a9 100644
--- a/ui/app/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js
+++ b/ui/app/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js
@@ -1,16 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display'
+import { PRIMARY, SECONDARY } from '../../../constants/common'
 
 const ConfirmDetailRow = props => {
   const {
     label,
-    fiatText,
-    ethText,
+    primaryText,
+    secondaryText,
     onHeaderClick,
-    fiatTextColor,
+    primaryValueTextColor,
     headerText,
     headerTextClassName,
+    value,
   } = props
 
   return (
@@ -25,28 +28,57 @@ const ConfirmDetailRow = props => {
         >
           { headerText }
         </div>
-        <div
-          className="confirm-detail-row__fiat"
-          style={{ color: fiatTextColor }}
-        >
-          { fiatText }
-        </div>
-        <div className="confirm-detail-row__eth">
-          { ethText }
-        </div>
+        {
+          primaryText
+            ? (
+              <div
+                className="confirm-detail-row__primary"
+                style={{ color: primaryValueTextColor }}
+              >
+                { primaryText }
+              </div>
+            ) : (
+              <UserPreferencedCurrencyDisplay
+                className="confirm-detail-row__primary"
+                type={PRIMARY}
+                value={value}
+                showEthLogo
+                ethLogoHeight="18"
+                style={{ color: primaryValueTextColor }}
+                hideLabel
+              />
+            )
+        }
+        {
+          secondaryText
+            ? (
+              <div className="confirm-detail-row__secondary">
+                { secondaryText }
+              </div>
+            ) : (
+              <UserPreferencedCurrencyDisplay
+                className="confirm-detail-row__secondary"
+                type={SECONDARY}
+                value={value}
+                showEthLogo
+                hideLabel
+              />
+            )
+        }
       </div>
     </div>
   )
 }
 
 ConfirmDetailRow.propTypes = {
-  label: PropTypes.string,
-  fiatText: PropTypes.string,
-  ethText: PropTypes.string,
-  fiatTextColor: PropTypes.string,
-  onHeaderClick: PropTypes.func,
   headerText: PropTypes.string,
   headerTextClassName: PropTypes.string,
+  label: PropTypes.string,
+  onHeaderClick: PropTypes.func,
+  primaryValueTextColor: PropTypes.string,
+  primaryText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  secondaryText: PropTypes.string,
+  value: PropTypes.string,
 }
 
 export default ConfirmDetailRow
-- 
cgit