refactor: router modules (#5020)

* chore: remove parent router

* chore: re-organize router core module

* chore: adapt mobile to new structure

* chore: mobile: move wallet context to dashboard and routes to views

* chore: update view and route components organization

* chore: cleanup router events

* chore: refactor core router module

* empty

Co-authored-by: Begoña Alvarez <balvarez@boxfish.studio>

packages/desktop/App.svelte

@@ -15,7 +15,7 @@
     import { appSettings, appStage, AppStage, appVersionDetails, initAppSettings } from '@core/app'
     import { Electron } from '@lib/electron'
     import { showAppNotification } from '@auxiliary/notification'
-    import { openPopup, popupState } from '@auxiliary/popup'
+    import { closePopup, openPopup, popupState } from '@auxiliary/popup'
     import { Dashboard, LoginRouter, OnboardingRouter, Settings, Splash } from 'shared/routes'
     import { onDestroy, onMount } from 'svelte'
     import { getLocalisedMenuItems } from './lib/helpers'
@@ -89,6 +89,7 @@
         })
         Electron.onEvent('menu-navigate-settings', () => {
             if ($loggedIn) {
+                closePopup()
                 openSettings()
             } else {
                 settings = true

packages/mobile/App.svelte

@@ -11,7 +11,7 @@
         dashboardRouter,
         OnboardingRoute,
         onboardingRoute,
-    } from './lib/core/router'
+    } from './lib/routers'
     import { openSettings } from '@core/router'
     import { Route } from './components'
     import { ToastContainer } from 'shared/components'
@@ -26,8 +26,8 @@
     } from '@core/app'
     import { Electron } from 'shared/lib/electron'
     import { showAppNotification } from '@auxiliary/notification'
-    import { openPopup } from '@auxiliary/popup'
-    import { DashboardRouter, LoginRouter, OnboardingRouter } from './routes'
+    import { closePopup, openPopup } from '@auxiliary/popup'
+    import { DashboardView, LoginRouter, OnboardingRouter } from './views'
     import { onDestroy, onMount } from 'svelte'
     import { get } from 'svelte/store'
     import { onboardingProfile, initialiseOnboardingProfile, updateOnboardingProfile } from '@contexts/onboarding'
@@ -96,6 +96,7 @@
         })
         Electron.onEvent('menu-navigate-settings', () => {
             if ($loggedIn) {
+                closePopup()
                 openSettings()
             } else {
                 settings = true
@@ -177,7 +178,7 @@
     <OnboardingRouter />
 </Route>
 <Route route={AppRoute.Dashboard}>
-    <DashboardRouter />
+    <DashboardView />
 </Route>
 
 <ToastContainer />

packages/mobile/components/Drawer.svelte

@@ -37,7 +37,7 @@
 </script>
 
 <svelte:window on:touchend={onTouchEnd} on:touchmove={onTouchMove} />
-<drawer class="fixed top-0 z-30 w-screen h-screen z-40">
+<drawer class="fixed top-0 left-0 z-30 w-screen h-screen z-40">
     <overlay
         in:fade={{ duration: 300 }}
         out:fade={{ duration: 200 }}

packages/mobile/components/Route.svelte

@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import { appRoute, AppRoute } from '../lib/core/router'
+    import { appRoute, AppRoute } from '../lib/routers'
 
     export let route: AppRoute
 </script>

packages/mobile/components/TopBar.svelte

@@ -5,17 +5,17 @@
 
 <div class="grid grid-cols-4 h-10">
     <div class="col-span-1">
-        {#if features?.wallet?.profileActions?.enabled}
+        {#if features?.dashboard?.profileActions?.enabled}
             <ProfileActionsButton />
         {/if}
     </div>
     <div class="flex justify-center col-span-2 content-center">
-        {#if features?.wallet?.accountSwitcher?.enabled}
+        {#if features?.dashboard?.accountSwitcher?.enabled}
             <AccountSwitcherButton />
         {/if}
     </div>
     <div class="flex justify-end col-span-1">
-        {#if features?.wallet?.accountActions?.enabled}
+        {#if features?.dashboard?.accountActions?.enabled}
             <AccountActionsButton />
         {/if}
     </div>

packages/mobile/components/buttons/AccountSwitcherButton.svelte

@@ -3,7 +3,7 @@
     import { selectedAccount } from '@core/account'
     import { Icon } from 'shared/components'
     import { AccountLabel } from 'shared/components/atoms/'
-    import { DashboardRoute, dashboardRoute, dashboardRouter } from '../../lib/core/router'
+    import { DashboardRoute, dashboardRoute, dashboardRouter } from '../../lib/routers'
 
     $: isDrawerOpen = $dashboardRoute === DashboardRoute.AccountSwitcher
 </script>

packages/mobile/features/features.ts

@@ -2,91 +2,7 @@ import onboardingFeatures from './onboarding.features'
 
 const features = {
     onboarding: onboardingFeatures,
-    settings: {
-        enabled: false,
-        general: {
-            enabled: false,
-            theme: {
-                enabled: false,
-            },
-            language: {
-                enabled: false,
-            },
-            currency: {
-                enabled: false,
-            },
-            notifications: {
-                enabled: false,
-            },
-            networkStatus: {
-                enabled: false,
-            },
-            changeProfileName: {
-                enabled: false,
-            },
-        },
-        security: {
-            enabled: false,
-            exportStronghold: {
-                enabled: false,
-            },
-            appLock: {
-                enabled: false,
-            },
-            changePassword: {
-                enabled: false,
-            },
-            changePincode: {
-                enabled: false,
-            },
-            deleteProfile: {
-                enabled: false,
-            },
-        },
-        advanced: {
-            enabled: false,
-            networkConfiguration: {
-                enabled: false,
-            },
-            deepLinks: {
-                enabled: false,
-            },
-            walletFinder: {
-                enabled: false,
-            },
-            hiddenAccounts: {
-                enabled: false,
-            },
-            errorLog: {
-                enabled: false,
-            },
-            crashReporting: {
-                enabled: false,
-            },
-            diagnostics: {
-                enabled: false,
-            },
-            migrateLedgerIndex: {
-                enabled: false,
-            },
-        },
-        helpAndInfo: {
-            enabled: false,
-            documentation: {
-                enabled: false,
-            },
-            faq: {
-                enabled: false,
-            },
-            discord: {
-                enabled: false,
-            },
-            reportAnIssue: {
-                enabled: false,
-            },
-        },
-    },
-    wallet: {
+    dashboard: {
         enabled: false,
         profileActions: {
             enabled: false,

packages/mobile/lib/contexts/dashboard/constants/dashboard-tab-component.constant.ts

@@ -0,0 +1,7 @@
+import { ActivityTab, TokensTab } from '../../../../views/dashboard/tabs'
+import { DashboardTab } from '../enums'
+
+export const DASHBOARD_TAB_COMPONENT = {
+    [DashboardTab.Tokens]: TokensTab,
+    [DashboardTab.Activity]: ActivityTab,
+}

packages/mobile/lib/contexts/dashboard/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './dashboard-tab-component.constant'
+export * from './initial-active-dashboard-tab.constant'

packages/mobile/lib/contexts/dashboard/constants/initial-active-dashboard-tab.constant.ts

@@ -0,0 +1,14 @@
+import { DashboardTab } from '../enums'
+import features from '../../../../features/features'
+
+export const INITIAL_ACTIVE_DASHBOARD_TAB: DashboardTab | null = getInitialActiveDashboardTab()
+
+function getInitialActiveDashboardTab(): DashboardTab | null {
+    if (features?.dashboard?.tokens?.enabled) {
+        return DashboardTab.Tokens
+    } else if (features?.dashboard?.activity?.enabled) {
+        return DashboardTab.Activity
+    } else {
+        return null
+    }
+}

packages/mobile/lib/contexts/wallet/enums/wallet-tab.enum.ts → packages/mobile/lib/contexts/dashboard/enums/dashboard-tab.enum.ts

@@ -1,4 +1,4 @@
-export enum WalletTab {
+export enum DashboardTab {
     Activity = 'activity',
     Tokens = 'tokens',
 }

packages/mobile/lib/contexts/dashboard/enums/index.ts

@@ -0,0 +1 @@
+export * from './dashboard-tab.enum'

packages/mobile/lib/contexts/dashboard/stores/active-dashboard-tab.store.ts

@@ -0,0 +1,10 @@
+import { writable } from 'svelte/store'
+
+import { INITIAL_ACTIVE_DASHBOARD_TAB } from '../constants'
+import { DashboardTab } from '../enums'
+
+export const activeDashboardTab = writable<DashboardTab>(INITIAL_ACTIVE_DASHBOARD_TAB)
+
+export function updateActiveDashboardTab(tab: DashboardTab): void {
+    activeDashboardTab?.set(tab)
+}

packages/mobile/lib/contexts/dashboard/stores/index.ts

@@ -0,0 +1 @@
+export * from './active-dashboard-tab.store'

packages/mobile/lib/core/router/app-router.ts → packages/mobile/lib/routers/app-router.ts

@@ -1,9 +1,8 @@
 import { get, writable } from 'svelte/store'
 
 import { profiles } from '@core/profile'
+import { IRouterEvent, Router } from '@core/router'
 
-import { Router } from '@core/router/router'
-import { FireflyEvent } from '@core/router/types'
 import { AppRoute, LoginRoute } from './enums'
 import { loginRoute } from './subrouters'
 
@@ -26,7 +25,7 @@ export class AppRouter extends Router<AppRoute> {
         this.init()
     }
 
-    public next(event?: FireflyEvent): void {
+    public next(event?: IRouterEvent): void {
         const params = event || {}
         let nextRoute: AppRoute
 

packages/mobile/lib/core/router/dashboard-router.ts → packages/mobile/lib/routers/dashboard-router.ts

@@ -1,7 +1,8 @@
 import { writable } from 'svelte/store'
 
+import { Router } from '@core/router'
+
 import { DashboardRoute } from './enums'
-import { Router } from '../../../../shared/lib/core/router/router'
 
 export const dashboardRouter = writable<DashboardRouter>(null)
 export const dashboardRoute = writable<DashboardRoute>(null)

packages/mobile/lib/core/router/onboarding-router.ts → packages/mobile/lib/routers/onboarding-router.ts

@@ -1,15 +1,18 @@
+import { get, writable } from 'svelte/store'
+
 import {
     onboardingProfile,
     ProfileRecoveryType,
     ProfileSetupType,
     shouldBeDeveloperProfile,
 } from '@contexts/onboarding'
+
 import { hasCompletedAppSetup } from '@core/app'
 import { ProfileType } from '@core/profile'
-import { get, writable } from 'svelte/store'
+import { Router } from '@core/router'
+
 import { appRouter } from './app-router'
 import { OnboardingRoute, ProfileSetupRoute } from './enums'
-import { Router } from '@core/router/router'
 import { profileSetupRoute } from './subrouters'
 
 export const onboardingRoute = writable<OnboardingRoute>(null)

packages/mobile/lib/core/router/subrouters/login-router.ts → packages/mobile/lib/routers/subrouters/login-router.ts

@@ -1,8 +1,9 @@
 import { get, writable } from 'svelte/store'
+
+import { IRouterEvent, Subrouter } from '@core/router'
+
 import { appRouter } from '../app-router'
 import { LoginRoute } from '../enums'
-import { FireflyEvent } from '@core/router/types'
-import { Subrouter } from './subrouter'
 
 export const loginRoute = writable<LoginRoute>(null)
 export const loginRouter = writable<LoginRouter>(null)
@@ -12,7 +13,7 @@ export class LoginRouter extends Subrouter<LoginRoute> {
         super(LoginRoute.SelectProfile, loginRoute, get(appRouter))
     }
 
-    next(event?: FireflyEvent): void {
+    next(event?: IRouterEvent): void {
         let nextRoute: LoginRoute
         const currentRoute = get(this.routeStore)
 

packages/mobile/lib/core/router/subrouters/onboarding/app-setup-router.ts → packages/mobile/lib/routers/subrouters/onboarding/app-setup-router.ts

@@ -1,8 +1,9 @@
 import { get, writable } from 'svelte/store'
 
+import { Subrouter } from '@core/router'
+
 import { AppSetupRoute } from '../../enums'
 import { onboardingRouter } from '../../onboarding-router'
-import { Subrouter } from '../subrouter'
 
 export const appSetupRoute = writable<AppSetupRoute>(null)
 export const appSetupRouter = writable<AppSetupRouter>(null)