feat: add implicit account creation wizard and router

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

@@ -12,6 +12,7 @@ import {
 } from '@core/router/routers'
 import { loginRouter, LoginRouter } from '@core/router/subrouters'
 import { OnboardingRouter, onboardingRouter } from '@views/onboarding'
+import { implicitAccountCreationRouter, ImplicitAccountCreationRouter } from '@views/dashboard/wallet'
 
 export function initialiseRouters(): void {
     /**
@@ -34,12 +35,17 @@ function initialiseBaseRouters(): void {
     collectiblesRouter.set(new CollectiblesRouter())
     governanceRouter.set(new GovernanceRouter())
     initialiseBaseOnboardingRouters()
+    initialiseBaseImplicitAccountCreationRouters()
 }
 
 function initialiseBaseOnboardingRouters(): void {
     onboardingRouter.set(new OnboardingRouter())
 }
 
+function initialiseBaseImplicitAccountCreationRouters(): void {
+    implicitAccountCreationRouter.set(new ImplicitAccountCreationRouter())
+}
+
 function initialiseSubrouters(): void {
     loginRouter.set(new LoginRouter())
 }

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

@@ -6,6 +6,7 @@ import {
     loginRouter,
     settingsRouter,
 } from '@core/router'
+import { implicitAccountCreationRouter } from '@views/dashboard/wallet'
 import { onboardingRouter } from '@views/onboarding'
 import { get } from 'svelte/store'
 
@@ -25,4 +26,5 @@ function resetBaseRouters(): void {
     get(settingsRouter).reset()
     get(collectiblesRouter).reset()
     get(governanceRouter).reset()
+    get(implicitAccountCreationRouter).reset()
 }

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

@@ -1,13 +1,16 @@
 <script lang="ts">
-    import { WalletMainView } from './views'
+    import { ImplicitAccountCreationView, WalletView } from './views'
 
     const hasAccount: boolean = false
 </script>
 
-{#if hasAccount}
-    <WalletMainView />
-{:else}
-    <div class="flex w-full h-full p-12">
-        <h1>IMPLICIT ACCOUNT</h1>
-    </div>
-{/if}
+<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"
+>
+    {#if hasAccount}
+        <WalletView />
+    {:else}
+        <ImplicitAccountCreationView />
+    {/if}
+</wallet-container>

packages/desktop/views/dashboard/wallet/implicit-account-creation-router.ts

@@ -0,0 +1,38 @@
+import { get, writable } from 'svelte/store'
+import { Router } from '../../../../shared/lib/core/router/classes'
+import { ImplicitAccountCreationRoute } from './implicit-account-creation.enum'
+import { appRouter } from '@core/router'
+
+export const implicitAccountCreationRouter = writable<ImplicitAccountCreationRouter>(null)
+export const implicitAccountCreationRoute = writable<ImplicitAccountCreationRoute>(null)
+
+export class ImplicitAccountCreationRouter extends Router<ImplicitAccountCreationRoute> {
+    constructor() {
+        super(ImplicitAccountCreationRoute.Init, implicitAccountCreationRoute)
+    }
+
+    next(): void {
+        let nextRoute: ImplicitAccountCreationRoute
+
+        const currentRoute = get(this.routeStore)
+        switch (currentRoute) {
+            case ImplicitAccountCreationRoute.Init: {
+                nextRoute = ImplicitAccountCreationRoute.OneTimeDeposit
+                break
+            }
+            case ImplicitAccountCreationRoute.OneTimeDeposit: {
+                nextRoute = ImplicitAccountCreationRoute.FundConfirmation
+                break
+            }
+            case ImplicitAccountCreationRoute.FundConfirmation: {
+                nextRoute = ImplicitAccountCreationRoute.AccountCreation
+                break
+            }
+            case ImplicitAccountCreationRoute.AccountCreation: {
+                get(appRouter).next()
+                return
+            }
+        }
+        this.setNext(nextRoute)
+    }
+}

packages/desktop/views/dashboard/wallet/implicit-account-creation.enum.ts

@@ -0,0 +1,6 @@
+export enum ImplicitAccountCreationRoute {
+    Init = 'init',
+    OneTimeDeposit = 'OneTimeDeposit',
+    FundConfirmation = 'FundConfirmation',
+    AccountCreation = 'AccountCreation',
+}

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

@@ -1 +1,5 @@
 export { default as Wallet } from './Wallet.svelte'
+
+export * from './implicit-account-creation-router'
+export * from './implicit-account-creation.enum'
+export * from './views'

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { implicitAccountCreationRoute, ImplicitAccountCreationRoute } from '../index'
+    import { InitView, AccountCreation, FundConfirmation, OneTimeDeposit } from '.'
+    import { Text, TextType } from 'shared/components'
+    import { localize } from '@core/i18n'
+
+    const IMPLICIT_ACCOUNT_STEPS = Object.keys(ImplicitAccountCreationRoute).slice(1)
+</script>
+
+<implicit-account-creation-view 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 $implicitAccountCreationRoute === ImplicitAccountCreationRoute.Init}
+            <InitView />
+        {:else if $implicitAccountCreationRoute === ImplicitAccountCreationRoute.OneTimeDeposit}
+            <OneTimeDeposit />
+        {:else if $implicitAccountCreationRoute === ImplicitAccountCreationRoute.FundConfirmation}
+            <FundConfirmation />
+        {:else if $implicitAccountCreationRoute === ImplicitAccountCreationRoute.AccountCreation}
+            <AccountCreation />
+        {/if}
+    </box-content>
+    {#if $implicitAccountCreationRoute !== ImplicitAccountCreationRoute.Init}
+        <div class="flex flex-row justify-center space-x-2.5">
+            {#each IMPLICIT_ACCOUNT_STEPS as step}
+                <div
+                    class="w-2.5 h-2.5 rounded-full {step === $implicitAccountCreationRoute
+                        ? 'bg-blue-500'
+                        : 'bg-blue-200'}"
+                />
+            {/each}
+        </div>
+    {/if}
+</implicit-account-creation-view>
+
+<style lang="scss">
+    box-content {
+        box-shadow: 0px 1px 4px 0px rgba(23, 27, 37, 0.04);
+    }
+</style>

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

@@ -0,0 +1,39 @@
+<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}
+    {#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}
+{/if}

packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/AccountCreation.svelte

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

packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/FundConfirmation.svelte

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

packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/InitView.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { Button, FontWeight, Text, TextType } from 'shared/components'
+    import { localize } from '@core/i18n'
+    import { implicitAccountCreationRouter, ImplicitAccountCreationRoute } from '../../index'
+
+    interface IStep {
+        title: string
+        description: string
+        image: string
+    }
+
+    const NUMBER_OF_STEPS = Object.keys(ImplicitAccountCreationRoute).slice(1).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`,
+        }
+    })
+
+    function onContinueClick(): void {
+        $implicitAccountCreationRouter.next()
+    }
+</script>
+
+<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={onContinueClick}>{localize('views.implicit-account-creation.action')}</Button>

packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/OneTimeDeposit.svelte

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

packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/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 InitView } from './InitView.svelte'

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

@@ -1 +1,4 @@
-export { default as WalletMainView } from './WalletMainView.svelte'
+export { default as ImplicitAccountCreationView } from './ImplicitAccountCreationView.svelte'
+export { default as WalletView } from './WalletView.svelte'
+
+export * from './implicit-account-creation-multistep'