m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01:00
Code

Wire up priority fee range in new gas modal (#13044)

Browse Source 
Use the `priorityFeeRange` property which is now available in the gas
fee estimate data.
This commit is contained in:
Elliot Winkler 2021-12-17 16:00:25 -07:00 committed by GitHub
parent 7cd11a975c
commit d990cb5eeb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 93 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/components/app/edit-gas-fee-popover/network-statistics/latest-priority-fee-field/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './latest-priority-fee-field';

43
ui/components/app/edit-gas-fee-popover/network-statistics/latest-priority-fee-field/latest-priority-fee-field.js Normal file
View File

@ -0,0 +1,43 @@
import React from 'react';
import { uniq } from 'lodash';
import { toBigNumber } from '../../../../../../shared/modules/conversion.utils';
import { useGasFeeContext } from '../../../../../contexts/gasFee';
import I18nValue from '../../../../ui/i18n-value';
import { PriorityFeeTooltip } from '../tooltips';
function roundToDecimalPlacesRemovingExtraZeroes(
numberish,
numberOfDecimalPlaces,
) {
return toBigNumber.dec(
toBigNumber.dec(numberish).toFixed(numberOfDecimalPlaces),
);
}
export default function LatestPriorityFeeField() {
const { gasFeeEstimates } = useGasFeeContext();
const renderPriorityFeeRange = () => {
const { latestPriorityFeeRange } = gasFeeEstimates;
if (latestPriorityFeeRange) {
const formattedRange = uniq(
latestPriorityFeeRange.map((priorityFee) =>
roundToDecimalPlacesRemovingExtraZeroes(priorityFee, 1),
),
).join(' - ');
return `${formattedRange} GWEI`;
}
return null;
};
return (
<div className="network-statistics__info__field latest-priority-fee-field">
<span className="network-statistics__info__field-data">
<PriorityFeeTooltip>{renderPriorityFeeRange()}</PriorityFeeTooltip>
</span>
<span className="network-statistics__info__field-label">
<I18nValue messageKey="priorityFee" />
</span>
</div>
);
}

31
ui/components/app/edit-gas-fee-popover/network-statistics/latest-priority-fee-field/latest-priority-fee-field.test.js Normal file
View File

@ -0,0 +1,31 @@
import React from 'react';
import { renderWithProvider } from '../../../../../../test/jest';
import { GasFeeContext } from '../../../../../contexts/gasFee';
import configureStore from '../../../../../store/store';
import LatestPriorityFeeField from './latest-priority-fee-field';
const renderComponent = (gasFeeEstimates) => {
const store = configureStore({});
return renderWithProvider(
<GasFeeContext.Provider value={{ gasFeeEstimates }}>
<LatestPriorityFeeField />
</GasFeeContext.Provider>,
store,
);
};
describe('LatestPriorityFeeField', () => {
it('should render a version of latest priority fee range pulled from context, rounded to 1 decimal place', () => {
const { getByText } = renderComponent({
latestPriorityFeeRange: ['1.000001668', '2.5634234'],
});
expect(getByText('1 - 2.6 GWEI')).toBeInTheDocument();
});
it('should render nothing if gasFeeEstimates are empty', () => {
const { queryByText } = renderComponent({});
expect(queryByText('GWEI')).not.toBeInTheDocument();
});
});

12
ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js
View File

@ -9,7 +9,8 @@ import { useGasFeeContext } from '../../../../contexts/gasFee';
import I18nValue from '../../../ui/i18n-value';
import Typography from '../../../ui/typography/typography';
import { BaseFeeTooltip, PriorityFeeTooltip } from './tooltips';
import { BaseFeeTooltip } from './tooltips';
import LatestPriorityFeeField from './latest-priority-fee-field';
import StatusSlider from './status-slider';
const NetworkStatistics = () => {
@ -38,14 +39,7 @@ const NetworkStatistics = () => {
</span>
</div>
<div className="network-statistics__info__separator" />
<div className="network-statistics__info__field network-statistics__info__field--priority-fee">
<span className="network-statistics__info__field-data">
<PriorityFeeTooltip>0.5 - 22 GWEI</PriorityFeeTooltip>
</span>
<span className="network-statistics__info__field-label">
<I18nValue messageKey="priorityFee" />
</span>
</div>
<LatestPriorityFeeField />
<div className="network-statistics__info__separator" />
<div className="network-statistics__info__field">
<StatusSlider />

63
ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.test.js
View File

@ -1,66 +1,33 @@
import React from 'react';
import { screen } from '@testing-library/react';
import { renderWithProvider } from '../../../../../test/jest';
import { ETH } from '../../../../helpers/constants/common';
import { GasFeeContextProvider } from '../../../../contexts/gasFee';
import { GasFeeContext } from '../../../../contexts/gasFee';
import configureStore from '../../../../store/store';
import NetworkStatistics from './network-statistics';
jest.mock('../../../../store/actions', () => ({
disconnectGasFeeEstimatePoller: jest.fn(),
getGasFeeEstimatesAndStartPolling: jest
.fn()
.mockImplementation(() => Promise.resolve()),
addPollingTokenToAppState: jest.fn(),
getGasFeeTimeEstimate: jest
.fn()
.mockImplementation(() => Promise.resolve('unknown')),
}));
const MOCK_FEE_ESTIMATE = {
estimatedBaseFee: '50.0112',
};
const renderComponent = (props) => {
const store = configureStore({
metamask: {
nativeCurrency: ETH,
provider: {},
cachedBalances: {},
accounts: {
'0xAddress': {
address: '0xAddress',
balance: '0x176e5b6f173ebe66',
},
},
selectedAddress: '0xAddress',
featureFlags: { advancedInlineGas: true },
gasFeeEstimates: MOCK_FEE_ESTIMATE,
...props,
},
});
const renderComponent = (gasFeeEstimates) => {
const store = configureStore({});
return renderWithProvider(
<GasFeeContextProvider>
<GasFeeContext.Provider value={{ gasFeeEstimates }}>
<NetworkStatistics />
</GasFeeContextProvider>,
</GasFeeContext.Provider>,
store,
);
};
describe('NetworkStatistics', () => {
it('should renders labels', () => {
renderComponent();
expect(screen.queryByText('Base fee')).toBeInTheDocument();
expect(screen.queryByText('Priority fee')).toBeInTheDocument();
it('should render the latest base fee', () => {
const { getByText } = renderComponent({
estimatedBaseFee: '50.0112',
});
expect(getByText('50.0112 GWEI')).toBeInTheDocument();
});
it('should renders current base fee value', () => {
renderComponent();
expect(
screen.queryByText(`${MOCK_FEE_ESTIMATE.estimatedBaseFee} GWEI`),
).toBeInTheDocument();
it('should render the latest priority fee range', () => {
const { getByText } = renderComponent({
latestPriorityFeeRange: ['1.000001668', '2.5634234'],
});
expect(getByText('1 - 2.6 GWEI')).toBeInTheDocument();
});
});