feat: prepare UI for implicit account creation STEP 1

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,63 @@
+<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 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} classes="mb-12"
+                >{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,37 @@
+<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>
+
+{#if activeComponent}
+    <svelte:component this={activeComponent} {activeState} {onNext} />
+    <!-- TODO: Remove this button, it's just to allow go to next step -->
+    {#if currentStep < IMPLICIT_ACCOUNT_STEPS.length - 1}
+        <button on:click={handleNext}>Next</button>
+    {/if}
+    <!-- Dots to show progress -->
+    <div class="flex flex-row justify-center space-x-2.5">
+        {#each IMPLICIT_ACCOUNT_STEPS as step, index}
+            <div class="w-2.5 h-2.5 rounded-full {activeState === step ? 'bg-blue-500' : 'bg-blue-200'}" />
+        {/each}
+    </div>
+{/if}

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

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { Button, FontWeight, Text, TextType } from 'shared/components'
+    import { localize } from '@core/i18n'
+    import { setClipboard } from '@core/utils'
+
+    let isAddressShown: boolean = false
+
+    // TODO: Replace with proper address
+    const DUMMY_ADDRESS = 'iota1q9f0mlq8yxpx2nck8a0slxnzr4ef2ek8f5gqxlzd0wasgp73utryjtzcp98'
+
+    function showAddress() {
+        isAddressShown = true
+    }
+
+    function onCopyClick(): void {
+        setClipboard(DUMMY_ADDRESS)
+    }
+</script>
+
+<step-content class="flex flex-col items-center justify-center space-y-20 h-full">
+    <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-creation.steps.step1.title')}
+            />
+        </div>
+        <Text type={TextType.h3} fontWeight={FontWeight.semibold}
+            >{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-creation.steps.step1.view.subtitle')}</Text
+        >
+        <Text type={TextType.h5} fontWeight={FontWeight.normal} color="gray-700" darkColor="gray-500"
+            >{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-creation.steps.step1.view.hiddenAddress.description')}</Text
+            >
+            <Button onClick={showAddress} classes="shrink-0"
+                >{localize('views.implicit-account-creation.steps.step1.view.hiddenAddress.action')}</Button
+            >
+        </div>
+    {:else}
+        <div class="flex flex-col justify-center items-center space-y-3">
+            <div
+                class="flex flex-row items-center space-x-20 bg-gray-100 dark:bg-gray-800 rounded-lg px-6 py-4 max-w-lg"
+            >
+                <div class="flex flex-col space-y-1">
+                    <Text type={TextType.h5} fontWeight={FontWeight.normal} darkColor="gray-400"
+                        >{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-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-creation.steps.step1.view.oneTimeAddress.tip')}</Text
+            >
+        </div>
+    {/if}
+</step-content>

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'