From ba0aeaa50fd0e687d3eae2b107af4dd41b65c12e Mon Sep 17 00:00:00 2001
From: Antonio Ventilii <antonio.ventilii@dfinity.org>
Date: Fri, 15 Nov 2024 13:41:28 +0100
Subject: [PATCH] feat(frontend): add Activity to navigation menu

---
 .../src/lib/components/core/Menu.svelte       | 21 ++++++++++++--
 .../icons/iconly/IconActivity.svelte          | 29 +++++++++++++++++++
 .../navigation/NavigationMenu.svelte          | 13 +++++++++
 .../src/lib/constants/test-ids.constants.ts   |  1 +
 src/frontend/src/lib/i18n/en.json             |  2 ++
 src/frontend/src/lib/types/i18n.d.ts          |  2 ++
 src/frontend/src/lib/utils/nav.utils.ts       |  3 ++
 .../src/tests/lib/utils/nav.utils.spec.ts     | 17 +++++++++++
 8 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 src/frontend/src/lib/components/icons/iconly/IconActivity.svelte

diff --git a/src/frontend/src/lib/components/core/Menu.svelte b/src/frontend/src/lib/components/core/Menu.svelte
index b6f2620316..0181fcb0b1 100644
--- a/src/frontend/src/lib/components/core/Menu.svelte
+++ b/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" />
diff --git a/src/frontend/src/lib/components/icons/iconly/IconActivity.svelte b/src/frontend/src/lib/components/icons/iconly/IconActivity.svelte
new file mode 100644
index 0000000000..afd89abdd8
--- /dev/null
+++ b/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>
diff --git a/src/frontend/src/lib/components/navigation/NavigationMenu.svelte b/src/frontend/src/lib/components/navigation/NavigationMenu.svelte
index f9b6e77073..fef5904bee 100644
--- a/src/frontend/src/lib/components/navigation/NavigationMenu.svelte
+++ b/src/frontend/src/lib/components/navigation/NavigationMenu.svelte
@@ -8,6 +8,7 @@
 	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
@@ -15,12 +16,14 @@
 	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}
diff --git a/src/frontend/src/lib/constants/test-ids.constants.ts b/src/frontend/src/lib/constants/test-ids.constants.ts
index 7d07b540d5..644867b544 100644
--- a/src/frontend/src/lib/constants/test-ids.constants.ts
+++ b/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';
diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
index cc6050e110..a224ce07ec 100644
--- a/src/frontend/src/lib/i18n/en.json
+++ b/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",
diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
index c9eff6a397..3502feaed3 100644
--- a/src/frontend/src/lib/types/i18n.d.ts
+++ b/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;
diff --git a/src/frontend/src/lib/utils/nav.utils.ts b/src/frontend/src/lib/utils/nav.utils.ts
index 1de6b5fc19..906ebc2675 100644
--- a/src/frontend/src/lib/utils/nav.utils.ts
+++ b/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 = ({
diff --git a/src/frontend/src/tests/lib/utils/nav.utils.spec.ts b/src/frontend/src/tests/lib/utils/nav.utils.spec.ts
index 1441926d89..8bec9a63de 100644
--- a/src/frontend/src/tests/lib/utils/nav.utils.spec.ts
+++ b/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);