Labeling bugs

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,17 +62,14 @@ 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')};
 `;
 
 // @TODO this shouldn't be Button
 // 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 (
             <LabelContainer data-testid={labelContainerDataTest}>
                 {defaultVisibleValue}
-                <ActionButton variant="tertiary" isDisabled isLoading size="tiny">
+                <ActionButton variant="tertiary" isDisabled isLoading size="tiny" margin={margin}>
                     <Translation id="TR_LOADING" />
                 </ActionButton>
             </LabelContainer>
@@ -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}
                 </SuccessButton>

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 {

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 (
-            <>
+            <Row>
                 <WrappedComponent {...props}>
                     <Editable
                         minWidth={20}
@@ -140,6 +140,6 @@ export const withEditable =
                         />
                     </IconWrapper>
                 </IconListWrapper>
-            </>
+            </Row>
         );
     };

packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/AccountName/AccountDetails.tsx

@@ -113,6 +113,7 @@ export const AccountDetails = ({ selectedAccount, isBalanceShown }: AccountDetai
             <div>
                 <AccountHeading $isBalanceShown={isBalanceShown}>
                     <MetadataLabeling
+                        withLeftMargin
                         accountType={accountType}
                         networkType={selectedAccount.networkType}
                         path={path}

packages/suite/src/components/wallet/TransactionItem/TransactionTarget/TransactionTarget.tsx

@@ -198,6 +198,7 @@ export const TransactionTarget = ({
             useHiddenPlaceholder={!isBeingEdited}
             addressLabel={
                 <MetadataLabeling
+                    withLeftMargin
                     isDisabled={isActionDisabled}
                     defaultVisibleValue={
                         <TargetAddressLabel

packages/suite/src/views/suite/SwitchDevice/DeviceItem/WalletInstance.tsx

@@ -132,6 +132,7 @@ export const WalletInstance = ({
                                     )}
                                     {instance.state?.staticSessionId ? (
                                         <MetadataLabeling
+                                            withLeftMargin
                                             defaultVisibleValue={
                                                 walletLabel === undefined ||
                                                 walletLabel.trim() === ''

packages/suite/src/views/wallet/receive/components/UsedAddresses.tsx

@@ -66,6 +66,7 @@ const Item = ({ addr, locked, symbol, onClick, metadataPayload, index }: ItemPro
             <Table.Cell>
                 <Text typographyStyle="hint" data-testid={`@wallet/receive/used-address/${index}`}>
                     <MetadataLabeling
+                        withLeftMargin
                         payload={{
                             ...metadataPayload,
                         }}

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';
@@ -34,15 +34,15 @@ 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;
 `;
 
 const DetailPartVisibleOnHover = styled.div<{ $alwaysVisible?: boolean }>`
     display: flex;
     align-items: center;
-    gap: ${ROW_GAP};
+    gap: ${ROW_GAP}px;
     color: ${({ theme }) => theme.textSubdued};
 
     ${({ $alwaysVisible }) =>
@@ -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}
                         />
                     )}
-
-                    <Address>{utxo.address}</Address>
+                    <Text typographyStyle="hint">
+                        <MetadataLabeling
+                            payload={{
+                                type: 'addressLabel',
+                                entityKey: account.key,
+                                defaultValue: utxo.address,
+                                value: addressLabels[utxo.address],
+                            }}
+                            isDisabled
+                            defaultVisibleValue={<Address>{utxo.address}</Address>}
+                        />
+                    </Text>
 
                     <StyledCryptoAmount
                         value={formatNetworkAmount(utxo.amount, account.symbol)}