feat(frontend): add Activity to navigation menu (#3584)

# Motivation We include Activity path both in the lateral navigation menu and in the popover one. The test will be provided via E2E CI. ![Screenshot 2024-11-15 at 13 40 05](https://github.com/user-attachments/assets/cd371594-e06f-42a2-ad1f-e86e9b882478) ![Screenshot 2024-11-15 at 13 40 12](https://github.com/user-attachments/assets/c947530a-2847-4cdb-b5d7-39d144748502) ![Screenshot 2024-11-15 at 13 40 27](https://github.com/user-attachments/assets/b400544e-a86b-48a4-82da-268722577948) ![Screenshot 2024-11-15 at 13 40 34](https://github.com/user-attachments/assets/4cf0abbb-2dc7-4738-bfd9-0edbb49eeaf6) ![Screenshot 2024-11-15 at 13 40 49](https://github.com/user-attachments/assets/b2635ddb-4667-4b5b-a50a-9b72cd28cf36) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
dfinity · Nov 15, 2024 · b0bbec7 · b0bbec7
1 parent 599cdf7
commit b0bbec7
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 1 deletion.
diff --git a/src/frontend/src/lib/components/core/Menu.svelte b/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" />

diff --git a/src/frontend/src/lib/components/icons/iconly/IconActivity.svelte 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
@@ -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}

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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);