feat(frontend): component to show group of transactions by date (#3576)

# Motivation

In this PR we introduce a component that will show a date with its
transactions, as preparation for the unified transaction list.

![Screenshot 2024-11-15 at 10 06
37](https://github.com/user-attachments/assets/91a96d3b-6147-4c31-acd6-ac7c9fb46534)
![Screenshot 2024-11-15 at 10 06
46](https://github.com/user-attachments/assets/2c01d239-b587-4c98-a572-db7bf6d21785)
![Screenshot 2024-11-15 at 10 06
56](https://github.com/user-attachments/assets/0d9c5845-19f9-41a6-b02e-c78719ae5a09)
![Screenshot 2024-11-15 at 10 07
04](https://github.com/user-attachments/assets/23daea42-bdb4-4409-abc2-37087c0e50f6)

---------

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

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import { SLIDE_DURATION } from '$lib/constants/transition.constants';
+	import type { AllTransactionsUi } from '$lib/types/transaction';
+
+	export let date: string;
+	export let transactions: AllTransactionsUi;
+</script>
+
+{#if transactions.length > 0}
+	<div class="mb-5 flex flex-col gap-4">
+		<span class="text-lg font-medium text-tertiary first-letter:capitalize">{date}</span>
+
+		{#each transactions as transaction, index (`${transaction.id}-${index}`)}
+			{@const { component, token } = transaction}
+
+			<div in:slide={SLIDE_DURATION}>
+				<svelte:component this={component} {transaction} {token} />
+			</div>
+		{/each}
+	</div>
+{/if}

src/frontend/src/tests/lib/components/transactions/TransactionsDateGroup.spec.ts

@@ -0,0 +1,82 @@
+import BtcTransaction from '$btc/components/transactions/BtcTransaction.svelte';
+import { BTC_MAINNET_TOKEN } from '$env/tokens.btc.env';
+import { ETHEREUM_TOKEN } from '$env/tokens.env';
+import EthTransaction from '$eth/components/transactions/EthTransaction.svelte';
+import TransactionsDateGroup from '$lib/components/transactions/TransactionsDateGroup.svelte';
+import type { AllTransactionsUi } from '$lib/types/transaction';
+import { createMockBtcTransactionsUi } from '$tests/mocks/btc.mock';
+import { createMockEthTransactions } from '$tests/mocks/eth-transactions.mock';
+import { render } from '@testing-library/svelte';
+
+describe('TransactionsDateGroup', () => {
+	describe('when the transactions list is empty', () => {
+		it('should render nothing', () => {
+			const { container } = render(TransactionsDateGroup, {
+				props: {
+					date: 'today',
+					transactions: []
+				}
+			});
+
+			expect(container.innerHTML).toBe('');
+		});
+	});
+
+	describe('when the transactions list is not empty', () => {
+		const btcTransactionsNumber = 5;
+		const ethTransactionsNumber = 3;
+
+		const todayTimestamp = new Date().getTime();
+
+		const mockBtcTransactionsUi: AllTransactionsUi = createMockBtcTransactionsUi(
+			btcTransactionsNumber
+		).map((transaction) => ({
+			...transaction,
+			timestamp: BigInt(todayTimestamp),
+			token: BTC_MAINNET_TOKEN,
+			component: BtcTransaction
+		}));
+
+		const mockEthTransactionsUi: AllTransactionsUi = createMockEthTransactions(
+			ethTransactionsNumber
+		).map((transaction) => ({
+			...transaction,
+			timestamp: todayTimestamp,
+			id: transaction.hash,
+			uiType: 'send',
+			token: ETHEREUM_TOKEN,
+			component: EthTransaction
+		}));
+
+		const mockTransactions: AllTransactionsUi = [
+			...mockBtcTransactionsUi,
+			...mockEthTransactionsUi
+		];
+
+		it('should render the date', () => {
+			const { getByText } = render(TransactionsDateGroup, {
+				props: {
+					date: 'today',
+					transactions: mockTransactions
+				}
+			});
+
+			expect(getByText('today')).toBeInTheDocument();
+		});
+
+		it('should render the transactions list', () => {
+			const { container } = render(TransactionsDateGroup, {
+				props: {
+					date: 'today',
+					transactions: mockTransactions
+				}
+			});
+
+			const transactionComponents = Array.from(container.querySelectorAll('div')).filter(
+				(el) => el.parentElement?.parentElement === container
+			);
+
+			expect(transactionComponents).toHaveLength(btcTransactionsNumber + ethTransactionsNumber);
+		});
+	});
+});