Merge branch 'main' into refactor(frontend)/remove-token-derived-stor…

…es-from-Amount-component

.env.test

@@ -7,3 +7,4 @@ VITE_WALLET_CONNECT_PROJECT_ID=
 VITE_OISY_URL=https://oisy.com
 VITE_JUNO_SATELLITE_ID=
 VITE_JUNO_ORBITER_ID=
+VITE_LOCAL_POUH_ISSUER_CANISTER_ID=qbw6f-caaaa-aaaah-qdcwa-cai

.github/workflows/frontend-checks.yml

@@ -5,7 +5,6 @@ on:
   workflow_dispatch:
 
 jobs:
-
   lint:
     runs-on: ubuntu-24.04
 

src/frontend/src/lib/components/core/Menu.svelte

@@ -6,6 +6,7 @@
 	import MenuAddresses from '$lib/components/core/MenuAddresses.svelte';
 	import SignOut from '$lib/components/core/SignOut.svelte';
 	import IconGitHub from '$lib/components/icons/IconGitHub.svelte';
+	import IconActivity from '$lib/components/icons/iconly/IconActivity.svelte';
 	import IconlySettings from '$lib/components/icons/iconly/IconlySettings.svelte';
 	import IconlyUfo from '$lib/components/icons/iconly/IconlyUfo.svelte';
 	import LicenseLink from '$lib/components/license-agreement/LicenseLink.svelte';
@@ -19,7 +20,12 @@
 	import { NAVIGATION_MENU_BUTTON, NAVIGATION_MENU } from '$lib/constants/test-ids.constants';
 	import { networkId } from '$lib/derived/network.derived';
 	import { i18n } from '$lib/stores/i18n.store';
-	import { isRouteDappExplorer, isRouteSettings, networkParam } from '$lib/utils/nav.utils';
+	import {
+		isRouteActivity,
+		isRouteDappExplorer,
+		isRouteSettings,
+		networkParam
+	} from '$lib/utils/nav.utils';
 
 	let visible = false;
 	let button: HTMLButtonElement | undefined;
@@ -30,17 +36,26 @@
 		hidePopover();
 		await goto(`${AppPath.Settings}?${networkParam($networkId)}`);
 	};
+
 	const goToDappExplorer = async () => {
 		hidePopover();
 		await goto(AppPath.Explore);
 	};
 
+	const goToActivity = async () => {
+		hidePopover();
+		await goto(AppPath.Activity);
+	};
+
 	let settingsRoute = false;
 	$: settingsRoute = isRouteSettings($page);
 
 	let dAppExplorerRoute = false;
 	$: dAppExplorerRoute = isRouteDappExplorer($page);
 
+	let activityRoute = false;
+	$: activityRoute = isRouteActivity($page);
+
 	let addressesOption = true;
 	$: addressesOption = !settingsRoute && !dAppExplorerRoute;
 </script>
@@ -61,6 +76,13 @@
 			<MenuAddresses on:icMenuClick={hidePopover} />
 		{/if}
 
+		{#if !activityRoute && !settingsRoute}
+			<ButtonMenu ariaLabel={$i18n.navigation.alt.activity} on:click={goToActivity}>
+				<IconActivity size="20" />
+				{$i18n.navigation.text.activity}
+			</ButtonMenu>
+		{/if}
+
 		{#if !dAppExplorerRoute && !settingsRoute}
 			<ButtonMenu ariaLabel={$i18n.navigation.alt.dapp_explorer} on:click={goToDappExplorer}>
 				<IconlyUfo size="20" />

src/frontend/src/lib/components/icons/iconly/IconActivity.svelte

@@ -0,0 +1,29 @@
+<!-- source: ICONLY PRO - The license is bought and owned by the DFINITY Foundation - Please read the documentation in the README file, or see terms and conditions here https://iconly.pro/pages/terms -->
+<script lang="ts">
+	export let size = '24';
+</script>
+
+<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M4.65817 7.56582C6.76317 3.85782 11.2522 2.05382 15.4322 3.49682C20.1222 5.11982 22.6172 10.2418 20.9942 14.9318C19.3802 19.6318 14.2592 22.1278 9.55917 20.5038C6.65217 19.5018 4.58817 17.1668 3.82617 14.4108"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M4 4V8H8"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		opacity="0.4"
+		d="M14.6506 14.5692L11.4766 12.6722V8.57422"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

src/frontend/src/lib/components/navigation/NavigationMenu.svelte

@@ -2,19 +2,22 @@
 	import type { Page } from '@sveltejs/kit';
 	import { page } from '$app/stores';
 	import IconWallet from '$lib/components/icons/IconWallet.svelte';
+	import IconActivity from '$lib/components/icons/iconly/IconActivity.svelte';
 	import IconlySettings from '$lib/components/icons/iconly/IconlySettings.svelte';
 	import IconlyUfo from '$lib/components/icons/iconly/IconlyUfo.svelte';
 	import InfoMenu from '$lib/components/navigation/InfoMenu.svelte';
 	import NavigationItem from '$lib/components/navigation/NavigationItem.svelte';
 	import { AppPath } from '$lib/constants/routes.constants';
 	import {
+		NAVIGATION_ITEM_ACTIVITY,
 		NAVIGATION_ITEM_EXPLORER,
 		NAVIGATION_ITEM_SETTINGS,
 		NAVIGATION_ITEM_TOKENS
 	} from '$lib/constants/test-ids.constants';
 	import { networkId } from '$lib/derived/network.derived';
 	import { i18n } from '$lib/stores/i18n.store';
 	import {
+		isRouteActivity,
 		isRouteDappExplorer,
 		isRouteSettings,
 		isRouteTokens,
@@ -41,6 +44,16 @@
 			{$i18n.navigation.text.tokens}
 		</NavigationItem>
 
+		<NavigationItem
+			href="/activity"
+			ariaLabel={$i18n.navigation.alt.activity}
+			selected={isRouteActivity(pageData)}
+			testId={NAVIGATION_ITEM_ACTIVITY}
+		>
+			<IconActivity />
+			{$i18n.navigation.text.activity}
+		</NavigationItem>
+
 		<NavigationItem
 			href={AppPath.Explore}
 			ariaLabel={$i18n.navigation.alt.dapp_explorer}

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

@@ -1,14 +1,32 @@
 <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 { 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 TransactionsDateGroup from '$lib/components/transactions/TransactionsDateGroup.svelte';
 	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 type { AllTransactionsUi } from '$lib/types/transaction';
+	import { modalStore } from '$lib/stores/modal.store';
+	import type {
+		AllTransactionsUi,
+		AllTransactionUi,
+		TransactionsUiDateGroup
+	} from '$lib/types/transaction';
+	import { groupTransactionsByDate } from '$lib/utils/transaction.utils';
 	import { mapAllTransactionsUi, sortTransactions } from '$lib/utils/transactions.utils';
 
 	let transactions: AllTransactionsUi;
@@ -17,26 +35,52 @@
 		$btcTransactions: $btcTransactionsStore,
 		$ethTransactions: $ethTransactionsStore,
 		$ckEthMinterInfo: $ckEthMinterInfoStore,
-		$ethAddress: $ethAddress
+		$ethAddress: $ethAddress,
+		$icTransactions: $icTransactionsStore,
+		$btcStatuses: $btcStatusesStore
 	});
 
 	let sortedTransactions: AllTransactionsUi;
 	$: sortedTransactions = transactions.sort((a, b) =>
 		sortTransactions({ transactionA: a, transactionB: b })
 	);
+
+	let groupedTransactions: TransactionsUiDateGroup<AllTransactionUi> | undefined;
+	$: groupedTransactions = nonNullish(sortedTransactions)
+		? groupTransactionsByDate(sortedTransactions)
+		: undefined;
+
+	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-->
-{#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} token={transaction.token} />
-		</div>
+{#if nonNullish(groupedTransactions) && sortedTransactions.length > 0}
+	{#each Object.entries(groupedTransactions) as [date, transactions] (date)}
+		<TransactionsDateGroup {date} {transactions} />
 	{/each}
 {/if}
 
-{#if isNullish(sortedTransactions) || sortedTransactions.length === 0}
+{#if isNullish(groupedTransactions) || sortedTransactions.length === 0}
 	<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}

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/lib/constants/test-ids.constants.ts

@@ -41,5 +41,6 @@ export const SEND_FORM_NEXT_BUTTON = 'send-form-next-button';
 export const REVIEW_FORM_SEND_BUTTON = 'review-form-send-button';
 
 export const NAVIGATION_ITEM_TOKENS = 'navigation-item-tokens';
+export const NAVIGATION_ITEM_ACTIVITY = 'navigation-item-activity';
 export const NAVIGATION_ITEM_EXPLORER = 'navigation-item-explore';
 export const NAVIGATION_ITEM_SETTINGS = 'navigation-item-settings';

src/frontend/src/lib/i18n/en.json

@@ -36,6 +36,7 @@
 			"tokens": "Assets",
 			"settings": "Settings",
 			"dapp_explorer": "Explore",
+			"activity": "Activity",
 			"source_code_on_github": "Source code on GitHub",
 			"view_on_explorer": "View on explorer",
 			"source_code": "Source code",
@@ -46,6 +47,7 @@
 			"tokens": "Go to the assets view",
 			"settings": "Open your settings",
 			"dapp_explorer": "Open dapp explorer",
+			"activity": "Open the activity view",
 			"more_settings": "More settings",
 			"menu": "Your wallet address, settings, sign-out and external links",
 			"changelog": "Open the changelog of $oisy_name on GitHub to review the latest updates",

src/frontend/src/lib/types/i18n.d.ts

@@ -32,6 +32,7 @@ interface I18nNavigation {
 		tokens: string;
 		settings: string;
 		dapp_explorer: string;
+		activity: string;
 		source_code_on_github: string;
 		view_on_explorer: string;
 		source_code: string;
@@ -42,6 +43,7 @@ interface I18nNavigation {
 		tokens: string;
 		settings: string;
 		dapp_explorer: string;
+		activity: string;
 		more_settings: string;
 		menu: string;
 		changelog: string;

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

@@ -36,7 +36,11 @@ export type TransactionUiCommon = Pick<Transaction, 'blockNumber' | 'from' | 'to
 
 export type AnyTransactionUi = BtcTransactionUi | EthTransactionUi | IcTransactionUi;
 
-export type AllTransactionsUi = (AnyTransactionUi & {
+export type AllTransactionUi = AnyTransactionUi & {
 	token: Token;
 	component: ComponentType;
-})[];
+};
+
+export type AllTransactionsUi = AllTransactionUi[];
+
+export type TransactionsUiDateGroup<T extends AnyTransactionUi> = Record<string, T[]>;

src/frontend/src/lib/utils/nav.utils.ts

@@ -26,6 +26,9 @@ export const isRouteSettings = ({ route: { id } }: Page): boolean =>
 export const isRouteDappExplorer = ({ route: { id } }: Page): boolean =>
 	id === `${ROUTE_ID_GROUP_APP}${AppPath.Explore}`;
 
+export const isRouteActivity = ({ route: { id } }: Page): boolean =>
+	id === `${ROUTE_ID_GROUP_APP}${AppPath.Activity}`;
+
 export const isRouteTokens = ({ route: { id } }: Page): boolean => id === ROUTE_ID_GROUP_APP;
 
 const tokenUrl = ({

src/frontend/src/lib/utils/transaction.utils.ts

@@ -4,7 +4,12 @@ import IconConvertFrom from '$lib/components/icons/IconConvertFrom.svelte';
 import IconConvertTo from '$lib/components/icons/IconConvertTo.svelte';
 import IconReceive from '$lib/components/icons/IconReceive.svelte';
 import IconSend from '$lib/components/icons/IconSend.svelte';
-import type { AnyTransactionUi, TransactionStatus, TransactionType } from '$lib/types/transaction';
+import type {
+	AnyTransactionUi,
+	TransactionStatus,
+	TransactionsUiDateGroup,
+	TransactionType
+} from '$lib/types/transaction';
 import { formatSecondsToNormalizedDate } from '$lib/utils/format.utils';
 import { isNullish } from '@dfinity/utils';
 import type { ComponentType } from 'svelte';
@@ -43,7 +48,9 @@ export const mapTransactionIcon = ({
  * @param transactions - List of transactions to group.
  * @returns Object where the keys are the date and the values are the transactions for that date.
  */
-export const groupTransactionsByDate = <T extends AnyTransactionUi>(transactions: T[]) => {
+export const groupTransactionsByDate = <T extends AnyTransactionUi>(
+	transactions: T[]
+): TransactionsUiDateGroup<T> => {
 	const currentDate = new Date();
 
 	return transactions.reduce<Record<string, T[]>>((acc, transaction) => {