From b0bbec71c0fe0484355c0a831f5975e8f112de79 Mon Sep 17 00:00:00 2001 From: Antonio Ventilii Date: Fri, 15 Nov 2024 14:16:32 +0100 Subject: [PATCH] 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> --- .../src/lib/components/core/Menu.svelte | 24 ++++++++++++++- .../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, 90 insertions(+), 1 deletion(-) 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..55cb850a06 100644 --- 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; @@ -61,6 +76,13 @@ {/if} + {#if !activityRoute && !settingsRoute} + + + {$i18n.navigation.text.activity} + + {/if} + {#if !dAppExplorerRoute && !settingsRoute} 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 @@ + + + + + + + + diff --git a/src/frontend/src/lib/components/navigation/NavigationMenu.svelte b/src/frontend/src/lib/components/navigation/NavigationMenu.svelte index f9b6e77073..522b841834 100644 --- a/src/frontend/src/lib/components/navigation/NavigationMenu.svelte +++ b/src/frontend/src/lib/components/navigation/NavigationMenu.svelte @@ -2,12 +2,14 @@ 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 @@ -15,6 +17,7 @@ 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} + + + {$i18n.navigation.text.activity} + + 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);