Merge branch 'feat/prepare-ui-step1' into feat/prepare-ui-step2

packages/desktop/App.svelte

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

packages/desktop/features/analytics.features.ts

@@ -17,7 +17,7 @@ const analyticsFeatures: IAnalyticsFeatures = {
     strongholdMigration: {
         enabled: true,
     },
-    accountRoute: {
+    implicitAccountCreationRoute: {
         enabled: true,
     },
 }

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

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

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

@@ -1,6 +1,6 @@
 import {
-    AccountRouter,
-    accountRouter,
+    ImplicitAccountCreationRouter,
+    implicitAccountCreationRouter,
     appRouter,
     AppRouter,
     collectiblesRouter,
@@ -32,7 +32,7 @@ export function initialiseOnboardingRouters(): void {
 function initialiseBaseRouters(): void {
     appRouter.set(new AppRouter())
     dashboardRouter.set(new DashboardRouter())
-    accountRouter.set(new AccountRouter())
+    implicitAccountCreationRouter.set(new ImplicitAccountCreationRouter())
     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 { accountRouter, dashboardRouter, settingsRouter } from '@core/router/routers'
+import { implicitAccountCreationRouter, dashboardRouter, settingsRouter } from '@core/router/routers'
 import { loginRouter } from '@core/router/subrouters'
 import { onboardingRouter } from '@views/onboarding'
 
@@ -16,8 +16,8 @@ export function getRouterForAppContext(context: AppContext): IRouter {
             return get(onboardingRouter)
         case AppContext.Settings:
             return get(settingsRouter)
-        case AppContext.Account:
-            return get(accountRouter)
+        case AppContext.ImplicitAccountCreation:
+            return get(implicitAccountCreationRouter)
         default:
             return undefined
     }

packages/desktop/views/implicit-account-creation/ImplicitAccountCreationRouterView.svelte

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

packages/desktop/views/implicit-account-creation/index.js

@@ -0,0 +1,4 @@
+export { default as ImplicitAccountCreationRouterView } from './ImplicitAccountCreationRouterView.svelte'
+
+export * from './views'
+export * from './multi-step'

packages/desktop/views/implicit-account-creation/multi-step/AccountCreation.svelte

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

packages/desktop/views/account/multi-step/GenerateMana.svelte → packages/desktop/views/implicit-account-creation/multi-step/FundConfirmation.svelte

@@ -12,19 +12,19 @@
     <div class="flex flex-col text-center px-4 space-y-2 max-w-md">
         <div class="flex items-center justify-center mb-7">
             <img
-                src="assets/illustrations/implicit-account/generate-mana.svg"
-                alt={localize('views.implicit-account.steps.step2.title')}
+                src="assets/illustrations/implicit-account-creation/step2.svg"
+                alt={localize('views.implicit-account-creation.steps.step2.title')}
             />
         </div>
         <Text type={TextType.h3} fontWeight={FontWeight.semibold}
-            >{localize('views.implicit-account.steps.step2.view.title')} ({DUMMY_AMOUNT})</Text
+            >{localize('views.implicit-account-creation.steps.step2.view.title')} ({DUMMY_AMOUNT})</Text
         >
         <Text type={TextType.h5} fontSize="15" color="blue-700" darkColor="blue-700" fontWeight={FontWeight.semibold}
-            >{localize('views.implicit-account.steps.step2.view.subtitle')}</Text
+            >{localize('views.implicit-account-creation.steps.step2.view.subtitle')}</Text
         >
         <Text type={TextType.h5} fontWeight={FontWeight.normal} color="gray-600" darkColor="gray-400"
             >{DUMMY_TIME_REMAINING}</Text
         >
     </div>
-    <Button disabled>{localize('views.implicit-account.steps.step2.view.action')}</Button>
+    <Button disabled>{localize('views.implicit-account-creation.steps.step2.view.action')}</Button>
 </step-content>

packages/desktop/views/account/multi-step/MultiStep.svelte → packages/desktop/views/implicit-account-creation/multi-step/MultiStep.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { AccountState } from '@contexts/account'
+    import { ImplicitAccountCreationState } from '@contexts/implicit-account-creation'
 
-    const IMPLICIT_ACCOUNT_STEPS: AccountState[] = Object.values(AccountState)
+    const IMPLICIT_ACCOUNT_STEPS: ImplicitAccountCreationState[] = Object.values(ImplicitAccountCreationState)
 
-    let activeState: AccountState | null = null
+    let activeState: ImplicitAccountCreationState | null = null
     let onNext: () => Promise<boolean>
     let currentStep: number = 0
     let activeComponent
@@ -14,6 +14,7 @@
         activeComponent = component.default
     }
 
+    // TODO: Remove this once we have proper routing
     async function handleNext() {
         currentStep += 1
         await loadComponent()

packages/desktop/views/account/multi-step/ShowOneTimeAddress.svelte → packages/desktop/views/implicit-account-creation/multi-step/OneTimeDeposit.svelte

@@ -5,14 +5,14 @@
 
     let isAddressShown: boolean = false
 
+    // TODO: Replace with proper address
     const DUMMY_ADDRESS = 'iota1q9f0mlq8yxpx2nck8a0slxnzr4ef2ek8f5gqxlzd0wasgp73utryjtzcp98'
 
     function showAddress() {
         isAddressShown = true
     }
 
     function onCopyClick(): void {
-        // TODO: Replace with proper address
         setClipboard(DUMMY_ADDRESS)
     }
 </script>
@@ -21,27 +21,27 @@
     <div class="flex flex-col text-center px-4 space-y-4 max-w-md">
         <div class="flex items-center justify-center">
             <img
-                src="assets/illustrations/implicit-account/show-one-time-address.svg"
-                alt={localize('views.implicit-account.steps.step1.title')}
+                src="assets/illustrations/implicit-account-creation/step1.svg"
+                alt={localize('views.implicit-account-creation.steps.step1.title')}
             />
         </div>
         <Text type={TextType.h3} fontWeight={FontWeight.semibold}
-            >{localize('views.implicit-account.steps.step1.view.title')}</Text
+            >{localize('views.implicit-account-creation.steps.step1.view.title')}</Text
         >
         <Text type={TextType.h5} fontSize="15" color="blue-700" darkColor="blue-700" fontWeight={FontWeight.semibold}
-            >{localize('views.implicit-account.steps.step1.view.subtitle')}</Text
+            >{localize('views.implicit-account-creation.steps.step1.view.subtitle')}</Text
         >
         <Text type={TextType.h5} fontWeight={FontWeight.normal} color="gray-700" darkColor="gray-500"
-            >{localize('views.implicit-account.steps.step1.view.body')}</Text
+            >{localize('views.implicit-account-creation.steps.step1.view.body')}</Text
         >
     </div>
     {#if !isAddressShown}
         <div class="flex flex-row items-center space-x-24 bg-yellow-200 rounded-lg px-6 py-7 max-w-lg mb-5">
             <Text type={TextType.h4} fontWeight={FontWeight.medium} color="yellow-900" darkColor="yellow-900"
-                >{localize('views.implicit-account.steps.step1.view.hiddenAddress.description')}</Text
+                >{localize('views.implicit-account-creation.steps.step1.view.hiddenAddress.description')}</Text
             >
             <Button onClick={showAddress} classes="shrink-0"
-                >{localize('views.implicit-account.steps.step1.view.hiddenAddress.action')}</Button
+                >{localize('views.implicit-account-creation.steps.step1.view.hiddenAddress.action')}</Button
             >
         </div>
     {:else}
@@ -51,18 +51,18 @@
             >
                 <div class="flex flex-col space-y-1">
                     <Text type={TextType.h5} fontWeight={FontWeight.normal} darkColor="gray-400"
-                        >{localize('views.implicit-account.steps.step1.view.oneTimeAddress.title')}</Text
+                        >{localize('views.implicit-account-creation.steps.step1.view.oneTimeAddress.title')}</Text
                     >
                     <Text type={TextType.pre} fontSize="14" fontWeight={FontWeight.medium} color="gray-50"
                         >{DUMMY_ADDRESS}</Text
                     >
                 </div>
                 <Button outline onClick={onCopyClick} classes="shrink-0"
-                    >{localize('views.implicit-account.steps.step1.view.oneTimeAddress.action')}</Button
+                    >{localize('views.implicit-account-creation.steps.step1.view.oneTimeAddress.action')}</Button
                 >
             </div>
             <Text type={TextType.h5} fontWeight={FontWeight.normal} color="red-600" darkColor="red-600"
-                >{localize('views.implicit-account.steps.step1.view.oneTimeAddress.tip')}</Text
+                >{localize('views.implicit-account-creation.steps.step1.view.oneTimeAddress.tip')}</Text
             >
         </div>
     {/if}

packages/desktop/views/implicit-account-creation/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/account/activate/MainView.svelte → packages/desktop/views/implicit-account-creation/views/activate/MainView.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Button, FontWeight, Text, TextType } from 'shared/components'
-    import { MultiStep } from '../multi-step'
+    import { MultiStep } from '../../multi-step'
     import { localize } from '@core/i18n'
 
     interface IStep {
@@ -9,23 +9,15 @@
         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',
-        },
-    ]
+    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
 
@@ -36,7 +28,7 @@
 
 <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 items-center justify-between rounded-2xl">
-        <Text type={TextType.h2}>{localize('views.implicit-account.title')}</Text>
+        <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}
@@ -55,7 +47,8 @@
                     </step-content>
                 {/each}
             </steps-wrapper>
-            <Button onClick={startMultiStepProccess} classes="mb-12">{localize('views.implicit-account.action')}</Button
+            <Button onClick={startMultiStepProccess} classes="mb-12"
+                >{localize('views.implicit-account-creation.action')}</Button
             >
         {:else}
             <MultiStep />

packages/desktop/views/implicit-account-creation/views/index.js

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

packages/desktop/views/index.js

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

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/core/app/enums/app-context.enum.ts

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

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

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

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

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

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

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

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

@@ -41,11 +41,11 @@ export class AppRouter extends Router<AppRoute> {
                 } else if (hasImplicitAccount) {
                     nextRoute = AppRoute.Dashboard
                 } else {
-                    nextRoute = AppRoute.Account
+                    nextRoute = AppRoute.ImplicitAccountCreation
                 }
                 break
             }
-            case AppRoute.Account: {
+            case AppRoute.ImplicitAccountCreation: {
                 nextRoute = AppRoute.Dashboard
                 break
             }

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

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