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/suite/modals/ReduxModal/UserContextModal/ClaimModal/ClaimModal.tsx

@@ -26,6 +26,7 @@ export const ClaimModal = ({ onCancel }: ClaimModalModalProps) => {
 
     const {
         account,
+        network,
         formState: { errors, isSubmitting },
         register,
         control,
@@ -113,6 +114,7 @@ export const ClaimModal = ({ onCancel }: ClaimModalModalProps) => {
 
                     <Card paddingType="small" margin={{ vertical: spacings.xs }}>
                         <Fees
+                            network={network}
                             control={control}
                             errors={errors}
                             register={register}

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/StakeEthForm.tsx

@@ -12,6 +12,7 @@ import { AvailableBalance } from './AvailableBalance';
 export const StakeEthForm = () => {
     const {
         account,
+        network,
         isConfirmModalOpen,
         closeConfirmModal,
         signTx,
@@ -45,6 +46,7 @@ export const StakeEthForm = () => {
 
                 <Card paddingType="small" margin={{ top: spacings.xs }}>
                     <Fees
+                        network={network}
                         control={control}
                         errors={errors}
                         register={register}

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/RbfFees.tsx

@@ -13,10 +13,12 @@ export const RbfFees = () => {
         account,
         feeInfo,
         composedLevels,
+        network,
     } = useRbfContext();
 
     return (
         <Fees
+            network={network}
             control={control}
             errors={errors}
             register={register}

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/Fees.tsx

@@ -22,11 +22,13 @@ const UnstakeFees = () => {
         changeFeeLevel,
         feeInfo,
         composedLevels,
+        network,
     } = useUnstakeEthFormContext();
 
     return (
         <StyledCard>
             <Fees
+                network={network}
                 control={control}
                 errors={errors}
                 register={register}

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, variables, useMediaQuery } 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;
@@ -36,24 +39,26 @@ interface CustomFeeProps<TFieldValues extends FormState> {
     control: Control;
     setValue: UseFormSetValue<TFieldValues>;
     getValues: UseFormGetValues<TFieldValues>;
-    changeFeeLimit?: (value: string) => void;
     composedFeePerByte: string;
+    shouldUsePriorityFees: boolean;
 }
 
 export const CustomFee = <TFieldValues extends FormState>({
     networkType,
     feeInfo,
     register,
     control,
-    changeFeeLimit,
     composedFeePerByte,
+    shouldUsePriorityFees = false,
     ...props
 }: CustomFeeProps<TFieldValues>) => {
     const { translationString } = useTranslation();
     const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
 
     const locale = useSelector(selectLanguage);
 
+    console.log('feeInfo', feeInfo);
+
     // Type assertion allowing to make the component reusable, see https://stackoverflow.com/a/73624072.
     const { getValues, setValue } = props as unknown as UseFormReturn<FormState>;
     const errors = props.errors as unknown as FieldErrors<FormState>;
@@ -64,6 +69,11 @@ 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;
+
     const feePerUnitError = errors.feePerUnit;
     const feeLimitError = errors.feeLimit;
 
@@ -169,7 +179,6 @@ export const CustomFee = <TFieldValues extends FormState>({
                         inputState={getInputState(feeLimitError)}
                         name={FEE_LIMIT}
                         data-testid={FEE_LIMIT}
-                        onChange={changeFeeLimit}
                         bottomText={
                             feeLimitError?.message ? (
                                 <InputError
@@ -183,21 +192,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 && feeInfo.levels[0].ethFeeType === 'eip1559' ? (
+                    <>
+                        <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>