EIP-1559 V2: Adding default settings to advanced gas modal (#12911)
Niranjana Binoy
3 years ago
committed by
GitHub
parent
3a11800cb1
commit
8c77e37d2a
@ -0,0 +1,80 @@ |
||||
import React from 'react'; |
||||
import { useSelector, useDispatch } from 'react-redux'; |
||||
|
||||
import Box from '../../../ui/box'; |
||||
import Typography from '../../../ui/typography'; |
||||
import CheckBox from '../../../ui/check-box'; |
||||
import I18nValue from '../../../ui/i18n-value'; |
||||
import { |
||||
COLORS, |
||||
DISPLAY, |
||||
FLEX_DIRECTION, |
||||
TYPOGRAPHY, |
||||
} from '../../../../helpers/constants/design-system'; |
||||
import { getAdvancedGasFeeValues } from '../../../../selectors'; |
||||
import { setAdvancedGasFee } from '../../../../store/actions'; |
||||
|
||||
import { useAdvancedGasFeePopoverContext } from '../context'; |
||||
import { useI18nContext } from '../../../../hooks/useI18nContext'; |
||||
|
||||
const AdvancedGasFeeDefaults = () => { |
||||
const t = useI18nContext(); |
||||
const dispatch = useDispatch(); |
||||
|
||||
const { |
||||
hasErrors, |
||||
baseFeeMultiplier, |
||||
maxPriorityFeePerGas, |
||||
} = useAdvancedGasFeePopoverContext(); |
||||
const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues); |
||||
|
||||
const updateDefaultSettings = (value) => { |
||||
if (value) { |
||||
dispatch( |
||||
setAdvancedGasFee({ |
||||
maxBaseFee: baseFeeMultiplier, |
||||
priorityFee: maxPriorityFeePerGas, |
||||
}), |
||||
); |
||||
} else { |
||||
dispatch(setAdvancedGasFee(null)); |
||||
} |
||||
}; |
||||
const isDefaultSettingsSelected = |
||||
Boolean(advancedGasFeeValues) && |
||||
advancedGasFeeValues.maxBaseFee === baseFeeMultiplier && |
||||
advancedGasFeeValues.priorityFee === maxPriorityFeePerGas; |
||||
|
||||
const handleUpdateDefaultSettings = () => |
||||
updateDefaultSettings(!isDefaultSettingsSelected); |
||||
|
||||
return ( |
||||
<Box |
||||
display={DISPLAY.FLEX} |
||||
flexDirection={FLEX_DIRECTION.ROW} |
||||
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) ? ( |
||||
<I18nValue |
||||
messageKey="advancedGasFeeDefaultOptIn" |
||||
options={[ |
||||
<strong key="default-value-change">{t('newValues')}</strong>, |
||||
]} |
||||
/> |
||||
) : ( |
||||
<I18nValue messageKey="advancedGasFeeDefaultOptOut" /> |
||||
)} |
||||
</Typography> |
||||
</Box> |
||||
); |
||||
}; |
||||
|
||||
export default AdvancedGasFeeDefaults; |
||||
@ -0,0 +1,132 @@ |
||||
import React from 'react'; |
||||
import { fireEvent, screen } from '@testing-library/react'; |
||||
|
||||
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 { AdvancedGasFeePopoverContextProvider } from '../context'; |
||||
import { GasFeeContextProvider } from '../../../../contexts/gasFee'; |
||||
import configureStore from '../../../../store/store'; |
||||
|
||||
import AdvancedGasFeeInputs from '../advanced-gas-fee-inputs'; |
||||
import AdvancedGasFeeDefaults from './advanced-gas-fee-defaults'; |
||||
|
||||
jest.mock('../../../../store/actions', () => ({ |
||||
disconnectGasFeeEstimatePoller: jest.fn(), |
||||
getGasFeeEstimatesAndStartPolling: jest |
||||
.fn() |
||||
.mockImplementation(() => Promise.resolve()), |
||||
addPollingTokenToAppState: jest.fn(), |
||||
removePollingTokenFromAppState: jest.fn(), |
||||
})); |
||||
|
||||
const render = (defaultGasParams) => { |
||||
const store = configureStore({ |
||||
metamask: { |
||||
...mockState.metamask, |
||||
...defaultGasParams, |
||||
accounts: { |
||||
[mockState.metamask.selectedAddress]: { |
||||
address: mockState.metamask.selectedAddress, |
||||
balance: '0x1F4', |
||||
}, |
||||
}, |
||||
featureFlags: { advancedInlineGas: true }, |
||||
gasFeeEstimates: |
||||
mockEstimates[GAS_ESTIMATE_TYPES.FEE_MARKET].gasFeeEstimates, |
||||
}, |
||||
}); |
||||
return renderWithProvider( |
||||
<GasFeeContextProvider |
||||
transaction={{ |
||||
userFeeLevel: 'custom', |
||||
txParams: { |
||||
maxFeePerGas: '0x174876E800', |
||||
maxPriorityFeePerGas: '0x77359400', |
||||
}, |
||||
}} |
||||
> |
||||
<AdvancedGasFeePopoverContextProvider> |
||||
<AdvancedGasFeeInputs /> |
||||
<AdvancedGasFeeDefaults /> |
||||
</AdvancedGasFeePopoverContextProvider> |
||||
</GasFeeContextProvider>, |
||||
store, |
||||
); |
||||
}; |
||||
describe('AdvancedGasFeeDefaults', () => { |
||||
it('should renders correct message when the default is not set', () => { |
||||
render({ advancedGasFee: null }); |
||||
expect( |
||||
screen.queryByText( |
||||
'Always use these values and advanced setting as default.', |
||||
), |
||||
).toBeInTheDocument(); |
||||
}); |
||||
it('should renders correct message when the default values are set', () => { |
||||
render({ |
||||
advancedGasFee: { maxBaseFee: 2, priorityFee: 2 }, |
||||
}); |
||||
expect( |
||||
screen.queryByText( |
||||
'Always use these values and advanced setting as default.', |
||||
), |
||||
).toBeInTheDocument(); |
||||
}); |
||||
it('should renders correct message when checkbox is selected and default values are saved', () => { |
||||
render({ |
||||
advancedGasFee: null, |
||||
}); |
||||
expect( |
||||
screen.queryByText( |
||||
'Always use these values and advanced setting as default.', |
||||
), |
||||
).toBeInTheDocument(); |
||||
fireEvent.change(document.getElementsByTagName('input')[0], { |
||||
target: { value: 3 }, |
||||
}); |
||||
fireEvent.change(document.getElementsByTagName('input')[1], { |
||||
target: { value: 4 }, |
||||
}); |
||||
}); |
||||
it('should renders correct message when the default values are set and the maxBaseFee values are updated', () => { |
||||
render({ |
||||
advancedGasFee: { maxBaseFee: 2, priorityFee: 2 }, |
||||
}); |
||||
expect(document.getElementsByTagName('input')[2]).toBeChecked(); |
||||
expect( |
||||
screen.queryByText( |
||||
'Always use these values and advanced setting as default.', |
||||
), |
||||
).toBeInTheDocument(); |
||||
fireEvent.change(document.getElementsByTagName('input')[0], { |
||||
target: { value: 4 }, |
||||
}); |
||||
expect(document.getElementsByTagName('input')[0]).toHaveValue(4); |
||||
expect(screen.queryByText('new values')).toBeInTheDocument(); |
||||
expect( |
||||
screen.queryByText('Save these as my default for "Advanced"'), |
||||
).toBeInTheDocument(); |
||||
}); |
||||
it('should renders correct message when the default values are set and the priorityFee values are updated', () => { |
||||
render({ |
||||
advancedGasFee: { maxBaseFee: 2, priorityFee: 2 }, |
||||
}); |
||||
expect(document.getElementsByTagName('input')[2]).toBeChecked(); |
||||
expect( |
||||
screen.queryByText( |
||||
'Always use these values and advanced setting as default.', |
||||
), |
||||
).toBeInTheDocument(); |
||||
fireEvent.change(document.getElementsByTagName('input')[1], { |
||||
target: { value: 4 }, |
||||
}); |
||||
expect(document.getElementsByTagName('input')[1]).toHaveValue(4); |
||||
expect(screen.queryByText('new values')).toBeInTheDocument(); |
||||
expect( |
||||
screen.queryByText('Save these as my default for "Advanced"'), |
||||
).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1 @@ |
||||
export { default } from './advanced-gas-fee-defaults'; |
||||
@ -0,0 +1,6 @@ |
||||
.advanced-gas-fee-defaults { |
||||
& &__checkbox { |
||||
font-size: $font-size-h4; |
||||
margin: 0 8px 0 8px; |
||||
} |
||||
} |
||||
@ -1,14 +1,21 @@ |
||||
.advanced-gas-fee-popover { |
||||
&__wrapper { |
||||
border-top: 1px solid $ui-grey; |
||||
} |
||||
|
||||
&__separator { |
||||
border-top: 1px solid $ui-grey; |
||||
margin: 24px 0 16px 0; |
||||
margin: 16px 0; |
||||
} |
||||
|
||||
.form-field__heading-title > h6 { |
||||
font-size: $font-size-h7; |
||||
} |
||||
|
||||
.popover-header { |
||||
border-radius: 0; |
||||
border-top-left-radius: 10px; |
||||
border-top-right-radius: 10px; |
||||
border-bottom: 1px solid $ui-grey; |
||||
} |
||||
|
||||
.popover-footer { |
||||
border-top: none; |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue