8449370367

Committed 27 Mar 2024 09:18AM UTC coverage: 50.567% (-0.9%) from 51.421%

Build # 8449370367

Build Type

push

github

Committed by

web-flow

Commit Message

feat: transaction representation refactor (#883)

- transaction includes transaction fees
- it displays returned deposit and deposits
- it shows from address sections wiht tokens and nfts
- it shows to address section with tokens and nfts
- it displays tokens and nfts in the summary
- it summarises the balance in coins of a transactions
- it displays the dapp name in the origin tab

Run Details

2172 of 5362 branches covered (40.51%)

Branch coverage included in aggregate %.

63 of 177 new or added lines in 10 files covered. (35.59%)

2 existing lines in 1 file now uncovered.

5146 of 9110 relevant lines covered (56.49%)

52.17 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/core/src/ui/components/DappAddressSections/DappAddressSections.tsx

1	/* eslint-disable sonarjs/no-identical-functions */
NEW 2	import React from 'react';	×
NEW 3	import { truncate, addEllipsis } from '@lace/common';	×
NEW 4	import { Wallet } from '@lace/cardano';	×
5	import { Cardano, AssetInfoWithAmount } from '@cardano-sdk/core';
NEW 6	import { Typography } from 'antd';	×
7
NEW 8	import styles from './DappAddressSections.module.scss';	×
NEW 9	import { useTranslate } from '@src/ui/hooks';	×
10
NEW 11	import { TransactionAssets, SummaryExpander, DappTransactionSummary, Tooltip } from '@lace/ui';	×
NEW 12	import classNames from 'classnames';	×
13
14	interface GroupedAddressAssets {
15	nfts: Array<AssetInfoWithAmount>;
16	tokens: Array<AssetInfoWithAmount>;
17	coins: Array<bigint>;
18	}
19
20	export interface DappAddressSectionProps {
21	groupedFromAddresses: Map<Cardano.PaymentAddress, GroupedAddressAssets>;
22	groupedToAddresses: Map<Cardano.PaymentAddress, GroupedAddressAssets>;
23	isToAddressesEnabled: boolean;
24	isFromAddressesEnabled: boolean;
25	coinSymbol: string;
26	}
27
NEW 28	const tryDecodeAsUtf8 = (	×
29	value: WithImplicitCoercion<string> \| { [Symbol.toPrimitive](hint: 'string'): string }
30	): string => {
NEW 31	const bytes = Uint8Array.from(Buffer.from(value, 'hex'));	×
NEW 32	const decoder = new TextDecoder('utf-8');	×
33	// Decode the Uint8Array to a UTF-8 string
NEW 34	return decoder.decode(bytes);	×
35	};
36
NEW 37	const getFallbackName = (asset: AssetInfoWithAmount) =>	×
NEW 38	tryDecodeAsUtf8(asset.assetInfo.name) ? tryDecodeAsUtf8(asset.assetInfo.name) : asset.assetInfo.assetId;	×
39
NEW 40	const isNFT = (asset: AssetInfoWithAmount) => asset.assetInfo.supply === BigInt(1);	×
41
NEW 42	const getAssetTokenName = (assetWithAmount: AssetInfoWithAmount) => {	×
NEW 43	if (isNFT(assetWithAmount)) {	×
NEW 44	return assetWithAmount.assetInfo.nftMetadata?.name ?? getFallbackName(assetWithAmount);	×
45	}
NEW 46	return assetWithAmount.assetInfo.tokenMetadata?.ticker ?? getFallbackName(assetWithAmount);	×
47	};
48
NEW 49	const charBeforeEllName = 9;	×
NEW 50	const charAfterEllName = 0;	×
51
NEW 52	const displayGroupedNFTs = (nfts: AssetInfoWithAmount[]) =>	×
NEW 53	nfts.map((nft: AssetInfoWithAmount) => {	×
NEW 54	const imageSrc = nft.assetInfo.tokenMetadata?.icon ?? nft.assetInfo.nftMetadata?.image ?? undefined;	×
NEW 55	return (	×
56	<TransactionAssets
57	testId="dapp-transaction-nfts-container"
58	key={nft.assetInfo.fingerprint}
59	imageSrc={imageSrc}
60	balance={Wallet.util.calculateAssetBalance(nft.amount, nft.assetInfo)}
61	tokenName={truncate(getAssetTokenName(nft), charBeforeEllName, charAfterEllName)}
62	showImageBackground={imageSrc === undefined}
63	/>
64	);
65	});
66
NEW 67	const displayGroupedTokens = (tokens: AssetInfoWithAmount[]) =>	×
NEW 68	tokens.map((token: AssetInfoWithAmount) => {	×
NEW 69	const imageSrc = token.assetInfo.tokenMetadata?.icon ?? token.assetInfo.nftMetadata?.image ?? undefined;	×
70
NEW 71	return (	×
72	<TransactionAssets
73	testId="dapp-transaction-token-container"
74	key={token.assetInfo.fingerprint}
75	imageSrc={token.assetInfo.tokenMetadata?.icon ?? token.assetInfo.nftMetadata?.image ?? undefined}	×
76	balance={Wallet.util.calculateAssetBalance(token.amount, token.assetInfo)}
77	tokenName={truncate(getAssetTokenName(token), charBeforeEllName, charAfterEllName)}
78	showImageBackground={imageSrc === undefined}
79	/>
80	);
81	});
82
NEW 83	const { Title, Text } = Typography;	×
84
NEW 85	const charBeforeEllipsisName = 8;	×
NEW 86	const charAfterEllipsisName = 8;	×
87
NEW 88	const getStringFromLovelace = (value: bigint): string => Wallet.util.lovelacesToAdaString(value.toString());	×
89
NEW 90	const getTokenQuantity = (tokens: Array<AssetInfoWithAmount>, coins: Array<bigint>) => {	×
NEW 91	let quantity = tokens.length;	×
92
NEW 93	if (coins.length > 0) {	×
NEW 94	quantity += 1;	×
95	}
96
NEW 97	return quantity;	×
98	};
NEW 99	export const DappAddressSections = ({	×
100	groupedFromAddresses,
101	groupedToAddresses,
102	isToAddressesEnabled,
103	isFromAddressesEnabled,
104	coinSymbol
105	}: DappAddressSectionProps): React.ReactElement => {
NEW 106	const { t } = useTranslate();	×
107
NEW 108	const itemsCountCopy = t('package.core.dappTransaction.items');	×
109
NEW 110	return (	×
111	<>
112	<SummaryExpander title={t('package.core.dappTransaction.fromAddress')} disabled={!isFromAddressesEnabled}>
113	<div className={styles.summaryContent}>
114	{[...groupedFromAddresses.entries()].map(([address, addressData]) => (
NEW 115	<>	×
116	<div key={address} className={styles.address}>
117	<Text className={styles.label} data-testid="dapp-transaction-from-address-title">
118	{t('package.core.dappTransaction.address')}
119	</Text>
120	<Text className={styles.value} data-testid="dapp-transaction-from-address-address">
121	<Tooltip label={address}>
122	<span>{addEllipsis(address, charBeforeEllipsisName, charAfterEllipsisName)}</span>
123	</Tooltip>
124	</Text>
125	</div>
126	{(addressData.tokens.length > 0 \|\| addressData.coins.length > 0) && (	×
127	<>
128	<div className={styles.tokenCount}>
129	<Title level={5} className={styles.label} data-testid="dapp-transaction-tokens-title">
130	{t('package.core.dappTransaction.tokens')}
131	</Title>
132	<Title level={5} className={styles.value}>
133	-{getTokenQuantity(addressData.tokens, addressData.coins)} {itemsCountCopy}
134	</Title>
135	</div>
136	{addressData.coins.map((coin) => (
NEW 137	<DappTransactionSummary	×
138	key={`${address}${coin}`}
139	cardanoSymbol={coinSymbol}
140	transactionAmount={getStringFromLovelace(coin)}
141	/>
142	))}
143	{displayGroupedTokens(addressData.tokens)}
144	</>
145	)}
146
147	{addressData.nfts.length > 0 && (	×
148	<>
149	<div className={styles.tokenCount}>
150	<Title level={5} data-testid="dapp-transaction-nfts-title">
151	{t('package.core.dappTransaction.nfts')}
152	</Title>
153	<Title level={5}>
154	-{addressData.nfts.length} {itemsCountCopy}
155	</Title>
156	</div>
157	{displayGroupedNFTs(addressData.nfts)}
158	</>
159	)}
160	</>
161	))}
162	</div>
163	</SummaryExpander>
164
165	<SummaryExpander title={t('package.core.dappTransaction.toAddress')} disabled={!isToAddressesEnabled}>
166	<div>
167	{[...groupedToAddresses.entries()].map(([address, addressData]) => (
NEW 168	<>	×
169	<div key={address} className={styles.address}>
170	<Text className={styles.label} data-testid="dapp-transaction-to-address-title">
171	{t('package.core.dappTransaction.address')}
172	</Text>
173	<Text className={styles.value} data-testid="dapp-transaction-to-address">
174	<Tooltip label={address}>
175	<span>{addEllipsis(address, charBeforeEllipsisName, charAfterEllipsisName)}</span>
176	</Tooltip>
177	</Text>
178	</div>
179	{(addressData.tokens.length > 0 \|\| addressData.coins.length > 0) && (	×
180	<>
181	<div className={styles.tokenCount}>
182	<Title level={5} className={styles.label} data-testid="dapp-transaction-tokens-title">
183	{t('package.core.dappTransaction.tokens')}
184	</Title>
185	<Title level={5} className={classNames(styles.value, styles.positiveAmount)}>
186	{getTokenQuantity(addressData.tokens, addressData.coins)} {itemsCountCopy}
187	</Title>
188	</div>
189	{addressData.coins.map((coin) => (
NEW 190	<DappTransactionSummary	×
191	key={`${address}${coin}`}
192	cardanoSymbol={coinSymbol}
193	transactionAmount={getStringFromLovelace(coin)}
194	/>
195	))}
196	{displayGroupedTokens(addressData.tokens)}
197	</>
198	)}
199
200	{addressData.nfts.length > 0 && (	×
201	<>
202	<div className={styles.tokenCount}>
203	<Title level={5} className={styles.label} data-testid="dapp-transaction-nfts-title">
204	{t('package.core.dappTransaction.nfts')}
205	</Title>
206	<Title level={5} className={classNames(styles.value, styles.positiveAmount)}>
207	{addressData.nfts.length} {itemsCountCopy}
208	</Title>
209	</div>
210	{displayGroupedNFTs(addressData.nfts)}
211	</>
212	)}
213	</>
214	))}
215	</div>
216	</SummaryExpander>
217	</>
218	);
219	};

input-output-hk / lace / 8449370367

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous