Fixes

web-wallet/src/lib/stores/walletStore.js

@@ -137,7 +137,7 @@ const stake = async (amount, gasSettings) =>
 
 /** @type {WalletStoreServices["sync"]} */
 function sync(from) {
-  console.log("calling sync");
+  console.log("calling sync with from", from);
 
   if (!walletInstance) {
     throw new Error("No wallet instance to sync");

web-wallet/src/routes/(welcome)/setup/create/NetworkSync.svelte

@@ -1,8 +1,10 @@
 <script>
   import { AppAnchor } from "$lib/components";
-  import { Card, CopyField } from "$lib/dusk/components";
+  import { IconHeadingCard } from "$lib/containers/Cards";
+  import { CopyField } from "$lib/dusk/components";
   import { createNumberFormatter } from "$lib/dusk/number";
   import { settingsStore, walletStore } from "$lib/stores";
+  import { mdiCubeOutline } from "@mdi/js";
   $: ({ language } = $settingsStore);
 
   $: currentBlock = 0;
@@ -14,7 +16,7 @@
   const numberFormatter = createNumberFormatter(language);
 </script>
 
-<Card heading="Current Block Height">
+<IconHeadingCard iconPath={mdiCubeOutline} heading="Block Height">
   <p>
     Store the current block height in case you want to resync from it next time
     you reset your wallet. This can significantly reduce the initial sync time.
@@ -30,7 +32,7 @@
     This can later be retrieved from Settings. Find out more in our <AppAnchor
       href="#"
       rel="noopener noreferrer"
-      target="_blank">docs</AppAnchor
+      target="_blank">documentation</AppAnchor
     >.
   </small>
-</Card>
+</IconHeadingCard>

web-wallet/src/routes/(welcome)/setup/restore/+page.svelte

@@ -4,7 +4,7 @@
   import { fade } from "svelte/transition";
   import TermsOfService from "../TermsOfService.svelte";
   import PasswordSetup from "../PasswordSetup.svelte";
-  import NetworkSyncing from "./NetworkSync.svelte";
+  import NetworkSyncing from "./NetworkSyncSettings.svelte";
   import AllSet from "../AllSet.svelte";
   import MnemonicAuthenticate from "./MnemonicAuthenticate.svelte";
   import { Wizard, WizardStep } from "$lib/dusk/components";
@@ -16,6 +16,7 @@
   } from "$lib/wallet";
   import { goto } from "$lib/navigation";
   import { onDestroy } from "svelte";
+  import NetworkSyncProgress from "./NetworkSyncProgress.svelte";
 
   /** @type {boolean} */
   let notice = false;
@@ -32,6 +33,9 @@
   /** @type {boolean} */
   let isValidBlockHeight = false;
 
+  /** @type {boolean} */
+  let isSyncCompleted = false;
+
   /** @type {boolean} */
   let showPasswordSetup = false;
 
@@ -63,7 +67,7 @@
     <TermsOfService bind:tosAccepted />
   </div>
 {:else}
-  <Wizard fullHeight={true} steps={4} let:key>
+  <Wizard fullHeight={true} steps={5} let:key>
     <WizardStep
       step={0}
       {key}
@@ -112,24 +116,40 @@
       {key}
       showStepper={true}
       nextButton={{
+        action: async () => {
+          console.log("blockHeight", blockHeight);
+          await initializeWallet(mnemonicPhrase, blockHeight);
+          mnemonicPhrase = [];
+        },
         disabled: !isValidBlockHeight,
       }}
     >
       <h2 class="h1" slot="heading">
         Network<br />
         <mark>Syncing</mark>
       </h2>
-      <NetworkSyncing bind:isValid={isValidBlockHeight} {blockHeight} />
+      <NetworkSyncing bind:isValid={isValidBlockHeight} bind:blockHeight />
     </WizardStep>
     <WizardStep
       step={3}
       {key}
       showStepper={true}
       hideBackButton={true}
+      nextButton={{ disabled: !isSyncCompleted }}
+    >
+      <h2 class="h1" slot="heading">
+        Network<br />
+        <mark>Syncing</mark>
+      </h2>
+      <NetworkSyncProgress bind:isValid={isSyncCompleted} />
+    </WizardStep>
+    <WizardStep
+      step={4}
+      {key}
+      showStepper={true}
+      hideBackButton={true}
       nextButton={{
         action: async () => {
-          await initializeWallet(mnemonicPhrase, blockHeight);
-          mnemonicPhrase = [];
           await goto("/dashboard");
         },
         disabled: false,

web-wallet/src/routes/(welcome)/setup/restore/NetworkSyncProgress.svelte

@@ -0,0 +1,39 @@
+<script>
+  import IconHeadingCard from "$lib/containers/Cards/IconHeadingCard.svelte";
+  import { ProgressBar } from "$lib/dusk/components";
+  import { logout } from "$lib/navigation";
+  import { walletStore } from "$lib/stores";
+  import { mdiCubeOutline } from "@mdi/js";
+  import { onDestroy } from "svelte";
+
+  $: ({ sync } = $walletStore);
+
+  /** @type {boolean} */
+  export let isValid = false;
+
+  $: isValid = !sync.inProgress;
+
+  onDestroy(() => {
+    logout(false);
+  });
+</script>
+
+<IconHeadingCard iconPath={mdiCubeOutline} heading="Please wait...">
+  {#if sync.inProgress}
+    {#if !sync.current || !sync.latest}
+      <span>Syncing</span>
+    {:else}
+      <span>
+        Syncing: <b
+          >{sync.current.toLocaleString()}/{sync.latest.toLocaleString()}</b
+        >
+      </span>
+      <ProgressBar
+        className="footer__sync-status-progress-bar"
+        currentPercentage={(sync.current / sync.latest) * 100}
+      />
+    {/if}
+  {:else}
+    <span>Sync completed!</span>
+  {/if}
+</IconHeadingCard>

web-wallet/src/routes/(welcome)/setup/restore/NetworkSync.svelte → web-wallet/src/routes/(welcome)/setup/restore/NetworkSyncSettings.svelte

@@ -1,6 +1,6 @@
 <script>
   import { AppAnchor } from "$lib/components";
-  import { ToggleableCard } from "$lib/containers/cards";
+  import { ToggleableCard } from "$lib/containers/Cards";
   import { Icon, Textbox } from "$lib/dusk/components";
   import { walletStore } from "$lib/stores";
   import { mdiAlertOutline, mdiCubeOutline } from "@mdi/js";