Updates

web-wallet/.eslintignore

@@ -4,10 +4,15 @@ node_modules
 /.svelte-kit
 /package
 .env
-.env.*
+.env.\*
 !.env.example
 
 # Ignore files for PNPM, NPM and YARN
+
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+
+# Ignore locally served libs
+
+lib

web-wallet/.prettierignore

@@ -0,0 +1,3 @@
+# Ignore locally served libs
+
+lib

web-wallet/jsconfig.json

@@ -14,5 +14,6 @@
       "./node_modules/@testing-library/jest-dom/types/vitest.d.ts",
       "lamb-types"
     ]
-  }
+  },
+  "exclude": ["./lib"]
 }

web-wallet/lib/dusk-wallet-js/wallet.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
   for (var name in all)

web-wallet/src/lib/containers/Cards/ToggleableCard.svelte

@@ -1,5 +1,6 @@
 <script>
   import { Card, Icon, Switch } from "$lib/dusk/components";
+  import { createEventDispatcher } from "svelte";
 
   import "./Card.css";
 
@@ -17,6 +18,12 @@
 
   /** @type {boolean} */
   export let isToggled = false;
+
+  const dispatch = createEventDispatcher();
+
+  function dispatchToggleEvent() {
+    dispatch("toggle", { isToggled });
+  }
 </script>
 
 <Card {...$$restProps} {gap} {onSurface}>
@@ -27,7 +34,7 @@
       {/if}
       <h3 class="h4">{heading}</h3>
     </div>
-    <Switch onSurface bind:value={isToggled} />
+    <Switch onSurface bind:value={isToggled} on:change={dispatchToggleEvent} />
   </header>
   {#if isToggled}
     <slot />

web-wallet/src/lib/containers/StakeContract/StakeContract.svelte

@@ -124,8 +124,8 @@
   $: ({ currentOperation } = $operationsStore);
   $: [gasSettings, language, minAllowedStake] = collectSettings($settingsStore);
   const { hideStakingNotice } = $settingsStore;
-  $: ({ balance, error, syncStatus } = $walletStore);
-  $: isSyncOK = !(syncStatus.isInProgress || !!error);
+  $: ({ balance, syncStatus } = $walletStore);
+  $: isSyncOK = !(syncStatus.isInProgress || !!syncStatus.error);
   $: duskFormatter = createCurrencyFormatter(language, "DUSK", 9);
 </script>
 
@@ -136,7 +136,7 @@
     waitFor={walletStore.getStakeInfo()}
   >
     <svelte:fragment slot="pending-content">
-      {#if !syncStatus.isInProgress && !error}
+      {#if !syncStatus.isInProgress && !syncStatus.error}
         <Throbber />
       {:else}
         <p>Data will load after a successful sync.</p>

web-wallet/src/lib/containers/TransferContract/TransferContract.svelte

@@ -49,7 +49,7 @@
 
   $: ({ currentOperation } = $operationsStore);
   $: [gasSettings, language] = collectSettings($settingsStore);
-  $: ({ balance, currentAddress, error, isSyncing } = $walletStore);
+  $: ({ balance, currentAddress, syncStatus } = $walletStore);
   $: duskFormatter = createCurrencyFormatter(language, "DUSK", 9);
   $: statuses = [
     {
@@ -65,7 +65,10 @@
    */
   $: operations = map(
     descriptor.operations,
-    when(isEnabledSend, setKey("disabled", isSyncing || !!error))
+    when(
+      isEnabledSend,
+      setKey("disabled", syncStatus.isInProgress || !!syncStatus.error)
+    )
   );
 </script>
 

web-wallet/src/lib/stores/stores.d.ts

@@ -45,9 +45,9 @@ type WalletStoreContent = {
     isInProgress: boolean;
     current: number;
     latest: number;
+    error: Error | null;
   };
   currentAddress: string;
-  error: Error | null;
   initialized: boolean;
   addresses: string[];
 };

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

@@ -20,9 +20,8 @@ const initialState = {
     maximum: 0,
     value: 0,
   },
-  syncStatus: { isInProgress: false, current: 0, latest: 0 },
+  syncStatus: { isInProgress: false, current: 0, latest: 0, error: null },
   currentAddress: "",
-  error: null,
   initialized: false,
 };
 
@@ -57,7 +56,7 @@ async function updateAfterSync() {
   set({
     ...store,
     balance,
-    syncStatus: { isInProgress: false, current: 0, latest: 0 },
+    syncStatus: { isInProgress: false, current: 0, latest: 0, error: null },
   });
 }
 
@@ -70,8 +69,10 @@ const abortSync = () => {
 const clearLocalData = async () => walletInstance?.reset();
 
 /** @type {WalletStoreServices["clearLocalDataAndInit"]} */
-const clearLocalDataAndInit = (wallet, syncFromBlock) =>
-  wallet.reset().then(() => init(wallet, syncFromBlock));
+const clearLocalDataAndInit = async (wallet, syncFromBlock) => {
+  await wallet.reset();
+  return init(wallet, syncFromBlock);
+};
 
 /** @type {WalletStoreServices["getCurrentBlockHeight"]} */
 const getCurrentBlockHeight = async () => Wallet.networkBlockHeight;
@@ -109,7 +110,7 @@ async function init(wallet, syncFromBlock) {
     currentAddress,
     initialized: true,
   });
-  sync(syncFromBlock);
+  await sync(syncFromBlock);
 }
 
 /** @type {WalletStoreServices["setCurrentAddress"]} */
@@ -136,8 +137,6 @@ const stake = async (amount, gasSettings) =>
 
 /** @type {WalletStoreServices["sync"]} */
 function sync(from) {
-  console.log("calling sync with from", from);
-
   if (!walletInstance) {
     throw new Error("No wallet instance to sync");
   }
@@ -147,28 +146,44 @@ function sync(from) {
 
     set({
       ...store,
-      error: null,
-      syncStatus: { isInProgress: true, current: 0, latest: 0 },
+      syncStatus: {
+        isInProgress: true,
+        current: 0,
+        latest: 0,
+        error: null,
+      },
     });
 
     syncController = new AbortController();
+
+    const syncOptions = {
+      from,
+      signal: syncController.signal,
+      onblock: (current, latest) => {
+        set({
+          ...store,
+          syncStatus: {
+            isInProgress: true,
+            current,
+            latest,
+            error: null,
+          },
+        });
+      },
+    };
+
     syncPromise = walletInstance
-      .sync({
-        from,
-        signal: syncController.signal,
-        onblock: (current, latest) => {
-          console.log("Syncing", current, latest);
-          set({
-            ...store,
-            syncStatus: { isInProgress: true, current, latest },
-          });
-        },
-      })
-      .then(updateAfterSync, (error) => {
+      .sync(syncOptions)
+      .then(updateAfterSync)
+      .catch((error) => {
         set({
           ...store,
-          error,
-          syncStatus: { isInProgress: false, current: 0, latest: 0 },
+          syncStatus: {
+            isInProgress: false,
+            current: 0,
+            latest: 0,
+            error,
+          },
         });
       })
       .finally(() => {
@@ -178,6 +193,7 @@ function sync(from) {
 
   return syncPromise;
 }
+
 /** @type {WalletStoreServices["transfer"]} */
 const transfer = async (to, amount, gasSettings) =>
   syncedAction(() => {

web-wallet/src/lib/wallet/initializeWallet.js

@@ -15,9 +15,9 @@ async function initializeWallet(mnemonicPhrase, syncFrom = undefined) {
   const wallet = getWallet(seed);
   const defaultAddress = (await wallet.getPsks())[0];
 
-  await walletStore.clearLocalDataAndInit(wallet, syncFrom);
-
-  settingsStore.update(setKey("userId", defaultAddress));
+  walletStore.clearLocalDataAndInit(wallet, syncFrom).then(() => {
+    settingsStore.update(setKey("userId", defaultAddress));
+  });
 }
 
 export default initializeWallet;

web-wallet/src/routes/(app)/dashboard/+layout.svelte

@@ -11,7 +11,7 @@
   import { AppAnchorButton } from "$lib/components";
 
   $: ({ network } = $settingsStore);
-  $: ({ syncStatus, error } = $walletStore);
+  $: ({ syncStatus } = $walletStore);
 
   /** @type {null | string} */
   let syncStatusLabel = null;
@@ -26,7 +26,7 @@
     iconVariant = "warning";
     networkStatusIconPath = mdiTimerSand;
     syncStatusLabel = null;
-  } else if (error) {
+  } else if (syncStatus.error) {
     iconVariant = "error";
     networkStatusIconPath = mdiAlertOutline;
     syncStatusLabel = `Dusk ${network} - Sync Failed`;
@@ -50,9 +50,9 @@
       <div class="footer__network-status">
         <Icon
           className="footer__network-status-icon footer__network-status-icon--{iconVariant}"
-          data-tooltip-disabled={!error}
+          data-tooltip-disabled={!syncStatus.error}
           data-tooltip-id="main-tooltip"
-          data-tooltip-text={error?.message}
+          data-tooltip-text={syncStatus.error?.message}
           data-tooltip-type="error"
           path={networkStatusIconPath}
           size="large"
@@ -80,7 +80,7 @@
         </div>
       </div>
       <div class="footer__actions">
-        {#if error}
+        {#if syncStatus.error}
           <Button
             aria-label="Retry synchronization"
             className="footer__actions-button footer__actions-button--retry"

web-wallet/src/routes/(app)/dashboard/+page.svelte

@@ -57,7 +57,7 @@
   let selectedTab = tabItems[0]?.id ?? "";
 
   $: selectedContract = find(enabledContracts, hasKeyValue("id", selectedTab));
-  $: ({ balance, currentAddress, addresses, syncStatus, error } = $walletStore);
+  $: ({ balance, currentAddress, addresses, syncStatus } = $walletStore);
   $: ({ currentOperation } = $operationsStore);
 
   onDestroy(() => {
@@ -128,7 +128,7 @@
       {language}
       limit={dashboardTransactionLimit}
       isSyncing={syncStatus.isInProgress}
-      syncError={error}
+      syncError={syncStatus.error}
     />
   {/if}
 </div>

web-wallet/src/routes/(app)/dashboard/transactions/+page.svelte

@@ -16,7 +16,7 @@
     fiatPrice = prices[currency.toLowerCase()];
   });
 
-  $: ({ balance, syncStatus, error } = $walletStore);
+  $: ({ balance, syncStatus } = $walletStore);
 </script>
 
 <div class="transactions">
@@ -34,7 +34,7 @@
     items={walletStore.getTransactionsHistory()}
     {language}
     isSyncing={syncStatus.isInProgress}
-    syncError={error}
+    syncError={syncStatus.error}
   />
 </div>
 

web-wallet/src/routes/(app)/settings/+page.svelte

@@ -64,7 +64,7 @@
   /** @type {Error | null} */
   let resetError = null;
 
-  $: ({ isSyncing } = $walletStore);
+  $: ({ syncStatus } = $walletStore);
 </script>
 
 <section class="settings">
@@ -187,8 +187,8 @@
       />
       <Button
         className="settings-group__button--state--danger"
-        disabled={isSyncing}
-        data-tooltip-disabled={!isSyncing}
+        disabled={syncStatus.isInProgress}
+        data-tooltip-disabled={!syncStatus.isInProgress}
         data-tooltip-id="main-tooltip"
         data-tooltip-text="Not allowed to reset while syncing"
         data-tooltip-type="warning"

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

@@ -7,7 +7,8 @@
   import { mdiCubeOutline } from "@mdi/js";
   $: ({ language } = $settingsStore);
 
-  $: currentBlock = 0;
+  /** @type {number} */
+  let currentBlock;
 
   walletStore.getCurrentBlockHeight().then((block) => {
     currentBlock = block;

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

@@ -117,7 +117,6 @@
       showStepper={true}
       nextButton={{
         action: async () => {
-          console.log("blockHeight", blockHeight);
           await initializeWallet(mnemonicPhrase, blockHeight);
           mnemonicPhrase = [];
         },

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

@@ -18,7 +18,8 @@
   /** @type {boolean} */
   export let isToggled = false;
 
-  $: currentNetworkBlock = 0;
+  /** @type {number} */
+  let currentNetworkBlock;
 
   walletStore.getCurrentBlockHeight().then((block) => {
     currentNetworkBlock = block;
@@ -27,12 +28,17 @@
   $: isValid =
     !isToggled || (blockHeight >= 0 && blockHeight <= currentNetworkBlock);
 
-  $: if (isToggled) {
+  const resetBlockHeight = () => {
     blockHeight = 0;
-  }
+  };
 </script>
 
-<ToggleableCard bind:isToggled iconPath={mdiCubeOutline} heading="Block Height">
+<ToggleableCard
+  bind:isToggled
+  iconPath={mdiCubeOutline}
+  heading="Block Height"
+  on:toggle={resetBlockHeight}
+>
   <Textbox type="number" bind:value={blockHeight} placeholder="Block Height" />
   {#if currentNetworkBlock}
     <span class="block-height-meta"