feat: prepare UI step 2

Author: evavirseda

packages/desktop/views/account/multi-step/GenerateMana.svelte

@@ -1 +1,30 @@
-<h1>GenerateMana</h1>
+<script lang="ts">
+    import { Button, FontWeight, Text, TextType } from 'shared/components'
+    import { localize } from '@core/i18n'
+
+    // TODO: Replace this with proper time remaining
+    const DUMMY_TIME_REMAINING = '5min 32s remaining'
+    // TODO: Replace this with proper amount
+    const DUMMY_AMOUNT = '5$'
+</script>
+
+<step-content class="flex flex-col items-center justify-between h-full pt-40 pb-10">
+    <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')}
+            />
+        </div>
+        <Text type={TextType.h3} fontWeight={FontWeight.semibold}
+            >{localize('views.implicit-account.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
+        >
+        <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>
+</step-content>

packages/desktop/views/account/multi-step/MultiStep.svelte

@@ -24,14 +24,14 @@
 
 {#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'}" />
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <div
+                on:click={handleNext}
+                class="w-2.5 h-2.5 rounded-full {activeState === step ? 'bg-blue-500' : 'bg-blue-200'}"
+            />
         {/each}
     </div>
 {/if}

packages/shared/locales/en.json

@@ -679,7 +679,12 @@
                 },
                 "step2": {
                     "title": "Step 2",
-                    "body": "Fund confirmation"
+                    "body": "Fund confirmation",
+                    "view": {
+                        "title": "Fund arrived",
+                        "subtitle": "Generating mana...",
+                        "action": "Activate Account"
+                    }
                 },
                 "step3": {
                     "title": "Step 3",