Skip to content

Commit bef5516

Browse files
enjojoyenjojoy
committed
feat(suite): Fees redesign
feat(components): disable vertical align of SelectBar on demand
1 parent e411dee commit bef5516

File tree

13 files changed

+625
-248
lines changed

13 files changed

+625
-248
lines changed

‎packages/components/src/components/form/SelectBar/SelectBar.tsx

+46-21
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,26 @@ import { useElevation } from '../../ElevationContext/ElevationContext';
2626
export const allowedSelectBarFrameProps = ['margin', 'width'] as const satisfies FramePropsKeys[];
2727
type AllowedFrameProps = Pick<FrameProps, (typeof allowedSelectBarFrameProps)[number]>;
2828

29-
const Wrapper = styled.div<TransientProps<AllowedFrameProps> & { $isFullWidth?: boolean }>`
29+
const Wrapper = styled.div<
30+
TransientProps<AllowedFrameProps> & {
31+
$isFullWidth?: boolean;
32+
$shouldRealignToVertical?: boolean;
33+
}
34+
>`
3035
display: flex;
3136
align-items: center;
3237
gap: ${spacingsPx.sm};
3338
width: ${({ $isFullWidth }) => ($isFullWidth ? '100%' : 'auto')};
3439
35-
${breakpointMediaQueries.below_sm} {
36-
flex-direction: column;
37-
align-items: flex-start;
38-
width: 100%;
39-
}
40+
${({ $shouldRealignToVertical }) =>
41+
$shouldRealignToVertical &&
42+
css`
43+
@container ${breakpointMediaQueries.below_sm} {
44+
flex-direction: column;
45+
align-items: flex-start;
46+
width: 100%;
47+
}
48+
`}
4049
4150
${withFrameProps}
4251
`;
@@ -63,6 +72,7 @@ const Options = styled.div<{
6372
$optionsCount: number;
6473
$isFullWidth?: boolean;
6574
$elevation: Elevation;
75+
$shouldRealignToColumn?: boolean;
6676
}>`
6777
position: relative;
6878
display: grid;
@@ -74,14 +84,23 @@ const Options = styled.div<{
7484
border-radius: ${borders.radii.full};
7585
width: ${({ $isFullWidth }) => ($isFullWidth ? '100%' : 'auto')};
7686
77-
${breakpointMediaQueries.below_sm} {
78-
grid-auto-flow: row;
79-
width: 100%;
80-
border-radius: ${borders.radii.lg};
81-
}
87+
${({ $shouldRealignToColumn }) =>
88+
$shouldRealignToColumn &&
89+
css`
90+
@container ${breakpointMediaQueries.below_sm} {
91+
grid-auto-flow: row;
92+
width: 100%;
93+
border-radius: ${borders.radii.lg};
94+
}
95+
`}
8296
`;
8397

84-
const Puck = styled.div<{ $optionsCount: number; $selectedIndex: number; $elevation: Elevation }>`
98+
const Puck = styled.div<{
99+
$optionsCount: number;
100+
$selectedIndex: number;
101+
$elevation: Elevation;
102+
$shouldRealignToVertical?: boolean;
103+
}>`
85104
position: absolute;
86105
left: 4px;
87106
top: 4px;
@@ -98,15 +117,18 @@ const Puck = styled.div<{ $optionsCount: number; $selectedIndex: number; $elevat
98117
99118
${getFocusShadowStyle()}
100119
101-
${breakpointMediaQueries.below_sm} {
102-
left: 4px;
103-
right: 4px;
104-
top: 4px;
105-
width: auto;
106-
height: ${({ $optionsCount }) => getPuckWidth($optionsCount)};
107-
transform: ${({ $selectedIndex: selectedIndex }) =>
108-
`translateY(${getTranslateValue(selectedIndex)})`};
109-
}
120+
${({ $shouldRealignToVertical, $optionsCount, $selectedIndex }) =>
121+
$shouldRealignToVertical &&
122+
css`
123+
@container ${breakpointMediaQueries.below_sm} {
124+
left: 4px;
125+
right: 4px;
126+
top: 4px;
127+
width: auto;
128+
height: ${getPuckWidth($optionsCount)};
129+
transform: translateY(${getTranslateValue($selectedIndex)});
130+
}
131+
`}
110132
`;
111133

112134
const WidthMock = styled.span`
@@ -166,6 +188,7 @@ export type SelectBarProps<V extends ValueTypes> = {
166188
isDisabled?: boolean;
167189
isFullWidth?: boolean;
168190
className?: string;
191+
shouldRealignToVertical?: boolean;
169192
'data-testid'?: string;
170193
} & AllowedFrameProps;
171194

@@ -178,6 +201,7 @@ export const SelectBar = <V extends ValueTypes>({
178201
isDisabled = false,
179202
isFullWidth,
180203
className,
204+
shouldRealignToVertical = true,
181205
'data-testid': dataTest,
182206
...rest
183207
}: SelectBarProps<V>) => {
@@ -238,6 +262,7 @@ export const SelectBar = <V extends ValueTypes>({
238262
<Wrapper
239263
className={className}
240264
$isFullWidth={isFullWidth}
265+
$shouldRealignToVertical={shouldRealignToVertical}
241266
data-testid={dataTest}
242267
{...frameProps}
243268
>

‎packages/components/src/components/form/SelectBar/breakpointUtils.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export const constructContainerQueryMaxWidth = (breakpoint: number) =>
2+
`@container (max-width: ${breakpoint}px)`;

‎packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ClaimModal/ClaimModal.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export const ClaimModal = ({ onCancel }: ClaimModalModalProps) => {
2626

2727
const {
2828
account,
29+
network,
2930
formState: { errors, isSubmitting },
3031
register,
3132
control,
@@ -113,6 +114,7 @@ export const ClaimModal = ({ onCancel }: ClaimModalModalProps) => {
113114

114115
<Card paddingType="small" margin={{ vertical: spacings.xs }}>
115116
<Fees
117+
network={network}
116118
control={control}
117119
errors={errors}
118120
register={register}

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

+2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { Inputs } from './Inputs';
1212
export const StakeEthForm = () => {
1313
const {
1414
account,
15+
network,
1516
isConfirmModalOpen,
1617
closeConfirmModal,
1718
signTx,
@@ -45,6 +46,7 @@ export const StakeEthForm = () => {
4546

4647
<Card paddingType="small" margin={{ top: spacings.xs }}>
4748
<Fees
49+
network={network}
4850
control={control}
4951
errors={errors}
5052
register={register}

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

+2
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@ export const RbfFees = () => {
1313
account,
1414
feeInfo,
1515
composedLevels,
16+
network,
1617
} = useRbfContext();
1718

1819
return (
1920
<Fees
21+
network={network}
2022
control={control}
2123
errors={errors}
2224
register={register}

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

+2
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export const UnstakeEthForm = () => {
2929
control,
3030
setValue,
3131
getValues,
32+
network,
3233
changeFeeLevel,
3334
feeInfo,
3435
composedLevels,
@@ -76,6 +77,7 @@ export const UnstakeEthForm = () => {
7677

7778
<Card paddingType="small" margin={{ vertical: spacings.xs }}>
7879
<Fees
80+
network={network}
7981
control={control}
8082
errors={errors}
8183
register={register}

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

+53-5
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,19 @@ import {
1111
import { NetworkType } from '@suite-common/wallet-config';
1212
import { FeeInfo, FormState } from '@suite-common/wallet-types';
1313
import { getFeeUnits, getInputState, isInteger } from '@suite-common/wallet-utils';
14-
import { Banner, Column, Grid, Note, Text, useMediaQuery, variables } from '@trezor/components';
14+
import {
15+
Banner,
16+
Column,
17+
Grid,
18+
Icon,
19+
Note,
20+
Row,
21+
Text,
22+
useElevation,
23+
useMediaQuery,
24+
variables,
25+
} from '@trezor/components';
26+
import { FeeLevel } from '@trezor/connect';
1527
import { NumberInput } from '@trezor/product-components';
1628
import { spacings } from '@trezor/theme';
1729
import { HELP_CENTER_TRANSACTION_FEES_URL } from '@trezor/urls';
@@ -23,6 +35,7 @@ import { useSelector, useTranslation } from 'src/hooks/suite';
2335
import { selectLanguage } from 'src/reducers/suite/suiteReducer';
2436
import { validateDecimals } from 'src/utils/suite/validation';
2537

38+
import { BorderTopWrapper } from './Fees';
2639
import { InputError } from '../InputError';
2740

2841
const FEE_PER_UNIT = 'feePerUnit';
@@ -36,16 +49,22 @@ interface CustomFeeProps<TFieldValues extends FormState> {
3649
control: Control;
3750
setValue: UseFormSetValue<TFieldValues>;
3851
getValues: UseFormGetValues<TFieldValues>;
39-
changeFeeLimit?: (value: string) => void;
4052
composedFeePerByte: string;
4153
}
4254

55+
const getAverageFee = (levels: FeeLevel[]) => {
56+
if (levels.length > 2) {
57+
return `${levels[1].feePerUnit}`;
58+
}
59+
60+
return `${levels[0].feePerUnit}`;
61+
};
62+
4363
export const CustomFee = <TFieldValues extends FormState>({
4464
networkType,
4565
feeInfo,
4666
register,
4767
control,
48-
changeFeeLimit,
4968
composedFeePerByte,
5069
...props
5170
}: CustomFeeProps<TFieldValues>) => {
@@ -66,6 +85,7 @@ export const CustomFee = <TFieldValues extends FormState>({
6685

6786
const feePerUnitError = errors.feePerUnit;
6887
const feeLimitError = errors.feeLimit;
88+
const { elevation } = useElevation();
6989

7090
const useFeeLimit = networkType === 'ethereum';
7191
const isComposedFeeRateDifferent =
@@ -146,7 +166,7 @@ export const CustomFee = <TFieldValues extends FormState>({
146166
feeLimitError?.type === 'feeLimit' ? feeLimitValidationProps : undefined;
147167

148168
return (
149-
<Column gap={spacings.xs}>
169+
<Column gap={spacings.md} margin={{ bottom: spacings.md }}>
150170
<Banner
151171
icon
152172
variant="warning"
@@ -160,6 +180,35 @@ export const CustomFee = <TFieldValues extends FormState>({
160180
>
161181
<Translation id="TR_CUSTOM_FEE_WARNING" />
162182
</Banner>
183+
<BorderTopWrapper $elevation={elevation}>
184+
<Row
185+
justifyContent="space-between"
186+
margin={{
187+
left: spacings.md,
188+
right: spacings.md,
189+
}}
190+
>
191+
<Text variant="tertiary">
192+
<Translation
193+
id={
194+
networkType === 'ethereum'
195+
? 'TR_AVERAGE_GAS_PRICE'
196+
: 'TR_AVERAGE_FEE'
197+
}
198+
/>
199+
:
200+
</Text>
201+
<Text variant="tertiary">
202+
<Row alignItems="center" gap={spacings.xxs}>
203+
{getAverageFee(feeInfo.levels)} {getFeeUnits(networkType)}
204+
<Icon
205+
name={networkType === 'ethereum' ? 'gasPump' : 'receipt'}
206+
size="mediumLarge"
207+
/>
208+
</Row>
209+
</Text>
210+
</Row>
211+
</BorderTopWrapper>
163212
<Grid gap={spacings.xs} columns={useFeeLimit && !isBelowLaptop ? 2 : 1}>
164213
{useFeeLimit ? (
165214
<NumberInput
@@ -169,7 +218,6 @@ export const CustomFee = <TFieldValues extends FormState>({
169218
inputState={getInputState(feeLimitError)}
170219
name={FEE_LIMIT}
171220
data-testid={FEE_LIMIT}
172-
onChange={changeFeeLimit}
173221
bottomText={
174222
feeLimitError?.message ? (
175223
<InputError

0 commit comments

Comments
 (0)