Fix switching between ETH and USD (#13827)

ui/components/app/currency-input/currency-input.js

@@ -44,17 +44,11 @@ export default function CurrencyInput({
 
   const [isSwapped, setSwapped] = useState(false);
   const [newHexValue, setNewHexValue] = useState(hexValue);
-
-  const shouldUseFiat = () => {
-    if (hideSecondary) {
-      return false;
-    }
-
-    return Boolean(featureSecondary);
-  };
+  const [shouldDisplayFiat, setShouldDisplayFiat] = useState(featureSecondary);
+  const shouldUseFiat = hideSecondary ? false : Boolean(shouldDisplayFiat);
 
   const getDecimalValue = () => {
-    const decimalValueString = shouldUseFiat()
+    const decimalValueString = shouldUseFiat
       ? getValueFromWeiHex({
           value: hexValue,
           toCurrency: secondaryCurrency,
@@ -71,22 +65,15 @@ export default function CurrencyInput({
   };
 
   const initialDecimalValue = hexValue ? getDecimalValue() : 0;
-  const [decimalValue, setDecimalValue] = useState(initialDecimalValue);
-
-  useEffect(() => {
-    setNewHexValue(hexValue);
-    const newDecimalValue = getDecimalValue();
-    setDecimalValue(newDecimalValue);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hexValue]);
 
   const swap = async () => {
     await onPreferenceToggle();
     setSwapped(!isSwapped);
+    setShouldDisplayFiat(!shouldDisplayFiat);
   };
 
   const handleChange = (newDecimalValue) => {
-    const hexValueNew = shouldUseFiat()
+    const hexValueNew = shouldUseFiat
       ? getWeiHexFromDecimalValue({
           value: newDecimalValue,
           fromCurrency: secondaryCurrency,
@@ -101,17 +88,20 @@ export default function CurrencyInput({
         });
 
     setNewHexValue(hexValueNew);
-    setDecimalValue(newDecimalValue);
     onChange(hexValueNew);
     setSwapped(!isSwapped);
   };
 
   useEffect(() => {
-    if (isSwapped) {
-      handleChange(decimalValue);
+    setNewHexValue(hexValue);
+  }, [hexValue]);
+
+  useEffect(() => {
+    if (featureSecondary) {
+      handleChange(initialDecimalValue);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSwapped]);
+  }, [featureSecondary, initialDecimalValue]);
 
   const renderConversionComponent = () => {
     let currency, numberOfDecimals;
@@ -124,7 +114,7 @@ export default function CurrencyInput({
       );
     }
 
-    if (shouldUseFiat()) {
+    if (shouldUseFiat) {
       // Display ETH
       currency = preferredCurrency || ETH;
       numberOfDecimals = 8;
@@ -156,9 +146,9 @@ export default function CurrencyInput({
         onChange,
         onPreferenceToggle,
       }}
-      suffix={shouldUseFiat() ? secondarySuffix : primarySuffix}
+      suffix={shouldUseFiat ? secondarySuffix : primarySuffix}
       onChange={handleChange}
-      value={decimalValue}
+      value={initialDecimalValue}
       actionComponent={
         <button className="currency-input__swap-component" onClick={swap}>
           <i className="fa fa-retweet fa-lg" />

ui/components/app/currency-input/currency-input.test.js

@@ -109,10 +109,15 @@ describe('CurrencyInput Component', () => {
         },
       };
       const store = configureMockStore()(mockStore);
+      const handleChangeSpy = sinon.spy();
 
       const wrapper = mount(
         <Provider store={store}>
-          <CurrencyInput hexValue="f602f2234d0ea" featureSecondary />
+          <CurrencyInput
+            onChange={handleChangeSpy}
+            hexValue="f602f2234d0ea"
+            featureSecondary
+          />
         </Provider>,
       );
 
@@ -140,12 +145,16 @@ describe('CurrencyInput Component', () => {
         },
         hideSecondary: true,
       };
-
       const store = configureMockStore()(mockStore);
+      const handleChangeSpy = sinon.spy();
 
       const wrapper = mount(
         <Provider store={store}>
-          <CurrencyInput hexValue="f602f2234d0ea" featureSecondary />
+          <CurrencyInput
+            onChange={handleChangeSpy}
+            hexValue="f602f2234d0ea"
+            featureSecondary
+          />
         </Provider>,
         {
           context: { t: (str) => `${str}_t` },
@@ -205,7 +214,7 @@ describe('CurrencyInput Component', () => {
       expect(input.props().value).toStrictEqual(0.00432788);
 
       input.simulate('change', { target: { value: 1 } });
-      expect(handleChangeSpy.callCount).toStrictEqual(2);
+      expect(handleChangeSpy.callCount).toStrictEqual(1);
       expect(handleChangeSpy.calledWith('de0b6b3a7640000')).toStrictEqual(true);
       expect(wrapper.find('.currency-display-component').text()).toStrictEqual(
         '$231.06USD',
@@ -234,7 +243,7 @@ describe('CurrencyInput Component', () => {
       );
 
       expect(wrapper).toHaveLength(1);
-      expect(handleChangeSpy.callCount).toStrictEqual(0);
+      expect(handleChangeSpy.callCount).toStrictEqual(1);
       expect(handleBlurSpy.callCount).toStrictEqual(0);
 
       expect(wrapper.find('.currency-display-component').text()).toStrictEqual(
@@ -307,7 +316,7 @@ describe('CurrencyInput Component', () => {
       );
 
       expect(wrapper).toHaveLength(1);
-      expect(handleChangeSpy.callCount).toStrictEqual(0);
+      expect(handleChangeSpy.callCount).toStrictEqual(1);
       expect(handleBlurSpy.callCount).toStrictEqual(0);
 
       expect(wrapper.find('.currency-display-component').text()).toStrictEqual(