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

1 files changed, 105 insertions, 0 deletions

diff --git a/ui/app/components/user-preferenced-currency-display/tests/user-preferenced-currency-display.container.test.js b/ui/app/components/user-preferenced-currency-display/tests/user-preferenced-currency-display.container.test.js
new file mode 100644
index 000000000..41ad3b73e
--- /dev/null
+++ b/ui/app/components/user-preferenced-currency-display/tests/user-preferenced-currency-display.container.test.js
@@ -0,0 +1,105 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+let mapStateToProps, mergeProps
+
+proxyquire('../user-preferenced-currency-display.container.js', {
+  'react-redux': {
+    connect: (ms, md, mp) => {
+      mapStateToProps = ms
+      mergeProps = mp
+      return () => ({})
+    },
+  },
+})
+
+describe('UserPreferencedCurrencyDisplay container', () => {
+  describe('mapStateToProps()', () => {
+    it('should return the correct props', () => {
+      const mockState = {
+        metamask: {
+          preferences: {
+            useETHAsPrimaryCurrency: true,
+          },
+        },
+      }
+
+      assert.deepEqual(mapStateToProps(mockState), {
+        useETHAsPrimaryCurrency: true,
+      })
+    })
+  })
+
+  describe('mergeProps()', () => {
+    it('should return the correct props', () => {
+      const mockDispatchProps = {}
+
+      const tests = [
+        {
+          stateProps: {
+            useETHAsPrimaryCurrency: true,
+          },
+          ownProps: {
+            type: 'PRIMARY',
+          },
+          result: {
+            currency: 'ETH',
+            numberOfDecimals: 6,
+            prefix: undefined,
+          },
+        },
+        {
+          stateProps: {
+            useETHAsPrimaryCurrency: false,
+          },
+          ownProps: {
+            type: 'PRIMARY',
+          },
+          result: {
+            currency: undefined,
+            numberOfDecimals: 2,
+            prefix: undefined,
+          },
+        },
+        {
+          stateProps: {
+            useETHAsPrimaryCurrency: true,
+          },
+          ownProps: {
+            type: 'SECONDARY',
+            fiatNumberOfDecimals: 4,
+            fiatPrefix: '-',
+          },
+          result: {
+            currency: undefined,
+            numberOfDecimals: 4,
+            prefix: '-',
+          },
+        },
+        {
+          stateProps: {
+            useETHAsPrimaryCurrency: false,
+          },
+          ownProps: {
+            type: 'SECONDARY',
+            fiatNumberOfDecimals: 4,
+            numberOfDecimals: 3,
+            fiatPrefix: 'a',
+            prefix: 'b',
+          },
+          result: {
+            currency: 'ETH',
+            numberOfDecimals: 3,
+            prefix: 'b',
+          },
+        },
+      ]
+
+      tests.forEach(({ stateProps, ownProps, result }) => {
+        assert.deepEqual(mergeProps({ ...stateProps }, mockDispatchProps, { ...ownProps }), {
+          ...result,
+        })
+      })
+    })
+  })
+})