using 1559 V2 for cancel speed up flows (#13019)
Jyoti Puri
3 years ago
committed by
GitHub
parent
dbfdf3b0eb
commit
f5dcd12293
@ -0,0 +1,30 @@ |
||||
import { useSelector } from 'react-redux'; |
||||
import PropTypes from 'prop-types'; |
||||
import React from 'react'; |
||||
|
||||
import { getAppIsLoading } from '../../../selectors'; |
||||
import Spinner from '../../ui/spinner'; |
||||
|
||||
const AppLoadingSpinner = ({ className }) => { |
||||
const appIsLoading = useSelector(getAppIsLoading); |
||||
|
||||
if (!appIsLoading) { |
||||
return null; |
||||
} |
||||
|
||||
return ( |
||||
<div |
||||
className={`${className} app-loading-spinner`} |
||||
role="alert" |
||||
aria-busy="true" |
||||
> |
||||
<Spinner color="#F7C06C" className="app-loading-spinner__inner" /> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
AppLoadingSpinner.propTypes = { |
||||
className: PropTypes.string, |
||||
}; |
||||
|
||||
export default AppLoadingSpinner; |
||||
@ -0,0 +1,27 @@ |
||||
import React from 'react'; |
||||
import { screen } from '@testing-library/react'; |
||||
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers'; |
||||
import configureStore from '../../../store/store'; |
||||
|
||||
import AppLoadingSpinner from './app-loading-spinner'; |
||||
|
||||
const render = (params) => { |
||||
const store = configureStore({ |
||||
...params, |
||||
}); |
||||
|
||||
return renderWithProvider(<AppLoadingSpinner />, store); |
||||
}; |
||||
|
||||
describe('AppLoadingSpinner', () => { |
||||
it('should return null if app state is not loading', () => { |
||||
render(); |
||||
expect(screen.queryByRole('alert')).not.toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('should show spinner if app state is loading', () => { |
||||
render({ appState: { isLoading: true } }); |
||||
expect(screen.queryByRole('alert')).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1 @@ |
||||
export { default } from './app-loading-spinner'; |
||||
@ -0,0 +1,13 @@ |
||||
.app-loading-spinner { |
||||
background-color: rgba(255, 255, 255, 0.75); |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
position: absolute; |
||||
height: 100%; |
||||
width: 100%; |
||||
|
||||
&__inner { |
||||
width: 50px; |
||||
} |
||||
} |
||||
@ -0,0 +1,159 @@ |
||||
import { useSelector } from 'react-redux'; |
||||
import React, { useEffect } from 'react'; |
||||
|
||||
import { |
||||
EDIT_GAS_MODES, |
||||
PRIORITY_LEVELS, |
||||
} from '../../../../shared/constants/gas'; |
||||
import { |
||||
ALIGN_ITEMS, |
||||
DISPLAY, |
||||
FLEX_DIRECTION, |
||||
TYPOGRAPHY, |
||||
} from '../../../helpers/constants/design-system'; |
||||
import { getAppIsLoading } from '../../../selectors'; |
||||
import { gasEstimateGreaterThanGasUsedPlusTenPercent } from '../../../helpers/utils/gas'; |
||||
import { useGasFeeContext } from '../../../contexts/gasFee'; |
||||
import { useI18nContext } from '../../../hooks/useI18nContext'; |
||||
import { useTransactionModalContext } from '../../../contexts/transaction-modal'; |
||||
import EditGasFeeButton from '../edit-gas-fee-button'; |
||||
import GasDetailsItem from '../gas-details-item'; |
||||
import Box from '../../ui/box'; |
||||
import Button from '../../ui/button'; |
||||
import I18nValue from '../../ui/i18n-value'; |
||||
import InfoTooltip from '../../ui/info-tooltip'; |
||||
import Popover from '../../ui/popover'; |
||||
import Typography from '../../ui/typography'; |
||||
import AppLoadingSpinner from '../app-loading-spinner'; |
||||
|
||||
const CancelSpeedupPopover = () => { |
||||
const { |
||||
cancelTransaction, |
||||
editGasMode, |
||||
gasFeeEstimates, |
||||
speedUpTransaction, |
||||
transaction, |
||||
updateTransaction, |
||||
updateTransactionToMinimumGasFee, |
||||
updateTransactionUsingEstimate, |
||||
} = useGasFeeContext(); |
||||
const t = useI18nContext(); |
||||
const { closeModal, currentModal } = useTransactionModalContext(); |
||||
const appIsLoading = useSelector(getAppIsLoading); |
||||
|
||||
useEffect(() => { |
||||
if ( |
||||
transaction.previousGas || |
||||
appIsLoading || |
||||
currentModal !== 'cancelSpeedUpTransaction' |
||||
) { |
||||
return; |
||||
} |
||||
// If gas used previously + 10% is less than medium estimated gas
|
||||
// estimate is set to medium, else estimate is set to minimum
|
||||
const gasUsedLessThanMedium = |
||||
gasFeeEstimates && |
||||
gasEstimateGreaterThanGasUsedPlusTenPercent( |
||||
transaction, |
||||
gasFeeEstimates, |
||||
PRIORITY_LEVELS.MEDIUM, |
||||
); |
||||
if (gasUsedLessThanMedium) { |
||||
updateTransactionUsingEstimate(PRIORITY_LEVELS.MEDIUM); |
||||
return; |
||||
} |
||||
updateTransactionToMinimumGasFee(); |
||||
}, [ |
||||
appIsLoading, |
||||
currentModal, |
||||
editGasMode, |
||||
gasFeeEstimates, |
||||
transaction, |
||||
updateTransaction, |
||||
updateTransactionToMinimumGasFee, |
||||
updateTransactionUsingEstimate, |
||||
]); |
||||
|
||||
if (currentModal !== 'cancelSpeedUpTransaction') { |
||||
return null; |
||||
} |
||||
|
||||
const submitTransactionChange = () => { |
||||
if (editGasMode === EDIT_GAS_MODES.CANCEL) { |
||||
cancelTransaction(); |
||||
} else { |
||||
speedUpTransaction(); |
||||
} |
||||
closeModal('cancelSpeedUpTransaction'); |
||||
}; |
||||
|
||||
return ( |
||||
<Popover |
||||
title={ |
||||
<> |
||||
{editGasMode === EDIT_GAS_MODES.CANCEL |
||||
? `❌${t('cancel')}` |
||||
: `🚀${t('speedUp')}`} |
||||
</> |
||||
} |
||||
onClose={() => closeModal('cancelSpeedUpTransaction')} |
||||
className="cancel-speedup-popover" |
||||
> |
||||
<AppLoadingSpinner className="cancel-speedup-popover__spinner" /> |
||||
<div className="cancel-speedup-popover__wrapper"> |
||||
<Typography |
||||
boxProps={{ alignItems: ALIGN_ITEMS.CENTER, display: DISPLAY.FLEX }} |
||||
variant={TYPOGRAPHY.H6} |
||||
margin={[0, 0, 2, 0]} |
||||
> |
||||
<I18nValue |
||||
messageKey="cancelSpeedUpLabel" |
||||
options={[ |
||||
<strong key="cancelSpeedupReplace"> |
||||
<I18nValue messageKey="replace" /> |
||||
</strong>, |
||||
]} |
||||
/> |
||||
<InfoTooltip |
||||
position="top" |
||||
contentText={ |
||||
<Box> |
||||
{t('cancelSpeedUpTransactionTooltip', [ |
||||
EDIT_GAS_MODES.CANCEL ? t('cancel') : t('speedUp'), |
||||
])} |
||||
<div> |
||||
<a |
||||
href="https://community.metamask.io/t/how-to-speed-up-or-cancel-transactions-on-metamask/3296" |
||||
target="_blank" |
||||
rel="noopener noreferrer" |
||||
> |
||||
{t('learnMoreUpperCase')} |
||||
</a> |
||||
</div> |
||||
</Box> |
||||
} |
||||
/> |
||||
</Typography> |
||||
<div className="cancel-speedup-popover__separator" /> |
||||
<Box |
||||
display={DISPLAY.FLEX} |
||||
alignItems={ALIGN_ITEMS.CENTER} |
||||
flexDirection={FLEX_DIRECTION.COLUMN} |
||||
marginTop={4} |
||||
> |
||||
<Box className="cancel-speedup-popover__edit-gas-button"> |
||||
<EditGasFeeButton /> |
||||
</Box> |
||||
<Box className="cancel-speedup-popover__gas-details"> |
||||
<GasDetailsItem /> |
||||
</Box> |
||||
</Box> |
||||
<Button type="primary" onClick={submitTransactionChange}> |
||||
<I18nValue messageKey="submit" /> |
||||
</Button> |
||||
</div> |
||||
</Popover> |
||||
); |
||||
}; |
||||
|
||||
export default CancelSpeedupPopover; |
||||
@ -0,0 +1,88 @@ |
||||
import React from 'react'; |
||||
import { act, screen } from '@testing-library/react'; |
||||
|
||||
import { |
||||
EDIT_GAS_MODES, |
||||
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 { GasFeeContextProvider } from '../../../contexts/gasFee'; |
||||
import configureStore from '../../../store/store'; |
||||
|
||||
import CancelSpeedupPopover from './cancel-speedup-popover'; |
||||
|
||||
jest.mock('../../../store/actions', () => ({ |
||||
disconnectGasFeeEstimatePoller: jest.fn(), |
||||
getGasFeeTimeEstimate: jest.fn().mockImplementation(() => Promise.resolve()), |
||||
getGasFeeEstimatesAndStartPolling: jest |
||||
.fn() |
||||
.mockImplementation(() => Promise.resolve()), |
||||
addPollingTokenToAppState: jest.fn(), |
||||
removePollingTokenFromAppState: jest.fn(), |
||||
updateTransaction: () => ({ type: 'UPDATE_TRANSACTION_PARAMS' }), |
||||
})); |
||||
|
||||
jest.mock('../../../contexts/transaction-modal', () => ({ |
||||
useTransactionModalContext: () => ({ |
||||
closeModal: () => undefined, |
||||
currentModal: 'cancelSpeedUpTransaction', |
||||
}), |
||||
})); |
||||
|
||||
const render = (props) => { |
||||
const store = configureStore({ |
||||
metamask: { |
||||
...mockState.metamask, |
||||
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: 'minimum', |
||||
txParams: { |
||||
gas: '0x5208', |
||||
maxFeePerGas: '0x59682f10', |
||||
maxPriorityFeePerGas: '0x59682f00', |
||||
}, |
||||
}} |
||||
editGasMode={EDIT_GAS_MODES.CANCEL} |
||||
{...props} |
||||
> |
||||
<CancelSpeedupPopover /> |
||||
</GasFeeContextProvider>, |
||||
store, |
||||
); |
||||
}; |
||||
|
||||
describe('CancelSpeedupPopover', () => { |
||||
it('should have ❌Cancel in header if editGasMode is cancel', async () => { |
||||
await act(async () => render()); |
||||
expect(screen.queryByText('❌Cancel')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('should have 🚀Speed Up in header if editGasMode is speedup', async () => { |
||||
await act(async () => render({ editGasMode: EDIT_GAS_MODES.SPEED_UP })); |
||||
expect(screen.queryByText('🚀Speed Up')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('should show correct gas values', async () => { |
||||
await act(async () => |
||||
render({ |
||||
editGasMode: EDIT_GAS_MODES.SPEED_UP, |
||||
}), |
||||
); |
||||
expect(screen.queryAllByTitle('0.0000315 ETH').length).toBeGreaterThan(0); |
||||
}); |
||||
}); |
||||
@ -0,0 +1 @@ |
||||
export { default } from './cancel-speedup-popover'; |
||||
@ -0,0 +1,27 @@ |
||||
.cancel-speedup-popover { |
||||
&__wrapper { |
||||
padding: 0 16px 16px; |
||||
|
||||
.info-tooltip { |
||||
margin-left: 4px; |
||||
} |
||||
} |
||||
|
||||
&__edit-gas-button { |
||||
align-self: flex-end; |
||||
} |
||||
|
||||
&__gas-details { |
||||
padding-top: 10px; |
||||
} |
||||
|
||||
&__spinner { |
||||
margin-top: -30px; |
||||
height: calc(100% + 30px); |
||||
} |
||||
|
||||
&__separator { |
||||
border-bottom: 1px solid $ui-grey; |
||||
width: 100%; |
||||
} |
||||
} |
||||
@ -0,0 +1,126 @@ |
||||
import { useEffect, useState } from 'react'; |
||||
import { useSelector } from 'react-redux'; |
||||
|
||||
import { |
||||
EDIT_GAS_MODES, |
||||
PRIORITY_LEVELS, |
||||
} from '../../../../../shared/constants/gas'; |
||||
import { getMaximumGasTotalInHexWei } from '../../../../../shared/modules/gas.utils'; |
||||
import { |
||||
decGWEIToHexWEI, |
||||
decimalToHex, |
||||
hexWEIToDecGWEI, |
||||
} from '../../../../helpers/utils/conversions.util'; |
||||
import { |
||||
addTenPercentAndRound, |
||||
gasEstimateGreaterThanGasUsedPlusTenPercent, |
||||
} from '../../../../helpers/utils/gas'; |
||||
import { getAdvancedGasFeeValues } from '../../../../selectors'; |
||||
import { useGasFeeContext } from '../../../../contexts/gasFee'; |
||||
import { useCustomTimeEstimate } from './useCustomTimeEstimate'; |
||||
|
||||
export const useGasItemFeeDetails = (priorityLevel) => { |
||||
const { |
||||
editGasMode, |
||||
estimateUsed, |
||||
gasFeeEstimates, |
||||
gasLimit, |
||||
maxFeePerGas: maxFeePerGasValue, |
||||
maxPriorityFeePerGas: maxPriorityFeePerGasValue, |
||||
transaction, |
||||
} = useGasFeeContext(); |
||||
const [estimateGreaterThanGasUse, setEstimateGreaterThanGasUse] = useState( |
||||
false, |
||||
); |
||||
const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues); |
||||
|
||||
let maxFeePerGas; |
||||
let maxPriorityFeePerGas; |
||||
let minWaitTime; |
||||
|
||||
const { dappSuggestedGasFees } = transaction; |
||||
|
||||
if (gasFeeEstimates?.[priorityLevel]) { |
||||
maxFeePerGas = gasFeeEstimates[priorityLevel].suggestedMaxFeePerGas; |
||||
maxPriorityFeePerGas = |
||||
gasFeeEstimates[priorityLevel].suggestedMaxPriorityFeePerGas; |
||||
} else if ( |
||||
priorityLevel === PRIORITY_LEVELS.DAPP_SUGGESTED && |
||||
dappSuggestedGasFees |
||||
) { |
||||
maxFeePerGas = hexWEIToDecGWEI( |
||||
dappSuggestedGasFees.maxFeePerGas || dappSuggestedGasFees.gasPrice, |
||||
); |
||||
maxPriorityFeePerGas = hexWEIToDecGWEI( |
||||
dappSuggestedGasFees.maxPriorityFeePerGas || maxFeePerGas, |
||||
); |
||||
} else if (priorityLevel === PRIORITY_LEVELS.CUSTOM) { |
||||
if (estimateUsed === PRIORITY_LEVELS.CUSTOM) { |
||||
maxFeePerGas = maxFeePerGasValue; |
||||
maxPriorityFeePerGas = maxPriorityFeePerGasValue; |
||||
} else if (advancedGasFeeValues) { |
||||
maxFeePerGas = |
||||
gasFeeEstimates.estimatedBaseFee * |
||||
parseFloat(advancedGasFeeValues.maxBaseFee); |
||||
maxPriorityFeePerGas = advancedGasFeeValues.priorityFee; |
||||
} |
||||
} else if ( |
||||
priorityLevel === PRIORITY_LEVELS.MINIMUM && |
||||
transaction.previousGas |
||||
) { |
||||
maxFeePerGas = hexWEIToDecGWEI( |
||||
addTenPercentAndRound(transaction.previousGas?.maxFeePerGas), |
||||
); |
||||
maxPriorityFeePerGas = hexWEIToDecGWEI( |
||||
addTenPercentAndRound(transaction.previousGas?.maxPriorityFeePerGas), |
||||
); |
||||
} |
||||
|
||||
const { waitTimeEstimate } = useCustomTimeEstimate({ |
||||
gasFeeEstimates, |
||||
maxFeePerGas, |
||||
maxPriorityFeePerGas, |
||||
}); |
||||
|
||||
if (gasFeeEstimates[priorityLevel]) { |
||||
minWaitTime = |
||||
priorityLevel === PRIORITY_LEVELS.HIGH |
||||
? gasFeeEstimates?.high.minWaitTimeEstimate |
||||
: gasFeeEstimates?.low.maxWaitTimeEstimate; |
||||
} else { |
||||
minWaitTime = waitTimeEstimate; |
||||
} |
||||
|
||||
const hexMaximumTransactionFee = maxFeePerGas |
||||
? getMaximumGasTotalInHexWei({ |
||||
gasLimit: decimalToHex(gasLimit), |
||||
maxFeePerGas: decGWEIToHexWEI(maxFeePerGas), |
||||
}) |
||||
: null; |
||||
|
||||
useEffect(() => { |
||||
// For cancel and speed-up medium / high option is disabled if
|
||||
// gas used in transaction + 10% is greater tham estimate
|
||||
if ( |
||||
(editGasMode === EDIT_GAS_MODES.CANCEL || |
||||
editGasMode === EDIT_GAS_MODES.SPEED_UP) && |
||||
(priorityLevel === PRIORITY_LEVELS.MEDIUM || |
||||
priorityLevel === PRIORITY_LEVELS.HIGH) |
||||
) { |
||||
const estimateGreater = !gasEstimateGreaterThanGasUsedPlusTenPercent( |
||||
transaction, |
||||
gasFeeEstimates, |
||||
priorityLevel, |
||||
); |
||||
setEstimateGreaterThanGasUse(estimateGreater); |
||||
} |
||||
}, [editGasMode, gasFeeEstimates, priorityLevel, transaction]); |
||||
|
||||
return { |
||||
estimateGreaterThanGasUse, |
||||
maxFeePerGas, |
||||
maxPriorityFeePerGas, |
||||
minWaitTime, |
||||
hexMaximumTransactionFee, |
||||
}; |
||||
}; |
||||
@ -0,0 +1,52 @@ |
||||
import BigNumber from 'bignumber.js'; |
||||
import { addHexPrefix } from 'ethereumjs-util'; |
||||
|
||||
import { multiplyCurrencies } from '../../../shared/modules/conversion.utils'; |
||||
import { bnGreaterThan } from './util'; |
||||
import { hexWEIToDecGWEI } from './conversions.util'; |
||||
|
||||
export const gasEstimateGreaterThanGasUsedPlusTenPercent = ( |
||||
transaction, |
||||
gasFeeEstimates, |
||||
estimate, |
||||
) => { |
||||
let { maxFeePerGas: maxFeePerGasInTransaction } = transaction.txParams; |
||||
maxFeePerGasInTransaction = new BigNumber( |
||||
hexWEIToDecGWEI(addTenPercentAndRound(maxFeePerGasInTransaction)), |
||||
); |
||||
|
||||
const maxFeePerGasFromEstimate = |
||||
gasFeeEstimates[estimate]?.suggestedMaxFeePerGas; |
||||
return bnGreaterThan(maxFeePerGasFromEstimate, maxFeePerGasInTransaction); |
||||
}; |
||||
|
||||
/** |
||||
* Simple helper to save on duplication to multiply the supplied wei hex string |
||||
* by 1.10 to get bare minimum new gas fee. |
||||
* |
||||
* @param {string | undefined} hexStringValue - hex value in wei to be incremented |
||||
* @returns {string | undefined} - hex value in WEI 10% higher than the param. |
||||
*/ |
||||
export function addTenPercent(hexStringValue, conversionOptions = {}) { |
||||
if (hexStringValue === undefined) return undefined; |
||||
return addHexPrefix( |
||||
multiplyCurrencies(hexStringValue, 1.1, { |
||||
toNumericBase: 'hex', |
||||
multiplicandBase: 16, |
||||
multiplierBase: 10, |
||||
numberOfDecimals: 0, |
||||
...conversionOptions, |
||||
}), |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Simple helper to save on duplication to multiply the supplied wei hex string |
||||
* by 1.10 to get bare minimum new gas fee. |
||||
* |
||||
* @param {string | undefined} hexStringValue - hex value in wei to be incremented |
||||
* @returns {string | undefined} - hex value in WEI 10% higher than the param. |
||||
*/ |
||||
export function addTenPercentAndRound(hexStringValue) { |
||||
return addTenPercent(hexStringValue, { numberOfDecimals: 0 }); |
||||
} |
||||
@ -0,0 +1,52 @@ |
||||
import { PRIORITY_LEVELS } from '../../../shared/constants/gas'; |
||||
|
||||
import { |
||||
addTenPercent, |
||||
gasEstimateGreaterThanGasUsedPlusTenPercent, |
||||
} from './gas'; |
||||
|
||||
describe('Gas utils', () => { |
||||
describe('gasEstimateGreaterThanGasUsedPlusTenPercent', () => { |
||||
const compareGas = (estimateValues) => { |
||||
return gasEstimateGreaterThanGasUsedPlusTenPercent( |
||||
{ |
||||
txParams: { |
||||
maxFeePerGas: '0x59682f10', |
||||
maxPriorityFeePerGas: '0x59682f00', |
||||
}, |
||||
}, |
||||
{ |
||||
medium: estimateValues, |
||||
}, |
||||
PRIORITY_LEVELS.MEDIUM, |
||||
); |
||||
}; |
||||
|
||||
it('should return true if gas used in transaction + 10% is greater that estimate', () => { |
||||
const result = compareGas({ |
||||
suggestedMaxPriorityFeePerGas: '7', |
||||
suggestedMaxFeePerGas: '70', |
||||
}); |
||||
expect(result).toStrictEqual(true); |
||||
}); |
||||
|
||||
it('should return false if gas used in transaction + 10% is less that estimate', () => { |
||||
const result = compareGas({ |
||||
suggestedMaxPriorityFeePerGas: '.5', |
||||
suggestedMaxFeePerGas: '1', |
||||
}); |
||||
expect(result).toStrictEqual(false); |
||||
}); |
||||
}); |
||||
|
||||
describe('addTenPercent', () => { |
||||
it('should add 10% to hex value passed', () => { |
||||
const result = addTenPercent('0x59682f00'); |
||||
expect(result).toStrictEqual('0x62590080'); |
||||
}); |
||||
it('should return undefined if undefined value is passed', () => { |
||||
const result = addTenPercent(undefined); |
||||
expect(result).toBeUndefined(); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,144 @@ |
||||
import React from 'react'; |
||||
import { Provider } from 'react-redux'; |
||||
import { renderHook } from '@testing-library/react-hooks'; |
||||
|
||||
import { |
||||
CUSTOM_GAS_ESTIMATE, |
||||
EDIT_GAS_MODES, |
||||
GAS_RECOMMENDATIONS, |
||||
} from '../../../shared/constants/gas'; |
||||
import mockState from '../../../test/data/mock-state.json'; |
||||
import * as Actions from '../../store/actions'; |
||||
import configureStore from '../../store/store'; |
||||
import { useGasFeeEstimates } from '../useGasFeeEstimates'; |
||||
import { FEE_MARKET_ESTIMATE_RETURN_VALUE } from './test-utils'; |
||||
import { useTransactionFunctions } from './useTransactionFunctions'; |
||||
|
||||
jest.mock('../useGasFeeEstimates', () => ({ |
||||
useGasFeeEstimates: jest.fn(), |
||||
})); |
||||
useGasFeeEstimates.mockImplementation(() => FEE_MARKET_ESTIMATE_RETURN_VALUE); |
||||
|
||||
jest.mock('../../selectors', () => ({ |
||||
checkNetworkAndAccountSupports1559: () => true, |
||||
})); |
||||
|
||||
const wrapper = ({ children }) => ( |
||||
<Provider store={configureStore(mockState)}>{children}</Provider> |
||||
); |
||||
|
||||
const renderUseTransactionFunctions = (props) => { |
||||
return renderHook( |
||||
() => |
||||
useTransactionFunctions({ |
||||
defaultEstimateToUse: GAS_RECOMMENDATIONS.MEDIUM, |
||||
editGasMode: EDIT_GAS_MODES.MODIFY_IN_PLACE, |
||||
estimatedBaseFee: '0x59682f10', |
||||
gasFeeEstimates: FEE_MARKET_ESTIMATE_RETURN_VALUE.gasFeeEstimates, |
||||
gasLimit: '21000', |
||||
maxPriorityFeePerGas: '0x59682f10', |
||||
transaction: { |
||||
userFeeLevel: CUSTOM_GAS_ESTIMATE, |
||||
txParams: { maxFeePerGas: '0x5028', maxPriorityFeePerGas: '0x5028' }, |
||||
}, |
||||
...props, |
||||
}), |
||||
{ wrapper }, |
||||
); |
||||
}; |
||||
|
||||
describe('useMaxPriorityFeePerGasInput', () => { |
||||
beforeEach(() => { |
||||
jest.clearAllMocks(); |
||||
}); |
||||
|
||||
it('should invoke action createCancelTransaction when cancelTransaction callback is invoked', () => { |
||||
const mock = jest |
||||
.spyOn(Actions, 'createCancelTransaction') |
||||
.mockImplementation(() => ({ type: '' })); |
||||
const { result } = renderUseTransactionFunctions(); |
||||
result.current.cancelTransaction(); |
||||
expect(mock).toHaveBeenCalledTimes(1); |
||||
}); |
||||
|
||||
it('should invoke action createSpeedUpTransaction when speedUpTransaction callback is invoked', () => { |
||||
const mock = jest |
||||
.spyOn(Actions, 'createSpeedUpTransaction') |
||||
.mockImplementation(() => ({ type: '' })); |
||||
const { result } = renderUseTransactionFunctions(); |
||||
result.current.speedUpTransaction(); |
||||
expect(mock).toHaveBeenCalledTimes(1); |
||||
}); |
||||
|
||||
it('should invoke action updateTransaction with 10% increased fee when updateTransactionToMinimumGasFee callback is invoked', () => { |
||||
const mock = jest |
||||
.spyOn(Actions, 'updateTransaction') |
||||
.mockImplementation(() => ({ type: '' })); |
||||
const { result } = renderUseTransactionFunctions(); |
||||
result.current.updateTransactionToMinimumGasFee(); |
||||
expect(mock).toHaveBeenCalledTimes(1); |
||||
expect(mock).toHaveBeenCalledWith({ |
||||
txParams: { |
||||
estimateSuggested: 'medium', |
||||
estimateUsed: 'minimum', |
||||
gas: '5208', |
||||
gasLimit: '5208', |
||||
maxFeePerGas: '0x582c', |
||||
maxPriorityFeePerGas: '0x582c', |
||||
}, |
||||
userFeeLevel: 'minimum', |
||||
}); |
||||
}); |
||||
|
||||
it('should invoke action updateTransaction with estimate gas values fee when updateTransactionUsingEstimate callback is invoked', () => { |
||||
const mock = jest |
||||
.spyOn(Actions, 'updateTransaction') |
||||
.mockImplementation(() => ({ type: '' })); |
||||
const { result } = renderUseTransactionFunctions(); |
||||
result.current.updateTransactionUsingEstimate(GAS_RECOMMENDATIONS.LOW); |
||||
expect(mock).toHaveBeenCalledTimes(1); |
||||
expect(mock).toHaveBeenCalledWith({ |
||||
txParams: { |
||||
estimateSuggested: 'medium', |
||||
estimateUsed: 'low', |
||||
gas: '5208', |
||||
gasLimit: '5208', |
||||
maxFeePerGas: 'c570bd200', |
||||
maxPriorityFeePerGas: 'b2d05e00', |
||||
}, |
||||
userFeeLevel: 'low', |
||||
}); |
||||
}); |
||||
|
||||
it('should invoke action updateTransaction with dappSuggestedValues values fee when updateTransactionUsingDAPPSuggestedValues callback is invoked', () => { |
||||
const mock = jest |
||||
.spyOn(Actions, 'updateTransaction') |
||||
.mockImplementation(() => ({ type: '' })); |
||||
const { result } = renderUseTransactionFunctions({ |
||||
transaction: { |
||||
userFeeLevel: CUSTOM_GAS_ESTIMATE, |
||||
dappSuggestedGasFees: { |
||||
maxFeePerGas: '0x5028', |
||||
maxPriorityFeePerGas: '0x5028', |
||||
}, |
||||
}, |
||||
}); |
||||
result.current.updateTransactionUsingDAPPSuggestedValues(); |
||||
expect(mock).toHaveBeenCalledTimes(1); |
||||
expect(mock).toHaveBeenCalledWith({ |
||||
dappSuggestedGasFees: { |
||||
maxFeePerGas: '0x5028', |
||||
maxPriorityFeePerGas: '0x5028', |
||||
}, |
||||
txParams: { |
||||
estimateSuggested: 'medium', |
||||
estimateUsed: 'dappSuggested', |
||||
gas: '5208', |
||||
gasLimit: '5208', |
||||
maxFeePerGas: '0x5028', |
||||
maxPriorityFeePerGas: '0x5028', |
||||
}, |
||||
userFeeLevel: 'dappSuggested', |
||||
}); |
||||
}); |
||||
}); |
||||
Loading…
Reference in new issue