mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 19:26:13 +02:00
Fix for checkbox on advance gas fee modal (#13366)
This commit is contained in:
parent
5579061cfa
commit
d25f0e5817
@ -1,4 +1,4 @@
|
|||||||
import React from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { useSelector, useDispatch } from 'react-redux';
|
import { useSelector, useDispatch } from 'react-redux';
|
||||||
|
|
||||||
import Box from '../../../ui/box';
|
import Box from '../../../ui/box';
|
||||||
@ -19,7 +19,6 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
|
|||||||
const AdvancedGasFeeDefaults = () => {
|
const AdvancedGasFeeDefaults = () => {
|
||||||
const t = useI18nContext();
|
const t = useI18nContext();
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
hasErrors,
|
hasErrors,
|
||||||
maxBaseFee,
|
maxBaseFee,
|
||||||
@ -27,25 +26,34 @@ const AdvancedGasFeeDefaults = () => {
|
|||||||
} = useAdvancedGasFeePopoverContext();
|
} = useAdvancedGasFeePopoverContext();
|
||||||
const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues);
|
const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues);
|
||||||
|
|
||||||
const updateDefaultSettings = (value) => {
|
const [isDefaultSettingsSelected, setDefaultSettingsSelected] = useState(
|
||||||
if (value) {
|
Boolean(advancedGasFeeValues) &&
|
||||||
|
advancedGasFeeValues.maxBaseFee === maxBaseFee &&
|
||||||
|
advancedGasFeeValues.priorityFee === maxPriorityFeePerGas,
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setDefaultSettingsSelected(
|
||||||
|
Boolean(advancedGasFeeValues) &&
|
||||||
|
advancedGasFeeValues.maxBaseFee === maxBaseFee &&
|
||||||
|
advancedGasFeeValues.priorityFee === maxPriorityFeePerGas,
|
||||||
|
);
|
||||||
|
}, [advancedGasFeeValues, maxBaseFee, maxPriorityFeePerGas]);
|
||||||
|
|
||||||
|
const handleUpdateDefaultSettings = () => {
|
||||||
|
if (isDefaultSettingsSelected) {
|
||||||
|
dispatch(setAdvancedGasFee(null));
|
||||||
|
setDefaultSettingsSelected(false);
|
||||||
|
} else {
|
||||||
dispatch(
|
dispatch(
|
||||||
setAdvancedGasFee({
|
setAdvancedGasFee({
|
||||||
maxBaseFee,
|
maxBaseFee,
|
||||||
priorityFee: maxPriorityFeePerGas,
|
priorityFee: maxPriorityFeePerGas,
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
} else {
|
setDefaultSettingsSelected(true);
|
||||||
dispatch(setAdvancedGasFee(null));
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const isDefaultSettingsSelected =
|
|
||||||
Boolean(advancedGasFeeValues) &&
|
|
||||||
advancedGasFeeValues.maxBaseFee === maxBaseFee &&
|
|
||||||
advancedGasFeeValues.priorityFee === maxPriorityFeePerGas;
|
|
||||||
|
|
||||||
const handleUpdateDefaultSettings = () =>
|
|
||||||
updateDefaultSettings(!isDefaultSettingsSelected);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
@ -54,19 +62,21 @@ const AdvancedGasFeeDefaults = () => {
|
|||||||
marginRight={4}
|
marginRight={4}
|
||||||
className="advanced-gas-fee-defaults"
|
className="advanced-gas-fee-defaults"
|
||||||
>
|
>
|
||||||
<CheckBox
|
<label className="advanced-gas-fee-defaults__label">
|
||||||
checked={isDefaultSettingsSelected}
|
<CheckBox
|
||||||
className="advanced-gas-fee-defaults__checkbox"
|
checked={isDefaultSettingsSelected}
|
||||||
onClick={handleUpdateDefaultSettings}
|
className="advanced-gas-fee-defaults__checkbox"
|
||||||
disabled={hasErrors}
|
onClick={handleUpdateDefaultSettings}
|
||||||
/>
|
disabled={hasErrors}
|
||||||
<Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4} margin={0}>
|
/>
|
||||||
{!isDefaultSettingsSelected && Boolean(advancedGasFeeValues)
|
<Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4} margin={0}>
|
||||||
? t('advancedGasFeeDefaultOptIn', [
|
{!isDefaultSettingsSelected && Boolean(advancedGasFeeValues)
|
||||||
<strong key="default-value-change">{t('newValues')}</strong>,
|
? t('advancedGasFeeDefaultOptIn', [
|
||||||
])
|
<strong key="default-value-change">{t('newValues')}</strong>,
|
||||||
: t('advancedGasFeeDefaultOptOut')}
|
])
|
||||||
</Typography>
|
: t('advancedGasFeeDefaultOptOut')}
|
||||||
|
</Typography>
|
||||||
|
</label>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -5,6 +5,7 @@ import { GAS_ESTIMATE_TYPES } from '../../../../../shared/constants/gas';
|
|||||||
import { renderWithProvider } from '../../../../../test/lib/render-helpers';
|
import { renderWithProvider } from '../../../../../test/lib/render-helpers';
|
||||||
import mockEstimates from '../../../../../test/data/mock-estimates.json';
|
import mockEstimates from '../../../../../test/data/mock-estimates.json';
|
||||||
import mockState from '../../../../../test/data/mock-state.json';
|
import mockState from '../../../../../test/data/mock-state.json';
|
||||||
|
import * as Actions from '../../../../store/actions';
|
||||||
|
|
||||||
import { AdvancedGasFeePopoverContextProvider } from '../context';
|
import { AdvancedGasFeePopoverContextProvider } from '../context';
|
||||||
import { GasFeeContextProvider } from '../../../../contexts/gasFee';
|
import { GasFeeContextProvider } from '../../../../contexts/gasFee';
|
||||||
@ -20,6 +21,7 @@ jest.mock('../../../../store/actions', () => ({
|
|||||||
.mockImplementation(() => Promise.resolve()),
|
.mockImplementation(() => Promise.resolve()),
|
||||||
addPollingTokenToAppState: jest.fn(),
|
addPollingTokenToAppState: jest.fn(),
|
||||||
removePollingTokenFromAppState: jest.fn(),
|
removePollingTokenFromAppState: jest.fn(),
|
||||||
|
setAdvancedGasFee: jest.fn(),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const render = (defaultGasParams) => {
|
const render = (defaultGasParams) => {
|
||||||
@ -125,4 +127,21 @@ describe('AdvancedGasFeeDefaults', () => {
|
|||||||
screen.queryByText('Save these as my default for "Advanced"'),
|
screen.queryByText('Save these as my default for "Advanced"'),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should call action setAdvancedGasFee when checkbox or label text is clicked', () => {
|
||||||
|
render({
|
||||||
|
advancedGasFee: { maxBaseFee: 50, priorityFee: 2 },
|
||||||
|
});
|
||||||
|
const mock = jest
|
||||||
|
.spyOn(Actions, 'setAdvancedGasFee')
|
||||||
|
.mockReturnValue({ type: 'test' });
|
||||||
|
const checkboxLabel = screen.queryByText(
|
||||||
|
'Always use these values and advanced setting as default.',
|
||||||
|
);
|
||||||
|
fireEvent.click(checkboxLabel);
|
||||||
|
expect(mock).toHaveBeenCalledTimes(1);
|
||||||
|
const checkbox = document.querySelector('input[type=checkbox]');
|
||||||
|
fireEvent.click(checkbox);
|
||||||
|
expect(mock).toHaveBeenCalledTimes(2);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@ -3,4 +3,8 @@
|
|||||||
font-size: $font-size-h4;
|
font-size: $font-size-h4;
|
||||||
margin: 0 8px 0 8px;
|
margin: 0 8px 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__label {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user