Skip to content

Commit

Permalink
wip: add labeling for tokens in transactions list
Browse files Browse the repository at this point in the history
  • Loading branch information
@mroz22
mroz22 committed May 11, 2022
1 parent 10843ef commit 4075f9b
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 18 deletions.
63 changes: 46 additions & 17 deletions packages/suite/src/components/wallet/TransactionItem/components/Target/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import TokenTransferAddressLabel from '../TokenTransferAddressLabel';
import TargetAddressLabel from '../TargetAddressLabel';
import BaseTargetLayout from '../BaseTargetLayout';
import { copyToClipboard } from '@suite-utils/dom';
import { AccountMetadata } from '@suite-types/metadata';
import { AccountMetadata, MetadataAddPayload } from '@suite-types/metadata';
import { ExtendedMessageDescriptor } from '@suite-types';

const StyledHiddenPlaceholder = styled(props => <HiddenPlaceholder {...props} />)`
Expand All @@ -23,7 +23,11 @@ const StyledHiddenPlaceholder = styled(props => <HiddenPlaceholder {...props} />
text-overflow: ellipsis;
`;

interface TokenTransferProps {
interface MetadataProps {
isMetadataDisabled: boolean;
metadataPayload: MetadataAddPayload;
}
interface TokenTransferProps extends MetadataProps {
transfer: ArrayElement<WalletAccountTransaction['tokens']>;
transaction: WalletAccountTransaction;
singleRowLayout?: boolean;
Expand All @@ -34,14 +38,47 @@ interface TokenTransferProps {
export const TokenTransfer = ({
transfer,
transaction,

metadataPayload,
isMetadataDisabled,
...baseLayoutProps
}: TokenTransferProps) => {
console.log('transfer', transfer);
console.log('transaction', transaction);

const operation = getTxOperation(transfer);
return (
<BaseTargetLayout
{...baseLayoutProps}
addressLabel={<TokenTransferAddressLabel transfer={transfer} type={transaction.type} />}
addressLabel={
<MetadataLabeling
isDisabled={isMetadataDisabled}
defaultVisibleValue={
<TokenTransferAddressLabel transfer={transfer} type={transaction.type} />
}
// todo: items in dropdown?
// dropdownOptions={[
// {
// callback: () => {
// if (!target?.addresses) {
// // probably should not happen?
// return addNotification({
// type: 'error',
// error: 'There is nothing to copy',
// });
// }
// const result = copyToClipboard(target.addresses.join(), null);
// if (typeof result === 'string') {
// return addNotification({ type: 'error', error: result });
// }
// return addNotification({ type: 'copy-to-clipboard' });
// },
// label: <Translation id="TR_ADDRESS_MODAL_CLIPBOARD" />,
// key: 'copy-address',
// },
// ]}
payload={metadataPayload}
/>
}
amount={
!baseLayoutProps.singleRowLayout && (
<StyledHiddenPlaceholder>
Expand All @@ -54,7 +91,7 @@ export const TokenTransfer = ({
);
};

interface TargetProps {
interface TargetProps extends MetadataProps {
target: ArrayElement<WalletAccountTransaction['targets']>;
transaction: WalletAccountTransaction;
singleRowLayout?: boolean;
Expand All @@ -69,21 +106,20 @@ export const Target = ({
target,
transaction,
accountMetadata,
accountKey,
isActionDisabled,
metadataPayload,
isMetadataDisabled,
...baseLayoutProps
}: TargetProps) => {
const targetAmount = getTargetAmount(target, transaction);
const operation = getTxOperation(transaction);
const { addNotification } = useActions({ addNotification: notificationActions.addToast });
const targetMetadata = accountMetadata?.outputLabels?.[transaction.txid]?.[target.n];

return (
<BaseTargetLayout
{...baseLayoutProps}
addressLabel={
<MetadataLabeling
isDisabled={isActionDisabled}
isDisabled={isMetadataDisabled}
defaultVisibleValue={
<TargetAddressLabel
accountMetadata={accountMetadata}
Expand Down Expand Up @@ -111,14 +147,7 @@ export const Target = ({
key: 'copy-address',
},
]}
payload={{
type: 'outputLabel',
accountKey,
txid: transaction.txid,
outputIndex: target.n,
defaultValue: `${transaction.txid}-${target.n}`,
value: targetMetadata,
}}
payload={metadataPayload}
/>
}
amount={
Expand Down
26 changes: 25 additions & 1 deletion packages/suite/src/components/wallet/TransactionItem/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,17 @@ const TransactionItem = React.memo(
} // if list of targets is expanded we won't get last item here
accountMetadata={accountMetadata}
accountKey={accountKey}
isActionDisabled={isActionDisabled}
isMetadataDisabled={!!isActionDisabled}
metadataPayload={{
type: 'outputLabel',
accountKey,
txid: transaction.txid,
outputIndex: t.payload.n,
defaultValue: `${transaction.txid}-${t.payload.n}`,
value: accountMetadata?.outputLabels?.[
transaction.txid
]?.[t.payload.n],
}}
/>
) : (
<TokenTransfer
Expand All @@ -294,6 +304,20 @@ const TransactionItem = React.memo(
? false
: i === previewTargets.length - 1
}
isMetadataDisabled={!!isActionDisabled}
metadataPayload={{
type: 'outputLabel',
accountKey,
txid: transaction.txid,
// todo: solve index when multiple tokens. we should add this in blockchain-link, some originIndex field
outputIndex: 0,
defaultValue: `${
transaction.txid
}-${0}`,
value: accountMetadata?.outputLabels?.[
transaction.txid
]?.[0],
}}
/>
)}
</React.Fragment>
Expand Down

0 comments on commit 4075f9b

Please sign in to comment.