feat: add implicit account creation wizard and router

packages/desktop/App.svelte

@@ -29,7 +29,7 @@
     import { getLocalisedMenuItems } from './lib/helpers'
     import { NotificationManager, Transition } from '@ui'
     import { TitleBar, Popup } from '@components'
-    import { Dashboard, LoginRouter, Settings, Splash } from '@views'
+    import { Dashboard, LoginRouter, Settings, Splash, OnboardingRouterView } from '@views'
     import {
         getAppRouter,
         getRouterForAppContext,
@@ -41,7 +41,6 @@
     } from '@desktop/routers'
     import { downloadNextNftInQueue, nftDownloadQueue } from '@core/nfts'
     import features from '@features/features'
-    import { OnboardingRouterView } from '@views/onboarding'
 
     appStage.set(AppStage[process.env.STAGE.toUpperCase()] ?? AppStage.ALPHA)
 

packages/desktop/views/dashboard/wallet/Wallet.svelte

@@ -1,44 +1,11 @@
 <script lang="ts">
-    import { AssetList, Overflow, Pane, ReceiveAddressButton } from '@ui'
-    import { AccountSummary, AccountActivity, SendButton } from '@components'
-    import { selectedWalletAssets } from '@core/wallet'
-    import { selectedWallet } from '@core/wallet/stores'
-    import features from '@features/features'
+    import { WalletImplicitAccountView, WalletMainView } from './views'
+
+    const hasImplicitAccount: boolean = false
 </script>
 
-{#if $selectedWallet}
-    <wallet-container
-        class="w-full h-full flex flex-nowrap p-8 relative flex-1
-        bg-gray-50 dark:bg-gray-900 justify-center items-center"
-    >
-        {#key $selectedWallet?.index}
-            <div class="h-full grid grid-cols-3 gap-x-4 min-h-0 min-w-0 max-w-7xl">
-                <div class="flex flex-col space-y-4">
-                    <Pane overflow={Overflow.Visible}>
-                        {#if features?.wallet?.accountSummary?.enabled}
-                            <AccountSummary />
-                        {/if}
-                    </Pane>
-                    <Pane>
-                        <div class="flex flex-col space-y-6">
-                            {#if features?.wallet?.sendAndReceive?.enabled}
-                                <SendButton />
-                                <ReceiveAddressButton />
-                            {/if}
-                        </div>
-                    </Pane>
-                </div>
-                <Pane>
-                    {#if features?.wallet?.assets?.enabled}
-                        <AssetList assets={$selectedWalletAssets} />
-                    {/if}
-                </Pane>
-                <Pane>
-                    {#if features?.wallet?.activityHistory?.enabled}
-                        <AccountActivity />
-                    {/if}
-                </Pane>
-            </div>
-        {/key}
-    </wallet-container>
+{#if hasImplicitAccount}
+    <WalletMainView />
+{:else}
+    <WalletImplicitAccountView />
 {/if}

packages/desktop/views/dashboard/wallet/views/WalletImplicitAccountView.svelte

@@ -0,0 +1,61 @@
+<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 NUMBER_OF_STEPS = Object.keys(localize('views.implicit-account-creation.steps')).length
+    const MAIN_VIEW_STEPS: IStep[] = new Array(NUMBER_OF_STEPS).fill(null).map((_, index) => {
+        const stepNumber = index + 1
+        return {
+            title: localize(`views.implicit-account-creation.steps.step${stepNumber}.title`),
+            description: localize(`views.implicit-account-creation.steps.step${stepNumber}.body`),
+            image: `assets/illustrations/implicit-account-creation/step${stepNumber}.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-creation.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-creation.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/dashboard/wallet/views/WalletMainView.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { AssetList, Overflow, Pane, ReceiveAddressButton } from '@ui'
+    import { AccountSummary, AccountActivity, SendButton } from '@components'
+    import { selectedWalletAssets } from '@core/wallet'
+    import { selectedWallet } from '@core/wallet/stores'
+    import features from '@features/features'
+</script>
+
+{#if $selectedWallet}
+    <wallet-container
+        class="w-full h-full flex flex-nowrap p-8 relative flex-1
+        bg-gray-50 dark:bg-gray-900 justify-center items-center"
+    >
+        {#key $selectedWallet?.index}
+            <div class="h-full grid grid-cols-3 gap-x-4 min-h-0 min-w-0 max-w-7xl">
+                <div class="flex flex-col space-y-4">
+                    <Pane overflow={Overflow.Visible}>
+                        {#if features?.wallet?.accountSummary?.enabled}
+                            <AccountSummary />
+                        {/if}
+                    </Pane>
+                    <Pane>
+                        <div class="flex flex-col space-y-6">
+                            {#if features?.wallet?.sendAndReceive?.enabled}
+                                <SendButton />
+                                <ReceiveAddressButton />
+                            {/if}
+                        </div>
+                    </Pane>
+                </div>
+                <Pane>
+                    {#if features?.wallet?.assets?.enabled}
+                        <AssetList assets={$selectedWalletAssets} />
+                    {/if}
+                </Pane>
+                <Pane>
+                    {#if features?.wallet?.activityHistory?.enabled}
+                        <AccountActivity />
+                    {/if}
+                </Pane>
+            </div>
+        {/key}
+    </wallet-container>
+{/if}

packages/desktop/views/dashboard/wallet/views/index.js

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

packages/desktop/views/dashboard/wallet/views/multi-step/AccountCreation.svelte

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

packages/desktop/views/dashboard/wallet/views/multi-step/FundConfirmation.svelte

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

packages/desktop/views/dashboard/wallet/views/multi-step/MultiStep.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { ImplicitAccountCreationState } from '@contexts/implicit-account-creation'
+
+    const IMPLICIT_ACCOUNT_STEPS: ImplicitAccountCreationState[] = Object.values(ImplicitAccountCreationState)
+
+    let activeState: ImplicitAccountCreationState | 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/dashboard/wallet/views/multi-step/OneTimeDeposit.svelte

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

packages/desktop/views/dashboard/wallet/views/multi-step/index.js

@@ -0,0 +1,4 @@
+export { default as OneTimeDeposit } from './OneTimeDeposit.svelte'
+export { default as FundConfirmation } from './FundConfirmation.svelte'
+export { default as AccountCreation } from './AccountCreation.svelte'
+export { default as MultiStep } from './MultiStep.svelte'

packages/desktop/views/index.js

@@ -3,3 +3,4 @@ export { default as Splash } from './Splash.svelte'
 export * from './dashboard'
 export * from './login'
 export * from './update-stronghold'
+export * from './onboarding'

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

@@ -0,0 +1,5 @@
+export enum ImplicitAccountCreationState {
+    ONE_TIME_DEPOSIT = 'OneTimeDeposit',
+    FUND_CONFIRMATION = 'FundConfirmation',
+    ACCOUNT_CREATION = 'AccountCreation',
+}

packages/shared/lib/contexts/implicit-account-creation/enums/index.ts

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

packages/shared/lib/contexts/implicit-account-creation/index.ts

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

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

@@ -1,7 +1,5 @@
 import { get, writable } from 'svelte/store'
-
 import { profiles } from '@core/profile'
-
 import { Router } from '../classes'
 import { AppRoute, LoginRoute } from '../enums'
 import { IRouterEvent } from '../interfaces'

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-creation":{
+            "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": {