fix(suite): transaction labels blurred during editing

Author: Lemonexe

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

@@ -23,6 +23,7 @@ import { WalletAccountTransaction } from 'src/types/wallet';
 import { useDispatch, useSelector } from 'src/hooks/suite';
 import { AccountLabels } from 'src/types/suite/metadata';
 import { selectLocalCurrency } from 'src/reducers/wallet/settingsReducer';
+import { selectLabelingValueBeingEdited } from 'src/reducers/suite/metadataReducer';
 
 import { TokenTransferAddressLabel } from './TokenTransferAddressLabel';
 import { TargetAddressLabel } from './TargetAddressLabel';
@@ -167,6 +168,10 @@ export const TransactionTarget = ({
     const operation = getTxOperation(transaction.type);
     const targetMetadata = accountMetadata?.outputLabels?.[transaction.txid]?.[target.n];
 
+    const defaultMetadataValue = `${transaction.txid}-${target.n}`;
+    const labelingValueBeingEdited = useSelector(selectLabelingValueBeingEdited);
+    const isBeingEdited = defaultMetadataValue === labelingValueBeingEdited;
+
     const copyAddress = () => {
         let payload: ToastPayload = { type: 'copy-to-clipboard' };
         if (!target?.addresses) {
@@ -190,6 +195,7 @@ export const TransactionTarget = ({
     return (
         <TransactionTargetLayout
             {...baseLayoutProps}
+            useHiddenPlaceholder={!isBeingEdited}
             addressLabel={
                 <MetadataLabeling
                     isDisabled={isActionDisabled}
@@ -213,7 +219,7 @@ export const TransactionTarget = ({
                         entityKey: accountKey,
                         txid: transaction.txid,
                         outputIndex: target.n,
-                        defaultValue: `${transaction.txid}-${target.n}`,
+                        defaultValue: defaultMetadataValue,
                         value: targetMetadata,
                     }}
                 />

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

@@ -101,6 +101,7 @@ interface TransactionTargetLayoutProps {
     amount?: ReactNode;
     fiatAmount?: ReactNode;
     useAnimation?: boolean;
+    useHiddenPlaceholder?: boolean;
     singleRowLayout?: boolean;
     isFirst?: boolean;
     isLast?: boolean;
@@ -115,6 +116,7 @@ export const TransactionTargetLayout = ({
     singleRowLayout,
     isFirst,
     isLast,
+    useHiddenPlaceholder,
     ...rest
 }: TransactionTargetLayoutProps) => {
     const animation = useAnimation ? motionAnimation.expand : {};
@@ -128,7 +130,11 @@ export const TransactionTargetLayout = ({
             </TimelineDotWrapper>
 
             <TargetAddress>
-                <StyledHiddenPlaceholder>{addressLabel}</StyledHiddenPlaceholder>
+                {useHiddenPlaceholder === false ? (
+                    addressLabel
+                ) : (
+                    <StyledHiddenPlaceholder>{addressLabel}</StyledHiddenPlaceholder>
+                )}
             </TargetAddress>
 
             <TargetAmountsWrapper $paddingBottom={!isLast}>

packages/suite/src/reducers/suite/metadataReducer.ts

@@ -280,7 +280,7 @@ export const selectIsLabelingAvailable = (state: MetadataRootState) => {
 };
 
 /**
- it is possible to initiate metadata 
+ it is possible to initiate metadata
  */
 export const selectIsLabelingInitPossible = (state: MetadataRootState) => {
     const device = selectDevice(state);
@@ -328,4 +328,6 @@ export const selectPasswordManagerState = (
         METADATA_PASSWORDS.DEFAULT_PASSWORD_MANAGER_STATE) as PasswordManagerState;
 };
 
+export const selectLabelingValueBeingEdited = ({ metadata }: MetadataRootState) => metadata.editing;
+
 export default metadataReducer;