From 2a99c1380bebc5bcd2d67c119a231e631c3cc8ca Mon Sep 17 00:00:00 2001
From: Jiri Zbytovsky <jiri.zbytovsky@satoshilabs.com>
Date: Wed, 11 Dec 2024 14:16:42 +0100
Subject: [PATCH] fix(suite): transaction labels blurred during editing

---
 .../TransactionTarget/TransactionTarget.tsx               | 8 +++++++-
 .../wallet/TransactionItem/TransactionTargetLayout.tsx    | 8 +++++++-
 packages/suite/src/reducers/suite/metadataReducer.ts      | 4 +++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/suite/src/components/wallet/TransactionItem/TransactionTarget/TransactionTarget.tsx b/packages/suite/src/components/wallet/TransactionItem/TransactionTarget/TransactionTarget.tsx
index d7b30c7e1e6..4ef47004a87 100644
--- a/packages/suite/src/components/wallet/TransactionItem/TransactionTarget/TransactionTarget.tsx
+++ b/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,
                     }}
                 />
diff --git a/packages/suite/src/components/wallet/TransactionItem/TransactionTargetLayout.tsx b/packages/suite/src/components/wallet/TransactionItem/TransactionTargetLayout.tsx
index c8985ea2a65..bf7eded0c7d 100644
--- a/packages/suite/src/components/wallet/TransactionItem/TransactionTargetLayout.tsx
+++ b/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}>
diff --git a/packages/suite/src/reducers/suite/metadataReducer.ts b/packages/suite/src/reducers/suite/metadataReducer.ts
index 14870a0026a..70313e0a9f5 100644
--- a/packages/suite/src/reducers/suite/metadataReducer.ts
+++ b/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;