m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +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 [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" />

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

@ -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(