feat: add implicit account creation wizard and router

packages/desktop/App.svelte

@@ -42,6 +42,7 @@
     import { downloadNextNftInQueue, nftDownloadQueue } from '@core/nfts'
     import features from '@features/features'
     import { OnboardingRouterView } from '@views/onboarding'
+    import AccountRouter from '@views/account/AccountRouter.svelte'
 
     appStage.set(AppStage[process.env.STAGE.toUpperCase()] ?? AppStage.ALPHA)
 
@@ -194,6 +195,8 @@
                 <LoginRouter />
             {:else if $appRoute === AppRoute.Onboarding}
                 <OnboardingRouterView />
+            {:else if $appRoute === AppRoute.Account}
+                <AccountRouter />
             {/if}
             {#if settings}
                 <Settings handleClose={onCloseSettingsClick} />

packages/desktop/features/analytics.features.ts

@@ -17,6 +17,9 @@ const analyticsFeatures: IAnalyticsFeatures = {
     strongholdMigration: {
         enabled: true,
     },
+    accountRoute: {
+        enabled: true,
+    },
 }
 
 export default analyticsFeatures

packages/desktop/features/interfaces/analytics-features.interface.ts

@@ -6,4 +6,5 @@ export interface IAnalyticsFeatures extends IFeatureFlag {
     loginRoute: IFeatureFlag
     dashboardRoute: IFeatureFlag
     strongholdMigration: IFeatureFlag
+    accountRoute: IFeatureFlag
 }

packages/desktop/lib/routers/actions/initialiseRouters.ts

@@ -1,4 +1,6 @@
 import {
+    AccountRouter,
+    accountRouter,
     appRouter,
     AppRouter,
     collectiblesRouter,
@@ -30,6 +32,7 @@ export function initialiseOnboardingRouters(): void {
 function initialiseBaseRouters(): void {
     appRouter.set(new AppRouter())
     dashboardRouter.set(new DashboardRouter())
+    accountRouter.set(new AccountRouter())
     settingsRouter.set(new SettingsRouter())
     collectiblesRouter.set(new CollectiblesRouter())
     governanceRouter.set(new GovernanceRouter())

packages/desktop/lib/routers/utils/getRouterForAppContext.ts

@@ -2,7 +2,7 @@ import { get } from 'svelte/store'
 
 import { AppContext } from '@core/app/enums'
 import { IRouter } from '@core/router/interfaces'
-import { dashboardRouter, settingsRouter } from '@core/router/routers'
+import { accountRouter, dashboardRouter, settingsRouter } from '@core/router/routers'
 import { loginRouter } from '@core/router/subrouters'
 import { onboardingRouter } from '@views/onboarding'
 
@@ -16,6 +16,8 @@ export function getRouterForAppContext(context: AppContext): IRouter {
             return get(onboardingRouter)
         case AppContext.Settings:
             return get(settingsRouter)
+        case AppContext.Account:
+            return get(accountRouter)
         default:
             return undefined
     }

packages/desktop/views/account/AccountRouter.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { Platform } from '@core/app'
+    import { AccountRoute, accountRoute } from '@core/router'
+    import features from '@features/features'
+    import { Transition } from 'shared/components'
+    import { MainView } from './activate'
+
+    $: if (features.analytics.accountRoute.enabled && $accountRoute)
+        Platform.trackEvent('account-route', { route: $accountRoute })
+</script>
+
+{#if $accountRoute === AccountRoute.Activate}
+    <Transition>
+        <MainView />
+    </Transition>
+{/if}

packages/desktop/views/account/activate/MainView.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { Button, FontWeight, Text, TextType } from 'shared/components'
+    import { MultiStep } from '../multi-step'
+    import { localize } from '@core/i18n'
+
+    interface IStep {
+        title: string
+        description: string
+        image: string
+    }
+
+    const MAIN_VIEW_STEPS: IStep[] = [
+        {
+            title: localize('views.implicit-account.steps.step1.title'),
+            description: localize('views.implicit-account.steps.step1.body'),
+            image: 'assets/illustrations/implicit-account/show-one-time-address.svg',
+        },
+        {
+            title: localize('views.implicit-account.steps.step2.title'),
+            description: localize('views.implicit-account.steps.step2.body'),
+            image: 'assets/illustrations/implicit-account/generate-mana.svg',
+        },
+        {
+            title: localize('views.implicit-account.steps.step3.title'),
+            description: localize('views.implicit-account.steps.step3.body'),
+            image: 'assets/illustrations/implicit-account/sign-transaction.svg',
+        },
+    ]
+
+    let startProccess = false
+
+    function startMultiStepProccess(): void {
+        startProccess = true
+    }
+</script>
+
+<section class="flex flex-col w-full h-full pt-5 px-60 pb-12 items-center justify-between">
+    <box-content class="flex flex-col w-full h-full pt-9 px-8 pb-12 items-center justify-between rounded-2xl">
+        <Text type={TextType.h2}>{localize('views.implicit-account.title')}</Text>
+        {#if !startProccess}
+            <steps-wrapper class="flex space-x-4">
+                {#each MAIN_VIEW_STEPS as step}
+                    <step-content class="flex flex-col items-center space-y-8">
+                        <img src={step.image} alt={step.title} />
+                        <div class="flex flex-col text-center px-4 space-y-2">
+                            <Text
+                                type={TextType.h5}
+                                fontSize="15"
+                                color="blue-700"
+                                darkColor="blue-700"
+                                fontWeight={FontWeight.semibold}>{step.title}</Text
+                            >
+                            <Text type={TextType.h3} fontWeight={FontWeight.semibold}>{step.description}</Text>
+                        </div>
+                    </step-content>
+                {/each}
+            </steps-wrapper>
+            <Button onClick={startMultiStepProccess}>{localize('views.implicit-account.action')}</Button>
+        {:else}
+            <MultiStep />
+        {/if}
+    </box-content>
+</section>
+
+<style lang="scss">
+    box-content {
+        box-shadow: 0px 1px 4px 0px rgba(23, 27, 37, 0.04);
+    }
+</style>

packages/desktop/views/account/activate/index.ts

@@ -0,0 +1 @@
+export { default as MainView } from './MainView.svelte'

packages/desktop/views/account/multi-step/GenerateMana.svelte

@@ -0,0 +1 @@
+<h1>GenerateMana</h1>

packages/desktop/views/account/multi-step/MultiStep.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { AccountState } from '@contexts/account'
+
+    const IMPLICIT_ACCOUNT_STEPS: AccountState[] = Object.values(AccountState)
+
+    let activeState: AccountState | null = null
+    let onNext: () => Promise<boolean>
+    let currentStep: number = 0
+    let activeComponent
+
+    async function loadComponent() {
+        activeState = IMPLICIT_ACCOUNT_STEPS[currentStep]
+        const component = await import(`./${activeState}.svelte`)
+        activeComponent = component.default
+    }
+
+    async function handleNext() {
+        currentStep += 1
+        await loadComponent()
+    }
+
+    $: loadComponent()
+</script>
+
+<section>
+    {#if activeComponent}
+        <svelte:component this={activeComponent} {activeState} {onNext} />
+        {#if currentStep < IMPLICIT_ACCOUNT_STEPS.length - 1}
+            <button on:click={handleNext}>Next</button>
+        {/if}
+    {/if}
+</section>

packages/desktop/views/account/multi-step/ShowOneTimeAddress.svelte

@@ -0,0 +1 @@
+<h1>ShowOneTimeAddress</h1>

packages/desktop/views/account/multi-step/SignTransaction.svelte

@@ -0,0 +1 @@
+<h1>SignTransaction</h1>

packages/desktop/views/account/multi-step/index.ts

@@ -0,0 +1,4 @@
+export { default as ShowOneTimeAddress } from './ShowOneTimeAddress.svelte'
+export { default as GenerateMana } from './GenerateMana.svelte'
+export { default as SignTransaction } from './SignTransaction.svelte'
+export { default as MultiStep } from './MultiStep.svelte'

packages/shared/lib/contexts/account/enums/account-state.enum.ts

@@ -0,0 +1,5 @@
+export enum AccountState {
+    SHOW_ONE_TIME_ADDRESS = 'ShowOneTimeAddress',
+    GENERATE_MANA = 'GenerateMana',
+    SIGN_TRANSACTION = 'SignTransaction',
+}

packages/shared/lib/contexts/account/enums/index.ts

@@ -0,0 +1 @@
+export * from './account-state.enum'

packages/shared/lib/contexts/account/index.ts

@@ -0,0 +1 @@
+export * from './enums'

packages/shared/lib/core/app/enums/app-context.enum.ts

@@ -3,4 +3,5 @@ export enum AppContext {
     Dashboard = 'dashboard',
     Settings = 'settings',
     Onboarding = 'wallet',
+    Account = 'account',
 }

packages/shared/lib/core/router/enums/account-route.enum.ts

@@ -0,0 +1,3 @@
+export enum AccountRoute {
+    Activate = 'activate',
+}

packages/shared/lib/core/router/enums/app-route.enum.ts

@@ -2,4 +2,5 @@ export enum AppRoute {
     Dashboard = 'dashboard',
     Login = 'login',
     Onboarding = 'onboarding',
+    Account = 'account',
 }

packages/shared/lib/core/router/enums/index.ts

@@ -1,6 +1,7 @@
 export * from './onboarding'
 export * from './settings'
 
+export * from './account-route.enum'
 export * from './app-route.enum'
 export * from './collectibles-route.enum'
 export * from './dashboard-route.enum'

packages/shared/lib/core/router/routers/account-router.ts

@@ -0,0 +1,12 @@
+import { writable } from 'svelte/store'
+import { Router } from '../classes'
+import { AccountRoute } from '../enums'
+
+export const accountRouter = writable<AccountRouter>(null)
+export const accountRoute = writable<AccountRoute>(null)
+
+export class AccountRouter extends Router<AccountRoute> {
+    constructor() {
+        super(AccountRoute.Activate, accountRoute)
+    }
+}

packages/shared/lib/core/router/routers/app-router.ts

@@ -10,6 +10,9 @@ import { loginRoute } from '../subrouters'
 export const appRoute = writable<AppRoute>(null)
 export const appRouter = writable<AppRouter>(null)
 
+// TODO: Replace this hardcoded variable when we have a proper way to check if the user has an implicit account
+const hasImplicitAccount = false
+
 export class AppRouter extends Router<AppRoute> {
     constructor() {
         super(AppRoute.Onboarding, appRoute)
@@ -35,11 +38,17 @@ export class AppRouter extends Router<AppRoute> {
             case AppRoute.Login: {
                 if (params.shouldAddProfile) {
                     nextRoute = AppRoute.Onboarding
-                } else {
+                } else if (hasImplicitAccount) {
                     nextRoute = AppRoute.Dashboard
+                } else {
+                    nextRoute = AppRoute.Account
                 }
                 break
             }
+            case AppRoute.Account: {
+                nextRoute = AppRoute.Dashboard
+                break
+            }
             case AppRoute.Dashboard: {
                 if (params.reset) {
                     nextRoute = AppRoute.Login

packages/shared/lib/core/router/routers/index.ts

@@ -1,3 +1,4 @@
+export * from './account-router'
 export * from './app-router'
 export * from './collectibles-router'
 export * from './dashboard-router'

packages/shared/locales/en.json

@@ -655,6 +655,24 @@
                 "title": "Vesting of tokens",
                 "body": "From the tokens users received through an IOTA token airdrop, 10% are being available to users immediately at the genesis of the IOTA Stardust network. The rest is gradually unlocked over the course of two years in equal proportion happening every two weeks."
             }
+        },
+        "implicit-account":{
+            "title": "Activate Account",
+            "steps" : {
+                "step1": {
+                    "title": "Step 1",
+                    "body": "One-time deposit"
+                },
+                "step2": {
+                    "title": "Step 2",
+                    "body": "Fund confirmation"
+                },
+                "step3": {
+                    "title": "Step 3",
+                    "body": "Account creation"
+                }
+            },
+            "action": "Start"
         }
     },
     "popups": {