feat(suite): WIP frontend

Author: enjojoy

packages/connect/src/api/bitcoin/Fees.ts

@@ -86,7 +86,7 @@ export class FeeLevels {
             if (response.eip1559) {
                 const eip1559LevelKeys = ['low', 'medium', 'high'] as const;
 
-                const { eip1559, ...baseLevel } = response;
+                const { eip1559 } = response;
                 const eip1559Levels = eip1559LevelKeys.map(levelKey => {
                     const level = eip1559[levelKey];
 
@@ -104,10 +104,7 @@ export class FeeLevels {
                     };
                 });
 
-                this.levels = [
-                    { ...baseLevel, label: 'normal' as const, blocks: -1, ethFeeType: 'legacy' },
-                    ...eip1559Levels,
-                ];
+                this.levels = [...eip1559Levels];
             } else {
                 this.levels[0] = {
                     ...this.levels[0],

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

@@ -9,7 +9,7 @@ import {
 } from 'react-hook-form';
 
 import { BigNumber } from '@trezor/utils/src/bigNumber';
-import { Note, Banner, variables, Grid, Column, useMediaQuery, Text } from '@trezor/components';
+import { Note, Banner, Grid, Column, Text } from '@trezor/components';
 import { getInputState, getFeeUnits, isInteger } from '@suite-common/wallet-utils';
 import { FeeInfo, FormState } from '@suite-common/wallet-types';
 import { NetworkType } from '@suite-common/wallet-config';
@@ -28,6 +28,9 @@ import { InputError } from '../InputError';
 const FEE_PER_UNIT = 'feePerUnit';
 const FEE_LIMIT = 'feeLimit';
 
+const MAX_FEE_PER_GAS = 'maxFeePerGas';
+const MAX_PRIORITY_FEE_PER_GAS = 'maxPriorityFeePerGas';
+
 interface CustomFeeProps<TFieldValues extends FormState> {
     networkType: NetworkType;
     feeInfo: FeeInfo;
@@ -38,6 +41,7 @@ interface CustomFeeProps<TFieldValues extends FormState> {
     getValues: UseFormGetValues<TFieldValues>;
     changeFeeLimit?: (value: string) => void;
     composedFeePerByte: string;
+    shouldUsePriorityFees: boolean;
 }
 
 export const CustomFee = <TFieldValues extends FormState>({
@@ -47,10 +51,11 @@ export const CustomFee = <TFieldValues extends FormState>({
     control,
     changeFeeLimit,
     composedFeePerByte,
+    shouldUsePriorityFees = false,
     ...props
 }: CustomFeeProps<TFieldValues>) => {
     const { translationString } = useTranslation();
-    const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
+    // const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
 
     const locale = useSelector(selectLanguage);
 
@@ -64,6 +69,13 @@ export const CustomFee = <TFieldValues extends FormState>({
     const feeUnits = getFeeUnits(networkType);
     const estimatedFeeLimit = getValues('estimatedFeeLimit');
 
+    const maxFeePerGas = shouldUsePriorityFees ? getValues(MAX_FEE_PER_GAS) : undefined; //only for priority fees on evms
+    const maxPriorityFeePerGas = shouldUsePriorityFees
+        ? getValues(MAX_PRIORITY_FEE_PER_GAS)
+        : undefined;
+
+    console.log('customFees', shouldUsePriorityFees, maxFeePerGas, maxPriorityFeePerGas);
+
     const feePerUnitError = errors.feePerUnit;
     const feeLimitError = errors.feeLimit;
 
@@ -160,7 +172,7 @@ export const CustomFee = <TFieldValues extends FormState>({
             >
                 <Translation id="TR_CUSTOM_FEE_WARNING" />
             </Banner>
-            <Grid gap={spacings.xs} columns={useFeeLimit && !isBelowLaptop ? 2 : 1}>
+            <Grid gap={spacings.xs} columns={1}>
                 {useFeeLimit ? (
                     <NumberInput
                         label={<Translation id="TR_GAS_LIMIT" />}
@@ -183,21 +195,57 @@ export const CustomFee = <TFieldValues extends FormState>({
                 ) : (
                     <input type="hidden" {...register(FEE_LIMIT as FieldPath<TFieldValues>)} />
                 )}
-                <NumberInput
-                    label={useFeeLimit ? <Translation id="TR_GAS_PRICE" /> : undefined}
-                    locale={locale}
-                    control={control}
-                    inputState={getInputState(feePerUnitError)}
-                    innerAddon={
-                        <Text variant="tertiary" typographyStyle="label">
-                            {feeUnits}
-                        </Text>
-                    }
-                    name={FEE_PER_UNIT}
-                    data-testid={FEE_PER_UNIT}
-                    rules={feeRules}
-                    bottomText={feePerUnitError?.message || null}
-                />
+
+                {shouldUsePriorityFees ? (
+                    <>
+                        <NumberInput
+                            label={<Translation id="TR_MAX_PRIORITY_FEE_PER_GAS" />}
+                            locale={locale}
+                            control={control}
+                            inputState={getInputState(feePerUnitError)}
+                            innerAddon={
+                                <Text variant="tertiary" typographyStyle="label">
+                                    {feeUnits}
+                                </Text>
+                            }
+                            name={MAX_PRIORITY_FEE_PER_GAS}
+                            data-testid={MAX_PRIORITY_FEE_PER_GAS}
+                            rules={feeRules}
+                            bottomText={feePerUnitError?.message || null}
+                        />
+                        <NumberInput
+                            label={<Translation id="TR_MAX_FEE_PER_GAS" />}
+                            locale={locale}
+                            control={control}
+                            inputState={getInputState(feePerUnitError)}
+                            innerAddon={
+                                <Text variant="tertiary" typographyStyle="label">
+                                    {feeUnits}
+                                </Text>
+                            }
+                            name={MAX_FEE_PER_GAS}
+                            data-testid={MAX_FEE_PER_GAS}
+                            rules={feeRules}
+                            bottomText={feePerUnitError?.message || null}
+                        />
+                    </>
+                ) : (
+                    <NumberInput
+                        label={useFeeLimit ? <Translation id="TR_GAS_PRICE" /> : undefined}
+                        locale={locale}
+                        control={control}
+                        inputState={getInputState(feePerUnitError)}
+                        innerAddon={
+                            <Text variant="tertiary" typographyStyle="label">
+                                {feeUnits}
+                            </Text>
+                        }
+                        name={FEE_PER_UNIT}
+                        data-testid={FEE_PER_UNIT}
+                        rules={feeRules}
+                        bottomText={feePerUnitError?.message || null}
+                    />
+                )}
             </Grid>
             {feeDifferenceWarning && <Note>{feeDifferenceWarning}</Note>}
         </Column>