Move update logic to edit spending cap modal

MetaMask · Sep 4, 2024 · f112821 · f112821
1 parent 4e0bdbc
commit f112821
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 48 deletions.
diff --git a/ui/pages/confirmations/components/confirm/info/approve/approve.tsx b/ui/pages/confirmations/components/confirm/info/approve/approve.tsx
@@ -1,24 +1,17 @@
 import { TransactionMeta } from '@metamask/transaction-controller';
-import React, { useEffect, useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { hexToDecimal } from '../../../../../../../shared/modules/conversion.utils';
-import { updateCurrentConfirmation } from '../../../../../../ducks/confirm/confirm';
-import { getCustomTxParamsData } from '../../../../confirm-approve/confirm-approve.util';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
 import { useConfirmContext } from '../../../../context/confirm';
-import { useAssetDetails } from '../../../../hooks/useAssetDetails';
 import { selectConfirmationAdvancedDetailsOpen } from '../../../../selectors/preferences';
 import { AdvancedDetails } from '../shared/advanced-details/advanced-details';
 import { GasFeesSection } from '../shared/gas-fees-section/gas-fees-section';
 import { ApproveDetails } from './approve-details/approve-details';
 import { ApproveStaticSimulation } from './approve-static-simulation/approve-static-simulation';
 import { EditSpendingCapModal } from './edit-spending-cap-modal/edit-spending-cap-modal';
 import { useIsNFT } from './hooks/use-is-nft';
-import { useTransactionGasEstimate } from './hooks/use-transaction-gas-estimate';
 import { SpendingCap } from './spending-cap/spending-cap';
 
 const ApproveInfo = () => {
-  const dispatch = useDispatch();
-
   const { currentConfirmation: transactionMeta } = useConfirmContext() as {
     currentConfirmation: TransactionMeta;
   };
@@ -33,48 +26,10 @@ const ApproveInfo = () => {
     useState(false);
   const [customSpendingCap, setCustomSpendingCap] = useState('');
 
-  const { decimals } = useAssetDetails(
-    transactionMeta?.txParams?.to,
-    transactionMeta?.txParams?.from,
-    transactionMeta?.txParams?.data,
-  );
-
-  const customTxParamsData = useMemo(() => {
-    return getCustomTxParamsData(transactionMeta?.txParams?.data, {
-      customPermissionAmount: customSpendingCap || '0',
-      decimals,
-    });
-  }, [customSpendingCap, transactionMeta?.txParams?.data, decimals]);
-
-  const { estimatedGasLimit } = useTransactionGasEstimate(
-    transactionMeta,
-    customTxParamsData,
-    customSpendingCap,
-  );
-
-  const [shouldUpdateConfirmation, setShouldUpdateConfirmation] =
-    useState(false);
-  useEffect(() => {
-    if (shouldUpdateConfirmation && estimatedGasLimit) {
-      transactionMeta.txParams.data = customTxParamsData;
-      transactionMeta.txParams.gas = hexToDecimal(estimatedGasLimit as string);
-
-      dispatch(updateCurrentConfirmation(transactionMeta));
-      setShouldUpdateConfirmation(false);
-    }
-  }, [
-    shouldUpdateConfirmation,
-    estimatedGasLimit,
-    customTxParamsData,
-    transactionMeta,
-    dispatch,
-  ]);
-
   const setCustomSpendingCapCandidate = (newValue: string) => {
     const value = parseInt(newValue, 10);
     // coerce negative numbers to zero
     setCustomSpendingCap(value < 0 ? '0' : newValue);
-    setShouldUpdateConfirmation(true);
   };
 
   if (!transactionMeta?.txParams) {

diff --git a/.../components/confirm/info/approve/edit-spending-cap-modal/edit-spending-cap-modal.test.tsx b/.../components/confirm/info/approve/edit-spending-cap-modal/edit-spending-cap-modal.test.tsx
@@ -5,6 +5,14 @@ import { getMockApproveConfirmState } from '../../../../../../../../test/data/co
 import { renderWithConfirmContextProvider } from '../../../../../../../../test/lib/confirmations/render-helpers';
 import { EditSpendingCapModal } from './edit-spending-cap-modal';
 
+jest.mock('../../../../../../../store/actions', () => ({
+  ...jest.requireActual('../../../../../../../store/actions'),
+  getGasFeeTimeEstimate: jest.fn().mockResolvedValue({
+    lowerTimeBound: 0,
+    upperTimeBound: 60000,
+  }),
+}));
+
 jest.mock('../hooks/use-approve-token-simulation', () => ({
   useApproveTokenSimulation: jest.fn(() => ({
     spendingCap: '1000',

diff --git a/...tions/components/confirm/info/approve/edit-spending-cap-modal/edit-spending-cap-modal.tsx b/...tions/components/confirm/info/approve/edit-spending-cap-modal/edit-spending-cap-modal.tsx
@@ -1,6 +1,8 @@
 import { TransactionMeta } from '@metamask/transaction-controller';
 import { BigNumber } from 'bignumber.js';
-import React, { useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { hexToDecimal } from '../../../../../../../../shared/modules/conversion.utils';
 import {
   Modal,
   ModalBody,
@@ -12,6 +14,7 @@ import {
   TextField,
   TextFieldType,
 } from '../../../../../../../components/component-library';
+import { updateCurrentConfirmation } from '../../../../../../../ducks/confirm/confirm';
 import {
   AlignItems,
   Display,
@@ -21,9 +24,11 @@ import {
   TextVariant,
 } from '../../../../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
+import { getCustomTxParamsData } from '../../../../../confirm-approve/confirm-approve.util';
 import { useConfirmContext } from '../../../../../context/confirm';
 import { useAssetDetails } from '../../../../../hooks/useAssetDetails';
 import { useApproveTokenSimulation } from '../hooks/use-approve-token-simulation';
+import { useTransactionGasEstimate } from '../hooks/use-transaction-gas-estimate';
 
 export const getAccountBalance = (userBalance: string, decimals: string) =>
   new BigNumber(userBalance)
@@ -43,6 +48,8 @@ export const EditSpendingCapModal = ({
 }) => {
   const t = useI18nContext();
 
+  const dispatch = useDispatch();
+
   const { currentConfirmation: transactionMeta } = useConfirmContext() as {
     currentConfirmation: TransactionMeta;
   };
@@ -63,6 +70,34 @@ export const EditSpendingCapModal = ({
   const [customSpendingCapCandidate, setCustomSpendingCapCandidate] =
     useState('');
 
+  const customTxParamsData = useMemo(() => {
+    return getCustomTxParamsData(transactionMeta?.txParams?.data, {
+      customPermissionAmount: customSpendingCap || '0',
+      decimals,
+    });
+  }, [customSpendingCap, transactionMeta?.txParams?.data, decimals]);
+
+  const { estimatedGasLimit } = useTransactionGasEstimate(
+    transactionMeta,
+    customTxParamsData,
+    customSpendingCap,
+  );
+
+  useEffect(() => {
+    if (customSpendingCap && estimatedGasLimit) {
+      transactionMeta.txParams.data = customTxParamsData;
+      transactionMeta.txParams.gas = hexToDecimal(estimatedGasLimit as string);
+
+      dispatch(updateCurrentConfirmation(transactionMeta));
+    }
+  }, [
+    customSpendingCap,
+    estimatedGasLimit,
+    customTxParamsData,
+    transactionMeta,
+    dispatch,
+  ]);
+
   const handleCancel = () => {
     setIsOpenEditSpendingCapModal(false);
     setCustomSpendingCapCandidate('');