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

Author: BrantalikP

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,57 @@ 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"
+                        onChangeText={handleFieldChangeValue(
+                            maxFeePerGasFieldName,
+                            integerTransformer,
+                        )}
+                    />
+                    <TextInputField
+                        label={translate(
+                            'transactionManagement.fees.custom.bottomSheet.label.maxPriorityFeePerGas',
+                        )}
+                        name={maxPriorityFeePerGasFieldName}
+                        testID={`@transactionManagement/${maxPriorityFeePerGasFieldName}-input`}
+                        accessibilityLabel="address input"
+                        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

suite-native/transaction-management/src/feesFormSchema.ts

@@ -76,6 +76,8 @@ export const feesFormValidationSchema = yup.object({
                 return feeBig.lte(maxFee);
             },
         ),
+
+    // FIXME: add validations
     customFeeLimit: yup
         .string()
         .test(
@@ -97,6 +99,8 @@ export const feesFormValidationSchema = yup.object({
                 return feeBig.gte(minimalFeeLimit);
             },
         ),
+    // FIXME: add validations
+    customMaxFeePerGas: yup.string(),
 });
 
 export type FeesFormValues = yup.InferType<typeof feesFormValidationSchema>;

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,

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,