Adding GasFee context (#12530)

Adding GasFee context

ui/components/app/confirm-page-container/confirm-page-container-container.test.js

@@ -10,6 +10,14 @@ import ConfirmPageContainer, {
   ConfirmPageContainerNavigation,
 } from '.';
 
+jest.mock('../../../store/actions', () => ({
+  disconnectGasFeeEstimatePoller: jest.fn(),
+  getGasFeeEstimatesAndStartPolling: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve()),
+  addPollingTokenToAppState: jest.fn(),
+}));
+
 describe('Confirm Page Container Container Test', () => {
   let wrapper;
 
@@ -31,6 +39,8 @@ describe('Confirm Page Container Container Test', () => {
       selectedAddress: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5',
       addressBook: [],
       chainId: 'test',
+      identities: [],
+      featureFlags: {},
     },
   };
 

ui/components/app/confirm-page-container/confirm-page-container.component.js

@@ -4,6 +4,7 @@ import SenderToRecipient from '../../ui/sender-to-recipient';
 import { PageContainerFooter } from '../../ui/page-container';
 import EditGasPopover from '../edit-gas-popover';
 import { EDIT_GAS_MODES } from '../../../../shared/constants/gas';
+import { GasFeeContextProvider } from '../../../contexts/gasFee';
 import ErrorMessage from '../../ui/error-message';
 import { TRANSACTION_TYPES } from '../../../../shared/constants/transaction';
 import Dialog from '../../ui/dialog';
@@ -135,6 +136,7 @@ export default class ConfirmPageContainer extends Component {
       currentTransaction.txParams?.value === '0x0';
 
     return (
+      <GasFeeContextProvider transaction={currentTransaction}>
         <div className="page-container">
           <ConfirmPageContainerNavigation
             totalTx={totalTx}
@@ -231,6 +233,7 @@ export default class ConfirmPageContainer extends Component {
             />
           )}
         </div>
+      </GasFeeContextProvider>
     );
   }
 }

ui/contexts/gasFee.js

@@ -0,0 +1,37 @@
+import React, { createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { useGasFeeInputs } from '../hooks/gasFeeInput/useGasFeeInputs';
+
+export const GasFeeContext = createContext({});
+
+export const GasFeeContextProvider = ({
+  children,
+  defaultEstimateToUse,
+  transaction,
+  minimumGasLimit,
+  editGasMode,
+}) => {
+  const gasFeeDetails = useGasFeeInputs(
+    defaultEstimateToUse,
+    transaction,
+    minimumGasLimit,
+    editGasMode,
+  );
+  return (
+    <GasFeeContext.Provider value={gasFeeDetails}>
+      {children}
+    </GasFeeContext.Provider>
+  );
+};
+
+export function useGasFeeContext() {
+  return useContext(GasFeeContext);
+}
+
+GasFeeContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  defaultEstimateToUse: PropTypes.string,
+  transaction: PropTypes.object.isRequired,
+  minimumGasLimit: PropTypes.string,
+  editGasMode: PropTypes.string,
+};

ui/hooks/gasFeeInput/useGasFeeErrors.js

@@ -130,7 +130,10 @@ const getMaxFeeWarning = (
   return undefined;
 };
 
-const getBalanceError = (minimumCostInHexWei, transaction, ethBalance) => {
+const hasBalanceError = (minimumCostInHexWei, transaction, ethBalance) => {
+  if (minimumCostInHexWei === undefined || ethBalance === undefined) {
+    return false;
+  }
   const minimumTxCostInHexWei = addHexes(
     minimumCostInHexWei,
     transaction?.txParams?.value || '0x0',
@@ -247,7 +250,7 @@ export function useGasFeeErrors({
   );
 
   const { balance: ethBalance } = useSelector(getSelectedAccount);
-  const balanceError = getBalanceError(
+  const balanceError = hasBalanceError(
     minimumCostInHexWei,
     transaction,
     ethBalance,

ui/hooks/gasFeeInput/useGasFeeInputs.js

@@ -3,6 +3,7 @@ import { useSelector } from 'react-redux';
 
 import { getAdvancedInlineGasShown } from '../../selectors';
 import { hexToDecimal } from '../../helpers/utils/conversions.util';
+import { EDIT_GAS_MODES } from '../../../shared/constants/gas';
 import { GAS_FORM_ERRORS } from '../../helpers/constants/gas';
 import {
   GAS_RECOMMENDATIONS,
@@ -65,7 +66,7 @@ export function useGasFeeInputs(
   defaultEstimateToUse = GAS_RECOMMENDATIONS.MEDIUM,
   transaction,
   minimumGasLimit = '0x5208',
-  editGasMode,
+  editGasMode = EDIT_GAS_MODES.MODIFY_IN_PLACE,
 ) {
   // We need the gas estimates from the GasFeeController in the background.
   // Calling this hooks initiates polling for new gas estimates and returns the