feat(suite-native): add eip1559 custom fee inputs

BrantalikP · BrantalikP · commit 0cee45ceca32 · 2025-12-08T16:48:07.000+01:00
diff --git a/suite-native/transaction-management/src/components/fees/CustomFee/CustomFeeInputs.tsx b/suite-native/transaction-management/src/components/fees/CustomFee/CustomFeeInputs.tsx
@@ -4,7 +4,7 @@ import { G } from '@mobily/ts-belt';
 
 import { NetworkSymbol, getNetworkType } from '@suite-common/wallet-config';
 import { FeesRootState, selectConvertedNetworkFeeInfo } from '@suite-common/wallet-core';
-import { getFeeUnits } from '@suite-common/wallet-utils';
+import { getFeeUnits, isEip1559 } from '@suite-common/wallet-utils';
 import { Hint, Text, VStack } from '@suite-native/atoms';
 import { TextInputField, useFormContext } from '@suite-native/forms';
 import { integerTransformer, useAmountInputTransformers } from '@suite-native/helpers';
@@ -32,11 +32,14 @@ export const CustomFeeInputs = ({ symbol }: CustomFeeInputsProps) => {
 
     const customFeeLimitName = 'customFeeLimit';
     const feePerUnitFieldName = 'customFeePerUnit';
+    const maxFeePerGasFieldName = 'customMaxFeePerGas';
+    const maxPriorityFeePerGasFieldName = 'customMaxPriorityFeePerGas';
     const hasFeePerByteError = G.isNotNullable(errors[feePerUnitFieldName]);
 
     const networkType = getNetworkType(symbol);
     const feeUnits = getFeeUnits(networkType);
     const formattedFeePerUnit = `${feeInfo?.minFee} ${feeUnits}`;
+    const isEip1559Fee = networkType === 'ethereum' && isEip1559(feeInfo?.levels[0]);
 
     const handleFieldChangeValue =
         (fieldName: keyof FeesFormValues, transformer: (value: string) => string) =>
@@ -61,19 +64,59 @@ export const CustomFeeInputs = ({ symbol }: CustomFeeInputsProps) => {
                     onChangeText={handleFieldChangeValue(customFeeLimitName, integerTransformer)}
                 />
             )}
-            <TextInputField
-                label={
-                    networkType === 'ethereum'
-                        ? translate('transactionManagement.fees.custom.bottomSheet.label.gasPrice')
-                        : translate('transactionManagement.fees.custom.bottomSheet.label.feeRate')
-                }
-                name={feePerUnitFieldName}
-                testID={`@transactionManagement/${feePerUnitFieldName}-input`}
-                accessibilityLabel="address input"
-                keyboardType={networkType === 'bitcoin' ? 'decimal-pad' : 'number-pad'}
-                rightIcon={<Text color="textSubdued">{feeUnits}</Text>}
-                onChangeText={handleFieldChangeValue(feePerUnitFieldName, cryptoAmountTransformer)}
-            />
+            {isEip1559Fee ? (
+                <>
+                    <TextInputField
+                        label={translate(
+                            'transactionManagement.fees.custom.bottomSheet.label.maxFeePerGas',
+                        )}
+                        name={maxFeePerGasFieldName}
+                        testID={`@transactionManagement/${maxFeePerGasFieldName}-input`}
+                        accessibilityLabel="address input"
+                        keyboardType="number-pad"
+                        rightIcon={<Text color="textSubdued">{feeUnits}</Text>}
+                        onChangeText={handleFieldChangeValue(
+                            maxFeePerGasFieldName,
+                            integerTransformer,
+                        )}
+                    />
+                    <TextInputField
+                        label={translate(
+                            'transactionManagement.fees.custom.bottomSheet.label.maxPriorityFeePerGas',
+                        )}
+                        name={maxPriorityFeePerGasFieldName}
+                        testID={`@transactionManagement/${maxPriorityFeePerGasFieldName}-input`}
+                        accessibilityLabel="address input"
+                        rightIcon={<Text color="textSubdued">{feeUnits}</Text>}
+                        keyboardType="number-pad"
+                        onChangeText={handleFieldChangeValue(
+                            maxPriorityFeePerGasFieldName,
+                            integerTransformer,
+                        )}
+                    />
+                </>
+            ) : (
+                <TextInputField
+                    label={
+                        networkType === 'ethereum'
+                            ? translate(
+                                  'transactionManagement.fees.custom.bottomSheet.label.gasPrice',
+                              )
+                            : translate(
+                                  'transactionManagement.fees.custom.bottomSheet.label.feeRate',
+                              )
+                    }
+                    name={feePerUnitFieldName}
+                    testID={`@transactionManagement/${feePerUnitFieldName}-input`}
+                    accessibilityLabel="address input"
+                    keyboardType={networkType === 'bitcoin' ? 'decimal-pad' : 'number-pad'}
+                    rightIcon={<Text color="textSubdued">{feeUnits}</Text>}
+                    onChangeText={handleFieldChangeValue(
+                        feePerUnitFieldName,
+                        cryptoAmountTransformer,
+                    )}
+                />
+            )}
             {networkType !== 'ethereum' && !hasFeePerByteError && (
                 <Hint variant="info">
                     <Translation
diff --git a/suite-native/transaction-management/src/feesFormSchema.ts b/suite-native/transaction-management/src/feesFormSchema.ts
@@ -91,6 +91,9 @@ export const feesFormValidationSchema = yup.object({
                 return feeBig.gte(minimalFeeLimit);
             },
         ),
+    // FIXME: add validations
+    customMaxFeePerGas: yup.string(),
+    customMaxPriorityFeePerGas: yup.string(),
 });
 
 export type FeesFormValues = yup.InferType<typeof feesFormValidationSchema>;
diff --git a/suite-native/transaction-management/src/hooks/fees/useCustomFee.ts b/suite-native/transaction-management/src/hooks/fees/useCustomFee.ts
@@ -24,6 +24,8 @@ type UseCustomFeeProps = {
 
 const FEE_PER_UNIT_FIELD_NAME = 'customFeePerUnit';
 const FEE_LIMIT_FIELD_NAME = 'customFeeLimit';
+const MAX_FEE_PER_GAS_FIELD_NAME = 'customMaxFeePerGas';
+const MAX_PRIORITY_FEE_PER_GAS_FIELD_NAME = 'customMaxPriorityFeePerGas';
 
 export const useCustomFee = ({ accountKey, formState }: UseCustomFeeProps) => {
     const debounce = useDebounce();
@@ -47,10 +49,13 @@ export const useCustomFee = ({ accountKey, formState }: UseCustomFeeProps) => {
         watch,
     } = useFormContext<FeesFormValues>();
 
-    const { customFeePerUnit, customFeeLimit } = getValues();
+    const { customFeePerUnit, customFeeLimit, customMaxFeePerGas, customMaxPriorityFeePerGas } =
+        getValues();
 
     const watchedFeePerUnit = watch(FEE_PER_UNIT_FIELD_NAME, '0');
     const watchedFeeLimit = watch(FEE_LIMIT_FIELD_NAME, '1') as string;
+    const watchedMaxFeePerGas = watch(MAX_FEE_PER_GAS_FIELD_NAME, '0');
+    const watchedMaxPriorityFeePerGas = watch(MAX_PRIORITY_FEE_PER_GAS_FIELD_NAME, '0');
 
     const normalLevelTransactionBytes = useSelector((state: NativeSendRootState) =>
         selectFeeLevelTransactionBytes(state, 'normal'),
@@ -78,6 +83,8 @@ export const useCustomFee = ({ accountKey, formState }: UseCustomFeeProps) => {
                 selectedFeeLevel: 'custom',
                 customFeePerUnit,
                 customFeeLimit,
+                customMaxPriorityFeePerGas,
+                customMaxFeePerGas,
             }),
         );
 
@@ -94,20 +101,30 @@ export const useCustomFee = ({ accountKey, formState }: UseCustomFeeProps) => {
         setIsFeeLoading(false);
     }, [
         trigger,
+        networkType,
         customFeePerUnit,
         formState,
-        customFeeLimit,
         dispatch,
         accountKey,
-        networkType,
+        customFeeLimit,
+        customMaxPriorityFeePerGas,
+        customMaxFeePerGas,
         setError,
         translate,
     ]);
 
     useEffect(() => {
         setIsFeeLoading(true);
         debounce(handleValuesChange);
-    }, [watchedFeePerUnit, watchedFeeLimit, handleValuesChange, debounce, networkType]);
+    }, [
+        watchedFeePerUnit,
+        watchedFeeLimit,
+        handleValuesChange,
+        debounce,
+        networkType,
+        watchedMaxFeePerGas,
+        watchedMaxPriorityFeePerGas,
+    ]);
 
     // If the trezor-connect is unable to compose the transaction, we display rough estimate of the fee instead.
     const feeEstimate = useMemo(
diff --git a/suite-native/transaction-management/src/hooks/fees/useFeeCalculation.ts b/suite-native/transaction-management/src/hooks/fees/useFeeCalculation.ts
@@ -40,6 +40,10 @@ export const useFeeCalculation = ({
     const feeLevels = useSelector(selectFeeLevels);
     const { symbol } = account ?? {};
 
+    const normalFee = isFinalPrecomposedTransaction(feeLevels.normal)
+        ? (feeLevels.normal as PrecomposedTransactionFinal)
+        : null;
+
     const form = useFeesForm({
         accountKey,
         defaultFeeLevel: selectedFee,
@@ -55,10 +59,6 @@ export const useFeeCalculation = ({
         selectConvertedNetworkFeeLevelFeePerUnit(state, symbol, selectedFeeLevel),
     );
 
-    const normalFee = isFinalPrecomposedTransaction(feeLevels.normal)
-        ? (feeLevels.normal as PrecomposedTransactionFinal)
-        : null;
-
     const { areFeesLoading } = useFeesFetching({
         networkSymbol: symbol,
         isRefetchDisabled: selectedFeeLevel === 'custom' || selectedSetMaxOutputId !== undefined,
diff --git a/suite-native/transaction-management/src/hooks/fees/useFeesForm.ts b/suite-native/transaction-management/src/hooks/fees/useFeesForm.ts
@@ -57,6 +57,8 @@ export const useFeesForm = ({
             feeLevel: defaultFeeLevel,
             customFeePerUnit: trimmedFeePerUnit,
             customFeeLimit: normalFee?.feeLimit,
+            customMaxFeePerGas: normalFee?.maxFeePerGas,
+            customMaxPriorityFeePerGas: normalFee?.maxPriorityFeePerGas,
         },
         context: {
             networkFeeInfo,
diff --git a/suite-native/transaction-management/src/thunks.ts b/suite-native/transaction-management/src/thunks.ts
@@ -75,12 +75,22 @@ export const calculateCustomFeeLevelThunk = createThunk<
         selectedFeeLevel?: 'custom';
         customFeePerUnit?: string;
         customFeeLimit?: string;
+        customMaxFeePerGas?: string;
+        customMaxPriorityFeePerGas?: string;
     },
     { rejectValue: string }
 >(
     `${TRANSACTION_MANAGEMENT_PREFIX}/calculateCustomFeeLevelThunk`,
     async (
-        { accountKey, formState, selectedFeeLevel, customFeePerUnit, customFeeLimit },
+        {
+            accountKey,
+            formState,
+            selectedFeeLevel,
+            customFeePerUnit,
+            customFeeLimit,
+            customMaxFeePerGas,
+            customMaxPriorityFeePerGas,
+        },
         { dispatch, getState, fulfillWithValue, rejectWithValue },
     ) => {
         const account = selectAccountByKey(getState(), accountKey);
@@ -106,6 +116,12 @@ export const calculateCustomFeeLevelThunk = createThunk<
         if (customFeeLimit) {
             formStateCopy.feeLimit = customFeeLimit;
         }
+        if (customMaxFeePerGas) {
+            formStateCopy.maxFeePerGas = customMaxFeePerGas;
+        }
+        if (customMaxPriorityFeePerGas) {
+            formStateCopy.maxPriorityFeePerGas = customMaxPriorityFeePerGas;
+        }
 
         const response = await dispatch(
             composeSendFormTransactionFeeLevelsThunk({
