From 809e5dc0a2f76a54cb9d925028eea8d6cbe1432e Mon Sep 17 00:00:00 2001
From: Antonio Ventilii <antonio.ventilii@dfinity.org>
Date: Fri, 15 Nov 2024 15:20:55 +0100
Subject: [PATCH] feat(frontend): add IC transactions in AllTransactionsList
 (#3589)

# Motivation

After PR #3568, we add the IC transactions in the UI.
---
 .../transactions/AllTransactionsList.svelte   |  7 +--
 .../transactions/AllTransactionsList.spec.ts  | 43 ++++++++++++-------
 .../src/tests/mocks/ic-transactions.mock.ts   |  3 +-
 3 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/frontend/src/lib/components/transactions/AllTransactionsList.svelte b/src/frontend/src/lib/components/transactions/AllTransactionsList.svelte
index 6038ec6c5a..9eb2c340a6 100644
--- a/src/frontend/src/lib/components/transactions/AllTransactionsList.svelte
+++ b/src/frontend/src/lib/components/transactions/AllTransactionsList.svelte
@@ -8,6 +8,8 @@
 	import { ethTransactionsStore } from '$eth/stores/eth-transactions.store';
 	import type { EthTransactionUi } from '$eth/types/eth-transaction';
 	import IcTransactionModal from '$icp/components/transactions/IcTransactionModal.svelte';
+	import { btcStatusesStore } from '$icp/stores/btc.store';
+	import { icTransactionsStore } from '$icp/stores/ic-transactions.store';
 	import type { IcTransactionUi } from '$icp/types/ic-transaction';
 	import { ckEthMinterInfoStore } from '$icp-eth/stores/cketh.store';
 	import TransactionsPlaceholder from '$lib/components/transactions/TransactionsPlaceholder.svelte';
@@ -24,15 +26,14 @@
 	import { mapAllTransactionsUi, sortTransactions } from '$lib/utils/transactions.utils';
 
 	let transactions: AllTransactionsUi;
-	// TODO: add icTransactions and btcStatuses
 	$: transactions = mapAllTransactionsUi({
 		tokens: $enabledTokens,
 		$btcTransactions: $btcTransactionsStore,
 		$ethTransactions: $ethTransactionsStore,
 		$ckEthMinterInfo: $ckEthMinterInfoStore,
 		$ethAddress: $ethAddress,
-		$icTransactions: {},
-		$btcStatuses: {}
+		$icTransactions: $icTransactionsStore,
+		$btcStatuses: $btcStatusesStore
 	});
 
 	let sortedTransactions: AllTransactionsUi;
diff --git a/src/frontend/src/tests/lib/components/transactions/AllTransactionsList.spec.ts b/src/frontend/src/tests/lib/components/transactions/AllTransactionsList.spec.ts
index 04fb04de17..da9898d512 100644
--- a/src/frontend/src/tests/lib/components/transactions/AllTransactionsList.spec.ts
+++ b/src/frontend/src/tests/lib/components/transactions/AllTransactionsList.spec.ts
@@ -4,13 +4,15 @@ import * as networkEnv from '$env/networks.env';
 import { ETHEREUM_NETWORK_ID, SEPOLIA_NETWORK_ID } from '$env/networks.env';
 import * as ethEnv from '$env/networks.eth.env';
 import { BTC_MAINNET_TOKEN_ID } from '$env/tokens.btc.env';
-import { ETHEREUM_TOKEN_ID } from '$env/tokens.env';
+import { ETHEREUM_TOKEN_ID, ICP_TOKEN_ID } from '$env/tokens.env';
 import { ethTransactionsStore } from '$eth/stores/eth-transactions.store';
+import { icTransactionsStore } from '$icp/stores/ic-transactions.store';
 import AllTransactionsList from '$lib/components/transactions/AllTransactionsList.svelte';
 import * as transactionsUtils from '$lib/utils/transactions.utils';
 import { createMockBtcTransactionsUi } from '$tests/mocks/btc.mock';
 import { createMockEthTransactions } from '$tests/mocks/eth-transactions.mock';
 import en from '$tests/mocks/i18n.mock';
+import { createMockIcTransactionsUi } from '$tests/mocks/ic-transactions.mock';
 import { render } from '@testing-library/svelte';
 
 describe('AllTransactionsList', () => {
@@ -35,8 +37,9 @@ describe('AllTransactionsList', () => {
 	describe('when the transactions list is not empty', () => {
 		const btcTransactionsNumber = 5;
 		const ethTransactionsNumber = 3;
+		const icTransactionsNumber = 7;
 
-		beforeEach(() => {
+		beforeAll(() => {
 			vi.resetAllMocks();
 
 			vi.spyOn(btcEnv, 'BTC_MAINNET_ENABLED', 'get').mockImplementation(() => true);
@@ -46,19 +49,27 @@ describe('AllTransactionsList', () => {
 				ETHEREUM_NETWORK_ID,
 				SEPOLIA_NETWORK_ID
 			]);
-		});
-
-		btcTransactionsStore.append({
-			tokenId: BTC_MAINNET_TOKEN_ID,
-			transactions: createMockBtcTransactionsUi(btcTransactionsNumber).map((transaction) => ({
-				data: transaction,
-				certified: false
-			}))
-		});
 
-		ethTransactionsStore.add({
-			tokenId: ETHEREUM_TOKEN_ID,
-			transactions: createMockEthTransactions(ethTransactionsNumber)
+			btcTransactionsStore.append({
+				tokenId: BTC_MAINNET_TOKEN_ID,
+				transactions: createMockBtcTransactionsUi(btcTransactionsNumber).map((transaction) => ({
+					data: transaction,
+					certified: false
+				}))
+			});
+
+			ethTransactionsStore.add({
+				tokenId: ETHEREUM_TOKEN_ID,
+				transactions: createMockEthTransactions(ethTransactionsNumber)
+			});
+
+			icTransactionsStore.append({
+				tokenId: ICP_TOKEN_ID,
+				transactions: createMockIcTransactionsUi(icTransactionsNumber).map((transaction) => ({
+					data: transaction,
+					certified: false
+				}))
+			});
 		});
 
 		it('should not render the placeholder', () => {
@@ -74,7 +85,9 @@ describe('AllTransactionsList', () => {
 				(el) => el.parentElement === container
 			);
 
-			expect(transactionComponents).toHaveLength(btcTransactionsNumber + ethTransactionsNumber);
+			expect(transactionComponents).toHaveLength(
+				btcTransactionsNumber + ethTransactionsNumber + icTransactionsNumber
+			);
 		});
 	});
 });
diff --git a/src/frontend/src/tests/mocks/ic-transactions.mock.ts b/src/frontend/src/tests/mocks/ic-transactions.mock.ts
index 1ab7eec083..9c4de5a3b7 100644
--- a/src/frontend/src/tests/mocks/ic-transactions.mock.ts
+++ b/src/frontend/src/tests/mocks/ic-transactions.mock.ts
@@ -4,5 +4,6 @@ export const createMockIcTransactionsUi = (n: number): IcTransactionUi[] =>
 	Array.from({ length: n }, () => ({
 		id: crypto.randomUUID(),
 		type: 'send',
-		status: 'executed'
+		status: 'executed',
+		value: BigInt(1)
 	}));