feat(frontend): add token prop to transaction card components (#3570)

# Motivation

After PR #3537 , we can provide the token to the Transaction card
components, to show the Token logo in the unified transaction list.

# Changes

- Make prop `token` for `EthTransaction` and adapt the usage, removing
the derived store and providing the input from its parents, like
`EthTransactions`.
- Map `token` for all the UI transactions.
- Adapt `AllTransactionsList`.
 
# Tests

Test adapted and here results.

![Screenshot 2024-11-14 at 18 09
30](https://github.com/user-attachments/assets/5e3f3e14-d44b-48f8-8997-8121a08253a1)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

src/frontend/src/btc/components/transactions/BtcTransaction.svelte

@@ -6,8 +6,10 @@
 	import Transaction from '$lib/components/transactions/Transaction.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { modalStore } from '$lib/stores/modal.store';
+	import type { OptionToken } from '$lib/types/token';
 
 	export let transaction: BtcTransactionUi;
+	export let token: OptionToken = undefined;
 
 	let value: bigint | undefined;
 	let timestamp: bigint | undefined;
@@ -26,6 +28,7 @@
 	{type}
 	timestamp={Number(timestamp)}
 	{status}
+	{token}
 >
 	{label}
 </Transaction>

src/frontend/src/eth/components/transactions/EthTransaction.svelte

@@ -5,14 +5,14 @@
 	import { isSupportedEthToken } from '$eth/utils/eth.utils';
 	import { isTransactionPending } from '$eth/utils/transactions.utils';
 	import Transaction from '$lib/components/transactions/Transaction.svelte';
-	import { tokenSymbol } from '$lib/derived/token.derived';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { modalStore } from '$lib/stores/modal.store';
-	import { token } from '$lib/stores/token.store';
+	import type { OptionToken } from '$lib/types/token';
 	import type { TransactionStatus } from '$lib/types/transaction';
 	import { replacePlaceholders } from '$lib/utils/i18n.utils';
 
 	export let transaction: EthTransactionUi;
+	export let token: OptionToken = undefined;
 
 	let value: BigNumber;
 	let timestamp: number | undefined;
@@ -28,10 +28,10 @@
 	$: ({ value, timestamp, displayTimestamp, uiType: type } = transaction);
 
 	let ckTokenSymbol: string;
-	$: ckTokenSymbol = isSupportedEthToken($token)
-		? $token.twinTokenSymbol
+	$: ckTokenSymbol = isSupportedEthToken(token)
+		? token.twinTokenSymbol
 		: // TODO: $token could be undefined, that's why we cast as `Erc20Token | undefined`; adjust the cast once we're sure that $token is never undefined
-			(($token as Erc20Token | undefined)?.twinTokenSymbol ?? '');
+			((token as Erc20Token | undefined)?.twinTokenSymbol ?? '');
 
 	let label: string;
 	$: label =
@@ -41,7 +41,7 @@
 						? $i18n.transaction.label.converting_ck_token
 						: $i18n.transaction.label.ck_token_converted,
 					{
-						$twinToken: $tokenSymbol ?? '',
+						$twinToken: token?.symbol ?? '',
 						$ckToken: ckTokenSymbol
 					}
 				)
@@ -51,7 +51,7 @@
 							? $i18n.transaction.label.converting_twin_token
 							: $i18n.transaction.label.ck_token_sent,
 						{
-							$twinToken: $tokenSymbol ?? '',
+							$twinToken: token?.symbol ?? '',
 							$ckToken: ckTokenSymbol
 						}
 					)
@@ -72,6 +72,7 @@
 	{type}
 	timestamp={transactionDate}
 	{status}
+	{token}
 >
 	{label}
 </Transaction>

src/frontend/src/eth/components/transactions/EthTransactions.svelte

@@ -19,6 +19,7 @@
 	import { modalToken, modalEthTransaction } from '$lib/derived/modal.derived';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { modalStore } from '$lib/stores/modal.store';
+	import { token } from '$lib/stores/token.store';
 	import type { OptionEthAddress } from '$lib/types/address';
 	import type { Transaction as TransactionType } from '$lib/types/transaction';
 
@@ -49,7 +50,7 @@
 	<EthTransactionsSkeletons>
 		{#each sortedTransactionsUi as transaction (transaction.hash)}
 			<div transition:slide={SLIDE_DURATION}>
-				<EthTransaction {transaction} />
+				<EthTransaction {transaction} token={$token} />
 			</div>
 		{/each}
 

src/frontend/src/lib/components/transactions/AllTransactionsList.svelte

@@ -30,7 +30,7 @@
 {#if nonNullish(sortedTransactions) && sortedTransactions.length > 0}
 	{#each transactions as transaction, index (`${transaction.id}-${index}`)}
 		<div in:slide={SLIDE_DURATION}>
-			<svelte:component this={transaction.component} {transaction} />
+			<svelte:component this={transaction.component} {transaction} token={transaction.token} />
 		</div>
 	{/each}
 {/if}

src/frontend/src/lib/components/transactions/Transaction.svelte

@@ -7,7 +7,7 @@
 	import Amount from '$lib/components/ui/Amount.svelte';
 	import Card from '$lib/components/ui/Card.svelte';
 	import RoundedIcon from '$lib/components/ui/RoundedIcon.svelte';
-	import type { Token } from '$lib/types/token';
+	import type { OptionToken } from '$lib/types/token';
 	import type { TransactionStatus, TransactionType } from '$lib/types/transaction';
 	import { formatSecondsToDate } from '$lib/utils/format.utils.js';
 	import { mapTransactionIcon } from '$lib/utils/transaction.utils';
@@ -17,7 +17,7 @@
 	export let status: TransactionStatus;
 	export let timestamp: number | undefined;
 	export let styleClass: string | undefined = undefined;
-	export let token: Token | undefined = undefined;
+	export let token: OptionToken = undefined;
 
 	let icon: ComponentType;
 	$: icon = mapTransactionIcon({ type, status });

src/frontend/src/lib/types/transaction.ts

@@ -5,6 +5,7 @@ import type {
 	TransactionStatusSchema,
 	TransactionTypeSchema
 } from '$lib/schema/transaction.schema';
+import type { Token } from '$lib/types/token';
 import type { TransactionResponse } from '@ethersproject/abstract-provider';
 import type { BigNumber } from '@ethersproject/bignumber';
 import type { FeeData } from '@ethersproject/providers';
@@ -36,5 +37,6 @@ export type TransactionUiCommon = Pick<Transaction, 'blockNumber' | 'from' | 'to
 export type AnyTransactionUi = BtcTransactionUi | EthTransactionUi | IcTransactionUi;
 
 export type AllTransactionsUi = (AnyTransactionUi & {
+	token: Token;
 	component: ComponentType;
 })[];

src/frontend/src/lib/utils/transactions.utils.ts

@@ -53,7 +53,12 @@ export const mapAllTransactionsUi = ({
 		networkId: SEPOLIA_NETWORK_ID
 	});
 
-	return tokens.reduce<AllTransactionsUi>((acc, { id: tokenId, network: { id: networkId } }) => {
+	return tokens.reduce<AllTransactionsUi>((acc, token) => {
+		const {
+			id: tokenId,
+			network: { id: networkId }
+		} = token;
+
 		if (isNetworkIdBTCMainnet(networkId)) {
 			if (isNullish($btcTransactions)) {
 				return acc;
@@ -63,6 +68,7 @@ export const mapAllTransactionsUi = ({
 				...acc,
 				...($btcTransactions[tokenId] ?? []).map(({ data: transaction }) => ({
 					...transaction,
+					token,
 					component: BtcTransaction
 				}))
 			];
@@ -82,6 +88,7 @@ export const mapAllTransactionsUi = ({
 							: ckEthMinterInfoAddressesMainnet,
 						$ethAddress: $ethAddress
 					}),
+					token,
 					component: EthTransaction
 				}))
 			];

src/frontend/src/tests/lib/utils/transactions.utils.spec.ts

@@ -57,6 +57,7 @@ describe('transactions.utils', () => {
 		const expectedBtcMainnetTransactions: AllTransactionsUi = [
 			...mockBtcMainnetTransactions.map((transaction) => ({
 				...transaction,
+				token: BTC_MAINNET_TOKEN,
 				component: BtcTransaction
 			}))
 		];
@@ -68,6 +69,7 @@ describe('transactions.utils', () => {
 				...transaction,
 				id: transaction.hash,
 				uiType,
+				token: ETHEREUM_TOKEN,
 				component: EthTransaction
 			}))
 		];
@@ -77,6 +79,7 @@ describe('transactions.utils', () => {
 				...transaction,
 				id: transaction.hash,
 				uiType,
+				token: SEPOLIA_TOKEN,
 				component: EthTransaction
 			}))
 		];
@@ -86,6 +89,7 @@ describe('transactions.utils', () => {
 				...transaction,
 				id: transaction.hash,
 				uiType,
+				token: PEPE_TOKEN,
 				component: EthTransaction
 			}))
 		];