feat(suite-native:) EIP1559

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-common/wallet-core/src/fees/feesUtils.ts

@@ -3,7 +3,6 @@ import { Network, NetworkSymbol, getNetwork } from '@suite-common/wallet-config'
 import { isEip1559 } from '@suite-common/wallet-utils';
 import TrezorConnect, { FeeLevel } from '@trezor/connect';
 import { BlockchainEstimatedFeeLevel } from '@trezor/connect/src/types/api/blockchainEstimateFee';
-import { isNative } from '@trezor/env-utils';
 import { BigNumber } from '@trezor/utils';
 
 const NETWORK_FEE_OVERRIDES: Record<
@@ -35,9 +34,7 @@ type GetEip1559AvailabilityProps = {
 export const getEip1559Availability = ({ symbol, feeLevel, device }: GetEip1559AvailabilityProps) =>
     getNetwork(symbol).features.includes('eip1559') &&
     isEip1559(feeLevel) &&
-    !device?.unavailableCapabilities?.['eip1559'] &&
-    // suite-native does not have eip1559 implementation yet #16372
-    !isNative();
+    !device?.unavailableCapabilities?.['eip1559'];
 
 type GetNewFeeInfoProps = { network: Network; device?: TrezorDevice };
 export const getNewFeeInfo = async ({

suite-native/atoms/src/Sheet/BottomSheetModal.tsx

@@ -4,6 +4,7 @@ import {
     BottomSheetBackdrop,
     BottomSheetBackdropProps,
     BottomSheetModal as BottomSheetModalBase,
+    BottomSheetModalProps as BottomSheetModalBaseProps,
 } from '@gorhom/bottom-sheet';
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 
@@ -25,6 +26,7 @@ export type BottomSheetModalProps = {
     subtitle?: ReactNode;
     isCloseDisplayed?: boolean;
     onDismiss?: () => void;
+    bottomSheetCustomProps?: Partial<BottomSheetModalBaseProps>;
 } & BoxProps;
 
 const backgroundStyle = prepareNativeStyle(utils => ({
@@ -35,7 +37,17 @@ export type BottomSheetModalRef = Ref<BottomSheetModalMethods>;
 
 export const BottomSheetModal = forwardRef<BottomSheetModalMethods, BottomSheetModalProps>(
     (
-        { children, footer, style, title, isCloseDisplayed = false, subtitle, onDismiss, ...rest },
+        {
+            children,
+            footer,
+            style,
+            title,
+            isCloseDisplayed = false,
+            subtitle,
+            onDismiss,
+            bottomSheetCustomProps = {},
+            ...rest
+        },
         ref,
     ) => {
         const { applyStyle } = useNativeStyles();
@@ -74,6 +86,7 @@ export const BottomSheetModal = forwardRef<BottomSheetModalMethods, BottomSheetM
                     />
                 )}
                 onDismiss={onDismiss}
+                {...bottomSheetCustomProps}
             >
                 <BottomSheetModalContent handleScroll={handleScroll} style={style} {...rest}>
                     {children}

suite-native/atoms/src/Sheet/BottomSheetModalContent.tsx

@@ -34,6 +34,7 @@ export const BottomSheetModalContent = memo<BottomSheetModalContentProps>(
                 onScroll={handleScroll}
                 testID="@bottom-sheet/scroll-view"
                 keyboardShouldPersistTaps="handled"
+                showsVerticalScrollIndicator={false}
             >
                 <AnimatedBox
                     style={[applyStyle(childWrapperStyle, { bottomInset: bottom }), style]}

suite-native/intl/src/messages.ts

@@ -2772,12 +2772,13 @@ export const messages = {
                 high: 'High',
             },
             description: {
-                title: 'Transaction fee',
+                title: { general: 'Transaction fee', ethereum: 'Maximum fee' },
                 body: 'Fees are paid directly to validators for processing your transactions.',
             },
             custom: {
                 addButton: 'Add custom fee',
                 bottomSheet: {
+                    currentBaseFeeEthereum: 'Current base fee: {baseFee}',
                     title: 'Custom fee',
                     minimumLabel: 'The minimum fee rate is {feePerUnit}',
                     label: {
@@ -2787,6 +2788,24 @@ export const messages = {
                         maxFeePerGas: 'Max fee per gas',
                         maxPriorityFeePerGas: 'Max priority fee per gas',
                     },
+                    errors: {
+                        feeLimit: {
+                            low: 'Value is too low.',
+                        },
+                        decimals: 'Too many decimals.',
+                        feePerUnit: {
+                            low: 'Fee is too low.',
+                            high: 'Fee is too high.',
+                        },
+                        maxFeePerGas: {
+                            lessThanPriority: 'This fee can’t be lower than Max priority fee.',
+                            outOfRange: 'Enter a max fee per gas between {minFee} and {maxFee}',
+                        },
+                        maxPriorityFee: {
+                            min: 'Max priority fee must be at least {minPriorityFee}',
+                            higherThanMaxFee: 'This fee can’t be higher than Max fee per gas',
+                        },
+                    },
                     total: 'Total fee',
                     confirmButton: 'Confirm custom fee',
                 },

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

@@ -36,15 +36,20 @@ export const CorrectNetworkMessageCard = ({ symbol }: CorrectNetworkMessageCardP
                         id="moduleSend.outputs.correctNetworkMessage"
                         values={{
                             networkName,
-                            link: linkChunk => (
-                                <Link
-                                    href={HOW_TO_CHOOSE_RIGHT_NETWORK_URL}
-                                    label={linkChunk}
-                                    isUnderlined
-                                    textVariant="hint"
-                                    textColor="textDefault"
-                                />
-                            ),
+                            link: linkChunk => {
+                                const label = (linkChunk[0] as string) ?? '';
+
+                                return (
+                                    <Link
+                                        key={label}
+                                        href={HOW_TO_CHOOSE_RIGHT_NETWORK_URL}
+                                        label={label}
+                                        isUnderlined
+                                        textVariant="hint"
+                                        textColor="textDefault"
+                                    />
+                                );
+                            },
                         }}
                     />
                 </Text>

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,
     });
@@ -148,6 +147,7 @@ export const SendFeesForm = ({ accountKey, tokenContract }: SendFormProps) => {
                             selectedFeeLevel={selectedFeeLevel}
                             feeLevels={feeLevels}
                             symbol={symbol}
+                            networkType={account.networkType}
                             accountKey={accountKey}
                             areFeesLoading={areFeesLoading}
                             onSelectedFeeLevel={handleFeeLevelChange}

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,
@@ -73,6 +73,7 @@ export const TradingFeesForm = ({ accountKey, tokenContract }: TradingFeesFormPr
                         onSelectedFeeLevel={handleFeeLevelChange}
                         onCustomFeeSet={handleCustomFeeSet}
                         formDraft={formDraft}
+                        networkType={account.networkType}
                     />
                     {!!totalAmount && !!fee && (
                         <FeesFooter

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,9 +49,11 @@ export type TradingTransactionSignAndSendProps = {
 };
 
 export type TradingTransactionComposeProps = {
-    selectedFeeLevel?: NativeSupportedFeeLevel;
+    selectedFeeLevel?: FeeLevelLabel;
     feePerUnit?: string;
     feeLimit?: string;
+    maxFeePerGas?: string;
+    maxPriorityFeePerGas?: string;
 };
 
 export type UseTradingTransactionProps = {
@@ -105,7 +106,13 @@ export const useTradingTransaction = ({
         selectDeepCopyOfFormDraft(state, getFormDraftKeyByTradeType(tradeType)),
     );
 
-    const { selectedFee, feePerUnit: feePerUnitDraft, feeLimit: feeLimitDraft } = draft ?? {};
+    const {
+        selectedFee,
+        feePerUnit: feePerUnitDraft,
+        feeLimit: feeLimitDraft,
+        maxFeePerGas: maxFeePerGasDraft,
+        maxPriorityFeePerGas: maxPriorityFeePerGasDraft,
+    } = draft ?? {};
 
     const { contractAddress } = cryptoIdToNetworkAndContractAddress(
         tradeType === 'exchange'
@@ -129,7 +136,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({
@@ -156,7 +163,13 @@ export const useTradingTransaction = ({
 
     // this is called when we want to compose a transaction
     const composeRequest = useCallback(
-        async ({ selectedFeeLevel, feePerUnit, feeLimit }: TradingTransactionComposeProps) => {
+        async ({
+            selectedFeeLevel,
+            feePerUnit,
+            feeLimit,
+            maxPriorityFeePerGas,
+            maxFeePerGas,
+        }: TradingTransactionComposeProps) => {
             if (!sendAccount || !networkFeeInfo) {
                 console.error(
                     'Send account and networkFeeInfo are required for composing transaction',
@@ -175,6 +188,8 @@ export const useTradingTransaction = ({
                         selectedFeeLevel,
                         feePerUnit,
                         feeLimit,
+                        maxPriorityFeePerGas,
+                        maxFeePerGas,
                     }),
                 ).unwrap();
 
@@ -202,11 +217,22 @@ export const useTradingTransaction = ({
         }
 
         await composeRequest({
-            selectedFeeLevel: selectedFee as NativeSupportedFeeLevel,
+            selectedFeeLevel: selectedFee as FeeLevelLabel,
             feePerUnit: feePerUnitDraft,
             feeLimit: feeLimitDraft,
+            maxFeePerGas: maxFeePerGasDraft,
+            maxPriorityFeePerGas: maxPriorityFeePerGasDraft,
         });
-    }, [dispatch, sendAccount, composeRequest, selectedFee, feePerUnitDraft, feeLimitDraft]);
+    }, [
+        sendAccount,
+        dispatch,
+        composeRequest,
+        selectedFee,
+        feePerUnitDraft,
+        feeLimitDraft,
+        maxFeePerGasDraft,
+        maxPriorityFeePerGasDraft,
+    ]);
 
     // this is the reusable signAndPushSendFormTransaction function
     // waitForPushApproval is used so that we can wait for the user to approve the transaction before sending it
@@ -311,9 +337,11 @@ export const useTradingTransaction = ({
     useEffect(() => {
         if (selectedFee && networkFeeInfo) {
             composeRequest({
-                selectedFeeLevel: selectedFee as NativeSupportedFeeLevel,
+                selectedFeeLevel: selectedFee as FeeLevelLabel,
                 feePerUnit: feePerUnitDraft,
                 feeLimit: feeLimitDraft,
+                maxFeePerGas: maxFeePerGasDraft,
+                maxPriorityFeePerGas: maxPriorityFeePerGasDraft,
             });
         }
     }, [
@@ -323,6 +351,8 @@ export const useTradingTransaction = ({
         feeLimitDraft,
         networkFeeInfo,
         selectedQuote,
+        maxFeePerGasDraft,
+        maxPriorityFeePerGasDraft,
     ]);
 
     return {