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, 129 insertions, 0 deletions

diff --git a/ui/app/components/token-input/tests/token-input.container.test.js b/ui/app/components/token-input/tests/token-input.container.test.js
new file mode 100644
index 00000000..d73bc9a9
--- /dev/null
+++ b/ui/app/components/token-input/tests/token-input.container.test.js
@@ -0,0 +1,129 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+let mapStateToProps, mergeProps
+
+proxyquire('../token-input.container.js', {
+  'react-redux': {
+    connect: (ms, md, mp) => {
+      mapStateToProps = ms
+      mergeProps = mp
+      return () => ({})
+    },
+  },
+})
+
+describe('TokenInput container', () => {
+  describe('mapStateToProps()', () => {
+    it('should return the correct props when send is empty', () => {
+      const mockState = {
+        metamask: {
+          currentCurrency: 'usd',
+          tokens: [
+            {
+              address: '0x1',
+              decimals: '4',
+              symbol: 'ABC',
+            },
+          ],
+          selectedTokenAddress: '0x1',
+          contractExchangeRates: {},
+          send: {},
+        },
+      }
+
+      assert.deepEqual(mapStateToProps(mockState), {
+        currentCurrency: 'usd',
+        selectedToken: {
+          address: '0x1',
+          decimals: '4',
+          symbol: 'ABC',
+        },
+        selectedTokenExchangeRate: 0,
+      })
+    })
+
+    it('should return the correct props when selectedTokenAddress is not found and send is populated', () => {
+      const mockState = {
+        metamask: {
+          currentCurrency: 'usd',
+          tokens: [
+            {
+              address: '0x1',
+              decimals: '4',
+              symbol: 'ABC',
+            },
+          ],
+          selectedTokenAddress: '0x2',
+          contractExchangeRates: {},
+          send: {
+            token: { address: 'test' },
+          },
+        },
+      }
+
+      assert.deepEqual(mapStateToProps(mockState), {
+        currentCurrency: 'usd',
+        selectedToken: {
+          address: 'test',
+        },
+        selectedTokenExchangeRate: 0,
+      })
+    })
+
+    it('should return the correct props when contractExchangeRates is populated', () => {
+      const mockState = {
+        metamask: {
+          currentCurrency: 'usd',
+          tokens: [
+            {
+              address: '0x1',
+              decimals: '4',
+              symbol: 'ABC',
+            },
+          ],
+          selectedTokenAddress: '0x1',
+          contractExchangeRates: {
+            '0x1': 5,
+          },
+          send: {},
+        },
+      }
+
+      assert.deepEqual(mapStateToProps(mockState), {
+        currentCurrency: 'usd',
+        selectedToken: {
+          address: '0x1',
+          decimals: '4',
+          symbol: 'ABC',
+        },
+        selectedTokenExchangeRate: 5,
+      })
+    })
+  })
+
+  describe('mergeProps()', () => {
+    it('should return the correct props', () => {
+      const mockStateProps = {
+        currentCurrency: 'usd',
+        selectedToken: {
+          address: '0x1',
+          decimals: '4',
+          symbol: 'ABC',
+        },
+        selectedTokenExchangeRate: 5,
+      }
+
+      assert.deepEqual(mergeProps(mockStateProps, {}, {}), {
+        currentCurrency: 'usd',
+        selectedToken: {
+          address: '0x1',
+          decimals: '4',
+          symbol: 'ABC',
+        },
+        selectedTokenExchangeRate: 5,
+        suffix: 'ABC',
+      })
+    })
+  })
+})