Fix for checkbox on advance gas fee modal (#13366)

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
 import Box from '../../../ui/box';
@@ -19,7 +19,6 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
 const AdvancedGasFeeDefaults = () => {
   const t = useI18nContext();
   const dispatch = useDispatch();
-
   const {
     hasErrors,
     maxBaseFee,
@@ -27,25 +26,34 @@ const AdvancedGasFeeDefaults = () => {
   } = useAdvancedGasFeePopoverContext();
   const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues);
 
-  const updateDefaultSettings = (value) => {
-    if (value) {
+  const [isDefaultSettingsSelected, setDefaultSettingsSelected] = useState(
+    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(
         setAdvancedGasFee({
           maxBaseFee,
           priorityFee: maxPriorityFeePerGas,
         }),
       );
-    } else {
-      dispatch(setAdvancedGasFee(null));
+      setDefaultSettingsSelected(true);
     }
   };
-  const isDefaultSettingsSelected =
-    Boolean(advancedGasFeeValues) &&
-    advancedGasFeeValues.maxBaseFee === maxBaseFee &&
-    advancedGasFeeValues.priorityFee === maxPriorityFeePerGas;
-
-  const handleUpdateDefaultSettings = () =>
-    updateDefaultSettings(!isDefaultSettingsSelected);
 
   return (
     <Box
@@ -54,19 +62,21 @@ const AdvancedGasFeeDefaults = () => {
       marginRight={4}
       className="advanced-gas-fee-defaults"
     >
-      <CheckBox
-        checked={isDefaultSettingsSelected}
-        className="advanced-gas-fee-defaults__checkbox"
-        onClick={handleUpdateDefaultSettings}
-        disabled={hasErrors}
-      />
-      <Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4} margin={0}>
-        {!isDefaultSettingsSelected && Boolean(advancedGasFeeValues)
-          ? t('advancedGasFeeDefaultOptIn', [
-              <strong key="default-value-change">{t('newValues')}</strong>,
-            ])
-          : t('advancedGasFeeDefaultOptOut')}
-      </Typography>
+      <label className="advanced-gas-fee-defaults__label">
+        <CheckBox
+          checked={isDefaultSettingsSelected}
+          className="advanced-gas-fee-defaults__checkbox"
+          onClick={handleUpdateDefaultSettings}
+          disabled={hasErrors}
+        />
+        <Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4} margin={0}>
+          {!isDefaultSettingsSelected && Boolean(advancedGasFeeValues)
+            ? t('advancedGasFeeDefaultOptIn', [
+                <strong key="default-value-change">{t('newValues')}</strong>,
+              ])
+            : t('advancedGasFeeDefaultOptOut')}
+        </Typography>
+      </label>
     </Box>
   );
 };

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.test.js

@@ -5,6 +5,7 @@ import { GAS_ESTIMATE_TYPES } from '../../../../../shared/constants/gas';
 import { renderWithProvider } from '../../../../../test/lib/render-helpers';
 import mockEstimates from '../../../../../test/data/mock-estimates.json';
 import mockState from '../../../../../test/data/mock-state.json';
+import * as Actions from '../../../../store/actions';
 
 import { AdvancedGasFeePopoverContextProvider } from '../context';
 import { GasFeeContextProvider } from '../../../../contexts/gasFee';
@@ -20,6 +21,7 @@ jest.mock('../../../../store/actions', () => ({
     .mockImplementation(() => Promise.resolve()),
   addPollingTokenToAppState: jest.fn(),
   removePollingTokenFromAppState: jest.fn(),
+  setAdvancedGasFee: jest.fn(),
 }));
 
 const render = (defaultGasParams) => {
@@ -125,4 +127,21 @@ describe('AdvancedGasFeeDefaults', () => {
       screen.queryByText('Save these as my default for "Advanced"'),
     ).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);
+  });
 });

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/index.scss

@@ -3,4 +3,8 @@
     font-size: $font-size-h4;
     margin: 0 8px 0 8px;
   }
+
+  &__label {
+    display: flex;
+  }
 }