feat(frontend): add transaction modals to unified transactions list (#…

…3474)

# Motivation

We need to include the transactions modals to provide the details of the
selected transactions.

Since there is no unique way of identifying a transaction for each
network, we define different selected transactions for each one.

This is what is done in all the other network-specific transaction
components.

# Note

Another approach to this, would have been to do like we did for the
Transaction card, meaning mapping the modal to each transaction. No
particular preference on either method, just pointing out:

```svelte
{#if nonNullish(selectedTransaction) && ($modalBtcTransaction || $modalEthTransaction || $modalIcTransaction)}
	<svelte:component this={selectedTransaction.modal} transaction={selectedTransaction} />
{/if}
```

# Tests

![Screenshot 2024-11-14 at 19 07
15](https://github.com/user-attachments/assets/e4190720-fa2c-4db3-8a72-d99c72ebda09)

---------

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

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

@@ -1,13 +1,25 @@
 <script lang="ts">
 	import { isNullish, nonNullish } from '@dfinity/utils';
 	import { slide } from 'svelte/transition';
+	import BtcTransactionModal from '$btc/components/transactions/BtcTransactionModal.svelte';
 	import { btcTransactionsStore } from '$btc/stores/btc-transactions.store';
+	import type { BtcTransactionUi } from '$btc/types/btc';
+	import EthTransactionModal from '$eth/components/transactions/EthTransactionModal.svelte';
 	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 type { IcTransactionUi } from '$icp/types/ic-transaction';
 	import { ckEthMinterInfoStore } from '$icp-eth/stores/cketh.store';
 	import TransactionsPlaceholder from '$lib/components/transactions/TransactionsPlaceholder.svelte';
 	import { SLIDE_DURATION } from '$lib/constants/transition.constants';
 	import { ethAddress } from '$lib/derived/address.derived';
+	import {
+		modalBtcTransaction,
+		modalIcTransaction,
+		modalEthTransaction
+	} from '$lib/derived/modal.derived';
 	import { enabledTokens } from '$lib/derived/tokens.derived';
+	import { modalStore } from '$lib/stores/modal.store';
 	import type { AllTransactionsUi } from '$lib/types/transaction';
 	import { mapAllTransactionsUi, sortTransactions } from '$lib/utils/transactions.utils';
 
@@ -27,6 +39,21 @@
 	$: sortedTransactions = transactions.sort((a, b) =>
 		sortTransactions({ transactionA: a, transactionB: b })
 	);
+
+	let selectedBtcTransaction: BtcTransactionUi | undefined;
+	$: selectedBtcTransaction = $modalBtcTransaction
+		? ($modalStore?.data as BtcTransactionUi | undefined)
+		: undefined;
+
+	let selectedEthTransaction: EthTransactionUi | undefined;
+	$: selectedEthTransaction = $modalEthTransaction
+		? ($modalStore?.data as EthTransactionUi | undefined)
+		: undefined;
+
+	let selectedIcTransaction: IcTransactionUi | undefined;
+	$: selectedIcTransaction = $modalIcTransaction
+		? ($modalStore?.data as IcTransactionUi | undefined)
+		: undefined;
 </script>
 
 <!--TODO: include skeleton for loading transactions and remove nullish checks-->
@@ -42,4 +69,10 @@
 	<TransactionsPlaceholder />
 {/if}
 
-<!--TODO: add modals for transaction details-->
+{#if $modalBtcTransaction && nonNullish(selectedBtcTransaction)}
+	<BtcTransactionModal transaction={selectedBtcTransaction} />
+{:else if $modalEthTransaction && nonNullish(selectedEthTransaction)}
+	<EthTransactionModal transaction={selectedEthTransaction} />
+{:else if $modalIcTransaction && nonNullish(selectedIcTransaction)}
+	<IcTransactionModal transaction={selectedIcTransaction} />
+{/if}