feat(frontend): add Activity to navigation menu

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { IconUser, Popover } from '@dfinity/gix-components';
+	import { IconAccountBalance, IconUser, Popover } from '@dfinity/gix-components';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import AboutWhyOisy from '$lib/components/about/AboutWhyOisy.svelte';
@@ -19,7 +19,8 @@
 	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';
+	import IconActivity from '$lib/components/icons/iconly/IconActivity.svelte';
 
 	let visible = false;
 	let button: HTMLButtonElement | undefined;
@@ -30,17 +31,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 +71,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

@@ -8,19 +8,22 @@
 	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,
 		isRouteTransactions,
 		networkParam
 	} from '$lib/utils/nav.utils.js';
+	import IconActivity from '$lib/components/icons/iconly/IconActivity.svelte';
 
 	// If we pass $page directly, we get a type error: for some reason (I cannot find any
 	// documentation on it), the type of $page is not `Page`, but `unknown`. So we need to manually
@@ -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/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/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/tests/lib/utils/nav.utils.spec.ts

@@ -1,5 +1,6 @@
 import { AppPath, ROUTE_ID_GROUP_APP } from '$lib/constants/routes.constants';
 import {
+	isRouteActivity,
 	isRouteDappExplorer,
 	isRouteSettings,
 	isRouteTokens,
@@ -82,6 +83,22 @@ describe('Route Check Functions', () => {
 		});
 	});
 
+	describe('isRouteActivity', () => {
+		it('should return true when route id matches Activity path', () => {
+			expect(isRouteActivity(mockPage(`${ROUTE_ID_GROUP_APP}${AppPath.Activity}`))).toBe(true);
+		});
+
+		it('should return false when route id does not match Activity path', () => {
+			expect(isRouteActivity(mockPage(`${ROUTE_ID_GROUP_APP}/wrongPath`))).toBe(false);
+
+			expect(isRouteActivity(mockPage(`${ROUTE_ID_GROUP_APP}${AppPath.Settings}`))).toBe(false);
+
+			expect(isRouteActivity(mockPage(`${ROUTE_ID_GROUP_APP}`))).toBe(false);
+
+			expect(isRouteActivity(mockPage(`/anotherGroup/${AppPath.Activity}`))).toBe(false);
+		});
+	});
+
 	describe('isRouteTokens', () => {
 		it('should return true when route id matches ROUTE_ID_GROUP_APP exactly', () => {
 			expect(isRouteTokens(mockPage(ROUTE_ID_GROUP_APP))).toBe(true);