feat-mobile: profile lock

packages/mobile/components/buttons/ProfileLockButton.svelte

@@ -0,0 +1,70 @@
+<script lang="typescript">
+    import { localize } from '@core/i18n'
+    import { activeProfile } from '@core/profile'
+    import { Icon as IconEnum } from '@lib/auxiliary/icon'
+    import { FontWeight, Icon, Text, TextType, Toggle } from 'shared/components'
+
+    const { isStrongholdLocked } = $activeProfile
+
+    export let disabled: boolean = false
+    export let classes: string = ''
+
+    export let onClick: () => unknown
+</script>
+
+<button
+    type="button"
+    {disabled}
+    class="w-full rounded-xl p-4 cursor-pointer text-left border border-solid border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-opacity-10 {classes}"
+    on:click|stopPropagation={onClick}
+>
+    <div class="flex flex-row space-x-2 justify-between items-center">
+        <div class="flex flex-row space-x-2 items-center">
+            <div class="col-span-1 h-full flex justify-center items-center justify-items-center">
+                <Icon
+                    height={24}
+                    width={24}
+                    icon={$isStrongholdLocked ? IconEnum.Lock : IconEnum.Unlock}
+                    classes="text-blue-500"
+                />
+            </div>
+            <span class="flex flex-col justify-center space-y-0.5">
+                <Text
+                    type={TextType.p}
+                    color="gray-800"
+                    darkColor="white"
+                    fontSize="14"
+                    fontWeight={FontWeight.semibold}
+                    lineHeight="5"
+                >
+                    {localize('views.dashboard.profileModal.stronghold.title')}
+                </Text>
+                <Text
+                    type={TextType.p}
+                    color="gray-600"
+                    darkColor="gray-400"
+                    fontSize="12"
+                    fontWeight={FontWeight.normal}
+                    lineHeight="3.5"
+                >
+                    {localize(`views.dashboard.profileModal.stronghold.${$isStrongholdLocked ? 'locked' : 'unlocked'}`)}
+                </Text>
+            </span>
+        </div>
+        <div class="col-end-12 h-full flex justify-center items-center justify-items-center">
+            <Toggle active={$isStrongholdLocked} onClick={() => {}} />
+        </div>
+    </div>
+</button>
+
+<style type="text/scss">
+    button {
+        &:disabled {
+            @apply pointer-events-none;
+            @apply opacity-50;
+            :global(svg) {
+                @apply text-gray-500;
+            }
+        }
+    }
+</style>

packages/mobile/components/buttons/index.js

@@ -4,3 +4,4 @@ export { default as DashboardProfileButton } from './DashboardProfileButton.svel
 export { default as NetworkStatusButton } from './NetworkStatusButton.svelte'
 export { default as ProfileActionButton } from './ProfileActionButton.svelte'
 export { default as ProfileButton } from './ProfileButton.svelte'
+export { default as ProfileLockButton } from './ProfileLockButton.svelte'

packages/mobile/features/features.ts

@@ -9,6 +9,9 @@ const features = {
             networkStatus: {
                 enabled: true,
             },
+            profileLock: {
+                enabled: true,
+            },
         },
         accountSwitcher: {
             enabled: true,

packages/mobile/lib/routers/routers/dashboard/profile-router.ts

@@ -1,4 +1,4 @@
-import { get, writable } from 'svelte/store'
+import { get, writable, Writable } from 'svelte/store'
 
 import { Subrouter } from '@core/router'
 
@@ -10,6 +10,9 @@ import { dashboardRouter } from '../dashboard-router'
 export const profileRoute = writable<ProfileRoute>(null)
 export const profileRouter = writable<ProfileRouter>(null)
 
+const needsUnlockStore = writable<boolean>(false)
+const needsUnlockStoreCallbackStore = writable<(() => unknown) | undefined>(() => {})
+
 export class ProfileRouter extends Subrouter<ProfileRoute> {
     constructor() {
         super(ProfileRoute.Actions, profileRoute, get(dashboardRouter))
@@ -38,4 +41,32 @@ export class ProfileRouter extends Subrouter<ProfileRoute> {
         get(dashboardRouter).previous()
         resetRouterWithDrawerDelay(get(profileRouter))
     }
+    previous(): void {
+        if (get(needsUnlockStore)) {
+            const callback = get(needsUnlockStoreCallbackStore)
+            if (callback && typeof callback === 'function') {
+                callback()
+            }
+            needsUnlockStore.set(false)
+        } else {
+            super.previous()
+        }
+    }
+    getNeedsUnlockStore(): Writable<boolean> {
+        return needsUnlockStore
+    }
+    getNeedsUnlockCallbackStore(): Writable<(() => unknown) | undefined> {
+        return needsUnlockStoreCallbackStore
+    }
+    setNeedsUnlock(value: boolean, callback: (() => unknown) | undefined = undefined): void {
+        needsUnlockStore.set(value)
+        if (callback) {
+            needsUnlockStoreCallbackStore.set(callback)
+        }
+    }
+    reset(): void {
+        super.reset()
+        needsUnlockStore.set(false)
+        needsUnlockStoreCallbackStore.set(undefined)
+    }
 }

packages/mobile/views/dashboard/drawers/profile/ProfileRouter.svelte

@@ -1,6 +1,13 @@
 <script lang="typescript">
-    import { ProfileRoute, profileRoute } from '../../../../lib/routers'
+    import { Drawer, StrongholdUnlock } from '../../../../components'
+    import { ProfileRoute, profileRoute, profileRouter } from '../../../../lib/routers'
     import { ActionsView, NetworkStatusView, SettingsView } from './views'
+
+    $: needsUnlockStore = $profileRouter?.getNeedsUnlockStore()
+
+    function closeStrongholdUnlock(): void {
+        $profileRouter.setNeedsUnlock(false, undefined)
+    }
 </script>
 
 {#if $profileRoute === ProfileRoute.Actions}
@@ -10,3 +17,9 @@
 {:else if $profileRoute === ProfileRoute.Settings}
     <SettingsView />
 {/if}
+
+{#if $needsUnlockStore}
+    <Drawer onClose={closeStrongholdUnlock}>
+        <StrongholdUnlock onSuccess={closeStrongholdUnlock} onCancel={closeStrongholdUnlock} />
+    </Drawer>
+{/if}

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

@@ -1,14 +1,16 @@
 <script lang="typescript">
     import { localize } from '@core/i18n'
     import { NetworkProtocol } from '@core/network'
-    import { activeProfile, logout } from '@core/profile'
+    import { activeProfile, lockStronghold, logout } from '@core/profile'
+    import { isStrongholdUnlocked } from '@core/profile-manager'
     import { getInitials } from '@core/utils'
+    import features from '@features/features'
     import { Icon as IconTypes } from '@lib/auxiliary/icon'
     import { FontWeight, Icon, NetworkIcon, Text, TextType } from 'shared/components'
+    import { NetworkStatusButton, ProfileActionButton, ProfileLockButton } from '../../../../../components/'
     import { profileRouter } from '../../../../../lib/routers'
-    import features from '@features/features'
-    import { NetworkStatusButton, ProfileActionButton } from '../../../../../components/'
 
+    const { isStrongholdLocked } = $activeProfile
     let networkProtocol: NetworkProtocol
     $: networkProtocol = $activeProfile.networkProtocol
 
@@ -18,6 +20,17 @@
     function handleLogoutClick(): void {
         void logout()
     }
+    function handleProfileLockButtonClick(): void {
+        if ($isStrongholdLocked) {
+            isStrongholdUnlocked().then((locked) => {
+                if (!locked) {
+                    $profileRouter.setNeedsUnlock(true)
+                }
+            })
+        } else {
+            lockStronghold()
+        }
+    }
 </script>
 
 {#if $activeProfile?.id}
@@ -56,6 +69,9 @@
             {#if features?.dashboard?.profileActions?.networkStatus?.enabled}
                 <NetworkStatusButton onClick={() => $profileRouter.next({ networkStatus: true })} />
             {/if}
+            {#if features?.dashboard?.profileActions?.profileLock?.enabled}
+                <ProfileLockButton onClick={handleProfileLockButtonClick} />
+            {/if}
             {#if features?.settings?.enabled}
                 <ProfileActionButton
                     primaryText={localize('views.dashboard.profileModal.allSettings')}