-
-
Notifications
You must be signed in to change notification settings - Fork 273
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: UI facelift of the Affected transactions in the RBF flow
- Loading branch information
1 parent
5b36afc
commit a7ffca5
Showing
24 changed files
with
419 additions
and
428 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
33 changes: 33 additions & 0 deletions
33
...l/UserContextModal/TxDetailModal/AffectedTransactions/AddressReplaceMeAfterAdamsMerge.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import styled from 'styled-components'; | ||
|
|
||
| // Todo: replace once Adams PR is merged (here https://github.com/trezor/trezor-suite/pull/16465 but shall be separated ane generalized first) | ||
| const AddressWrapper = styled.p` | ||
| text-wrap: balance; | ||
| font-variant-numeric: tabular-nums; | ||
| letter-spacing: 0; | ||
| `; | ||
|
|
||
| // Todo: replace once Adams PR is merged (here https://github.com/trezor/trezor-suite/pull/16465 but shall be separated ane generalized first) | ||
| const addSpacing = (value: string) => value.match(/.{1,4}/g)?.join(' ') || value; | ||
|
|
||
| // Todo: replace once Adams PR is merged (here https://github.com/trezor/trezor-suite/pull/16465 but shall be separated ane generalized first) | ||
| export type AddressProps = { | ||
| value: string; | ||
| isTruncated?: boolean; | ||
| }; | ||
|
|
||
| // Todo: replace once Adams PR is merged (here https://github.com/trezor/trezor-suite/pull/16465 but shall be separated ane generalized first) | ||
| export const AddressReplaceMeAfterAdamsMerge = ({ value, isTruncated }: AddressProps) => { | ||
| const formattedValue = isTruncated | ||
| ? `${addSpacing(value.slice(0, 8))} ... ${addSpacing(value.slice(-8))}` | ||
| : addSpacing(value); | ||
|
|
||
| const handleCopy = (e: React.ClipboardEvent) => { | ||
| const selection = window.getSelection()?.toString(); | ||
|
|
||
| e.preventDefault(); | ||
| e.clipboardData?.setData('text/plain', selection?.replace(/\s/g, '') ?? value); | ||
| }; | ||
|
|
||
| return <AddressWrapper onCopy={handleCopy}>{formattedValue}</AddressWrapper>; | ||
| }; |
50 changes: 50 additions & 0 deletions
50
...eduxModal/UserContextModal/TxDetailModal/AffectedTransactions/AffectedTransactionItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { useTheme } from 'styled-components'; | ||
|
|
||
| import { Icon, InfoSegments, Row, Text } from '@trezor/components'; | ||
| import { WalletAccountTransaction } from '@suite-common/wallet-types'; | ||
| import { Transaction } from '@trezor/blockchain-link-types'; | ||
| import { spacings } from '@trezor/theme'; | ||
|
|
||
| import { FormattedDate, HiddenPlaceholder } from 'src/components/suite'; | ||
|
|
||
| import { AddressReplaceMeAfterAdamsMerge } from './AddressReplaceMeAfterAdamsMerge'; | ||
|
|
||
| type RowIcon = { | ||
| txType: Transaction['type']; | ||
| isAccountOwned: boolean | undefined; | ||
| }; | ||
|
|
||
| const RowIcon = ({ txType, isAccountOwned }: RowIcon) => { | ||
| const theme = useTheme(); | ||
|
|
||
| const iconType = txType === 'recv' ? 'receive' : 'send'; | ||
|
|
||
| return ( | ||
| <Icon | ||
| size={16} | ||
| color={theme.legacy.TYPE_LIGHT_GREY} | ||
| name={isAccountOwned ? iconType : 'clock'} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| type AffectedTransactionItemProps = { | ||
| tx: WalletAccountTransaction; | ||
| isAccountOwned?: boolean; | ||
| }; | ||
|
|
||
| export const AffectedTransactionItem = ({ tx, isAccountOwned }: AffectedTransactionItemProps) => ( | ||
| <Row gap={spacings.sm}> | ||
| <RowIcon isAccountOwned={isAccountOwned} txType={tx.type} /> | ||
|
|
||
| <InfoSegments> | ||
| {tx.blockTime && <FormattedDate value={new Date(tx.blockTime * 1000)} date time />} | ||
|
|
||
| <Text typographyStyle="hint" variant="tertiary"> | ||
| <HiddenPlaceholder> | ||
| <AddressReplaceMeAfterAdamsMerge value={tx.txid} isTruncated /> | ||
| </HiddenPlaceholder> | ||
| </Text> | ||
| </InfoSegments> | ||
| </Row> | ||
| ); |
55 changes: 55 additions & 0 deletions
55
...s/ReduxModal/UserContextModal/TxDetailModal/AffectedTransactions/AffectedTransactions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { Banner, Card, Column, Divider, Link, Row, Table, Text } from '@trezor/components'; | ||
| import { spacings } from '@trezor/theme'; | ||
| import { ChainedTransactions } from '@suite-common/wallet-types'; | ||
|
|
||
| import { Translation } from 'src/components/suite'; | ||
|
|
||
| import { AffectedTransactionItem } from './AffectedTransactionItem'; | ||
|
|
||
| type AffectedTransactionsProps = { | ||
| chainedTxs?: ChainedTransactions; | ||
| showChained: () => void; | ||
| }; | ||
|
|
||
| export const AffectedTransactions = ({ chainedTxs, showChained }: AffectedTransactionsProps) => { | ||
| if (chainedTxs === undefined) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <Card fillType="flat" paddingType="none"> | ||
| <Row justifyContent="space-between" alignItems="center" padding={spacings.md}> | ||
| <Text typographyStyle="body"> | ||
| <Translation id="TR_CHAINED_TXS" /> | ||
| </Text> | ||
| <Text variant="primary" typographyStyle="hint"> | ||
| <Link onClick={showChained} icon="arrowUpRight" variant="nostyle"> | ||
| <Translation id="TR_SEE_DETAILS" /> | ||
| </Link> | ||
| </Text> | ||
| </Row> | ||
| <Divider margin={spacings.zero} /> | ||
| <Column margin={spacings.md}> | ||
| <Banner variant="warning" margin={{ bottom: spacings.md }}> | ||
| <Translation id="TR_AFFECTED_TXS" /> | ||
| </Banner> | ||
| <Table> | ||
| {chainedTxs.own.map(tx => ( | ||
| <Table.Row key={tx.txid}> | ||
| <Table.Cell> | ||
| <AffectedTransactionItem tx={tx} isAccountOwned /> | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| ))} | ||
| {chainedTxs.others.map(tx => ( | ||
| <Table.Row key={tx.txid}> | ||
| <Table.Cell> | ||
| <AffectedTransactionItem tx={tx} /> | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| ))} | ||
| </Table> | ||
| </Column> | ||
| </Card> | ||
| ); | ||
| }; |
Oops, something went wrong.