Skip to content

Commit

Permalink
fix(suite): transaction labels blurred during editing
Browse files Browse the repository at this point in the history
  • Loading branch information
Lemonexe committed Dec 11, 2024
1 parent 5efac5a commit 2a99c13
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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) {
Expand All @@ -190,6 +195,7 @@ export const TransactionTarget = ({
return (
<TransactionTargetLayout
{...baseLayoutProps}
useHiddenPlaceholder={!isBeingEdited}
addressLabel={
<MetadataLabeling
isDisabled={isActionDisabled}
Expand All @@ -213,7 +219,7 @@ export const TransactionTarget = ({
entityKey: accountKey,
txid: transaction.txid,
outputIndex: target.n,
defaultValue: `${transaction.txid}-${target.n}`,
defaultValue: defaultMetadataValue,
value: targetMetadata,
}}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ interface TransactionTargetLayoutProps {
amount?: ReactNode;
fiatAmount?: ReactNode;
useAnimation?: boolean;
useHiddenPlaceholder?: boolean;
singleRowLayout?: boolean;
isFirst?: boolean;
isLast?: boolean;
Expand All @@ -115,6 +116,7 @@ export const TransactionTargetLayout = ({
singleRowLayout,
isFirst,
isLast,
useHiddenPlaceholder,
...rest
}: TransactionTargetLayoutProps) => {
const animation = useAnimation ? motionAnimation.expand : {};
Expand All @@ -128,7 +130,11 @@ export const TransactionTargetLayout = ({
</TimelineDotWrapper>

<TargetAddress>
<StyledHiddenPlaceholder>{addressLabel}</StyledHiddenPlaceholder>
{useHiddenPlaceholder === false ? (
addressLabel
) : (
<StyledHiddenPlaceholder>{addressLabel}</StyledHiddenPlaceholder>
)}
</TargetAddress>

<TargetAmountsWrapper $paddingBottom={!isLast}>
Expand Down
4 changes: 3 additions & 1 deletion packages/suite/src/reducers/suite/metadataReducer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;

0 comments on commit 2a99c13

Please sign in to comment.