feat(suite-native): fee time estimate calculation

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

@@ -1,7 +1,8 @@
 import { createReducer } from '@reduxjs/toolkit';
 
 import { NetworkSymbol, networksCompatibility } from '@suite-common/wallet-config';
-import { FeeInfo } from '@suite-common/wallet-types';
+import { FeeInfo, FeeLevelLabel } from '@suite-common/wallet-types';
+import { formatDuration } from '@suite-common/suite-utils';
 
 import { blockchainActions } from '../blockchain/blockchainActions';
 
@@ -40,3 +41,18 @@ export const feesReducer = createReducer(initialState, builder => {
 
 export const selectNetworkFeeInfo = (state: FeesRootState, networkSymbol?: NetworkSymbol) =>
  networkSymbol ? state.wallet.fees[networkSymbol] : null;
+
+export const selectNetworkFeeLevelTimeEstimate = (
+ state: FeesRootState,
+ level: FeeLevelLabel,
+ networkSymbol?: NetworkSymbol,
+) => {
+ const networkFeeInfo = selectNetworkFeeInfo(state, networkSymbol);
+ if (!networkFeeInfo) return null;
+
+ const feeLevel = networkFeeInfo.levels.find(x => x.label === level);
+
+ if (!feeLevel) return null;
+
+ return formatDuration(networkFeeInfo.blockTime * feeLevel.blocks * 60);
+};

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

@@ -1,12 +1,14 @@
 import { useContext } from 'react';
 import { TouchableOpacity } from 'react-native';
+import { useSelector } from 'react-redux';
 
 import { NetworkSymbol } from '@suite-common/wallet-config';
 import { GeneralPrecomposedTransactionFinal } from '@suite-common/wallet-types';
 import { Text, HStack, VStack, Radio } from '@suite-native/atoms';
 import { CryptoToFiatAmountFormatter, CryptoAmountFormatter } from '@suite-native/formatters';
 import { FormContext } from '@suite-native/forms';
 import { TxKeyPath, Translation } from '@suite-native/intl';
+import { FeesRootState, selectNetworkFeeLevelTimeEstimate } from '@suite-common/wallet-core';
 
 import { SendFeesFormValues } from '../sendFeesFormSchema';
 import { NativeSupportedFeeLevel } from '../types';
@@ -38,9 +40,13 @@ export const FeeOption = ({
  const { watch, setValue } = useContext(FormContext);
  const selectedLevel = watch('feeLevel');
 
+ const feeTimeEstimate = useSelector((state: FeesRootState) =>
+ selectNetworkFeeLevelTimeEstimate(state, feeKey, networkSymbol),
+ );
+
  const isChecked = selectedLevel === feeKey;
 
- const { label, timeEstimate } = feeLabelsMap[feeKey];
+ const { label } = feeLabelsMap[feeKey];
 
  const handleSelectFeeLevel = () => {
  setValue('feeLevel', feeKey, {
@@ -56,7 +62,7 @@ export const FeeOption = ({
  <Translation id={label} />
  </Text>
  <Text variant="hint" color="textSubdued">
- <Translation id={timeEstimate} />
+ {feeTimeEstimate}
  </Text>
  </VStack>
  <VStack flex={1} alignItems="flex-end" spacing="extraSmall">