refactor: mobile settings drawer

packages/mobile/components/Drawer.svelte

@@ -10,11 +10,10 @@
         DRAWER_IN_ANIMATION_DURATION_MS,
         DRAWER_OUT_ANIMATION_DURATION_MS,
         DRAWER_STATIC_TITLE_TITLES,
-        getDrawerRouter,
     } from '@/auxiliary/drawer'
-    import { resetRouterWithDrawerDelay } from '@/routers'
     import { Icon as IconEnum } from '@lib/auxiliary/icon'
 
+    export let onBack: () => unknown = () => {}
     export let onClose: () => unknown = () => {}
     export let allowBack: boolean = false
     export let title: string | undefined = undefined
@@ -30,7 +29,6 @@
 
     $: staticTile = DRAWER_STATIC_TITLE_TITLES[id] ? localize(DRAWER_STATIC_TITLE_TITLES[id]) : undefined
     $: displayedTitle = title ?? staticTile
-    $: drawerRouter = getDrawerRouter(id)
 
     const directon = enterFromSide ? { x: -100 } : { y: 100 }
 
@@ -52,31 +50,19 @@
         moving = false
         const panelSize = enterFromSide ? panelWidth : panelHeight
         if (position < -panelSize / 3) {
-            handleClose()
+            onClose && onClose()
         } else {
             position = 0
         }
     }
-
-    function handleClose(): void {
-        if ($drawerRouter) {
-            resetRouterWithDrawerDelay($drawerRouter)
-        }
-        onClose && onClose()
-    }
-    function onBackClick(): void {
-        if ($drawerRouter) {
-            $drawerRouter.previous()
-        }
-    }
 </script>
 
 <svelte:window on:touchend={onTouchEnd} on:touchmove={onTouchMove} />
 <drawer class="fixed top-0 left-0 w-screen h-screen">
     <overlay
         in:fade|local={{ duration: DRAWER_IN_ANIMATION_DURATION_MS }}
         out:fade|local={{ duration: DRAWER_OUT_ANIMATION_DURATION_MS }}
-        on:click={handleClose}
+        on:click={onClose}
         class="fixed top-0 left-0 w-full h-full z-0 bg-gray-700 dark:bg-gray-900 bg-opacity-60 dark:bg-opacity-60"
     />
     <panel
@@ -100,7 +86,7 @@
             <div class="grid grid-cols-4 h-6 mb-6">
                 <div class="col-span-1">
                     {#if allowBack}
-                        <button type="button" on:click={onBackClick}>
+                        <button type="button" on:click={onBack}>
                             <Icon width="24" height="24" icon={IconEnum.ArrowLeft} classes="text-gray-500" />
                         </button>
                     {/if}

packages/mobile/components/TopBar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { AccountActionsButton, AccountSwitcherButton, DashboardProfileButton } from './'
+
     import features from '@features/features'
 </script>
 

packages/mobile/components/buttons/DashboardProfileButton.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
     import { activeProfile } from '@core/profile'
     import { getInitials } from '@core/utils'
-    import { DashboardRoute, dashboardRouter } from '@/routers'
 
-    // @TODO fix the linting error that profileInitial isn't used
-    /* eslint-disable @typescript-eslint/no-unused-vars */
+    import { DrawerId, openDrawer } from '@/auxiliary/drawer'
+
     $: profileInitial = getInitials($activeProfile?.name, 1)
+
+    function onClick(): void {
+        openDrawer(DrawerId.Profile, { fullScreen: true, enterFromSide: true, allowBack: true })
+    }
 </script>
 
 <button
-    on:click={() => $dashboardRouter.goTo(DashboardRoute.Profile)}
+    on:click={onClick}
     class="w-10 h-10 relative flex items-center justify-center rounded-full bg-blue-500 leading-100"
 >
     <span class="text-12 text-center text-white uppercase">{profileInitial}</span>

packages/mobile/components/drawers/DrawerManager.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { get } from 'svelte/store'
+
     import { Drawer } from '@components'
     import {
         AccountActionsDrawer,
@@ -12,14 +14,17 @@
         EnterPasswordDrawer,
         ExpirationDrawer,
         FilterDrawer,
+        NetworkStatusDrawer,
+        ProfileDrawer,
         ReceiveDrawer,
         ReferencesDrawer,
         SelectedActivityDrawer,
         SelectedTokenDrawer,
         SendDrawer,
     } from './'
 
-    import { closeDrawer, DrawerId, drawers } from '@/auxiliary/drawer'
+    import { closeDrawer, DrawerId, drawers, getDrawerRouter } from '@/auxiliary/drawer'
+    import { profileRouter, sendRouter } from '@/routers'
 
     const COMPONENTS = {
         [DrawerId.AccountSwitcher]: AccountSwitcherDrawer,
@@ -38,12 +43,30 @@
         [DrawerId.Send]: SendDrawer,
         [DrawerId.References]: ReferencesDrawer,
         [DrawerId.Expiration]: ExpirationDrawer,
+        [DrawerId.Profile]: ProfileDrawer,
+        [DrawerId.NetworkStatus]: NetworkStatusDrawer,
+    }
+
+    function onClose(drawerId: DrawerId): void {
+        if (drawerId === DrawerId.Profile) {
+            $profileRouter.closeDrawer()
+        } else if (drawerId === DrawerId.Send) {
+            $sendRouter.closeDrawer()
+        } else {
+            closeDrawer(drawerId)
+        }
+    }
+    function onBack(drawerId: DrawerId): void {
+        const drawerRouter = get(getDrawerRouter(drawerId))
+        if (drawerRouter) {
+            drawerRouter.previous()
+        }
     }
 </script>
 
 {#each $drawers as drawer}
     {@const drawerId = drawer.id}
-    <Drawer id={drawerId} {...drawer.props} onClose={() => closeDrawer(drawerId)}>
+    <Drawer id={drawerId} {...drawer.props} onClose={() => onClose(drawerId)} onBack={() => onBack(drawerId)}>
         <svelte:component this={COMPONENTS[drawerId]} {...drawer.props} />
     </Drawer>
 {/each}

packages/mobile/views/dashboard/drawers/profile/views/NetworkStatusView.svelte → packages/mobile/components/drawers/NetworkStatusDrawer.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-    import { localize } from '@core/i18n'
-    import { NetworkHealth, networkStatus, NETWORK_STATUS_DESCRIPTION, nodeInfo } from '@core/network'
     import { KeyValueBox } from '@ui'
 
-    let health: NetworkHealth
+    import { localize } from '@core/i18n'
+    import { NetworkHealth, networkStatus, NETWORK_STATUS_DESCRIPTION, nodeInfo } from '@core/network'
 
-    $: health = $networkStatus.health ?? NetworkHealth.Down
     $: description = $networkStatus.description ?? NETWORK_STATUS_DESCRIPTION[NetworkHealth.Disconnected]
     $: networkStatistics = {
         messagesPerSecond: Math.round($networkStatus.messagesPerSecond ?? 0),

packages/mobile/components/drawers/index.js

@@ -10,9 +10,11 @@ export { default as DrawerManager } from './DrawerManager.svelte'
 export { default as EnterPasswordDrawer } from './EnterPasswordDrawer.svelte'
 export { default as ExpirationDrawer } from './ExpirationDrawer.svelte'
 export { default as FilterDrawer } from './FilterDrawer.svelte'
+export { default as NetworkStatusDrawer } from './NetworkStatusDrawer.svelte'
 export { default as ReceiveDrawer } from './ReceiveDrawer.svelte'
 export { default as ReferencesDrawer } from './ReferencesDrawer.svelte'
 export { default as SelectedActivityDrawer } from './SelectedActivityDrawer.svelte'
 export { default as SelectedTokenDrawer } from './SelectedTokenDrawer.svelte'
 
+export * from './profile'
 export * from './send'

packages/mobile/views/dashboard/drawers/profile/ProfileDrawer.svelte → packages/mobile/components/drawers/profile/ProfileDrawer.svelte

@@ -1,48 +1,27 @@
 <script lang="ts">
+    import ProfileRouterComponent from './ProfileRouter.svelte'
+
     import { appSettings } from '@core/app'
     import { localize } from '@core/i18n'
-    import { Drawer } from '@components'
+
+    import { DrawerId, updateDrawerProps } from '@/auxiliary/drawer'
     import { SETTINGS_ROUTE_META } from '@/contexts/settings'
     import {
         networkConfigurationSettingsRoute,
         NetworkConfigurationSettingsRoute,
-        networkConfigurationSettingsRouter,
-        NetworkConfigurationSettingsRouter,
         ProfileRoute,
         profileRoute,
-        ProfileRouter,
-        profileRouter,
         SettingsRoute,
         settingsRoute,
-        SettingsRouter,
-        settingsRouter,
     } from '@/routers'
-    import ProfileRouterComponent from './ProfileRouter.svelte'
-
-    export let onClose: () => unknown = () => {}
 
     let title: string
-    let allowBack: boolean
-    let activeRouter: ProfileRouter | SettingsRouter | NetworkConfigurationSettingsRouter = $profileRouter
 
-    $: $profileRoute,
-        $settingsRoute,
-        $networkConfigurationSettingsRoute,
-        (setTitle(), setAllowBack(), setActiveRouter())
-    $: $appSettings.language, setTitle()
+    $: $profileRoute, $settingsRoute, $networkConfigurationSettingsRoute, updateTitle()
+    $: $appSettings.language, updateTitle()
+    $: title, updateDrawerProps(DrawerId.Profile, { title })
 
-    function setActiveRouter(): void {
-        if ($profileRoute === ProfileRoute.Settings) {
-            if ($settingsRoute === SettingsRoute.NetworkConfiguration) {
-                activeRouter = $networkConfigurationSettingsRouter
-            } else {
-                activeRouter = $settingsRouter
-            }
-        } else {
-            activeRouter = $profileRouter
-        }
-    }
-    function setTitle(): void {
+    function updateTitle(): void {
         if ($profileRoute === ProfileRoute.Settings) {
             if ($settingsRoute === SettingsRoute.Init) {
                 title = localize('views.settings.settings')
@@ -74,24 +53,9 @@
                 title = localize(SETTINGS_ROUTE_META[$settingsRoute].name)
             }
         } else {
-            if ($profileRoute === ProfileRoute.NetworkStatus) {
-                title = localize('views.settings.networkStatus.title')
-            } else if ($profileRoute === ProfileRoute.Backup) {
-                title = localize('views.settings.exportStronghold.title')
-            } else {
-                title = localize('views.settings.profile.title')
-            }
-        }
-    }
-    function setAllowBack(): void {
-        switch ($profileRoute) {
-            default:
-                allowBack = true
-                break
+            title = localize('views.settings.profile.title')
         }
     }
 </script>
 
-<Drawer {onClose} {title} fullScreen enterFromSide {allowBack} onBackClick={() => activeRouter.previous()}>
-    <ProfileRouterComponent />
-</Drawer>
+<ProfileRouterComponent />

packages/mobile/components/drawers/profile/ProfileRouter.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { ActionsView, SettingsView } from './views'
+
+    import { ProfileRoute, profileRoute } from '@/routers'
+</script>
+
+{#if $profileRoute === ProfileRoute.Actions}
+    <ActionsView />
+{:else if $profileRoute === ProfileRoute.Settings}
+    <SettingsView />
+{/if}

packages/mobile/views/dashboard/drawers/profile/index.js → packages/mobile/components/drawers/profile/index.js

@@ -1,3 +1 @@
 export { default as ProfileDrawer } from './ProfileDrawer.svelte'
-
-export * from './views'

packages/mobile/views/dashboard/drawers/profile/views/ActionsView.svelte → packages/mobile/components/drawers/profile/views/ActionsView.svelte

@@ -1,16 +1,22 @@
 <script lang="ts">
+    import { NetworkStatusButton, ProfileActionButton, ProfileBackupButton, ProfileLockButton } from '@components'
+    import { FontWeight, Icon, NetworkIcon, Text, TextType } from '@ui'
+
     import { localize } from '@core/i18n'
     import { NetworkProtocol } from '@core/network'
     import { activeProfile, lockStronghold, logout } from '@core/profile'
-    import { isStrongholdUnlocked } from '@core/profile-manager'
     import { getInitials, isRecentDate } from '@core/utils'
+
+    import { showAppNotification } from '@auxiliary/notification'
+    import { exportStronghold } from '@contexts/settings'
+
+    import { DrawerId, openDrawer } from '@/auxiliary/drawer'
+    import { profileRouter } from '@/routers'
     import features from '@features/features'
     import { Icon as IconTypes } from '@lib/auxiliary/icon'
-    import { FontWeight, Icon, NetworkIcon, Text, TextType } from '@ui'
-    import { NetworkStatusButton, ProfileActionButton, ProfileBackupButton, ProfileLockButton } from '@components'
-    import { profileRouter } from '@/routers'
 
     const { isStrongholdLocked } = $activeProfile
+
     let networkProtocol: NetworkProtocol
     $: networkProtocol = $activeProfile.networkProtocol
 
@@ -21,20 +27,47 @@
     let initials: string
     $: initials = getInitials($activeProfile.name, 1)
 
-    function handleLogoutClick(): void {
-        logout()
+    function onLogoutClick(): void {
+        void logout()
     }
-    function handleProfileLockButtonClick(): void {
+
+    function onLockToggleClick(): void {
         if ($isStrongholdLocked) {
-            isStrongholdUnlocked().then((locked) => {
-                if (!locked) {
-                    $profileRouter.setNeedsUnlock(true)
-                }
-            })
+            openDrawer(DrawerId.EnterPassword)
         } else {
             lockStronghold()
         }
     }
+
+    function onBackupClick(): void {
+        function _handleExportStrongholdResponse(cancelled, error): void {
+            if (!cancelled) {
+                if (error) {
+                    showAppNotification({
+                        type: 'error',
+                        message: localize(error),
+                    })
+                } else {
+                    showAppNotification({
+                        type: 'info',
+                        message: localize('general.exportingStrongholdSuccess'),
+                    })
+                }
+            }
+        }
+        function _handleBackup(password): void {
+            exportStronghold(password, _handleExportStrongholdResponse)
+        }
+        openDrawer(DrawerId.EnterPassword, { returnPassword: true, onSuccess: _handleBackup })
+    }
+
+    function onNetworkStatusClick(): void {
+        openDrawer(DrawerId.NetworkStatus)
+    }
+
+    function onSettingsClick(): void {
+        $profileRouter.next()
+    }
 </script>
 
 {#if $activeProfile?.id}
@@ -61,23 +94,23 @@
                 {$activeProfile.name}
             </Text>
             <div class="flex justify-center">
-                <button class="inline-flex p-1" on:click={handleLogoutClick}>
+                <button class="inline-flex p-1" on:click={onLogoutClick}>
                     <Icon width="16" height="16" icon={IconTypes.Logout} classes="text-blue-500 my-auto" />
                     <Text type={TextType.p} overrideColor classes="text-blue-500 pl-1">
                         {localize('views.dashboard.profileModal.logout')}
                     </Text>
                 </button>
             </div>
         </div>
-        <div class="flex flex-col space-y-4">
+        <div class="flex flex-col space-y-2">
             {#if features?.dashboard?.profileActions?.backupProfile?.enabled && !isBackupSafe}
-                <ProfileBackupButton {lastBackupDate} onClick={() => $profileRouter.next({ backup: true })} />
+                <ProfileBackupButton {lastBackupDate} onClick={onBackupClick} />
             {/if}
             {#if features?.dashboard?.profileActions?.networkStatus?.enabled}
-                <NetworkStatusButton onClick={() => $profileRouter.next({ networkStatus: true })} />
+                <NetworkStatusButton onClick={onNetworkStatusClick} />
             {/if}
             {#if features?.dashboard?.profileActions?.profileLock?.enabled}
-                <ProfileLockButton onClick={handleProfileLockButtonClick} />
+                <ProfileLockButton onClick={onLockToggleClick} />
             {/if}
             {#if features?.settings?.enabled}
                 <ProfileActionButton
@@ -86,7 +119,7 @@
                     icon={IconTypes.Settings}
                     iconColor="blue-500"
                     color="transparent"
-                    onClick={() => $profileRouter.next({ settings: true })}
+                    onClick={onSettingsClick}
                 />
             {/if}
         </div>