From 815696326e95be88c91456d595d5643ef3cbfb4c Mon Sep 17 00:00:00 2001 From: Jan Komarek Date: Thu, 6 Feb 2025 18:20:33 +0100 Subject: [PATCH 1/4] fix(suite): add missing px unit --- .../UtxoSelectionList/UtxoSelection/UtxoSelection.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/suite/src/views/wallet/send/Options/BitcoinOptions/CoinControl/UtxoSelectionList/UtxoSelection/UtxoSelection.tsx b/packages/suite/src/views/wallet/send/Options/BitcoinOptions/CoinControl/UtxoSelectionList/UtxoSelection/UtxoSelection.tsx index 195d7010144..08fda2c872c 100644 --- a/packages/suite/src/views/wallet/send/Options/BitcoinOptions/CoinControl/UtxoSelectionList/UtxoSelection/UtxoSelection.tsx +++ b/packages/suite/src/views/wallet/send/Options/BitcoinOptions/CoinControl/UtxoSelectionList/UtxoSelection/UtxoSelection.tsx @@ -34,7 +34,7 @@ const ROW_GAP = spacings.xxs; const LabelPart = styled.div` display: flex; align-items: center; - gap: ${ROW_GAP}; + gap: ${ROW_GAP}px; color: ${({ theme }) => theme.textSubdued}; overflow: hidden; `; @@ -42,7 +42,7 @@ const LabelPart = styled.div` const DetailPartVisibleOnHover = styled.div<{ $alwaysVisible?: boolean }>` display: flex; align-items: center; - gap: ${ROW_GAP}; + gap: ${ROW_GAP}px; color: ${({ theme }) => theme.textSubdued}; ${({ $alwaysVisible }) => From 2950688ba6a1f1deea23005556500e9780fdffc8 Mon Sep 17 00:00:00 2001 From: Jan Komarek Date: Thu, 6 Feb 2025 18:25:01 +0100 Subject: [PATCH 2/4] chore(suite): add withLeftMargin prop to MetadataLabeling --- .../labeling/MetadataLabeling/MetadataLabeling.tsx | 14 ++++++++------ .../suite/labeling/MetadataLabeling/definitions.ts | 1 + .../PageNames/AccountName/AccountDetails.tsx | 1 + .../TransactionTarget/TransactionTarget.tsx | 1 + .../SwitchDevice/DeviceItem/WalletInstance.tsx | 1 + .../wallet/receive/components/UsedAddresses.tsx | 1 + 6 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/suite/src/components/suite/labeling/MetadataLabeling/MetadataLabeling.tsx b/packages/suite/src/components/suite/labeling/MetadataLabeling/MetadataLabeling.tsx index c91d8d8ee74..3e399c476ee 100644 --- a/packages/suite/src/components/suite/labeling/MetadataLabeling/MetadataLabeling.tsx +++ b/packages/suite/src/components/suite/labeling/MetadataLabeling/MetadataLabeling.tsx @@ -4,6 +4,7 @@ import styled from 'styled-components'; import { Button, DropdownMenuItemProps, Row } from '@trezor/components'; import { StaticSessionId } from '@trezor/connect'; +import { spacings } from '@trezor/theme'; import type { TimerId } from '@trezor/type-utils'; import { addMetadata, init, setEditing } from 'src/actions/suite/metadataLabelingActions'; @@ -61,9 +62,7 @@ const LabelButton = styled(Button)` `; // eslint-disable-next-line local-rules/no-override-ds-component -const ActionButton = styled(Button)<{ $isValueVisible?: boolean; $isVisible?: boolean }>` - margin-left: ${({ $isValueVisible, $isVisible, isLoading }) => - $isValueVisible || !$isVisible || isLoading ? '12px' : '4px'}; +const ActionButton = styled(Button)<{ $isVisible?: boolean }>` visibility: ${({ $isVisible }) => ($isVisible ? 'visible' : 'hidden')}; `; @@ -71,7 +70,6 @@ const ActionButton = styled(Button)<{ $isValueVisible?: boolean; $isVisible?: bo // eslint-disable-next-line local-rules/no-override-ds-component const SuccessButton = styled(Button)` cursor: wait; - margin-left: 12px; width: auto; background-color: ${({ theme }) => theme.backgroundPrimarySubtleOnElevation0}; color: ${({ theme }) => theme.textPrimaryDefault}; @@ -282,6 +280,7 @@ export const MetadataLabeling = ({ onSubmit, visible, updateFlag, + withLeftMargin, }: Props) => { const metadata = useSelector(state => state.metadata); const dispatch = useDispatch(); @@ -383,6 +382,7 @@ export const MetadataLabeling = ({ }, [payload.value]); const labelContainerDataTest = `${dataTestBase}/hover-container`; + const margin = withLeftMargin ? { left: spacings.sm } : undefined; // Should "add label"/"edit label" button be visible? const showActionButton = @@ -397,7 +397,7 @@ export const MetadataLabeling = ({ return ( {defaultVisibleValue} - + @@ -436,7 +436,7 @@ export const MetadataLabeling = ({ isDisabled={actionButtonsDisabled} $isVisible={isVisible} size="tiny" - $isValueVisible={!!payload.value} + margin={margin} onClick={e => { e.stopPropagation(); // By clicking on add label button, metadata.editing field is set @@ -478,6 +478,7 @@ export const MetadataLabeling = ({ isDisabled={actionButtonsDisabled} $isVisible={isVisible} size="tiny" + margin={margin} onClick={e => { e.stopPropagation(); activateEdit(); @@ -495,6 +496,7 @@ export const MetadataLabeling = ({ data-testid={`${dataTestBase}/success`} icon="check" size="tiny" + margin={margin} > {l10nLabelling.edited} diff --git a/packages/suite/src/components/suite/labeling/MetadataLabeling/definitions.ts b/packages/suite/src/components/suite/labeling/MetadataLabeling/definitions.ts index bd4e1db9069..1c3380039c0 100644 --- a/packages/suite/src/components/suite/labeling/MetadataLabeling/definitions.ts +++ b/packages/suite/src/components/suite/labeling/MetadataLabeling/definitions.ts @@ -20,6 +20,7 @@ export interface Props { visible?: boolean; placeholder?: string; updateFlag?: any; + withLeftMargin?: boolean; } export interface ExtendedProps extends Props { diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/AccountName/AccountDetails.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/AccountName/AccountDetails.tsx index e58436c6cef..5875328c5f9 100644 --- a/packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/AccountName/AccountDetails.tsx +++ b/packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/AccountName/AccountDetails.tsx @@ -113,6 +113,7 @@ export const AccountDetails = ({ selectedAccount, isBalanceShown }: AccountDetai
Date: Thu, 6 Feb 2025 18:53:04 +0100 Subject: [PATCH 3/4] fix(suite): fix withEditable alignment --- .../suite/labeling/MetadataLabeling/withEditable.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/suite/src/components/suite/labeling/MetadataLabeling/withEditable.tsx b/packages/suite/src/components/suite/labeling/MetadataLabeling/withEditable.tsx index b9b3120e99f..0e024a4e82d 100644 --- a/packages/suite/src/components/suite/labeling/MetadataLabeling/withEditable.tsx +++ b/packages/suite/src/components/suite/labeling/MetadataLabeling/withEditable.tsx @@ -9,7 +9,7 @@ import { import styled, { useTheme } from 'styled-components'; -import { AutoScalingInput, Icon } from '@trezor/components'; +import { AutoScalingInput, Icon, Row } from '@trezor/components'; const IconWrapper = styled.div<{ $bgColor: string }>` display: flex; @@ -89,7 +89,7 @@ export const withEditable = }, [value, touched]); return ( - <> + - + ); }; From e2ea9152a4015476e6c381d6525872662fc90019 Mon Sep 17 00:00:00 2001 From: Jan Komarek Date: Thu, 6 Feb 2025 19:03:51 +0100 Subject: [PATCH 4/4] feat(suite): display view-only address labels in coin control --- .../UtxoSelection/UtxoSelection.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/suite/src/views/wallet/send/Options/BitcoinOptions/CoinControl/UtxoSelectionList/UtxoSelection/UtxoSelection.tsx b/packages/suite/src/views/wallet/send/Options/BitcoinOptions/CoinControl/UtxoSelectionList/UtxoSelection/UtxoSelection.tsx index 08fda2c872c..51b2ce5eee1 100644 --- a/packages/suite/src/views/wallet/send/Options/BitcoinOptions/CoinControl/UtxoSelectionList/UtxoSelection/UtxoSelection.tsx +++ b/packages/suite/src/views/wallet/send/Options/BitcoinOptions/CoinControl/UtxoSelectionList/UtxoSelection/UtxoSelection.tsx @@ -3,7 +3,7 @@ import { MouseEventHandler, ReactNode } from 'react'; import styled, { css, useTheme } from 'styled-components'; import { formatNetworkAmount, isSameUtxo } from '@suite-common/wallet-utils'; -import { Checkbox, Row, Spinner, TextButton, Tooltip } from '@trezor/components'; +import { Checkbox, Row, Spinner, Text, TextButton, Tooltip } from '@trezor/components'; import { CheckContainer } from '@trezor/components/src/components/form/Checkbox/Checkbox'; import { AccountUtxo } from '@trezor/connect'; import { borders, spacings, spacingsPx, typography } from '@trezor/theme'; @@ -174,7 +174,7 @@ export const UtxoSelection = ({ transaction, utxo }: UtxoSelectionProps) => { }, } = useSendFormContext(); // selecting metadata from store rather than send form context which does not update on metadata change - const { outputLabels } = useSelector(selectLabelingDataForSelectedAccount); + const { addressLabels, outputLabels } = useSelector(selectLabelingDataForSelectedAccount); const dispatch = useDispatch(); @@ -247,8 +247,18 @@ export const UtxoSelection = ({ transaction, utxo }: UtxoSelectionProps) => { iconColor={utxoTagIconColor} /> )} - -
{utxo.address}
+ + {utxo.address}} + /> +