refactor: deduplicate advanced gas fee modal logic

Author: pedronfigueiredo

app/components/Views/confirmations/components/modals/advanced-eip1559-modal/advanced-eip1559-modal.tsx

@@ -14,7 +14,7 @@ import {
   ButtonVariant,
 } from '@metamask/design-system-react-native';
 import { strings } from '../../../../../../../locales/i18n';
-import { updateTransactionGasFees } from '../../../../../../util/transaction-controller';
+import { useAdvancedGasFeeModal } from '../../../hooks/gas/useAdvancedGasFeeModal';
 import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTransactionMetadataRequest';
 import BottomModal from '../../UI/bottom-modal';
 import { GasModalHeader } from '../../../components/gas/gas-modal-header';
@@ -23,8 +23,6 @@ import { GasInput } from '../../../components/gas/gas-input';
 import { MaxBaseFeeInput } from '../../../components/gas/max-base-fee-input';
 import { PriorityFeeInput } from '../../../components/gas/priority-fee-input';
 import styleSheet from './advanced-eip1559-modal.styles';
-import { usePersistGasFeePreference } from '../../../hooks/gas/usePersistGasFeePreference';
-import { hasValidCustomGasFeePreferences } from '../../../hooks/gas/gas-fee-preference-utils';
 
 export const AdvancedEIP1559Modal = ({
   setActiveModal,
@@ -35,7 +33,6 @@ export const AdvancedEIP1559Modal = ({
 }) => {
   const { styles } = useStyles(styleSheet, {});
   const transactionMeta = useTransactionMetadataRequest() as TransactionMeta;
-  const persistGasFeePreference = usePersistGasFeePreference();
 
   const { gas, maxFeePerGas, maxPriorityFeePerGas } =
     transactionMeta?.txParams || {};
@@ -68,31 +65,13 @@ export const AdvancedEIP1559Modal = ({
     }),
     [gasParams.maxFeePerGas, gasParams.maxPriorityFeePerGas],
   );
-  const hasError = Boolean(
-    errors.gas ||
-      errors.maxFeePerGas ||
-      errors.maxPriorityFeePerGas ||
-      !hasValidCustomGasFeePreferences(savedGasFeePreferences),
-  );
-
-  const handleSaveClick = useCallback(() => {
-    if (!hasValidCustomGasFeePreferences(savedGasFeePreferences)) {
-      return;
-    }
-
-    updateTransactionGasFees(transactionMeta.id, {
-      userFeeLevel: UserFeeLevel.CUSTOM,
-      ...pickBy(gasParams, Boolean),
-    });
-    persistGasFeePreference(transactionMeta, savedGasFeePreferences);
-    handleCloseModals();
-  }, [
+  const { hasError, handleSaveClick } = useAdvancedGasFeeModal({
     transactionMeta,
     gasParams,
-    persistGasFeePreference,
-    handleCloseModals,
     savedGasFeePreferences,
-  ]);
+    errors,
+    handleCloseModals,
+  });
 
   const navigateToEstimatesModal = useCallback(() => {
     setActiveModal(GasModalType.ESTIMATES);

app/components/Views/confirmations/components/modals/advanced-gas-price-modal/advanced-gas-price-modal.tsx

@@ -14,16 +14,14 @@ import {
   ButtonVariant,
 } from '@metamask/design-system-react-native';
 import { strings } from '../../../../../../../locales/i18n';
-import { updateTransactionGasFees } from '../../../../../../util/transaction-controller';
+import { useAdvancedGasFeeModal } from '../../../hooks/gas/useAdvancedGasFeeModal';
 import { GasModalHeader } from '../../../components/gas/gas-modal-header';
 import { GasModalType } from '../../../constants/gas';
 import { GasInput } from '../../../components/gas/gas-input';
 import { GasPriceInput } from '../../../components/gas/gas-price-input';
 import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTransactionMetadataRequest';
 import BottomModal from '../../UI/bottom-modal';
 import styleSheet from './advanced-gas-price-modal.styles';
-import { usePersistGasFeePreference } from '../../../hooks/gas/usePersistGasFeePreference';
-import { hasValidCustomGasFeePreferences } from '../../../hooks/gas/gas-fee-preference-utils';
 
 export const AdvancedGasPriceModal = ({
   setActiveModal,
@@ -34,7 +32,6 @@ export const AdvancedGasPriceModal = ({
 }) => {
   const { styles } = useStyles(styleSheet, {});
   const transactionMeta = useTransactionMetadataRequest() as TransactionMeta;
-  const persistGasFeePreference = usePersistGasFeePreference();
 
   const { gas, gasPrice } = transactionMeta?.txParams || {};
 
@@ -57,30 +54,13 @@ export const AdvancedGasPriceModal = ({
     }),
     [gasParams.gasPrice],
   );
-  const hasError = Boolean(
-    errors.gas ||
-      errors.gasPrice ||
-      !hasValidCustomGasFeePreferences(savedGasFeePreferences),
-  );
-
-  const handleSaveClick = useCallback(() => {
-    if (!hasValidCustomGasFeePreferences(savedGasFeePreferences)) {
-      return;
-    }
-
-    updateTransactionGasFees(transactionMeta.id, {
-      userFeeLevel: UserFeeLevel.CUSTOM,
-      ...pickBy(gasParams, Boolean),
-    });
-    persistGasFeePreference(transactionMeta, savedGasFeePreferences);
-    handleCloseModals();
-  }, [
+  const { hasError, handleSaveClick } = useAdvancedGasFeeModal({
     transactionMeta,
     gasParams,
-    persistGasFeePreference,
-    handleCloseModals,
     savedGasFeePreferences,
-  ]);
+    errors,
+    handleCloseModals,
+  });
 
   const navigateToEstimatesModal = useCallback(() => {
     setActiveModal(GasModalType.ESTIMATES);

app/components/Views/confirmations/hooks/gas/useAdvancedGasFeeModal.ts

@@ -0,0 +1,55 @@
+import { useCallback } from 'react';
+import { pickBy } from 'lodash';
+import {
+  TransactionMeta,
+  UserFeeLevel,
+} from '@metamask/transaction-controller';
+import type { Hex } from '@metamask/utils';
+
+import { updateTransactionGasFees } from '../../../../../util/transaction-controller';
+import type { AdvancedGasFeePreferences } from '../../../../../core/Engine/controllers/preferences-controller-types';
+import { hasValidCustomGasFeePreferences } from './gas-fee-preference-utils';
+import { usePersistGasFeePreference } from './usePersistGasFeePreference';
+
+interface UseAdvancedGasFeeModalParams {
+  transactionMeta: TransactionMeta;
+  gasParams: Record<string, Hex | undefined>;
+  savedGasFeePreferences: AdvancedGasFeePreferences;
+  errors: Record<string, string | boolean>;
+  handleCloseModals: () => void;
+}
+
+export function useAdvancedGasFeeModal({
+  transactionMeta,
+  gasParams,
+  savedGasFeePreferences,
+  errors,
+  handleCloseModals,
+}: UseAdvancedGasFeeModalParams) {
+  const persistGasFeePreference = usePersistGasFeePreference();
+  const hasError = Boolean(
+    Object.values(errors).some(Boolean) ||
+      !hasValidCustomGasFeePreferences(savedGasFeePreferences),
+  );
+
+  const handleSaveClick = useCallback(() => {
+    if (!hasValidCustomGasFeePreferences(savedGasFeePreferences)) {
+      return;
+    }
+
+    updateTransactionGasFees(transactionMeta.id, {
+      userFeeLevel: UserFeeLevel.CUSTOM,
+      ...pickBy(gasParams, Boolean),
+    });
+    persistGasFeePreference(transactionMeta, savedGasFeePreferences);
+    handleCloseModals();
+  }, [
+    transactionMeta,
+    gasParams,
+    persistGasFeePreference,
+    handleCloseModals,
+    savedGasFeePreferences,
+  ]);
+
+  return { hasError, handleSaveClick };
+}