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);