From f49e87e6ecd2e169ed3f53e7f58515af48f47367 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Thu, 11 Jan 2024 15:54:20 +0100
Subject: [PATCH] feat: add implicit account creation wizard and router (#7877)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 .../lib/routers/actions/initialiseRouters.ts  |  2 +
 .../lib/routers/actions/resetRouters.ts       |  2 +
 .../views/dashboard/wallet/Wallet.svelte      | 22 +++++++---
 .../implicit-account-creation-router.ts       | 37 ++++++++++++++++
 .../wallet/implicit-account-creation.enum.ts  |  6 +++
 .../desktop/views/dashboard/wallet/index.js   |  4 ++
 .../views/ImplicitAccountCreationView.svelte  | 40 +++++++++++++++++
 .../wallet/views/WalletMainView.svelte        | 44 -------------------
 .../dashboard/wallet/views/WalletView.svelte  | 34 ++++++++++++++
 .../AccountCreationView.svelte                |  1 +
 .../FundConfirmationView.svelte               |  1 +
 .../InitView.svelte                           | 44 +++++++++++++++++++
 .../OneTimeDepositView.svelte                 |  1 +
 .../index.js                                  |  4 ++
 .../views/dashboard/wallet/views/index.js     |  5 ++-
 .../implicit-account-creation/step1.svg       | 18 ++++++++
 .../implicit-account-creation/step2.svg       | 21 +++++++++
 .../implicit-account-creation/step3.svg       | 19 ++++++++
 packages/shared/locales/en.json               | 18 ++++++++
 19 files changed, 271 insertions(+), 52 deletions(-)
 create mode 100644 packages/desktop/views/dashboard/wallet/implicit-account-creation-router.ts
 create mode 100644 packages/desktop/views/dashboard/wallet/implicit-account-creation.enum.ts
 create mode 100644 packages/desktop/views/dashboard/wallet/views/ImplicitAccountCreationView.svelte
 delete mode 100644 packages/desktop/views/dashboard/wallet/views/WalletMainView.svelte
 create mode 100644 packages/desktop/views/dashboard/wallet/views/WalletView.svelte
 create mode 100644 packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/AccountCreationView.svelte
 create mode 100644 packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/FundConfirmationView.svelte
 create mode 100644 packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/InitView.svelte
 create mode 100644 packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/OneTimeDepositView.svelte
 create mode 100644 packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/index.js
 create mode 100644 packages/shared/assets/illustrations/implicit-account-creation/step1.svg
 create mode 100644 packages/shared/assets/illustrations/implicit-account-creation/step2.svg
 create mode 100644 packages/shared/assets/illustrations/implicit-account-creation/step3.svg

diff --git a/packages/desktop/lib/routers/actions/initialiseRouters.ts b/packages/desktop/lib/routers/actions/initialiseRouters.ts
index b6cc0e2f6ae..6473f9fcb8b 100644
--- a/packages/desktop/lib/routers/actions/initialiseRouters.ts
+++ b/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()
 }
 
diff --git a/packages/desktop/lib/routers/actions/resetRouters.ts b/packages/desktop/lib/routers/actions/resetRouters.ts
index 57d4856d2a3..135d8f2eff0 100644
--- a/packages/desktop/lib/routers/actions/resetRouters.ts
+++ b/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()
 }
diff --git a/packages/desktop/views/dashboard/wallet/Wallet.svelte b/packages/desktop/views/dashboard/wallet/Wallet.svelte
index e08a03831ca..1cadbc226c3 100644
--- a/packages/desktop/views/dashboard/wallet/Wallet.svelte
+++ b/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}
diff --git a/packages/desktop/views/dashboard/wallet/implicit-account-creation-router.ts b/packages/desktop/views/dashboard/wallet/implicit-account-creation-router.ts
new file mode 100644
index 00000000000..4c517b3d456
--- /dev/null
+++ b/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)
+    }
+}
diff --git a/packages/desktop/views/dashboard/wallet/implicit-account-creation.enum.ts b/packages/desktop/views/dashboard/wallet/implicit-account-creation.enum.ts
new file mode 100644
index 00000000000..3f6203f81ad
--- /dev/null
+++ b/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',
+}
diff --git a/packages/desktop/views/dashboard/wallet/index.js b/packages/desktop/views/dashboard/wallet/index.js
index 2e2316e2ffe..84815d3c46c 100644
--- a/packages/desktop/views/dashboard/wallet/index.js
+++ b/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'
diff --git a/packages/desktop/views/dashboard/wallet/views/ImplicitAccountCreationView.svelte b/packages/desktop/views/dashboard/wallet/views/ImplicitAccountCreationView.svelte
new file mode 100644
index 00000000000..ae248485f10
--- /dev/null
+++ b/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>
diff --git a/packages/desktop/views/dashboard/wallet/views/WalletMainView.svelte b/packages/desktop/views/dashboard/wallet/views/WalletMainView.svelte
deleted file mode 100644
index a2619435816..00000000000
--- a/packages/desktop/views/dashboard/wallet/views/WalletMainView.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<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}
diff --git a/packages/desktop/views/dashboard/wallet/views/WalletView.svelte b/packages/desktop/views/dashboard/wallet/views/WalletView.svelte
new file mode 100644
index 00000000000..a3639625809
--- /dev/null
+++ b/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>
diff --git a/packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/AccountCreationView.svelte b/packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/AccountCreationView.svelte
new file mode 100644
index 00000000000..e7372a8d642
--- /dev/null
+++ b/packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/AccountCreationView.svelte
@@ -0,0 +1 @@
+<h1>AccountCreation</h1>
diff --git a/packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/FundConfirmationView.svelte b/packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/FundConfirmationView.svelte
new file mode 100644
index 00000000000..896db9eff77
--- /dev/null
+++ b/packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/FundConfirmationView.svelte
@@ -0,0 +1 @@
+<h1>FundConfirmation</h1>
diff --git a/packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/InitView.svelte b/packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/InitView.svelte
new file mode 100644
index 00000000000..b7fc5a99d32
--- /dev/null
+++ b/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>
diff --git a/packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/OneTimeDepositView.svelte b/packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/OneTimeDepositView.svelte
new file mode 100644
index 00000000000..03648fe3fac
--- /dev/null
+++ b/packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/OneTimeDepositView.svelte
@@ -0,0 +1 @@
+<h1>OneTimeDeposit</h1>
diff --git a/packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/index.js b/packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/index.js
new file mode 100644
index 00000000000..144a5c7581d
--- /dev/null
+++ b/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'
diff --git a/packages/desktop/views/dashboard/wallet/views/index.js b/packages/desktop/views/dashboard/wallet/views/index.js
index 365c6bc4321..61a66a5cda3 100644
--- a/packages/desktop/views/dashboard/wallet/views/index.js
+++ b/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'
diff --git a/packages/shared/assets/illustrations/implicit-account-creation/step1.svg b/packages/shared/assets/illustrations/implicit-account-creation/step1.svg
new file mode 100644
index 00000000000..89119ffa871
--- /dev/null
+++ b/packages/shared/assets/illustrations/implicit-account-creation/step1.svg
@@ -0,0 +1,18 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="36" cy="36" r="36" fill="#D2F5FD"/>
+<path d="M26.6533 49.0426L20.2993 34.6476C20.1868 34.3665 20.1868 34.0853 20.2431 33.9166L65.6771 28.4623C65.7896 28.631 65.7896 29.0246 65.5084 29.1933L26.6533 49.0426Z" fill="url(#paint0_linear_1_10)"/>
+<path d="M28.396 27.1687C26.3717 27.5623 24.5161 28.6869 23.1666 30.2614L20.58 33.354C20.4113 33.5227 20.2988 33.6914 20.2426 33.8601L65.6767 28.4058C65.5642 28.1808 65.3955 28.1246 65.1706 28.1246L28.9583 27L28.396 27.1687Z" fill="white"/>
+<path d="M22.0987 50.1101L19.3435 43.1938L65.7334 28.5739C65.7897 28.6863 65.8459 29.0237 65.5085 29.2486L24.7978 50.9535C23.8981 51.4034 22.7173 51.5158 22.0987 50.1101Z" fill="url(#paint1_linear_1_10)"/>
+<path d="M65.7333 28.5739C65.7333 28.5739 65.7896 28.7426 65.7896 28.7988L11.8647 46.3989C10.234 46.9612 8.49091 47.1299 6.74777 46.905C6.01678 46.8487 5.73563 45.8928 6.29793 45.3867L16.4194 37.1771C16.6443 36.9522 16.9817 36.7835 17.2628 36.7273L65.7333 28.5739Z" fill="white"/>
+<path d="M65.7333 28.5739C65.7333 28.5739 65.7896 28.7426 65.7896 28.7988L10.8526 46.7363L27.6654 35.1528C28.059 34.8717 28.5651 34.703 29.015 34.5905L65.7333 28.5739Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_1_10" x1="38.3946" y1="54.7616" x2="42.9015" y2="37.1012" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#5EE1FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1_10" x1="37.8878" y1="57.559" x2="37.5" y2="36.9997" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#5EE1FE"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/shared/assets/illustrations/implicit-account-creation/step2.svg b/packages/shared/assets/illustrations/implicit-account-creation/step2.svg
new file mode 100644
index 00000000000..d26a9f432f1
--- /dev/null
+++ b/packages/shared/assets/illustrations/implicit-account-creation/step2.svg
@@ -0,0 +1,21 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="36" cy="36" r="36" fill="#FFE9C0"/>
+<path d="M25.9999 48.1953L26.0566 49.6766C26.0566 51.0539 29.7367 52.2519 34.3517 52.5169C39.6703 52.8296 44.5896 51.7806 45.4909 50.1553C45.6071 49.9473 45.6055 49.7414 45.6055 49.5065L45.5672 48.1329C45.5672 48.3449 45.5308 48.4459 45.4249 48.6781C44.5236 50.3035 39.4522 51.3483 34.1336 51.0356C29.5186 50.7706 26.2374 49.569 25.9999 48.1953Z" fill="#EDAC31"/>
+<path d="M37.4149 45.1987C32.0963 44.886 27.042 45.935 26.1407 47.5603C25.2395 49.1857 28.8145 50.7488 34.1599 51.0494C39.4785 51.3621 44.5328 50.3131 45.4341 48.6878C46.3354 47.0624 42.7335 45.5113 37.4149 45.1987Z" fill="#FCCC34"/>
+<path d="M36.7839 46.6341C33.4779 46.4928 29.6074 47.0246 29.0737 47.7912C28.5156 48.5471 31.4417 49.2422 34.7478 49.3836C38.0538 49.525 41.9638 48.9895 42.5218 48.2335C43.1057 47.4688 40.09 46.7755 36.7839 46.6341Z" fill="#FFE592"/>
+<path d="M25.9999 43.7666L26.0566 45.2479C26.0566 46.6252 29.7367 47.8232 34.3517 48.0882C39.6703 48.4009 44.5896 47.3519 45.4909 45.7266C45.6071 45.5186 45.6055 45.3127 45.6055 45.0778L45.5672 43.7042C45.5672 43.9162 45.5308 44.0172 45.4249 44.2494C44.5236 45.8747 39.4522 46.9196 34.1336 46.6069C29.5186 46.3419 26.2374 45.1403 25.9999 43.7666Z" fill="#EDAC31"/>
+<path d="M37.4149 40.7699C32.0963 40.4573 27.042 41.5062 26.1407 43.1316C25.2395 44.7569 28.8145 46.3201 34.1599 46.6207C39.4785 46.9334 44.5328 45.8844 45.4341 44.2591C46.3354 42.6337 42.7335 41.0826 37.4149 40.7699Z" fill="#FCCC34"/>
+<path d="M36.7839 42.2054C33.4779 42.0641 29.6074 42.5959 29.0737 43.3625C28.5156 44.1184 31.4417 44.8135 34.7478 44.9549C38.0538 45.0963 41.9638 44.5607 42.5218 43.8048C43.1057 43.0401 40.09 42.3468 36.7839 42.2054Z" fill="#FFE592"/>
+<path d="M25.9999 39.3379L26.0566 40.8191C26.0566 42.1965 29.7367 43.3944 34.3517 43.6595C39.6703 43.9722 44.5896 42.9232 45.4909 41.2978C45.6071 41.0898 45.6055 40.884 45.6055 40.6491L45.5672 39.2755C45.5672 39.4875 45.5308 39.5885 45.4249 39.8207C44.5236 41.446 39.4522 42.4909 34.1336 42.1782C29.5186 41.9132 26.2374 40.7116 25.9999 39.3379Z" fill="#EDAC31"/>
+<path d="M37.4149 36.3412C32.0963 36.0286 27.042 37.0775 26.1407 38.7029C25.2395 40.3282 28.8145 41.8913 34.1599 42.192C39.4785 42.5047 44.5328 41.4557 45.4341 39.8303C46.3354 38.205 42.7335 36.6539 37.4149 36.3412Z" fill="#FCCC34"/>
+<path d="M36.7839 37.7767C33.4779 37.6353 29.6074 38.1672 29.0737 38.9338C28.5156 39.6897 31.4417 40.3848 34.7478 40.5262C38.0538 40.6675 41.9638 40.132 42.5218 39.3761C43.1057 38.6114 40.09 37.9181 36.7839 37.7767Z" fill="#FFE592"/>
+<path d="M25.9999 34.9092L26.0566 36.3904C26.0566 37.7678 29.7367 38.9657 34.3517 39.2308C39.6703 39.5435 44.5896 38.4945 45.4909 36.8691C45.6071 36.6611 45.6055 36.4553 45.6055 36.2204L45.5672 34.8468C45.5672 35.0588 45.5308 35.1598 45.4249 35.392C44.5236 37.0173 39.4522 38.0622 34.1336 37.7495C29.5186 37.4845 26.2374 36.2829 25.9999 34.9092Z" fill="#EDAC31"/>
+<path d="M37.4149 31.9125C32.0963 31.5998 27.042 32.6488 26.1407 34.2742C25.2395 35.8995 28.8145 37.4626 34.1599 37.7633C39.4785 38.076 44.5328 37.027 45.4341 35.4016C46.3354 33.7763 42.7335 32.2252 37.4149 31.9125Z" fill="#FCCC34"/>
+<path d="M36.7839 33.348C33.4779 33.2066 29.6074 33.7385 29.0737 34.505C28.5156 35.261 31.4417 35.9561 34.7478 36.0975C38.0538 36.2388 41.9638 35.7033 42.5218 34.9474C43.1057 34.1827 40.09 33.4894 36.7839 33.348Z" fill="#FFE592"/>
+<path d="M25.9999 30.4805L26.0566 31.9617C26.0566 33.3391 29.7367 34.537 34.3517 34.8021C39.6703 35.1147 44.5896 34.0658 45.4909 32.4404C45.6071 32.2324 45.6055 32.0266 45.6055 31.7917L45.5672 30.4181C45.5672 30.6301 45.5308 30.7311 45.4249 30.9633C44.5236 32.5886 39.4522 33.6335 34.1336 33.3208C29.5186 33.0558 26.2374 31.8542 25.9999 30.4805Z" fill="#EDAC31"/>
+<path d="M37.4149 27.4838C32.0963 27.1711 27.042 28.2201 26.1407 29.8455C25.2395 31.4708 28.8145 33.0339 34.1599 33.3346C39.4785 33.6473 44.5328 32.5983 45.4341 30.9729C46.3354 29.3476 42.7335 27.7965 37.4149 27.4838Z" fill="#FCCC34"/>
+<path d="M36.7839 28.9193C33.4779 28.7779 29.6074 29.3098 29.0737 30.0763C28.5156 30.8323 31.4417 31.5274 34.7478 31.6688C38.0538 31.8101 41.9638 31.2746 42.5218 30.5187C43.1057 29.754 40.09 29.0606 36.7839 28.9193Z" fill="#FFE592"/>
+<path d="M26.982 28.4457L27.7717 29.7002C28.4604 30.893 32.2464 30.0904 36.3757 28.0124C41.1381 25.6239 44.8739 22.2558 44.8417 20.3975C44.8383 20.1593 44.734 19.9819 44.6165 19.7784L43.8966 18.608C44.0026 18.7916 44.0215 18.8973 44.0459 19.1513C44.0781 21.0095 40.2086 24.4501 35.4462 26.8386C31.317 28.9166 27.8745 29.5166 26.982 28.4457Z" fill="#EDAC31"/>
+<path d="M35.3694 20.143C30.607 22.5315 26.7543 25.9671 26.7865 27.8253C26.8186 29.6836 30.6963 29.2497 35.4759 26.8374C40.2382 24.4489 44.0909 21.0133 44.0588 19.1551C44.0266 17.2968 40.1318 17.7545 35.3694 20.143Z" fill="#FCCC34"/>
+<path d="M35.5407 21.7016C32.6069 23.2322 29.5208 25.6281 29.4419 26.5588C29.3366 27.4925 32.2182 26.6314 35.152 25.1008C38.0858 23.5702 41.2042 21.1515 41.3095 20.2178C41.4328 19.2637 38.4745 20.171 35.5407 21.7016Z" fill="#FFE592"/>
+</svg>
diff --git a/packages/shared/assets/illustrations/implicit-account-creation/step3.svg b/packages/shared/assets/illustrations/implicit-account-creation/step3.svg
new file mode 100644
index 00000000000..f648ecb5c57
--- /dev/null
+++ b/packages/shared/assets/illustrations/implicit-account-creation/step3.svg
@@ -0,0 +1,19 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="36" cy="36" r="36" fill="#D1D2FC"/>
+<path d="M45.7607 44.6582C45.1257 44.0492 45.5113 42.958 46.3878 42.8794C47.856 42.7476 49.3098 42.5787 50.7483 42.3711C52.6623 42.1019 54.1379 40.5986 54.3459 38.7672C55.2457 31.0451 55.343 23.2676 54.675 15.4775C54.5301 13.5014 52.9072 11.9049 50.9034 11.7266C41.6496 10.8478 31.7728 10.8087 21.4503 11.3809C19.3842 11.5193 17.7024 13.0886 17.4833 15.0797C16.7094 22.7303 16.6177 30.4279 17.211 38.1326C17.3614 40.0289 18.8667 41.5772 20.7819 41.8697C22.5907 42.1396 24.3865 42.3717 26.1682 42.5641C27.0449 42.6587 27.3998 43.7619 26.7446 44.3519C20.3542 50.1053 16.2112 55.2381 16.0077 63.7863C15.9981 64.1882 16.2395 64.5564 16.6164 64.6962C20.0679 65.9753 24.2146 66.0847 30.3154 65.9613C31.835 65.9306 33.4283 65.8984 35.1059 65.8984C36.5619 65.8984 37.9978 65.9185 39.4019 65.9383C45.7843 66.0279 51.5079 66.1083 55.4675 64.2432C55.8001 64.0865 56.0017 63.7438 55.9917 63.3763C55.7794 55.5734 51.4184 50.0842 45.7607 44.6582Z" fill="url(#paint0_linear_1_53)"/>
+<path d="M49.9412 26.0943C49.2275 19.8099 42.1748 15.3034 34.1985 16.0889C26.2221 16.8745 20.3449 22.58 21.0585 28.9057C21.7722 35.1901 28.8249 39.6966 36.8012 38.9111C44.7775 38.1255 50.6548 32.3786 49.9412 26.0943Z" fill="url(#paint1_linear_1_53)"/>
+<path d="M42.0079 27.3311C42.0923 26.5147 42.8242 25.9236 43.6687 26.008C44.4851 26.0925 45.0763 26.8244 44.9918 27.6689C44.9074 28.4853 44.1755 29.0764 43.3309 28.992C42.5146 28.8794 41.9234 28.1475 42.0079 27.3311Z" fill="#3B4965"/>
+<path d="M26.0079 27.3311C26.0923 26.5147 26.8242 25.9236 27.6687 26.008C28.4851 26.0925 29.0763 26.8244 28.9918 27.6689C28.9074 28.4853 28.1755 29.0764 27.3309 28.992C26.5146 28.8794 25.9234 28.1475 26.0079 27.3311Z" fill="#3B4965"/>
+<defs>
+<linearGradient id="paint0_linear_1_53" x1="35.4548" y1="10.9842" x2="35.4548" y2="66" gradientUnits="userSpaceOnUse">
+<stop offset="0.442316" stop-color="white"/>
+<stop offset="0.772097" stop-color="#E8EAF8"/>
+<stop offset="0.835805" stop-color="#E3E5F7"/>
+<stop offset="1" stop-color="#D1D2FC"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1_53" x1="35.6511" y1="16.0158" x2="35.6511" y2="39.016" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EAECFF"/>
+<stop offset="1" stop-color="#BCC2F4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/shared/locales/en.json b/packages/shared/locales/en.json
index c8530fcc911..1cb995a85b7 100644
--- a/packages/shared/locales/en.json
+++ b/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": {