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, 7 insertions, 20 deletions

diff --git a/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js b/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
index 8425e076e..e63db4a2d 100644
--- a/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
+++ b/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
@@ -6,7 +6,7 @@ import SendAmountRow from '../send-amount-row.component.js'
 
 import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
 import AmountMaxButton from '../amount-max-button/amount-max-button.container'
-import CurrencyDisplay from '../../../currency-display'
+import UserPreferencedTokenInput from '../../../../user-preferenced-token-input'
 
 const propsMethodSpies = {
   setMaxModeTo: sinon.spy(),
@@ -150,26 +150,19 @@ describe('SendAmountRow Component', function () {
       assert(wrapper.find(SendRowWrapper).childAt(0).is(AmountMaxButton))
     })
 
-    it('should render a CurrencyDisplay as the second child of the SendRowWrapper', () => {
-      assert(wrapper.find(SendRowWrapper).childAt(1).is(CurrencyDisplay))
+    it('should render a UserPreferencedTokenInput as the second child of the SendRowWrapper', () => {
+      console.log('HI', wrapper.find(SendRowWrapper).childAt(1))
+      assert(wrapper.find(SendRowWrapper).childAt(1).is(UserPreferencedTokenInput))
     })
 
-    it('should render the CurrencyDisplay with the correct props', () => {
+    it('should render the UserPreferencedTokenInput with the correct props', () => {
       const {
-        conversionRate,
-        convertedCurrency,
         onBlur,
         onChange,
-        inError,
-        primaryCurrency,
-        selectedToken,
+        error,
         value,
       } = wrapper.find(SendRowWrapper).childAt(1).props()
-      assert.equal(conversionRate, 'mockAmountConversionRate')
-      assert.equal(convertedCurrency, 'mockConvertedCurrency')
-      assert.equal(inError, false)
-      assert.equal(primaryCurrency, 'mockPrimaryCurrency')
-      assert.deepEqual(selectedToken, { address: 'mockTokenAddress' })
+      assert.equal(error, false)
       assert.equal(value, 'mockAmount')
       assert.equal(SendAmountRow.prototype.updateGas.callCount, 0)
       assert.equal(SendAmountRow.prototype.updateAmount.callCount, 0)
@@ -192,11 +185,5 @@ describe('SendAmountRow Component', function () {
         ['mockNewAmount']
       )
     })
-
-    it('should pass the default primaryCurrency to the CurrencyDisplay if primaryCurrency is falsy', () => {
-      wrapper.setProps({ primaryCurrency: null })
-      const { primaryCurrency } = wrapper.find(SendRowWrapper).childAt(1).props()
-      assert.equal(primaryCurrency, 'ETH')
-    })
   })
 })