Skip to content

Commit 36d5c61

Browse files
peter-sandersonpeter-sanderson
committed
feat: UI facelift of the Affected transactions in the RBF flow
wip
1 parent e6af2c1 commit 36d5c61

File tree

18 files changed

+201
-240
lines changed

18 files changed

+201
-240
lines changed

‎packages/components/src/components/Card/Card.tsx

+11-7
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
44

55
import { borders, Elevation, spacingsPx } from '@trezor/theme';
66

7-
import { ElevationUp, useElevation } from '../ElevationContext/ElevationContext';
7+
import { ElevationContext, ElevationUp, useElevation } from '../ElevationContext/ElevationContext';
88
import {
99
FrameProps,
1010
FramePropsKeys,
@@ -38,7 +38,7 @@ const Container = styled.div<{ $fillType: FillType } & TransientProps<AllowedFra
3838
width: 100%;
3939
border-radius: ${borders.radii.md};
4040
background: ${({ theme, $fillType }) =>
41-
$fillType !== 'none' && theme.backgroundTertiaryDefaultOnElevation0};
41+
$fillType !== 'flat' && theme.backgroundTertiaryDefaultOnElevation0};
4242
padding: ${spacingsPx.xxxs};
4343
4444
${withFrameProps}
@@ -65,11 +65,11 @@ const CardContainer = styled.div<
6565
position: relative;
6666
padding: ${mapPaddingTypeToPadding};
6767
border-radius: ${borders.radii.md};
68-
transition:
69-
background 0.3s,
70-
box-shadow 0.2s,
71-
border-color 0.2s;
7268
cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};
69+
transition:
70+
background 0.5s,
71+
border 0.5s,
72+
box-shadow 0.5s;
7373
7474
${({ theme, $variant, $paddingType }) =>
7575
$variant &&
@@ -145,7 +145,11 @@ const CardComponent = forwardRef<HTMLDivElement, CardPropsWithTransientProps>(
145145
{...rest}
146146
data-testid={dataTest}
147147
>
148-
{fillType === 'none' ? children : <ElevationUp>{children}</ElevationUp>}
148+
{fillType === 'flat' ? (
149+
<ElevationContext baseElevation={-1}>{children}</ElevationContext>
150+
) : (
151+
<ElevationUp>{children}</ElevationUp>
152+
)}
149153
</CardContainer>
150154
);
151155
},

‎packages/components/src/components/Card/types.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { UIVariant } from '../../config/types';
33
export const paddingTypes = ['small', 'none', 'normal', 'large'] as const;
44
export type PaddingType = (typeof paddingTypes)[number];
55

6-
export const fillTypes = ['none', 'default'] as const;
6+
export const fillTypes = ['flat', 'default'] as const;
77
export type FillType = (typeof fillTypes)[number];
88

99
export const cardVariants = ['primary', 'warning'] as const;

‎packages/components/src/components/Card/utils.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
spacingsPx,
55
Elevation,
66
mapElevationToBackground,
7-
mapElevationToBorder,
87
SpacingPxValues,
98
CSSColor,
109
} from '@trezor/theme';
@@ -61,6 +60,7 @@ export const mapFillTypeToCSS = ({
6160
default: css`
6261
background: ${mapElevationToBackground({ $elevation, theme })};
6362
box-shadow: ${$elevation === 1 && !$hasLabel && theme.boxShadowBase};
63+
border: 1px solid transparent;
6464
6565
${$isClickable &&
6666
css`
@@ -69,8 +69,9 @@ export const mapFillTypeToCSS = ({
6969
}
7070
`}
7171
`,
72-
none: css`
73-
border: 1px solid ${mapElevationToBorder({ $elevation, theme })};
72+
flat: css`
73+
background: ${theme.backgroundSurfaceElevationNegative};
74+
border: 1px solid ${theme.borderElevation0};
7475
`,
7576
};
7677

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

File renamed without changes.

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

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { Banner, Button, Card, Column, Divider, Text } from '@trezor/components';
2+
import { spacings } from '@trezor/theme';
3+
import { ChainedTransactions } from '@suite-common/wallet-types';
4+
5+
import { Translation } from 'src/components/suite';
6+
7+
import { AffectedTransactionItem } from './AffectedTransactionItem';
8+
9+
type AffectedTransactionsProps = {
10+
chainedTxs?: ChainedTransactions;
11+
showChained: () => void;
12+
};
13+
14+
export const AffectedTransactions = ({ chainedTxs, showChained }: AffectedTransactionsProps) => {
15+
if (chainedTxs === undefined) {
16+
return null;
17+
}
18+
19+
return (
20+
<Card fillType="flat" paddingType="none">
21+
<Text typographyStyle="body" margin={spacings.md}>
22+
<Translation id="TR_CHAINED_TXS" />
23+
</Text>
24+
<Divider margin={spacings.zero} />
25+
<Column margin={spacings.md}>
26+
<Banner
27+
variant="warning"
28+
rightContent={
29+
<Button
30+
variant="warning"
31+
onClick={showChained}
32+
icon="caretRight"
33+
iconAlignment="right"
34+
>
35+
<Translation id="TR_SEE_DETAILS" />
36+
</Button>
37+
}
38+
>
39+
<Translation id="TR_AFFECTED_TXS" />
40+
</Banner>
41+
<Column alignItems="center">
42+
{chainedTxs.own.map(tx => (
43+
<AffectedTransactionItem key={tx.txid} tx={tx} isAccountOwned />
44+
))}
45+
{chainedTxs.others.map(tx => (
46+
<AffectedTransactionItem key={tx.txid} tx={tx} />
47+
))}
48+
</Column>
49+
</Column>
50+
</Card>
51+
);
52+
};

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

+68-80
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,25 @@
11
import { ReactNode } from 'react';
22

33
import styled from 'styled-components';
4-
import { AnimatePresence, motion } from 'framer-motion';
54

6-
import { Icon, variables, Radio, motionAnimation } from '@trezor/components';
5+
import {
6+
Icon,
7+
variables,
8+
Radio,
9+
Banner,
10+
Column,
11+
Card,
12+
Row,
13+
Divider,
14+
Text,
15+
} from '@trezor/components';
716
import { formatNetworkAmount } from '@suite-common/wallet-utils';
817
import { spacings } from '@trezor/theme';
918

1019
import { FormattedCryptoAmount, HiddenPlaceholder } from 'src/components/suite';
1120
import { Translation, TranslationKey } from 'src/components/suite/Translation';
1221
import { useRbfContext } from 'src/hooks/wallet/useRbfForm';
1322

14-
import { GreyCard } from './GreyCard';
15-
import { WarnHeader } from './WarnHeader';
16-
17-
const OutputsWrapper = styled.div`
18-
display: flex;
19-
flex-direction: column;
20-
padding-top: 12px;
21-
margin-top: 24px;
22-
border-top: 1px solid ${({ theme }) => theme.legacy.STROKE_GREY};
23-
`;
24-
25-
const Output = styled.div`
26-
display: flex;
27-
align-items: center;
28-
padding: 8px 0;
29-
`;
30-
31-
const OutputInner = styled.div`
32-
display: flex;
33-
flex-direction: column;
34-
`;
35-
3623
const OutputLabel = styled.div<{ $isChecked: boolean }>`
3724
display: flex;
3825
align-items: center;
@@ -109,63 +96,64 @@ export const DecreasedOutputs = () => {
10996
}
11097

11198
return (
112-
<AnimatePresence initial>
113-
<motion.div {...motionAnimation.expand}>
114-
<GreyCard>
115-
<WarnHeader data-testid="@send/decreased-outputs">
116-
<Translation id={decreaseWarning} />
117-
</WarnHeader>
118-
<OutputsWrapper>
119-
{formValues.outputs.flatMap((o, i) => {
120-
if (typeof o.address !== 'string') return null;
121-
const isChecked = setMaxOutputId === i;
122-
123-
return (
124-
// it's safe to use array index as key since outputs do not change
125-
126-
<Output key={i}>
127-
{useRadio && (
128-
<Radio
129-
onClick={() => {
130-
setValue('setMaxOutputId', i);
131-
composeRequest();
99+
<Card fillType="flat" paddingType="none">
100+
<Text typographyStyle="body" margin={spacings.md}>
101+
<Translation id="TR_AMOUNT_REDUCED_TXS" />
102+
</Text>
103+
<Divider margin={spacings.zero} />
104+
<Column margin={spacings.md}>
105+
<Banner variant="warning" data-testid="@send/decreased-outputs" icon="warning">
106+
<Translation id={decreaseWarning} />
107+
</Banner>
108+
<Column>
109+
{formValues.outputs.flatMap((o, i) => {
110+
if (typeof o.address !== 'string') return null;
111+
const isChecked = setMaxOutputId === i;
112+
113+
return (
114+
// it's safe to use array index as key since outputs do not change
115+
<Row key={i}>
116+
{useRadio && (
117+
<Radio
118+
onClick={() => {
119+
setValue('setMaxOutputId', i);
120+
composeRequest();
121+
}}
122+
isChecked={isChecked}
123+
margin={{ right: spacings.xs }}
124+
/>
125+
)}
126+
<Column>
127+
<OutputLabel $isChecked={isChecked}>
128+
<Translation
129+
id="TR_REDUCE_FROM"
130+
values={{
131+
value: (
132+
<FormattedCryptoAmount
133+
value={
134+
shouldSendInSats
135+
? formatNetworkAmount(
136+
o.amount,
137+
account.symbol,
138+
)
139+
: o.amount
140+
}
141+
symbol={account.symbol}
142+
/>
143+
),
132144
}}
133-
isChecked={isChecked}
134-
margin={{ right: spacings.xs }}
135145
/>
136-
)}
137-
<OutputInner>
138-
<OutputLabel $isChecked={isChecked}>
139-
<Translation
140-
id="TR_REDUCE_FROM"
141-
values={{
142-
value: (
143-
<FormattedCryptoAmount
144-
value={
145-
shouldSendInSats
146-
? formatNetworkAmount(
147-
o.amount,
148-
account.symbol,
149-
)
150-
: o.amount
151-
}
152-
symbol={account.symbol}
153-
/>
154-
),
155-
}}
156-
/>
157-
{isChecked && reducedAmount}
158-
</OutputLabel>
159-
<OutputAddress $isChecked={isChecked}>
160-
<HiddenPlaceholder>{o.address}</HiddenPlaceholder>
161-
</OutputAddress>
162-
</OutputInner>
163-
</Output>
164-
);
165-
})}
166-
</OutputsWrapper>
167-
</GreyCard>
168-
</motion.div>
169-
</AnimatePresence>
146+
{isChecked && reducedAmount}
147+
</OutputLabel>
148+
<OutputAddress $isChecked={isChecked}>
149+
<HiddenPlaceholder>{o.address}</HiddenPlaceholder>
150+
</OutputAddress>
151+
</Column>
152+
</Row>
153+
);
154+
})}
155+
</Column>
156+
</Column>
157+
</Card>
170158
);
171159
};

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { AccountType, Network } from '@suite-common/wallet-config';
77
import { TrezorLink, Translation } from 'src/components/suite';
88
import { TransactionItem } from 'src/components/wallet/TransactionItem/TransactionItem';
99

10-
import { AffectedTransactionItem } from './ChangeFee/AffectedTransactionItem';
10+
import { AffectedTransactionItem } from './AffectedTransactions/AffectedTransactionItem';
1111

1212
const Wrapper = styled.div`
1313
text-align: left;

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

-51
This file was deleted.

0 commit comments

Comments
 (0)