mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
gas fee details displayed on UI should be used gas estimates if available (#13809)
This commit is contained in:
parent
b8fc1ae671
commit
6e8f4a6a76
ui
components/app
advanced-gas-fee-popover/advanced-gas-fee-inputs
gas-details-item
hooks/gasFeeInput
@ -60,24 +60,24 @@ describe('BaseFeeInput', () => {
|
||||
it('should renders advancedGasFee.baseFee value if current estimate used is not custom', () => {
|
||||
render({
|
||||
userFeeLevel: 'high',
|
||||
txParams: {
|
||||
maxFeePerGas: '0x2E90EDD000',
|
||||
},
|
||||
});
|
||||
expect(document.getElementsByTagName('input')[0]).toHaveValue(100);
|
||||
});
|
||||
|
||||
it('should not advancedGasFee.baseFee value for swaps', () => {
|
||||
it('should not use advancedGasFee.baseFee value for swaps', () => {
|
||||
render(
|
||||
{
|
||||
userFeeLevel: 'high',
|
||||
txParams: {
|
||||
maxFeePerGas: '0x2E90EDD000',
|
||||
},
|
||||
},
|
||||
{ editGasMode: EDIT_GAS_MODES.SWAPS },
|
||||
);
|
||||
expect(document.getElementsByTagName('input')[0]).toHaveValue(200);
|
||||
expect(document.getElementsByTagName('input')[0]).toHaveValue(
|
||||
parseInt(
|
||||
mockEstimates[GAS_ESTIMATE_TYPES.FEE_MARKET].gasFeeEstimates.high
|
||||
.suggestedMaxFeePerGas,
|
||||
10,
|
||||
),
|
||||
);
|
||||
});
|
||||
|
||||
it('should renders baseFee values from transaction if current estimate used is custom', () => {
|
||||
@ -89,19 +89,11 @@ describe('BaseFeeInput', () => {
|
||||
expect(document.getElementsByTagName('input')[0]).toHaveValue(200);
|
||||
});
|
||||
it('should show current value of estimatedBaseFee in subtext', () => {
|
||||
render({
|
||||
txParams: {
|
||||
maxFeePerGas: '0x174876E800',
|
||||
},
|
||||
});
|
||||
render();
|
||||
expect(screen.queryByText('50 GWEI')).toBeInTheDocument();
|
||||
});
|
||||
it('should show 12hr range value in subtext', () => {
|
||||
render({
|
||||
txParams: {
|
||||
maxFeePerGas: '0x174876E800',
|
||||
},
|
||||
});
|
||||
render();
|
||||
expect(screen.queryByText('50 - 100 GWEI')).toBeInTheDocument();
|
||||
});
|
||||
it('should show error if base fee is less than suggested low value', () => {
|
||||
@ -120,7 +112,6 @@ describe('BaseFeeInput', () => {
|
||||
target: { value: 50 },
|
||||
});
|
||||
});
|
||||
|
||||
it('should show error if base if is more than suggested high value', () => {
|
||||
render({
|
||||
txParams: {
|
||||
|
@ -60,26 +60,24 @@ describe('PriorityfeeInput', () => {
|
||||
it('should renders advancedGasFee.priorityfee value if current estimate used is not custom', () => {
|
||||
render({
|
||||
userFeeLevel: 'high',
|
||||
txParams: {
|
||||
maxFeePerGas: '0x2E90EDD000',
|
||||
},
|
||||
});
|
||||
expect(document.getElementsByTagName('input')[0]).toHaveValue(100);
|
||||
});
|
||||
|
||||
it('should not advancedGasFee.baseFee value for swaps', () => {
|
||||
it('should not use advancedGasFee.priorityfee value for swaps', () => {
|
||||
render(
|
||||
{
|
||||
userFeeLevel: 'high',
|
||||
txParams: {
|
||||
maxFeePerGas: '0x2E90EDD000',
|
||||
},
|
||||
},
|
||||
{ editGasMode: EDIT_GAS_MODES.SWAPS },
|
||||
);
|
||||
expect(document.getElementsByTagName('input')[0]).toHaveValue(200);
|
||||
expect(document.getElementsByTagName('input')[0]).toHaveValue(
|
||||
parseInt(
|
||||
mockEstimates[GAS_ESTIMATE_TYPES.FEE_MARKET].gasFeeEstimates.high
|
||||
.suggestedMaxPriorityFeePerGas,
|
||||
10,
|
||||
),
|
||||
);
|
||||
});
|
||||
|
||||
it('should renders priorityfee value from transaction if current estimate used is custom', () => {
|
||||
render({
|
||||
txParams: {
|
||||
@ -89,19 +87,11 @@ describe('PriorityfeeInput', () => {
|
||||
expect(document.getElementsByTagName('input')[0]).toHaveValue(2);
|
||||
});
|
||||
it('should show current priority fee range in subtext', () => {
|
||||
render({
|
||||
txParams: {
|
||||
maxFeePerGas: '0x174876E800',
|
||||
},
|
||||
});
|
||||
render();
|
||||
expect(screen.queryByText('1 - 20 GWEI')).toBeInTheDocument();
|
||||
});
|
||||
it('should show 12hr range value in subtext', () => {
|
||||
render({
|
||||
txParams: {
|
||||
maxFeePerGas: '0x174876E800',
|
||||
},
|
||||
});
|
||||
render();
|
||||
expect(screen.queryByText('2 - 125 GWEI')).toBeInTheDocument();
|
||||
});
|
||||
it('should show error if value entered is 0', () => {
|
||||
|
@ -5,7 +5,6 @@ import { useSelector } from 'react-redux';
|
||||
|
||||
import { COLORS } from '../../../helpers/constants/design-system';
|
||||
import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
|
||||
import { hexWEIToDecGWEI } from '../../../helpers/utils/conversions.util';
|
||||
import { getPreferences } from '../../../selectors';
|
||||
import { useGasFeeContext } from '../../../contexts/gasFee';
|
||||
|
||||
@ -23,7 +22,8 @@ const GasDetailsItem = ({ userAcknowledgedGasMissing = false }) => {
|
||||
hasSimulationError,
|
||||
maximumCostInHexWei: hexMaximumTransactionFee,
|
||||
minimumCostInHexWei: hexMinimumTransactionFee,
|
||||
transaction,
|
||||
maxPriorityFeePerGas,
|
||||
maxFeePerGas,
|
||||
} = useGasFeeContext();
|
||||
|
||||
const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
|
||||
@ -90,10 +90,8 @@ const GasDetailsItem = ({ userAcknowledgedGasMissing = false }) => {
|
||||
}
|
||||
subTitle={
|
||||
<GasTiming
|
||||
maxPriorityFeePerGas={hexWEIToDecGWEI(
|
||||
transaction.txParams.maxPriorityFeePerGas,
|
||||
)}
|
||||
maxFeePerGas={hexWEIToDecGWEI(transaction.txParams.maxFeePerGas)}
|
||||
maxPriorityFeePerGas={maxPriorityFeePerGas}
|
||||
maxFeePerGas={maxFeePerGas}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
@ -19,7 +19,10 @@ import { useCurrencyDisplay } from '../useCurrencyDisplay';
|
||||
import { useUserPreferencedCurrency } from '../useUserPreferencedCurrency';
|
||||
import { feeParamsAreCustom, getGasFeeEstimate } from './utils';
|
||||
|
||||
const getMaxFeePerGasFromTransaction = (transaction) => {
|
||||
const getMaxFeePerGasFromTransaction = (transaction, gasFeeEstimates) => {
|
||||
if (gasFeeEstimates?.[transaction?.userFeeLevel]) {
|
||||
return gasFeeEstimates[transaction.userFeeLevel].suggestedMaxFeePerGas;
|
||||
}
|
||||
const { maxFeePerGas, gasPrice } = transaction?.txParams || {};
|
||||
return Number(hexWEIToDecGWEI(maxFeePerGas || gasPrice));
|
||||
};
|
||||
@ -64,7 +67,7 @@ export function useMaxFeePerGasInput({
|
||||
const showFiat = useSelector(getShouldShowFiat);
|
||||
|
||||
const initialMaxFeePerGas = supportsEIP1559
|
||||
? getMaxFeePerGasFromTransaction(transaction)
|
||||
? getMaxFeePerGasFromTransaction(transaction, gasFeeEstimates)
|
||||
: 0;
|
||||
|
||||
// This hook keeps track of a few pieces of transitional state. It is
|
||||
|
@ -16,7 +16,14 @@ import { useCurrencyDisplay } from '../useCurrencyDisplay';
|
||||
import { useUserPreferencedCurrency } from '../useUserPreferencedCurrency';
|
||||
import { feeParamsAreCustom, getGasFeeEstimate } from './utils';
|
||||
|
||||
const getMaxPriorityFeePerGasFromTransaction = (transaction) => {
|
||||
const getMaxPriorityFeePerGasFromTransaction = (
|
||||
transaction,
|
||||
gasFeeEstimates,
|
||||
) => {
|
||||
if (gasFeeEstimates?.[transaction?.userFeeLevel]) {
|
||||
return gasFeeEstimates[transaction.userFeeLevel]
|
||||
.suggestedMaxPriorityFeePerGas;
|
||||
}
|
||||
const { maxPriorityFeePerGas, maxFeePerGas, gasPrice } =
|
||||
transaction?.txParams || {};
|
||||
return Number(
|
||||
@ -64,7 +71,7 @@ export function useMaxPriorityFeePerGasInput({
|
||||
const showFiat = useSelector(getShouldShowFiat);
|
||||
|
||||
const initialMaxPriorityFeePerGas = supportsEIP1559
|
||||
? getMaxPriorityFeePerGasFromTransaction(transaction)
|
||||
? getMaxPriorityFeePerGasFromTransaction(transaction, gasFeeEstimates)
|
||||
: 0;
|
||||
|
||||
const [maxPriorityFeePerGas, setMaxPriorityFeePerGas] = useState(() => {
|
||||
|
Loading…
Reference in New Issue
Block a user