feat-mobile: add network status button & view (#5492)

* feat: add profile actions buttons and use it for settings * feat: add network status button * feat: add network status routing and view Co-authored-by: Mark Nardi <mark.nardi@iota.org>
iotaledger · Dec 28, 2022 · af5a100 · af5a100
1 parent 0bc3d87
commit af5a100
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 6 deletions.
diff --git a/packages/mobile/components/buttons/NetworkStatusButton.svelte b/packages/mobile/components/buttons/NetworkStatusButton.svelte
@@ -0,0 +1,29 @@
+<script lang="typescript">
+    import { localize } from '@core/i18n'
+    import {
+        NetworkHealth,
+        networkStatus,
+        NETWORK_HEALTH_COLORS,
+        NETWORK_STATUS_DESCRIPTION,
+        nodeInfo,
+    } from '@core/network'
+    import { Icon as IconTypes } from '@lib/auxiliary/icon'
+    import { ProfileActionButton } from '../../components/'
+
+    export let onClick: () => unknown
+
+    let health: NetworkHealth
+
+    $: health = $networkStatus.health ?? NetworkHealth.Down
+    $: healthColor = `${NETWORK_HEALTH_COLORS[health]}-500`
+    $: description = $networkStatus.description ?? NETWORK_STATUS_DESCRIPTION[NetworkHealth.Disconnected]
+</script>
+
+<ProfileActionButton
+    primaryText={$nodeInfo?.protocol?.networkName}
+    secondaryText={localize(`views.dashboard.network.${description}`)}
+    icon={IconTypes.Network}
+    iconColor={healthColor}
+    color={healthColor}
+    {onClick}
+/>
diff --git a/packages/mobile/components/buttons/index.js b/packages/mobile/components/buttons/index.js
@@ -1,5 +1,6 @@
 export { default as AccountActionsButton } from './AccountActionsButton.svelte'
 export { default as AccountSwitcherButton } from './AccountSwitcherButton.svelte'
 export { default as DashboardProfileButton } from './DashboardProfileButton.svelte'
+export { default as NetworkStatusButton } from './NetworkStatusButton.svelte'
 export { default as ProfileActionButton } from './ProfileActionButton.svelte'
 export { default as ProfileButton } from './ProfileButton.svelte'
diff --git a/packages/mobile/features/features.ts b/packages/mobile/features/features.ts
@@ -6,6 +6,9 @@ const features = {
         enabled: false,
         profileActions: {
             enabled: true,
+            networkStatus: {
+                enabled: true,
+            },
         },
         accountSwitcher: {
             enabled: true,

diff --git a/packages/mobile/lib/routers/enums/dashboard/profile-route.enum.ts b/packages/mobile/lib/routers/enums/dashboard/profile-route.enum.ts
@@ -1,7 +1,8 @@
 export enum ProfileRoute {
     Actions = 'actions',
     Backup = 'backup',
-    Status = 'status',
-    Unlock = 'unlock',
+    NetworkStatus = 'networkStatus',
     Settings = 'settings',
+    // Auxiliary
+    UnlockStronghold = 'unlockStronghold',
 }
diff --git a/packages/mobile/lib/routers/interfaces/profile-router-event.interface.ts b/packages/mobile/lib/routers/interfaces/profile-router-event.interface.ts
@@ -2,4 +2,5 @@ import { IRouterEvent } from '@core/router'
 
 export interface IProfileRouterEvent extends IRouterEvent {
     settings?: boolean
+    networkStatus?: boolean
 }
diff --git a/packages/mobile/lib/routers/routers/dashboard/profile-router.ts b/packages/mobile/lib/routers/routers/dashboard/profile-router.ts
@@ -15,7 +15,7 @@ export class ProfileRouter extends Subrouter<ProfileRoute> {
         super(ProfileRoute.Actions, profileRoute, get(dashboardRouter))
     }
     public next(event: IProfileRouterEvent = {}): void {
-        const { settings } = event
+        const { settings, networkStatus } = event
 
         let nextRoute: ProfileRoute
         const currentRoute = get(this.routeStore)
@@ -24,6 +24,8 @@ export class ProfileRouter extends Subrouter<ProfileRoute> {
             case ProfileRoute.Actions: {
                 if (settings) {
                     nextRoute = ProfileRoute.Settings
+                } else if (networkStatus) {
+                    nextRoute = ProfileRoute.NetworkStatus
                 }
                 break
             }

diff --git a/packages/mobile/views/dashboard/drawers/profile/ProfileDrawer.svelte b/packages/mobile/views/dashboard/drawers/profile/ProfileDrawer.svelte
@@ -39,7 +39,11 @@
                 title = localize(SETTINGS_ROUTE_META[$settingsRoute].name)
             }
         } else {
-            title = localize('views.settings.profile.title')
+            if ($profileRoute === ProfileRoute.NetworkStatus) {
+                title = localize('views.settings.networkStatus.title')
+            } else {
+                title = localize('views.settings.profile.title')
+            }
         }
     }
     function setAllowBack(): void {

diff --git a/packages/mobile/views/dashboard/drawers/profile/ProfileRouter.svelte b/packages/mobile/views/dashboard/drawers/profile/ProfileRouter.svelte
@@ -1,10 +1,12 @@
 <script lang="typescript">
     import { ProfileRoute, profileRoute } from '../../../../lib/routers'
-    import { ActionsView, SettingsView } from './views'
+    import { ActionsView, NetworkStatusView, SettingsView } from './views'
 </script>
 
 {#if $profileRoute === ProfileRoute.Actions}
     <ActionsView />
+{:else if $profileRoute === ProfileRoute.NetworkStatus}
+    <NetworkStatusView />
 {:else if $profileRoute === ProfileRoute.Settings}
     <SettingsView />
 {/if}
diff --git a/packages/mobile/views/dashboard/drawers/profile/views/ActionsView.svelte b/packages/mobile/views/dashboard/drawers/profile/views/ActionsView.svelte
@@ -7,7 +7,7 @@
     import { FontWeight, Icon, NetworkIcon, Text, TextType } from 'shared/components'
     import { profileRouter } from '../../../../../lib/routers'
     import features from '@features/features'
-    import { ProfileActionButton } from '../../../../../components/'
+    import { NetworkStatusButton, ProfileActionButton } from '../../../../../components/'
 
     let networkProtocol: NetworkProtocol
     $: networkProtocol = $activeProfile.networkProtocol
@@ -53,6 +53,9 @@
             </div>
         </div>
         <div class="flex flex-col space-y-6">
+            {#if features?.dashboard?.profileActions?.networkStatus?.enabled}
+                <NetworkStatusButton onClick={() => $profileRouter.next({ networkStatus: true })} />
+            {/if}
             {#if features?.settings?.enabled}
                 <ProfileActionButton
                     primaryText={localize('views.dashboard.profileModal.allSettings')}

diff --git a/packages/mobile/views/dashboard/drawers/profile/views/NetworkStatusView.svelte b/packages/mobile/views/dashboard/drawers/profile/views/NetworkStatusView.svelte
@@ -0,0 +1,32 @@
+<script lang="typescript">
+    import { localize } from '@core/i18n'
+    import { NetworkHealth, networkStatus, NETWORK_STATUS_DESCRIPTION, nodeInfo } from '@core/network'
+    import { KeyValueBox } from 'shared/components'
+
+    let health: NetworkHealth
+
+    $: health = $networkStatus.health ?? NetworkHealth.Down
+    $: description = $networkStatus.description ?? NETWORK_STATUS_DESCRIPTION[NetworkHealth.Disconnected]
+    $: networkStatistics = {
+        messagesPerSecond: Math.round($networkStatus.messagesPerSecond ?? 0),
+        referencedRate: Math.round($networkStatus.referencedRate ?? 0) + '%',
+    }
+</script>
+
+<div class="flex flex-col space-y-2">
+    <KeyValueBox keyText={localize('general.network')} valueText={$nodeInfo?.protocol?.networkName} />
+    <KeyValueBox
+        keyText={localize('views.settings.networkStatus.title')}
+        valueText={localize(`views.dashboard.network.${description}`)}
+    />
+    <KeyValueBox
+        keyText={localize('popups.node.info.general.latestMilestone')}
+        valueText={$networkStatus?.currentMilestone?.toString() ?? '-'}
+    />
+    {#each Object.keys(networkStatistics) as networkStatisticKey}
+        <KeyValueBox
+            keyText={localize(`views.dashboard.network.${networkStatisticKey}`)}
+            valueText={networkStatistics[networkStatisticKey]}
+        />
+    {/each}
+</div>
diff --git a/packages/mobile/views/dashboard/drawers/profile/views/index.js b/packages/mobile/views/dashboard/drawers/profile/views/index.js
@@ -1,3 +1,4 @@
 export { default as ActionsView } from './ActionsView.svelte'
+export { default as NetworkStatusView } from './NetworkStatusView.svelte'
 
 export * from './settings'