web-wallet: Add option to sync from a custom block height

dusk-network · Aug 15, 2024 · 2adc828 · 2adc828
1 parent 6b020c5
commit 2adc828
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 5 deletions.
diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Add option to sync from a custom block height on Wallet Restoration [#1568]
 - Show current block height on Wallet Creation [#1561]
 - Added gas settings validation on Unstake / Widthdraw Rewards flows [#2000]
 
@@ -228,6 +229,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#1552]: https://github.com/dusk-network/rusk/issues/1552
 [#1561]: https://github.com/dusk-network/rusk/issues/1561
 [#1565]: https://github.com/dusk-network/rusk/issues/1565
+[#1568]: https://github.com/dusk-network/rusk/issues/1568
 [#1567]: https://github.com/dusk-network/rusk/issues/1567
 [#1576]: https://github.com/dusk-network/rusk/issues/1576
 [#1591]: https://github.com/dusk-network/rusk/issues/1591

diff --git a/web-wallet/src/lib/dusk/components/CopyField/CopyField.svelte b/web-wallet/src/lib/dusk/components/CopyField/CopyField.svelte
@@ -38,7 +38,7 @@
   .copy-field {
     display: flex;
     align-items: center;
-    gap: 1em;
+    gap: var(--default-gap);
   }
   :global {
     .copy-field__content {

diff --git a/web-wallet/src/routes/(welcome)/setup/create/NetworkSync.svelte b/web-wallet/src/routes/(welcome)/setup/create/NetworkSync.svelte
@@ -17,14 +17,14 @@
 <Card heading="Current 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 sync time.
+    you reset your wallet. This can significantly reduce the initial sync time.
   </p>
 
   <CopyField
     name="Block Height"
     displayValue={numberFormatter(currentBlock)}
     rawValue={String(currentBlock)}
-  ></CopyField>
+  />
 
   <small>
     This can later be retrieved from Settings. Find out more in our <AppAnchor

diff --git a/web-wallet/src/routes/(welcome)/setup/restore/+page.svelte b/web-wallet/src/routes/(welcome)/setup/restore/+page.svelte
@@ -4,6 +4,7 @@
   import { fade } from "svelte/transition";
   import TermsOfService from "../TermsOfService.svelte";
   import PasswordSetup from "../PasswordSetup.svelte";
+  import NetworkSyncing from "./NetworkSync.svelte";
   import AllSet from "../AllSet.svelte";
   import MnemonicAuthenticate from "./MnemonicAuthenticate.svelte";
   import { Wizard, WizardStep } from "$lib/dusk/components";
@@ -28,6 +29,9 @@
   /** @type {boolean} */
   let isValidPassword = false;
 
+  /** @type {boolean} */
+  let isValidBlockHeight = false;
+
   /** @type {boolean} */
   let showPasswordSetup = false;
 
@@ -37,6 +41,8 @@
   /** @type {string[]} */
   let mnemonicPhrase = $mnemonicPhraseResetStore;
 
+  let blockHeight = 0;
+
   const { userId } = $settingsStore;
 
   $: if (showPasswordSetup) {
@@ -57,7 +63,7 @@
     <TermsOfService bind:tosAccepted />
   </div>
 {:else}
-  <Wizard fullHeight={true} steps={3} let:key>
+  <Wizard fullHeight={true} steps={4} let:key>
     <WizardStep
       step={0}
       {key}
@@ -105,10 +111,24 @@
       step={2}
       {key}
       showStepper={true}
+      nextButton={{
+        disabled: !isValidBlockHeight,
+      }}
+    >
+      <h2 class="h1" slot="heading">
+        Network<br />
+        <mark>Syncing</mark>
+      </h2>
+      <NetworkSyncing bind:isValid={isValidBlockHeight} {blockHeight} />
+    </WizardStep>
+    <WizardStep
+      step={3}
+      {key}
+      showStepper={true}
       hideBackButton={true}
       nextButton={{
         action: async () => {
-          await initializeWallet(mnemonicPhrase, 0);
+          await initializeWallet(mnemonicPhrase, blockHeight);
           mnemonicPhrase = [];
           await goto("/dashboard");
         },

diff --git a/web-wallet/src/routes/(welcome)/setup/restore/NetworkSync.svelte b/web-wallet/src/routes/(welcome)/setup/restore/NetworkSync.svelte
@@ -0,0 +1,46 @@
+<script>
+  import { AppAnchor } from "$lib/components";
+  import { ToggleableCard } from "$lib/containers/cards";
+  import { Icon, Textbox } from "$lib/dusk/components";
+  import { walletStore } from "$lib/stores";
+  import { mdiAlertOutline, mdiCubeOutline } from "@mdi/js";
+
+  /** @type {number} */
+  export let blockHeight = 0;
+
+  /** @type {boolean} */
+  export let isValid = false;
+
+  /** @type {boolean} */
+  export let isToggled = false;
+
+  $: currentNetworkBlock = 0;
+
+  walletStore.getCurrentBlockHeight().then((block) => {
+    currentNetworkBlock = block;
+  });
+
+  $: isValid =
+    !isToggled || (blockHeight >= 0 && blockHeight <= currentNetworkBlock);
+
+  $: if (isToggled) {
+    blockHeight = 0;
+  }
+</script>
+
+<ToggleableCard bind:isToggled iconPath={mdiCubeOutline} heading="Block Height">
+  <Textbox type="number" bind:value={blockHeight} placeholder="Block Height" />
+</ToggleableCard>
+
+<div class="notice">
+  <Icon path={mdiAlertOutline} size="large" />
+  <p>
+    Syncing from a custom block height is optional. Doing so can significantly
+    reduce sync times. However, setting a wrong block can lead to wrong balance
+    or missing transactions. Find out more in our <AppAnchor
+      href="#"
+      rel="noopener noreferrer"
+      target="_blank">documentation</AppAnchor
+    >.
+  </p>
+</div>