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

2 files changed, 22 insertions, 4 deletions

diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
index 74e95ece6..1dca81560 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
@@ -17,9 +17,10 @@ export default class ConfirmPageContainerContent extends Component {
     nonce: PropTypes.string,
     assetImage: PropTypes.string,
     subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    subtitleComponent: PropTypes.node,
     summaryComponent: PropTypes.node,
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    titleComponent: PropTypes.func,
+    titleComponent: PropTypes.node,
     warning: PropTypes.string,
   }
 
@@ -54,7 +55,9 @@ export default class ConfirmPageContainerContent extends Component {
       errorKey,
       errorMessage,
       title,
+      titleComponent,
       subtitle,
+      subtitleComponent,
       hideSubtitle,
       identiconAddress,
       nonce,
@@ -80,7 +83,9 @@ export default class ConfirmPageContainerContent extends Component {
               })}
               action={action}
               title={title}
+              titleComponent={titleComponent}
               subtitle={subtitle}
+              subtitleComponent={subtitleComponent}
               hideSubtitle={hideSubtitle}
               identiconAddress={identiconAddress}
               nonce={nonce}
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js
index 38b158fd3..89ceb015f 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js
@@ -4,7 +4,18 @@ import classnames from 'classnames'
 import Identicon from '../../../identicon'
 
 const ConfirmPageContainerSummary = props => {
-  const { action, title, subtitle, hideSubtitle, className, identiconAddress, nonce, assetImage } = props
+  const {
+    action,
+    title,
+    titleComponent,
+    subtitle,
+    subtitleComponent,
+    hideSubtitle,
+    className,
+    identiconAddress,
+    nonce,
+    assetImage,
+  } = props
 
   return (
     <div className={classnames('confirm-page-container-summary', className)}>
@@ -32,12 +43,12 @@ const ConfirmPageContainerSummary = props => {
           )
         }
         <div className="confirm-page-container-summary__title-text">
-          { title }
+          { titleComponent || title }
         </div>
       </div>
       {
         hideSubtitle || <div className="confirm-page-container-summary__subtitle">
-          { subtitle }
+          { subtitleComponent || subtitle }
         </div>
       }
     </div>
@@ -47,7 +58,9 @@ const ConfirmPageContainerSummary = props => {
 ConfirmPageContainerSummary.propTypes = {
   action: PropTypes.string,
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  titleComponent: PropTypes.node,
   subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  subtitleComponent: PropTypes.node,
   hideSubtitle: PropTypes.bool,
   className: PropTypes.string,
   identiconAddress: PropTypes.string,