feat(suite-native): add eip1559 standard fee options

Author: BrantalikP

suite-common/wallet-core/src/fees/feesReducer.ts

@@ -1,7 +1,7 @@
 import { createReducer } from '@reduxjs/toolkit';
 
 import { createWeakMapSelector } from '@suite-common/redux-utils';
-import { formatDuration } from '@suite-common/suite-utils';
+import { formatDurationStrict } from '@suite-common/suite-utils';
 import { NetworkSymbol, getNetworkType } from '@suite-common/wallet-config';
 import { FeeInfo, FeeLevelLabel, FeesState, FeesStatus } from '@suite-common/wallet-types';
 import { getConvertedOrDefaultFeeInfo } from '@suite-common/wallet-utils';
@@ -96,11 +96,19 @@ export const selectNetworkFeeLevel = createMemoizedSelector(
 );
 
 export const selectConvertedNetworkFeeLevelTimeEstimate = createMemoizedSelector(
-    [selectConvertedNetworkFeeInfo, selectNetworkFeeLevel],
-    (networkFeeInfo, feeLevel): string | null => {
+    [
+        selectConvertedNetworkFeeInfo,
+        selectNetworkFeeLevel,
+        (_state: FeesRootState, symbol?: NetworkSymbol) => symbol,
+    ],
+    (networkFeeInfo, feeLevel, symbol): string | null => {
         if (!feeLevel || !networkFeeInfo) return null;
 
-        return formatDuration(networkFeeInfo.blockTime * feeLevel.blocks * 60);
+        const networkType = symbol ? getNetworkType(symbol) : null;
+
+        const multiplier = networkType === 'bitcoin' ? 60 : 1;
+
+        return formatDurationStrict(networkFeeInfo.blockTime * feeLevel.blocks * multiplier);
     },
 );
 

suite-native/module-send/src/components/SendFeesForm.tsx

@@ -5,7 +5,7 @@ import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import { useNavigation } from '@react-navigation/native';
 
 import { SendRootState, selectSendFormDraftByKey } from '@suite-common/wallet-core';
-import { AccountKey, TokenAddress } from '@suite-common/wallet-types';
+import { AccountKey, FeeLevelLabel, TokenAddress } from '@suite-common/wallet-types';
 import { VStack } from '@suite-native/atoms';
 import { Form } from '@suite-native/forms';
 import {
@@ -21,7 +21,6 @@ import {
     FeesContent,
     FeesFooter,
     NativeSendRootState,
-    NativeSupportedFeeLevel,
     useFeesManagement,
 } from '@suite-native/transaction-management';
 
@@ -69,7 +68,7 @@ export const SendFeesForm = ({ accountKey, tokenContract }: SendFormProps) => {
         accountKey,
         tokenContract,
         updateThunk: updateSelectedFeeLevelThunk,
-        selectedFee: formDraft?.selectedFee as NativeSupportedFeeLevel,
+        selectedFee: formDraft?.selectedFee as FeeLevelLabel,
         selectedFeePerUnit: formDraft?.feePerUnit,
         selectedSetMaxOutputId: formDraft?.setMaxOutputId,
     });

suite-native/module-trading/src/components/fees/TradingFeesForm.tsx

@@ -5,17 +5,17 @@ import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import { RouteProp, useRoute } from '@react-navigation/native';
 
 import { FormDraftRootState, selectDeepCopyOfFormDraft } from '@suite-common/wallet-core';
-import { AccountKey, FormDraftKeyPrefix, TokenAddress } from '@suite-common/wallet-types';
+import {
+    AccountKey,
+    FeeLevelLabel,
+    FormDraftKeyPrefix,
+    TokenAddress,
+} from '@suite-common/wallet-types';
 import { getFormDraftKey } from '@suite-common/wallet-utils';
 import { VStack } from '@suite-native/atoms';
 import { Form } from '@suite-native/forms';
 import { TradingStackParamList, TradingStackRoutes } from '@suite-native/navigation';
-import {
-    FeesContent,
-    FeesFooter,
-    NativeSupportedFeeLevel,
-    useFeesManagement,
-} from '@suite-native/transaction-management';
+import { FeesContent, FeesFooter, useFeesManagement } from '@suite-native/transaction-management';
 
 import { updateTradingSelectedFeeLevelThunk } from '../../thunks';
 
@@ -51,7 +51,7 @@ export const TradingFeesForm = ({ accountKey, tokenContract }: TradingFeesFormPr
         accountKey,
         tokenContract,
         updateThunk: updateTradingSelectedFeeLevelThunk,
-        selectedFee: formDraft?.selectedFee as NativeSupportedFeeLevel,
+        selectedFee: formDraft?.selectedFee as FeeLevelLabel,
         selectedFeePerUnit: formDraft?.feePerUnit,
         selectedSetMaxOutputId: formDraft?.setMaxOutputId,
         formDraftKey,

suite-native/module-trading/src/hooks/general/useTradingTransaction.ts

@@ -30,11 +30,10 @@ import {
     selectSendSerializedTx,
     updateFeeInfoThunk,
 } from '@suite-common/wallet-core';
-import { TokenAddress } from '@suite-common/wallet-types';
+import { FeeLevelLabel, TokenAddress } from '@suite-common/wallet-types';
 import { TokensRootState, selectAccountTokenDecimals } from '@suite-native/tokens';
 import { TradingRootState, getFormDraftKeyByTradeType } from '@suite-native/trading-state';
 import {
-    NativeSupportedFeeLevel,
     selectFeeLevels,
     useFeesFetching,
     usePrecomposedTransactionError,
@@ -50,7 +49,7 @@ export type TradingTransactionSignAndSendProps = {
 };
 
 export type TradingTransactionComposeProps = {
-    selectedFeeLevel?: NativeSupportedFeeLevel;
+    selectedFeeLevel?: FeeLevelLabel;
     feePerUnit?: string;
     feeLimit?: string;
 };
@@ -129,7 +128,7 @@ export const useTradingTransaction = ({
 
     const feeLevels = useSelector(selectFeeLevels);
 
-    const selectedLevel = feeLevels[(selectedFee as NativeSupportedFeeLevel) ?? 'normal'];
+    const selectedLevel = feeLevels[(selectedFee as FeeLevelLabel) ?? 'normal'];
     const feeError = selectedLevel?.type === 'error' ? selectedLevel.error : null;
 
     const txnErrorString = usePrecomposedTransactionError({
@@ -202,7 +201,7 @@ export const useTradingTransaction = ({
         }
 
         await composeRequest({
-            selectedFeeLevel: selectedFee as NativeSupportedFeeLevel,
+            selectedFeeLevel: selectedFee as FeeLevelLabel,
             feePerUnit: feePerUnitDraft,
             feeLimit: feeLimitDraft,
         });
@@ -311,7 +310,7 @@ export const useTradingTransaction = ({
     useEffect(() => {
         if (selectedFee && networkFeeInfo) {
             composeRequest({
-                selectedFeeLevel: selectedFee as NativeSupportedFeeLevel,
+                selectedFeeLevel: selectedFee as FeeLevelLabel,
                 feePerUnit: feePerUnitDraft,
                 feeLimit: feeLimitDraft,
             });

suite-native/module-trading/src/thunks.ts

@@ -27,14 +27,14 @@ import {
 import {
     Account,
     FeeInfo,
+    FeeLevelLabel,
     PrecomposedTransactionFinal,
     isFinalPrecomposedTransaction,
 } from '@suite-common/wallet-types';
 import { tryGetAccountIdentity } from '@suite-common/wallet-utils';
 import { requestPrioritizedDeviceAccess } from '@suite-native/device-mutex';
 import { getFormDraftKeyByTradeType } from '@suite-native/trading-state';
 import {
-    NativeSupportedFeeLevel,
     UpdateSelectedFeeLevelThunkParams,
     addTransactionLabelingThunk,
     transactionManagementActions,
@@ -117,7 +117,7 @@ export const composeTradingTransactionThunk = createThunk(
             account: Account;
             network: Network;
             feeInfo: FeeInfo | null;
-            selectedFeeLevel?: NativeSupportedFeeLevel;
+            selectedFeeLevel?: FeeLevelLabel;
             feeLimit?: string;
             feePerUnit?: string;
             isSlip24Active?: boolean;

suite-native/transaction-management/src/__tests__/selectors.test.ts

@@ -1,4 +1,4 @@
-import { GeneralPrecomposedLevels } from '@suite-common/wallet-types';
+import { FeeLevelLabel, GeneralPrecomposedLevels } from '@suite-common/wallet-types';
 
 import {
     selectCustomFeeLevel,
@@ -7,7 +7,6 @@ import {
     selectIsTransactionAlreadySigned,
 } from '../selectors';
 import { NativeSendRootState } from '../sendFormSlice';
-import { NativeSupportedFeeLevel } from '../types';
 
 const createMockState = (
     overrides: Partial<NativeSendRootState['wallet']['send']> = {},
@@ -134,10 +133,7 @@ describe('transaction-management selectors', () => {
 
         it('should return 0 when fee level does not exist', () => {
             const state = createMockState();
-            const result = selectFeeLevelTransactionBytes(
-                state,
-                'normal' as NativeSupportedFeeLevel,
-            );
+            const result = selectFeeLevelTransactionBytes(state, 'normal' as FeeLevelLabel);
 
             expect(result).toBe(0);
         });

suite-native/transaction-management/src/components/fees/CustomFee/CustomFee.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import Animated, { FadeInLeft, FadeOutLeft } from 'react-native-reanimated';
 
 import { type NetworkSymbol, getNetworkType } from '@suite-common/wallet-config';
-import { AccountKey, FormState } from '@suite-common/wallet-types';
+import { AccountKey, FeeLevelLabel, FormState } from '@suite-common/wallet-types';
 import { Box, Button, useBottomSheetModal } from '@suite-native/atoms';
 import { useFormContext } from '@suite-native/forms';
 import { Icon } from '@suite-native/icons';
@@ -12,7 +12,6 @@ import { CustomFeeBottomSheet } from './CustomFeeBottomSheet';
 import { CustomFeeCard } from './CustomFeeCard';
 import { FeesFormValues } from '../../../feesFormSchema';
 import { useCustomFee } from '../../../hooks/fees/useCustomFee';
-import { NativeSupportedFeeLevel } from '../../../types/fees';
 
 type CustomFeeProps = {
     accountKey: AccountKey;
@@ -45,7 +44,7 @@ const CustomFeeContentWrapper = ({ accountKey, formDraft, onCustomFeeSet }: Cust
     const { bottomSheetRef, openModal, closeModal } = useBottomSheetModal();
 
     const [previousSelectedFeeLevelLabel, setPreviousSelectedFeeLevelLabel] =
-        useState<NativeSupportedFeeLevel>('normal');
+        useState<FeeLevelLabel>('normal');
     const { watch, setValue, getValues } = useFormContext<FeesFormValues>();
 
     const isCustomFeeSelected = watch('feeLevel') === 'custom';

suite-native/transaction-management/src/components/fees/FeeOptionList/FeeOption.tsx

@@ -8,7 +8,12 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useSelector } from 'react-redux';
 
-import { type NetworkSymbol, type NetworkType, getNetworkType } from '@suite-common/wallet-config';
+import {
+    type NetworkSymbol,
+    type NetworkType,
+    getNetworkType,
+    hasNetworkSettlementLayer,
+} from '@suite-common/wallet-config';
 import {
     FeesRootState,
     selectConvertedNetworkFeeLevelFeePerUnit,
@@ -19,7 +24,7 @@ import {
     GeneralPrecomposedTransactionFinal,
     isFinalPrecomposedTransaction,
 } from '@suite-common/wallet-types';
-import { getFeeUnits } from '@suite-common/wallet-utils';
+import { getFeeUnits, isEip1559 } from '@suite-common/wallet-utils';
 import { Box, HStack, Radio, Text, VStack } from '@suite-native/atoms';
 import { CryptoAmountFormatter, CryptoToFiatAmountFormatter } from '@suite-native/formatters';
 import { EmptyAmountSkeleton } from '@suite-native/formatters/src/components/EmptyAmountSkeleton';
@@ -42,6 +47,7 @@ export type FeeOptionProps = {
 };
 
 const feeLabelsMap = {
+    low: 'transactionManagement.fees.levels.low',
     economy: 'transactionManagement.fees.levels.low',
     normal: 'transactionManagement.fees.levels.normal',
     high: 'transactionManagement.fees.levels.high',
@@ -64,16 +70,25 @@ const getFeePerUnit = ({
     feeLevel,
     transactionBytes,
     backendFeePerUnit = '0',
+    symbol,
 }: {
     networkType: NetworkType;
     feeLevel: GeneralPrecomposedTransaction;
     transactionBytes: number;
     backendFeePerUnit: string;
+    symbol: NetworkSymbol;
 }): string => {
     if (!isFinalPrecomposedTransaction(feeLevel)) {
         return backendFeePerUnit;
     }
 
+    if (networkType === 'ethereum') {
+        const decimals = hasNetworkSettlementLayer(symbol) ? 4 : 2;
+        const value = Number(isEip1559(feeLevel) ? feeLevel.maxFeePerGas : feeLevel.feePerByte);
+
+        return value.toFixed(decimals);
+    }
+
     if (networkType === 'bitcoin') {
         const feePerVb = Number(feeLevel.fee) / transactionBytes;
 
@@ -142,6 +157,7 @@ export const FeeOption = ({
         feeLevel,
         transactionBytes,
         backendFeePerUnit: backendFeePerUnit ?? '0',
+        symbol,
     });
 
     const formattedFeePerUnit = `${feePerUnit} ${feeUnits}`;

suite-native/transaction-management/src/components/fees/FeeOptionList/FeeOptionsList.tsx

@@ -2,7 +2,7 @@ import Animated, { FadeInLeft, FadeOutLeft } from 'react-native-reanimated';
 
 import { D, pipe } from '@mobily/ts-belt';
 
-import { type NetworkSymbol } from '@suite-common/wallet-config';
+import { type NetworkSymbol, getNetworkType } from '@suite-common/wallet-config';
 import { GeneralPrecomposedLevels } from '@suite-common/wallet-types';
 import { VStack } from '@suite-native/atoms';
 
@@ -35,9 +35,11 @@ export const FeeOptionsList = ({
     isLoading,
     onSelectedFeeLevel,
 }: FeeOptionsListProps) => {
+    const isBtcNetworkType = getNetworkType(symbol) === 'bitcoin';
+
     const predefinedFeeLevels = pipe(
         feeLevels,
-        D.filterWithKey(key => key !== 'custom' && key !== 'low'),
+        D.filterWithKey(key => key !== 'custom' && (isBtcNetworkType ? key !== 'low' : true)),
     );
 
     const transactionBytes = getTransactionBytes(predefinedFeeLevels);

suite-native/transaction-management/src/components/fees/FeesContent.tsx

@@ -1,14 +1,13 @@
 import { NetworkSymbol } from '@suite-common/wallet-config';
-import { AccountKey, FormState } from '@suite-common/wallet-types';
+import { AccountKey, FeeLevelLabel, FormState } from '@suite-common/wallet-types';
 import { Text, VStack } from '@suite-native/atoms';
 import { Translation } from '@suite-native/intl';
 
 import { CustomFee } from './CustomFee/CustomFee';
 import { FeeOptionsList, FeeOptionsListProps } from './FeeOptionList/FeeOptionsList';
-import { NativeSupportedFeeLevel } from '../../types/fees';
 
 type FeesContentProps = {
-    selectedFeeLevel: NativeSupportedFeeLevel;
+    selectedFeeLevel: FeeLevelLabel;
     feeLevels: FeeOptionsListProps['feeLevels'];
     symbol: NetworkSymbol;
     accountKey: AccountKey;