m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Fix switching between ETH and USD (#13827)

Browse Source
This commit is contained in:
VSaric 2022-06-06 15:11:14 +02:00 committed by GitHub
parent 250b3d5499
commit 914cdd5fa5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
ui/components/app/currency-input/currency-input.js
View File

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

21
ui/components/app/currency-input/currency-input.test.js
View File

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