From ba0aeaa50fd0e687d3eae2b107af4dd41b65c12e Mon Sep 17 00:00:00 2001 From: Antonio Ventilii Date: Fri, 15 Nov 2024 13:41:28 +0100 Subject: [PATCH 1/3] 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 @@ @@ -61,6 +71,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..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} + + + {$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); From b061a9d7e1e3d2c17f384beac37aa46bb22b9a99 Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 15 Nov 2024 12:44:09 +0000 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=A4=96=20Apply=20formatting=20changes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/lib/components/core/Menu.svelte | 9 +++++++-- .../src/lib/components/navigation/NavigationMenu.svelte | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/lib/components/core/Menu.svelte b/src/frontend/src/lib/components/core/Menu.svelte index 0181fcb0b1..d832bde541 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,8 +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 { isRouteActivity, isRouteDappExplorer, isRouteSettings, networkParam } from '$lib/utils/nav.utils'; - import IconActivity from '$lib/components/icons/iconly/IconActivity.svelte'; + import { + isRouteActivity, + isRouteDappExplorer, + isRouteSettings, + networkParam + } from '$lib/utils/nav.utils'; let visible = false; let button: HTMLButtonElement | undefined; diff --git a/src/frontend/src/lib/components/navigation/NavigationMenu.svelte b/src/frontend/src/lib/components/navigation/NavigationMenu.svelte index fef5904bee..522b841834 100644 --- a/src/frontend/src/lib/components/navigation/NavigationMenu.svelte +++ b/src/frontend/src/lib/components/navigation/NavigationMenu.svelte @@ -2,6 +2,7 @@ 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'; @@ -23,7 +24,6 @@ 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 From e7fcda8089db460014d3dc1816909e31075cfb6b Mon Sep 17 00:00:00 2001 From: Antonio Ventilii Date: Fri, 15 Nov 2024 13:46:56 +0100 Subject: [PATCH 3/3] lint: remove unused imports --- src/frontend/src/lib/components/core/Menu.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/lib/components/core/Menu.svelte b/src/frontend/src/lib/components/core/Menu.svelte index d832bde541..55cb850a06 100644 --- a/src/frontend/src/lib/components/core/Menu.svelte +++ b/src/frontend/src/lib/components/core/Menu.svelte @@ -1,5 +1,5 @@