web-wallet: Show current block height on Wallet Creation

web-wallet/CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Show current block height on Wallet Creation [#1561]
 - Added gas settings validation on Unstake / Widthdraw Rewards flows [#2000]
 
 ### Changed
@@ -225,6 +226,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#1545]: https://github.com/dusk-network/rusk/issues/1545
 [#1547]: https://github.com/dusk-network/rusk/issues/1547
 [#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
 [#1567]: https://github.com/dusk-network/rusk/issues/1567
 [#1576]: https://github.com/dusk-network/rusk/issues/1576

web-wallet/src/lib/dusk/components/CopyField/CopyField.svelte

@@ -0,0 +1,48 @@
+<script>
+  import { mdiContentCopy } from "@mdi/js";
+  import { Button, Textbox } from "$lib/dusk/components";
+  import { toast } from "$lib/dusk/components/Toast/store";
+
+  /** @type {string} */
+  export let name;
+
+  /** @type {string} */
+  export let displayValue;
+
+  /** @type {string} */
+  export let rawValue;
+
+  function copyToClipboard() {
+    navigator.clipboard.writeText(rawValue);
+    toast("success", `${name} copied`, mdiContentCopy);
+  }
+</script>
+
+<div class="copy-field">
+  <Textbox
+    className="copy-field__content"
+    value={displayValue}
+    type="text"
+    readOnly
+  />
+  <Button
+    aria-label="Copy Address"
+    className="copy-field__button"
+    icon={{ path: mdiContentCopy }}
+    on:click={copyToClipboard}
+    variant="primary"
+  />
+</div>
+
+<style lang="postcss">
+  .copy-field {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+  }
+  :global {
+    .copy-field__content {
+      flex: 1;
+    }
+  }
+</style>

web-wallet/src/lib/dusk/components/index.js

@@ -1,6 +1,7 @@
 export { default as Agreement } from "./Agreement/Agreement.svelte";
 export { default as Anchor } from "./Anchor/Anchor.svelte";
 export { default as AnchorButton } from "./AnchorButton/AnchorButton.svelte";
+export { default as CopyField } from "./CopyField/CopyField.svelte";
 export { default as Badge } from "./Badge/Badge.svelte";
 export { default as Button } from "./Button/Button.svelte";
 export { default as Card } from "./Card/Card.svelte";

web-wallet/src/lib/dusk/number/createNumberFormatter.js

@@ -0,0 +1,17 @@
+/**
+ * Creates a locale aware number formatter
+ *
+ * @param {String} locale A BCP 47 language tag
+ * @param {Number|Undefined} digits The minimum fraction digits that should display
+ * @returns {(value: number | bigint) => string}
+ */
+const createNumberFormatter = (locale, digits = undefined) => {
+  const formatter = new Intl.NumberFormat(locale, {
+    style: "decimal",
+    maximumFractionDigits: digits,
+  });
+
+  return (value) => formatter.format(value);
+};
+
+export default createNumberFormatter;

web-wallet/src/lib/dusk/number/index.js

@@ -0,0 +1 @@
+export { default as createNumberFormatter } from "./createNumberFormatter";

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

@@ -48,11 +48,6 @@
       Promise.reject(new Error("Wrong password"))
     );
 
-  function checkLastPosExists() {
-    const lastPos = localStorage.getItem("lastPos");
-    return lastPos !== null ? true : false;
-  }
-
   const loginInfo = loginInfoStorage.get();
   const modeLabel = loginInfo ? "Password" : "Mnemonic phrase";
 
@@ -75,9 +70,7 @@
     getSeed(secretText.trim())
       .then(getWallet)
       .then(checkLocalData)
-      .then((wallet) =>
-        walletStore.init(wallet, checkLastPosExists() ? undefined : 0)
-      )
+      .then((wallet) => walletStore.init(wallet))
       .then(() => goto("/dashboard"))
       .catch((err) => {
         if (err.message === localDataCheckErrorMsg) {

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

@@ -13,6 +13,7 @@
   import TermsOfService from "../TermsOfService.svelte";
   import MnemonicPhrase from "./MnemonicPhrase.svelte";
   import MnemonicValidate from "./MnemonicValidate.svelte";
+  import NetworkSync from "./NetworkSync.svelte";
   import SwapNDUSK from "./SwapNDUSK.svelte";
   import AllSet from "../AllSet.svelte";
   import MnemonicPreSetup from "./MnemonicPreSetup.svelte";
@@ -62,7 +63,7 @@
     <TermsOfService bind:tosAccepted />
   </div>
 {:else}
-  <Wizard fullHeight={true} steps={6} let:key>
+  <Wizard fullHeight={true} steps={7} let:key>
     <WizardStep
       step={0}
       {key}
@@ -146,8 +147,15 @@
       </h2>
       <SwapNDUSK />
     </WizardStep>
+    <WizardStep step={5} {key} showStepper={true}>
+      <h2 class="h1" slot="heading">
+        Network<br />
+        <mark>Syncing</mark>
+      </h2>
+      <NetworkSync />
+    </WizardStep>
     <WizardStep
-      step={5}
+      step={6}
       {key}
       showStepper={true}
       hideBackButton={true}

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

@@ -0,0 +1,36 @@
+<script>
+  import { AppAnchor } from "$lib/components";
+  import { Card, CopyField } from "$lib/dusk/components";
+  import { createNumberFormatter } from "$lib/dusk/number";
+  import { settingsStore, walletStore } from "$lib/stores";
+  $: ({ language } = $settingsStore);
+
+  $: currentBlock = 0;
+
+  walletStore.getCurrentBlockHeight().then((block) => {
+    currentBlock = block;
+  });
+
+  const numberFormatter = createNumberFormatter(language);
+</script>
+
+<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.
+  </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
+      href="#"
+      rel="noopener noreferrer"
+      target="_blank">docs</AppAnchor
+    >.
+  </small>
+</Card>