Merge branch 'main' into feat(frontend)/use-component-to-group-of-dat…

…es-in-AllTransactionsList

.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/convert/ConvertFee.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { nonNullish } from '@dfinity/utils';
-	import { BigNumber } from '@ethersproject/bignumber';
 	import ConvertAmountDisplay from '$lib/components/convert/ConvertAmountDisplay.svelte';
-	import { formatToken } from '$lib/utils/format.utils';
+	import { formatTokenBigintToNumber } from '$lib/utils/format.utils';
 
 	export let feeAmount: bigint | undefined = undefined;
 	export let symbol: string;
@@ -12,14 +11,11 @@
 
 	let formattedFeeAmount: number | undefined;
 	$: formattedFeeAmount = nonNullish(feeAmount)
-		? // TODO: create a util for formating and converting a bigint to number
-			Number(
-				formatToken({
-					value: BigNumber.from(feeAmount),
-					unitName: decimals,
-					displayDecimals: decimals
-				})
-			)
+		? formatTokenBigintToNumber({
+				value: feeAmount,
+				unitName: decimals,
+				displayDecimals: decimals
+			})
 		: undefined;
 </script>
 

src/frontend/src/lib/components/convert/ConvertFeeTotal.svelte

@@ -1,25 +1,21 @@
 <script lang="ts">
 	import { nonNullish } from '@dfinity/utils';
-	import { BigNumber } from '@ethersproject/bignumber';
 	import ConvertAmountExchange from '$lib/components/convert/ConvertAmountExchange.svelte';
 	import ConvertValue from '$lib/components/convert/ConvertValue.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
-	import { formatToken } from '$lib/utils/format.utils';
+	import { formatTokenBigintToNumber } from '$lib/utils/format.utils';
 
 	export let feeAmount: bigint | undefined = undefined;
 	export let decimals: number;
 	export let exchangeRate: number | undefined = undefined;
 
 	let formattedAmount: number | undefined;
 	$: formattedAmount = nonNullish(feeAmount)
-		? // TODO: create a util for formating and converting a bigint to number
-			Number(
-				formatToken({
-					value: BigNumber.from(feeAmount),
-					unitName: decimals,
-					displayDecimals: decimals
-				})
-			)
+		? formatTokenBigintToNumber({
+				value: feeAmount,
+				unitName: decimals,
+				displayDecimals: decimals
+			})
 		: undefined;
 </script>
 

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,27 +1,42 @@
 <script lang="ts">
 	import { isNullish, nonNullish } from '@dfinity/utils';
+	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 TransactionsDateGroup from '$lib/components/transactions/TransactionsDateGroup.svelte';
 	import TransactionsPlaceholder from '$lib/components/transactions/TransactionsPlaceholder.svelte';
 	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,
 		AllTransactionUi,
 		TransactionsUiDateGroup
 	} from '$lib/types/transaction';
 	import { groupTransactionsByDate } from '$lib/utils/transaction.utils';
+	import { modalStore } from '$lib/stores/modal.store';
 	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
+		$ethAddress: $ethAddress,
+		$icTransactions: {},
+		$btcStatuses: {}
 	});
 
 	let sortedTransactions: AllTransactionsUi;
@@ -31,6 +46,21 @@
 
 	let groupedTransactions: TransactionsUiDateGroup<AllTransactionUi>;
 	$: groupedTransactions = groupTransactionsByDate(sortedTransactions);
+
+	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-->
@@ -44,4 +74,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}

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/utils/format.utils.ts

@@ -1,20 +1,24 @@
 import { ETHEREUM_DEFAULT_DECIMALS } from '$env/tokens.env';
 import { MILLISECONDS_IN_DAY, NANO_SECONDS_IN_MILLISECOND } from '$lib/constants/app.constants';
 import { nonNullish } from '@dfinity/utils';
-import type { BigNumber, BigNumberish } from '@ethersproject/bignumber';
+import { BigNumber, type BigNumberish } from '@ethersproject/bignumber';
 import { Utils } from 'alchemy-sdk';
 
-export const formatToken = ({
-	value,
-	unitName = ETHEREUM_DEFAULT_DECIMALS,
-	displayDecimals = 4,
-	trailingZeros = false
-}: {
+const DEFAULT_DISPLAY_DECIMALS = 4;
+
+interface FormatTokenParams {
 	value: BigNumber;
 	unitName?: string | BigNumberish;
 	displayDecimals?: number;
 	trailingZeros?: boolean;
-}): string => {
+}
+
+export const formatToken = ({
+	value,
+	unitName = ETHEREUM_DEFAULT_DECIMALS,
+	displayDecimals = DEFAULT_DISPLAY_DECIMALS,
+	trailingZeros = false
+}: FormatTokenParams): string => {
 	const res = Utils.formatUnits(value, unitName);
 	const formatted = (+res).toLocaleString('en-US', {
 		useGrouping: false,
@@ -29,6 +33,19 @@ export const formatToken = ({
 	return formatted.replace(/\.0+$/, '');
 };
 
+export const formatTokenBigintToNumber = ({
+	value,
+	...restParams
+}: Omit<FormatTokenParams, 'value'> & {
+	value: bigint;
+}): number =>
+	Number(
+		formatToken({
+			value: BigNumber.from(value),
+			...restParams
+		})
+	);
+
 /**
  * Shortens the text from the middle. Ex: "12345678901234567890" -> "1234567...5678901"
  * @param text

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 = ({