mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
EIP-1559 V2 UI fixes (#13222)
This commit is contained in:
parent
10dc686505
commit
0c531f8b01
@ -1730,15 +1730,6 @@
|
||||
"metametricsTitle": {
|
||||
"message": "Join 6M+ users to improve MetaMask"
|
||||
},
|
||||
"minimum": {
|
||||
"message": "minimum"
|
||||
},
|
||||
"minimumCancelSpeedupGasFee": {
|
||||
"message": "+10%"
|
||||
},
|
||||
"minimumEstimate": {
|
||||
"message": "10% Minimum"
|
||||
},
|
||||
"mismatchedChain": {
|
||||
"message": "The network details for this chain ID do not match our records. We recommend that you $1 before proceeding.",
|
||||
"description": "$1 is a clickable link with text defined by the 'mismatchedChainLinkText' key"
|
||||
@ -3113,6 +3104,9 @@
|
||||
"syncWithThreeBoxDisabled": {
|
||||
"message": "3Box has been disabled due to an error during the initial sync"
|
||||
},
|
||||
"tenPercentIncreased": {
|
||||
"message": "10% increase"
|
||||
},
|
||||
"terms": {
|
||||
"message": "Terms of Use"
|
||||
},
|
||||
|
@ -34,7 +34,7 @@ export const GAS_RECOMMENDATIONS = {
|
||||
* These represent types of gas estimation
|
||||
*/
|
||||
export const PRIORITY_LEVELS = {
|
||||
MINIMUM: 'minimum',
|
||||
TEN_PERCENT_INCREASED: 'tenPercentIncreased',
|
||||
LOW: 'low',
|
||||
MEDIUM: 'medium',
|
||||
HIGH: 'high',
|
||||
|
@ -10,7 +10,7 @@ import { useAdvancedGasFeePopoverContext } from '../context';
|
||||
import { decGWEIToHexWEI } from '../../../../../shared/modules/conversion.utils';
|
||||
|
||||
const AdvancedGasFeeSaveButton = () => {
|
||||
const { closeModal } = useTransactionModalContext();
|
||||
const { closeAllModals } = useTransactionModalContext();
|
||||
const { updateTransaction } = useGasFeeContext();
|
||||
const {
|
||||
gasLimit,
|
||||
@ -26,7 +26,7 @@ const AdvancedGasFeeSaveButton = () => {
|
||||
maxPriorityFeePerGas: decGWEIToHexWEI(maxPriorityFeePerGas),
|
||||
gasLimit,
|
||||
});
|
||||
closeModal('advancedGasFee');
|
||||
closeAllModals();
|
||||
};
|
||||
|
||||
return (
|
||||
|
@ -34,7 +34,7 @@ const CancelSpeedupPopover = () => {
|
||||
speedUpTransaction,
|
||||
transaction,
|
||||
updateTransaction,
|
||||
updateTransactionToMinimumGasFee,
|
||||
updateTransactionToTenPercentIncreasedGasFee,
|
||||
updateTransactionUsingEstimate,
|
||||
} = useGasFeeContext();
|
||||
const t = useI18nContext();
|
||||
@ -50,7 +50,7 @@ const CancelSpeedupPopover = () => {
|
||||
return;
|
||||
}
|
||||
// If gas used previously + 10% is less than medium estimated gas
|
||||
// estimate is set to medium, else estimate is set to minimum
|
||||
// estimate is set to medium, else estimate is set to tenPercentIncreased
|
||||
const gasUsedLessThanMedium =
|
||||
gasFeeEstimates &&
|
||||
gasEstimateGreaterThanGasUsedPlusTenPercent(
|
||||
@ -62,7 +62,7 @@ const CancelSpeedupPopover = () => {
|
||||
updateTransactionUsingEstimate(PRIORITY_LEVELS.MEDIUM);
|
||||
return;
|
||||
}
|
||||
updateTransactionToMinimumGasFee();
|
||||
updateTransactionToTenPercentIncreasedGasFee();
|
||||
}, [
|
||||
appIsLoading,
|
||||
currentModal,
|
||||
@ -70,7 +70,7 @@ const CancelSpeedupPopover = () => {
|
||||
gasFeeEstimates,
|
||||
transaction,
|
||||
updateTransaction,
|
||||
updateTransactionToMinimumGasFee,
|
||||
updateTransactionToTenPercentIncreasedGasFee,
|
||||
updateTransactionUsingEstimate,
|
||||
]);
|
||||
|
||||
|
@ -50,7 +50,7 @@ const render = (props) => {
|
||||
return renderWithProvider(
|
||||
<GasFeeContextProvider
|
||||
transaction={{
|
||||
userFeeLevel: 'minimum',
|
||||
userFeeLevel: 'tenPercentIncreased',
|
||||
txParams: {
|
||||
gas: '0x5208',
|
||||
maxFeePerGas: '0x59682f10',
|
||||
|
@ -41,9 +41,9 @@ export default function EditGasFeeButton({ userAcknowledgedGasMissing }) {
|
||||
) {
|
||||
icon = 'swapSuggested';
|
||||
title = 'swapSuggested';
|
||||
} else if (estimateUsed === PRIORITY_LEVELS.MINIMUM) {
|
||||
} else if (estimateUsed === PRIORITY_LEVELS.TEN_PERCENT_INCREASED) {
|
||||
icon = undefined;
|
||||
title = 'minimumEstimate';
|
||||
title = 'tenPercentIncreased';
|
||||
}
|
||||
|
||||
return (
|
||||
@ -64,7 +64,7 @@ export default function EditGasFeeButton({ userAcknowledgedGasMissing }) {
|
||||
<InfoTooltip
|
||||
contentText={
|
||||
<div className="edit-gas-fee-button__tooltip">
|
||||
<Typography variant={TYPOGRAPHY.H7} color={COLORS.GREY}>
|
||||
<Typography variant={TYPOGRAPHY.H7} color={COLORS.NEUTRAL_GREY}>
|
||||
{t('dappSuggestedTooltip', [transaction.origin])}
|
||||
</Typography>
|
||||
<Typography variant={TYPOGRAPHY.H7}>
|
||||
|
@ -73,9 +73,11 @@ describe('EditGasFeeButton', () => {
|
||||
expect(screen.queryByText('Aggressive')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render edit link with text 10% Minimum if minimum gas estimates are selected', () => {
|
||||
render({ contextProps: { transaction: { userFeeLevel: 'minimum' } } });
|
||||
expect(screen.queryByText('10% Minimum')).toBeInTheDocument();
|
||||
it('should render edit link with text 10% increase if tenPercentIncreased gas estimates are selected', () => {
|
||||
render({
|
||||
contextProps: { transaction: { userFeeLevel: 'tenPercentIncreased' } },
|
||||
});
|
||||
expect(screen.queryByText('10% increase')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render edit link with text Site suggested if site suggested estimated are used', () => {
|
||||
@ -111,7 +113,7 @@ describe('EditGasFeeButton', () => {
|
||||
transaction: {},
|
||||
},
|
||||
});
|
||||
expect(screen.queryByText('⚙')).toBeInTheDocument();
|
||||
expect(screen.queryByText('⚙️')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Advanced')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Edit')).toBeInTheDocument();
|
||||
});
|
||||
|
@ -67,7 +67,9 @@ const EditGasFeePopover = () => {
|
||||
</div>
|
||||
{(editGasMode === EDIT_GAS_MODES.CANCEL ||
|
||||
editGasMode === EDIT_GAS_MODES.SPEED_UP) && (
|
||||
<EditGasItem priorityLevel={PRIORITY_LEVELS.MINIMUM} />
|
||||
<EditGasItem
|
||||
priorityLevel={PRIORITY_LEVELS.TEN_PERCENT_INCREASED}
|
||||
/>
|
||||
)}
|
||||
{editGasMode === EDIT_GAS_MODES.MODIFY_IN_PLACE && (
|
||||
<EditGasItem priorityLevel={PRIORITY_LEVELS.LOW} />
|
||||
|
@ -85,7 +85,7 @@ describe('EditGasFeePopover', () => {
|
||||
expect(screen.queryByText('🦊')).toBeInTheDocument();
|
||||
expect(screen.queryByText('🦍')).toBeInTheDocument();
|
||||
expect(screen.queryByText('🌐')).toBeInTheDocument();
|
||||
expect(screen.queryByText('⚙')).toBeInTheDocument();
|
||||
expect(screen.queryByText('⚙️')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Low')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Market')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Aggressive')).toBeInTheDocument();
|
||||
@ -127,7 +127,7 @@ describe('EditGasFeePopover', () => {
|
||||
expect(screen.queryByText('🦍')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('🌐')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('🔄')).toBeInTheDocument();
|
||||
expect(screen.queryByText('⚙')).toBeInTheDocument();
|
||||
expect(screen.queryByText('⚙️')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Low')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Market')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Aggressive')).not.toBeInTheDocument();
|
||||
@ -173,17 +173,17 @@ describe('EditGasFeePopover', () => {
|
||||
expect(screen.queryByText('Low')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show minimum option for cancel gas mode', () => {
|
||||
it('should show tenPercentIncreased option for cancel gas mode', () => {
|
||||
render({
|
||||
contextProps: { editGasMode: EDIT_GAS_MODES.CANCEL },
|
||||
});
|
||||
expect(screen.queryByText('(minimum)')).toBeInTheDocument();
|
||||
expect(screen.queryByText('10% increase')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show minimum option for speedup gas mode', () => {
|
||||
it('should show tenPercentIncreased option for speedup gas mode', () => {
|
||||
render({
|
||||
contextProps: { editGasMode: EDIT_GAS_MODES.SPEED_UP },
|
||||
});
|
||||
expect(screen.queryByText('(minimum)')).toBeInTheDocument();
|
||||
expect(screen.queryByText('10% increase')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
@ -6,43 +6,34 @@ import {
|
||||
EDIT_GAS_MODES,
|
||||
PRIORITY_LEVELS,
|
||||
} from '../../../../../shared/constants/gas';
|
||||
import {
|
||||
ALIGN_ITEMS,
|
||||
DISPLAY,
|
||||
} from '../../../../helpers/constants/design-system';
|
||||
import { PRIORITY_LEVEL_ICON_MAP } from '../../../../helpers/constants/gas';
|
||||
import { PRIMARY } from '../../../../helpers/constants/common';
|
||||
import { toHumanReadableTime } from '../../../../helpers/utils/util';
|
||||
import { useGasFeeContext } from '../../../../contexts/gasFee';
|
||||
import { useI18nContext } from '../../../../hooks/useI18nContext';
|
||||
import { useTransactionModalContext } from '../../../../contexts/transaction-modal';
|
||||
import Box from '../../../ui/box';
|
||||
import EditGasToolTip from '../edit-gas-tooltip/edit-gas-tooltip';
|
||||
import I18nValue from '../../../ui/i18n-value';
|
||||
import InfoTooltip from '../../../ui/info-tooltip';
|
||||
import LoadingHeartBeat from '../../../ui/loading-heartbeat';
|
||||
import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display';
|
||||
|
||||
import { useGasItemFeeDetails } from './useGasItemFeeDetails';
|
||||
|
||||
const getTitleAndIcon = (priorityLevel, t, editGasMode) => {
|
||||
const getTitleAndIcon = (priorityLevel, editGasMode) => {
|
||||
let icon = priorityLevel;
|
||||
let title = t(priorityLevel);
|
||||
let title = priorityLevel;
|
||||
if (priorityLevel === PRIORITY_LEVELS.DAPP_SUGGESTED) {
|
||||
title = t('dappSuggestedShortLabel');
|
||||
} else if (priorityLevel === PRIORITY_LEVELS.MINIMUM) {
|
||||
title = 'dappSuggestedShortLabel';
|
||||
} else if (priorityLevel === PRIORITY_LEVELS.TEN_PERCENT_INCREASED) {
|
||||
icon = null;
|
||||
title = (
|
||||
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.CENTER}>
|
||||
{t('minimumCancelSpeedupGasFee')}
|
||||
<span className="edit-gas-item__name__sufix">({t('minimum')})</span>
|
||||
</Box>
|
||||
);
|
||||
title = 'tenPercentIncreased';
|
||||
} else if (
|
||||
priorityLevel === PRIORITY_LEVELS.HIGH &&
|
||||
editGasMode === EDIT_GAS_MODES.SWAPS
|
||||
) {
|
||||
icon = 'swapSuggested';
|
||||
title = t('swapSuggested');
|
||||
title = 'swapSuggested';
|
||||
}
|
||||
return { title, icon };
|
||||
};
|
||||
@ -52,7 +43,7 @@ const EditGasItem = ({ priorityLevel }) => {
|
||||
editGasMode,
|
||||
estimateUsed,
|
||||
gasLimit,
|
||||
updateTransactionToMinimumGasFee,
|
||||
updateTransactionToTenPercentIncreasedGasFee,
|
||||
updateTransactionUsingDAPPSuggestedValues,
|
||||
updateTransactionUsingEstimate,
|
||||
transaction,
|
||||
@ -84,8 +75,8 @@ const EditGasItem = ({ priorityLevel }) => {
|
||||
} else {
|
||||
closeModal('editGasFee');
|
||||
|
||||
if (priorityLevel === PRIORITY_LEVELS.MINIMUM) {
|
||||
updateTransactionToMinimumGasFee();
|
||||
if (priorityLevel === PRIORITY_LEVELS.TEN_PERCENT_INCREASED) {
|
||||
updateTransactionToTenPercentIncreasedGasFee();
|
||||
} else if (priorityLevel === PRIORITY_LEVELS.DAPP_SUGGESTED) {
|
||||
updateTransactionUsingDAPPSuggestedValues();
|
||||
} else {
|
||||
@ -94,7 +85,7 @@ const EditGasItem = ({ priorityLevel }) => {
|
||||
}
|
||||
};
|
||||
|
||||
const { title, icon } = getTitleAndIcon(priorityLevel, t, editGasMode);
|
||||
const { title, icon } = getTitleAndIcon(priorityLevel, editGasMode);
|
||||
|
||||
return (
|
||||
<button
|
||||
@ -115,7 +106,7 @@ const EditGasItem = ({ priorityLevel }) => {
|
||||
{PRIORITY_LEVEL_ICON_MAP[icon]}
|
||||
</span>
|
||||
)}
|
||||
{title}
|
||||
<I18nValue messageKey={title} />
|
||||
</span>
|
||||
<span
|
||||
className={`edit-gas-item__time-estimate edit-gas-item__time-estimate-${priorityLevel}`}
|
||||
|
@ -158,7 +158,7 @@ describe('EditGasItem', () => {
|
||||
expect(
|
||||
screen.queryByRole('button', { name: 'custom' }),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.queryByText('⚙')).toBeInTheDocument();
|
||||
expect(screen.queryByText('⚙️')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Advanced')).toBeInTheDocument();
|
||||
// below value of custom gas fee estimate is default obtained from state.metamask.advancedGasFee
|
||||
expect(screen.queryByTitle('0.001575 ETH')).toBeInTheDocument();
|
||||
@ -166,18 +166,17 @@ describe('EditGasItem', () => {
|
||||
|
||||
it('should renders +10% gas estimate option for priorityLevel minimum', () => {
|
||||
renderComponent({
|
||||
componentProps: { priorityLevel: 'minimum' },
|
||||
componentProps: { priorityLevel: 'tenPercentIncreased' },
|
||||
transactionProps: {
|
||||
userFeeLevel: 'minimum',
|
||||
userFeeLevel: 'tenPercentIncreased',
|
||||
previousGas: ESTIMATE_MOCK,
|
||||
},
|
||||
contextProps: { editGasMode: EDIT_GAS_MODES.CANCEL },
|
||||
});
|
||||
expect(
|
||||
screen.queryByRole('button', { name: 'minimum' }),
|
||||
screen.queryByRole('button', { name: 'tenPercentIncreased' }),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.queryByText('+10%')).toBeInTheDocument();
|
||||
expect(screen.queryByText('(minimum)')).toBeInTheDocument();
|
||||
expect(screen.queryByText('10% increase')).toBeInTheDocument();
|
||||
expect(screen.queryByTitle('0.00003465 ETH')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
@ -11,7 +11,7 @@
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
&:hover:not([disabled]) {
|
||||
background-color: var(--primary-2);
|
||||
}
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
margin-right: 4px;
|
||||
|
||||
&-custom {
|
||||
font-size: 32px;
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
@ -65,7 +65,7 @@ export const useGasItemFeeDetails = (priorityLevel) => {
|
||||
maxPriorityFeePerGas = advancedGasFeeValues.priorityFee;
|
||||
}
|
||||
} else if (
|
||||
priorityLevel === PRIORITY_LEVELS.MINIMUM &&
|
||||
priorityLevel === PRIORITY_LEVELS.TEN_PERCENT_INCREASED &&
|
||||
transaction.previousGas
|
||||
) {
|
||||
maxFeePerGas = hexWEIToDecGWEI(
|
||||
|
@ -7,6 +7,7 @@
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
&__separator {
|
||||
border-left: 1px solid var(--ui-2);
|
||||
|
@ -1,30 +1,20 @@
|
||||
import React from 'react';
|
||||
import { uniq } from 'lodash';
|
||||
import { toBigNumber } from '../../../../../../shared/modules/conversion.utils';
|
||||
import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../../helpers/utils/util';
|
||||
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(' - ');
|
||||
const formattedRange = uniq([
|
||||
roundToDecimalPlacesRemovingExtraZeroes(latestPriorityFeeRange[0], 1),
|
||||
roundToDecimalPlacesRemovingExtraZeroes(latestPriorityFeeRange[1], 0),
|
||||
]).join(' - ');
|
||||
return `${formattedRange} GWEI`;
|
||||
}
|
||||
return null;
|
||||
|
@ -17,11 +17,11 @@ const renderComponent = (gasFeeEstimates) => {
|
||||
};
|
||||
|
||||
describe('LatestPriorityFeeField', () => {
|
||||
it('should render a version of latest priority fee range pulled from context, rounded to 1 decimal place', () => {
|
||||
it('should render a version of latest priority fee range pulled from context, lower range rounded to 1 decimal place', () => {
|
||||
const { getByText } = renderComponent({
|
||||
latestPriorityFeeRange: ['1.000001668', '2.5634234'],
|
||||
});
|
||||
expect(getByText('1 - 2.6 GWEI')).toBeInTheDocument();
|
||||
expect(getByText('1 - 3 GWEI')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render nothing if gasFeeEstimates are empty', () => {
|
||||
|
@ -5,6 +5,7 @@ import {
|
||||
FONT_WEIGHT,
|
||||
TYPOGRAPHY,
|
||||
} from '../../../../helpers/constants/design-system';
|
||||
import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../helpers/utils/util';
|
||||
import { useGasFeeContext } from '../../../../contexts/gasFee';
|
||||
import I18nValue from '../../../ui/i18n-value';
|
||||
import Typography from '../../../ui/typography/typography';
|
||||
@ -31,7 +32,10 @@ const NetworkStatistics = () => {
|
||||
<span className="network-statistics__info__field-data">
|
||||
<BaseFeeTooltip>
|
||||
{gasFeeEstimates?.estimatedBaseFee &&
|
||||
`${gasFeeEstimates?.estimatedBaseFee} GWEI`}
|
||||
`${roundToDecimalPlacesRemovingExtraZeroes(
|
||||
gasFeeEstimates?.estimatedBaseFee,
|
||||
0,
|
||||
)} GWEI`}
|
||||
</BaseFeeTooltip>
|
||||
</span>
|
||||
<span className="network-statistics__info__field-label">
|
||||
|
@ -17,17 +17,17 @@ const renderComponent = (gasFeeEstimates) => {
|
||||
};
|
||||
|
||||
describe('NetworkStatistics', () => {
|
||||
it('should render the latest base fee', () => {
|
||||
it('should render the latest base fee without decimals', () => {
|
||||
const { getByText } = renderComponent({
|
||||
estimatedBaseFee: '50.0112',
|
||||
});
|
||||
expect(getByText('50.0112 GWEI')).toBeInTheDocument();
|
||||
expect(getByText('50 GWEI')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render the latest priority fee range', () => {
|
||||
it('should render a version of latest priority fee range pulled from context, lower range rounded to 1 decimal place', () => {
|
||||
const { getByText } = renderComponent({
|
||||
latestPriorityFeeRange: ['1.000001668', '2.5634234'],
|
||||
});
|
||||
expect(getByText('1 - 2.6 GWEI')).toBeInTheDocument();
|
||||
expect(getByText('1 - 3 GWEI')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
@ -38,5 +38,5 @@ export const PRIORITY_LEVEL_ICON_MAP = {
|
||||
high: '🦍',
|
||||
dappSuggested: '🌐',
|
||||
swapSuggested: '🔄',
|
||||
custom: '⚙',
|
||||
custom: '⚙️',
|
||||
};
|
||||
|
@ -19,6 +19,7 @@ import {
|
||||
TRUNCATED_NAME_CHAR_LIMIT,
|
||||
TRUNCATED_ADDRESS_END_CHARS,
|
||||
} from '../../../shared/constants/labels';
|
||||
import { toBigNumber } from '../../../shared/modules/conversion.utils';
|
||||
|
||||
// formatData :: ( date: <Unix Timestamp> ) -> String
|
||||
export function formatDate(date, format = "M/d/y 'at' T") {
|
||||
@ -558,3 +559,12 @@ export function getAssetImageURL(image, ipfsGateway) {
|
||||
}
|
||||
return image;
|
||||
}
|
||||
|
||||
export function roundToDecimalPlacesRemovingExtraZeroes(
|
||||
numberish,
|
||||
numberOfDecimalPlaces,
|
||||
) {
|
||||
return toBigNumber.dec(
|
||||
toBigNumber.dec(numberish).toFixed(numberOfDecimalPlaces),
|
||||
);
|
||||
}
|
||||
|
@ -248,7 +248,7 @@ export function useGasFeeInputs(
|
||||
cancelTransaction,
|
||||
speedUpTransaction,
|
||||
updateTransaction,
|
||||
updateTransactionToMinimumGasFee,
|
||||
updateTransactionToTenPercentIncreasedGasFee,
|
||||
updateTransactionUsingDAPPSuggestedValues,
|
||||
updateTransactionUsingEstimate,
|
||||
} = useTransactionFunctions({
|
||||
@ -350,7 +350,7 @@ export function useGasFeeInputs(
|
||||
cancelTransaction,
|
||||
speedUpTransaction,
|
||||
updateTransaction,
|
||||
updateTransactionToMinimumGasFee,
|
||||
updateTransactionToTenPercentIncreasedGasFee,
|
||||
updateTransactionUsingDAPPSuggestedValues,
|
||||
updateTransactionUsingEstimate,
|
||||
};
|
||||
|
@ -70,23 +70,23 @@ describe('useMaxPriorityFeePerGasInput', () => {
|
||||
expect(mock).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('should invoke action updateTransaction with 10% increased fee when updateTransactionToMinimumGasFee callback is invoked', () => {
|
||||
it('should invoke action updateTransaction with 10% increased fee when updateTransactionToTenPercentIncreasedGasFee callback is invoked', () => {
|
||||
const mock = jest
|
||||
.spyOn(Actions, 'updateTransaction')
|
||||
.mockImplementation(() => ({ type: '' }));
|
||||
const { result } = renderUseTransactionFunctions();
|
||||
result.current.updateTransactionToMinimumGasFee();
|
||||
result.current.updateTransactionToTenPercentIncreasedGasFee();
|
||||
expect(mock).toHaveBeenCalledTimes(1);
|
||||
expect(mock).toHaveBeenCalledWith({
|
||||
txParams: {
|
||||
estimateSuggested: 'medium',
|
||||
estimateUsed: 'minimum',
|
||||
estimateUsed: 'tenPercentIncreased',
|
||||
gas: '5208',
|
||||
gasLimit: '5208',
|
||||
maxFeePerGas: '0x582c',
|
||||
maxPriorityFeePerGas: '0x582c',
|
||||
},
|
||||
userFeeLevel: 'minimum',
|
||||
userFeeLevel: 'tenPercentIncreased',
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -111,12 +111,12 @@ export const useTransactionFunctions = ({
|
||||
);
|
||||
}, [dispatch, estimatedBaseFee, transaction]);
|
||||
|
||||
const updateTransactionToMinimumGasFee = useCallback(() => {
|
||||
const updateTransactionToTenPercentIncreasedGasFee = useCallback(() => {
|
||||
const { gas: gasLimit, maxFeePerGas, maxPriorityFeePerGas } =
|
||||
transaction.previousGas || transaction.txParams;
|
||||
|
||||
updateTransaction({
|
||||
estimateUsed: PRIORITY_LEVELS.MINIMUM,
|
||||
estimateUsed: PRIORITY_LEVELS.TEN_PERCENT_INCREASED,
|
||||
gasLimit,
|
||||
maxFeePerGas: addTenPercentAndRound(maxFeePerGas),
|
||||
maxPriorityFeePerGas: addTenPercentAndRound(maxPriorityFeePerGas),
|
||||
@ -157,7 +157,7 @@ export const useTransactionFunctions = ({
|
||||
cancelTransaction,
|
||||
speedUpTransaction,
|
||||
updateTransaction,
|
||||
updateTransactionToMinimumGasFee,
|
||||
updateTransactionToTenPercentIncreasedGasFee,
|
||||
updateTransactionUsingDAPPSuggestedValues,
|
||||
updateTransactionUsingEstimate,
|
||||
};
|
||||
|
@ -26,6 +26,7 @@ import {
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { SECOND } from '../../../../shared/constants/time';
|
||||
import { ConfirmPageContainerWarning } from '../../../components/app/confirm-page-container/confirm-page-container-content';
|
||||
import GasDetailsItem from '../../../components/app/gas-details-item';
|
||||
import LedgerInstructionField from '../../../components/app/ledger-instruction-field';
|
||||
|
||||
export default class ConfirmApproveContent extends Component {
|
||||
@ -95,12 +96,16 @@ export default class ConfirmApproveContent extends Component {
|
||||
>
|
||||
{showHeader && (
|
||||
<div className="confirm-approve-content__card-header">
|
||||
<div className="confirm-approve-content__card-header__symbol">
|
||||
{symbol}
|
||||
</div>
|
||||
<div className="confirm-approve-content__card-header__title">
|
||||
{title}
|
||||
</div>
|
||||
{!supportsEIP1559V2 && (
|
||||
<>
|
||||
<div className="confirm-approve-content__card-header__symbol">
|
||||
{symbol}
|
||||
</div>
|
||||
<div className="confirm-approve-content__card-header__title">
|
||||
{title}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{showEdit && (!showAdvanceGasFeeOptions || !supportsEIP1559V2) && (
|
||||
<Box width={BLOCK_SIZES.ONE_SIXTH}>
|
||||
<Button
|
||||
@ -134,7 +139,11 @@ export default class ConfirmApproveContent extends Component {
|
||||
hexTransactionTotal,
|
||||
txData,
|
||||
isMultiLayerFeeNetwork,
|
||||
supportsEIP1559V2,
|
||||
} = this.props;
|
||||
if (!isMultiLayerFeeNetwork && supportsEIP1559V2) {
|
||||
return <GasDetailsItem />;
|
||||
}
|
||||
return (
|
||||
<div className="confirm-approve-content__transaction-details-content">
|
||||
{isMultiLayerFeeNetwork ? (
|
||||
|
@ -151,6 +151,7 @@
|
||||
margin-top: 20px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
justify-content: flex-end;
|
||||
|
||||
&__symbol {
|
||||
width: auto;
|
||||
|
Loading…
Reference in New Issue
Block a user