feat: add implicit account creation wizard and router (#7877)

* feat: add account to routes

* feat: add to analytics featureflag

* feat: add account view and multistep

* style: refinements

* feat: rename  files and add locale

* fix: update naming

* feat: update naming and improve code

* fix import

* fix: remove accountImplicit route and add to wallet tab

* fix: improve naming

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

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

* fix: add router

* minor fixes

* ix: add missing dots

* fix: remove unnecessary function

* fix: rename files

* fix: move if/else and key block

* fix: reset after finish

---------

Co-authored-by: Begoña Álvarez de la Cruz <balvarez@boxfish.studio>

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 {
     /**
@@ -33,6 +34,7 @@ function initialiseBaseRouters(): void {
     settingsRouter.set(new SettingsRouter())
     collectiblesRouter.set(new CollectiblesRouter())
     governanceRouter.set(new GovernanceRouter())
+    implicitAccountCreationRouter.set(new ImplicitAccountCreationRouter())
     initialiseBaseOnboardingRouters()
 }
 

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,21 @@
 <script lang="ts">
-    import { WalletMainView } from './views'
+    import { selectedWallet } from '@core/wallet'
+    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 $selectedWallet}
+    {#key $selectedWallet?.index}
+        <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>
+    {/key}
 {/if}

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

@@ -0,0 +1,37 @@
+import { get, writable } from 'svelte/store'
+import { Router } from '../../../../shared/lib/core/router/classes'
+import { ImplicitAccountCreationRoute } from './implicit-account-creation.enum'
+
+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(implicitAccountCreationRouter).reset()
+                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, AccountCreationView, FundConfirmationView, OneTimeDepositView } 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}
+            <OneTimeDepositView />
+        {:else if $implicitAccountCreationRoute === ImplicitAccountCreationRoute.FundConfirmation}
+            <FundConfirmationView />
+        {:else if $implicitAccountCreationRoute === ImplicitAccountCreationRoute.AccountCreation}
+            <AccountCreationView />
+        {/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,34 @@
+<script lang="ts">
+    import { AssetList, Overflow, Pane, ReceiveAddressButton } from '@ui'
+    import { AccountSummary, AccountActivity, SendButton } from '@components'
+    import { selectedWalletAssets } from '@core/wallet'
+    import features from '@features/features'
+</script>
+
+<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>

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

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

packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/FundConfirmationView.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/OneTimeDepositView.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 OneTimeDepositView } from './OneTimeDepositView.svelte'
+export { default as FundConfirmationView } from './FundConfirmationView.svelte'
+export { default as AccountCreationView } from './AccountCreationView.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'