Fix fee selection errors in connect popup send flow

packages/suite/src/components/suite/modals/ReduxModal/DeviceConfirmationModal/SelectFeeModal.tsx

@@ -76,45 +76,38 @@ interface SelectAccountModalProps {
 }
 
 const getSelectFeeData = ({ coinInfo, feeLevels }: UiRequestSelectFee['payload']) => {
-    const minFee = coinInfo.minFeeSatoshiKb / 1000;
-    const maxFee = coinInfo.maxFeeSatoshiKb / 1000;
-    const account = {
-        networkType: 'bitcoin' as const,
-        symbol: coinInfo.shortcut.toLowerCase() as NetworkSymbol,
-        tokens: [],
+    const { shortcut, blockTime, minFeeSatoshiKb, maxFeeSatoshiKb } = coinInfo;
+    const minFee = minFeeSatoshiKb / 1000;
+    const maxFee = maxFeeSatoshiKb / 1000;
+    const symbol = shortcut.toLowerCase() as NetworkSymbol;
+
+    const levels = feeLevels.filter(({ label }) => label !== 'low').sort(sortLevels); // 'low' option is hidden in Suite
+    const defaultLevel = levels.find(l => l.label === 'normal') ?? levels[0]; // use preferably normal level as default, fall back to any other
+    const selectedFee = defaultLevel?.label ?? 'normal';
+    const feePerUnit = selectedFee === 'custom' ? defaultLevel?.feePerUnit : undefined;
+
+    return {
+        account: { networkType: 'bitcoin' as const, symbol, tokens: [] },
+        feeInfo: { levels, minFee, maxFee, minPriorityFee: -1, blockHeight: 0, blockTime },
+        defaultValues: { outputs: [], selectedFee, feePerUnit },
     };
-    const feeInfo = {
-        levels: feeLevels
-            .filter(({ label }) => label !== 'low') // this option is hidden in Suite
-            .sort(sortLevels),
-
-        minFee,
-        maxFee,
-        minPriorityFee: -1,
-        blockHeight: 0,
-        blockTime: coinInfo.blockTime,
-    };
-
-    return { account, feeInfo };
 };
 
 export const SelectFeeModal = ({ data }: SelectAccountModalProps) => {
     const dispatch = useDispatch();
     const popupCall = useSelector(selectConnectPopupCall);
 
-    const { account, feeInfo } = useMemo(() => getSelectFeeData(data), [data]);
+    const { account, feeInfo, defaultValues } = useMemo(() => getSelectFeeData(data), [data]);
+
+    const methods = useForm<FormState>({ defaultValues });
 
-    const methods = useForm<FormState>({
-        defaultValues: {
-            outputs: [],
-        },
-    });
     const { changeFeeLevel } = useFees({
         ...methods,
-        defaultValue: 'normal',
+        defaultValue: defaultValues.selectedFee,
         feeInfo,
         composeRequest: () => {},
     });
+
     const {
         handleSubmit,
         formState: { errors },

packages/suite/src/components/wallet/Fees/CollapsibleFees/CollapsibleFees.tsx

@@ -38,10 +38,7 @@ export function CollapsibleFees({
     isOpen,
     tronResources,
 }: CollapsibleFeesProps) {
-    const selectedFee = useWatch<FormState, 'selectedFee'>({
-        name: 'selectedFee',
-        defaultValue: 'normal',
-    });
+    const selectedFee = useWatch<FormState, 'selectedFee'>({ name: 'selectedFee' }) ?? 'normal';
 
     const isTrc20Transfer = useMemo(() => {
         if (networkType !== 'tron' || composedLevels == null) return false;
@@ -56,9 +53,11 @@ export function CollapsibleFees({
         networkType !== 'solana' && (networkType !== 'tron' || isTrc20Transfer);
     const isCustomFee = supportsAdjustableFees && selectedFee === 'custom';
 
-    // when fees are loading, feeInfo.levels = [], but CustomFee requires at least the 'normal' level to have some default
-    const hasNormalFeeLevel = useMemo(
-        () => feeInfo.levels.some(level => level.label === 'normal'),
+    // get default non-custom fee level, preferably normal
+    const defaultFeeLevel = useMemo(
+        () =>
+            feeInfo.levels.find(level => level.label === 'normal')?.label ??
+            feeInfo.levels.find(level => level.label !== 'custom')?.label,
         [feeInfo.levels],
     );
 
@@ -107,17 +106,19 @@ export function CollapsibleFees({
                                     </Column>
 
                                     <Row justifyContent="center" margin={{ bottom: 8 }}>
-                                        {isCustomFee && (
+                                        {/* allow switching to non-custom fee only when there is some */}
+                                        {isCustomFee && !!defaultFeeLevel && (
                                             <Button
                                                 intent="neutral"
                                                 priority="secondary"
-                                                onClick={() => changeFeeLevel('normal')}
+                                                onClick={() => changeFeeLevel(defaultFeeLevel)}
                                                 data-testid="@wallet/fees/select-standard-fee"
                                             >
                                                 <Translation id="FEE_LEVEL_STANDARD" />
                                             </Button>
                                         )}
-                                        {!isCustomFee && hasNormalFeeLevel && (
+                                        {/* in order to have sensible default for custom fee, selected fee level must exist (see useFees hook) */}
+                                        {!isCustomFee && !!selectedFeeLevel && (
                                             <TextButton
                                                 onClick={() => changeFeeLevel('custom')}
                                                 data-testid="@wallet/fees/select-custom-fee"