web-wallet: Add local w3sper types

web-wallet/.eslintrc.cjs

@@ -35,6 +35,7 @@ module.exports = {
           $app: "node_modules/@sveltejs/kit/src/runtime/app",
           $config: "./src/config",
           $lib: "./src/lib",
+          "@dusk/w3sper": "node_modules/@dusk/w3sper/src/mod.js",
           "@sveltejs/kit": "node_modules/@sveltejs/kit/src/exports/index.js",
           "@testing-library/svelte":
             "node_modules/@testing-library/svelte/src/index.js",

web-wallet/.npmrc

@@ -1 +1,2 @@
 engine-strict=true
+@jsr:registry=https://npm.jsr.io

web-wallet/package.json

@@ -35,6 +35,7 @@
   "type": "module",
   "version": "1.3.0",
   "dependencies": {
+    "@dusk/w3sper": "npm:@jsr/dusk__w3sper@^0.1.0",
     "@floating-ui/dom": "1.6.5",
     "@mdi/js": "7.4.47",
     "@reown/appkit": "1.5.3",

web-wallet/src/app.d.ts

@@ -5,3 +5,16 @@ declare namespace svelteHTML {
     ) => void;
   }
 }
+
+/* Aliases for common w3sper's types */
+
+type AccountBalance = import("@dusk/w3sper").AccountBalance;
+type AccountSyncer = import("@dusk/w3sper").AccountSyncer;
+type AddressBalance = import("@dusk/w3sper").AddressBalance;
+type AddressSyncer = import("@dusk/w3sper").AddressSyncer;
+type Bookmark = import("@dusk/w3sper").Bookmark;
+type Gas = import("@dusk/w3sper").Gas;
+type Network = import("@dusk/w3sper").Network;
+type Profile = import("@dusk/w3sper").Profile;
+type ProfileGenerator = import("@dusk/w3sper").ProfileGenerator;
+type StakeInfo = import("@dusk/w3sper").StakeInfo;

web-wallet/src/lib/__mocks__/AccountSyncer.js

@@ -1,17 +1,18 @@
-import { AccountSyncer } from "$lib/vendor/w3sper.js/src/network/syncer/account";
+// we are importing the file directly to avoid importing our own mock
+import { AccountSyncer } from "$lib/../../node_modules/@dusk/w3sper/src/network/syncer/account";
 
 import { stakeInfo } from "$lib/mock-data";
 
 class AccountSyncerMock extends AccountSyncer {
   /**
-   * @param {import("$lib/vendor/w3sper.js/src/mod").Network} network
+   * @param {Network} network
    */
   constructor(network) {
     super(network);
   }
 
   /**
-   * @param {Array<import("$lib/vendor/w3sper.js/src/mod").Profile>} profiles
+   * @param {Array<Profile>} profiles
    * @returns {Promise<AccountBalance[]>}
    */
   async balances(profiles) {
@@ -22,7 +23,7 @@ class AccountSyncerMock extends AccountSyncer {
   }
 
   /**
-   * @param {Array<import("$lib/vendor/w3sper.js/src/mod").Profile>} profiles
+   * @param {Array<Profile>} profiles
    * @returns {Promise<StakeInfo[]>}
    */
   async stakes(profiles) {

web-wallet/src/lib/__mocks__/AddressSyncer.js

@@ -1,4 +1,5 @@
-import { AddressSyncer } from "$lib/vendor/w3sper.js/src/network/syncer/address";
+// we are importing the file directly to avoid importing our own mock
+import { AddressSyncer } from "$lib/../../node_modules/@dusk/w3sper/src/network/syncer/address";
 
 import { cacheUnspentNotes } from "$lib/mock-data";
 
@@ -33,17 +34,9 @@ class SyncEvent extends CustomEvent {
 
 class AddressSyncerMock extends AddressSyncer {
   /**
-   * @param {import("$lib/vendor/w3sper.js/src/mod").Network} network
+   * @param {Array<Profile>} profiles
    * @param {Record<string, any>} [options={}]
-   */
-  constructor(network, options = {}) {
-    super(network, options);
-  }
-
-  /**
-   * @param {Array<import("$lib/vendor/w3sper.js/src/mod").Profile>} profiles
-   * @param {Record<string, any>} [options={}]
-   * @returns {Promise<ReadableStream<any>>}
+   * @returns {Promise<ReadableStream<[Array<Map<Uint8Array, Uint8Array>>, { blockHeight: bigint; bookmark: bigint; }]>>}
    */
   // eslint-disable-next-line no-unused-vars
   async notes(profiles, options = {}) {
@@ -96,7 +89,7 @@ class AddressSyncerMock extends AddressSyncer {
 
   /**
    * @param {Uint8Array[]} nullifiers
-   * @returns {Promise<Uint8Array[]>}
+   * @returns {Promise<ArrayBuffer[]>}
    */
   // eslint-disable-next-line no-unused-vars
   async spent(nullifiers) {

web-wallet/src/lib/__mocks__/Network.js

@@ -1,4 +1,5 @@
-import { Network } from "$lib/vendor/w3sper.js/src/network/mod";
+// we are importing the file directly to avoid importing our own mock
+import { Network } from "$lib/../../node_modules/@dusk/w3sper/src/network/mod";
 
 class NetworkMock extends Network {
   /** @type {boolean} */
@@ -36,11 +37,18 @@ class NetworkMock extends Network {
     this.#connected = false;
   }
 
-  async execute() {
-    return {
+  /**
+   * For our current tests we always return a `ShieldedTransferResult`
+   * @param {import("@dusk/w3sper").BasicTransfer} tx
+   * @returns {Promise<import("@dusk/w3sper").ShieldedTransferResult>}
+   */
+  // eslint-disable-next-line no-unused-vars
+  async execute(tx) {
+    return Object.freeze({
+      buffer: new Uint8Array(),
       hash: "821a88f10f823b74fa3489c5acc6e31b7e2e96d7adff47137f20f4af61612415",
       nullifiers: [],
-    };
+    });
   }
 }
 

web-wallet/src/lib/__mocks__/Transactions.js

@@ -72,7 +72,7 @@ class FakeRuesScope {
   }
 }
 
-class TransactionsMock {
+export class Transactions {
   #scope;
 
   constructor() {
@@ -98,5 +98,3 @@ class TransactionsMock {
     return this.#scope.once;
   }
 }
-
-export default TransactionsMock;

web-wallet/src/lib/__mocks__/mockedWalletStore.js

@@ -1,11 +1,11 @@
-import { ProfileGenerator } from "$lib/vendor/w3sper.js/src/profile";
+import { ProfileGenerator } from "@dusk/w3sper";
 
 import { stakeInfo } from "$lib/mock-data";
 
 import { mockReadableStore } from "$lib/dusk/test-helpers";
 
 const seed = new Uint8Array(64);
-const seeder = () => seed;
+const seeder = async () => seed;
 const profileGenerator = new ProfileGenerator(seeder);
 const profiles = [
   await profileGenerator.default,

web-wallet/src/lib/components/AddressPicker/AddressPicker.svelte

@@ -12,10 +12,10 @@
 
   import "./AddressPicker.css";
 
-  /** @type {import("$lib/vendor/w3sper.js/src/mod").Profile | null} */
+  /** @type {Profile | null} */
   export let currentProfile;
 
-  /** @type {import("$lib/vendor/w3sper.js/src/mod").Profile[]} */
+  /** @type {Profile[]} */
   export let profiles;
 
   /** @type {boolean} */

web-wallet/src/lib/components/Allocate/Allocate.svelte

@@ -22,7 +22,7 @@
   } from "$lib/dusk/components";
   import { GasFee, GasSettings, OperationResult } from "$lib/components";
   import { walletStore } from "$lib/stores";
-  import { Gas } from "$lib/vendor/w3sper.js/src/mod";
+  import { Gas } from "@dusk/w3sper";
   import { MESSAGES } from "$lib/constants";
   import Banner from "../Banner/Banner.svelte";
 

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

@@ -2,7 +2,7 @@
 
 <script>
   import { getKey, hasKeyValue, map, mapWith, setKey, when } from "lamb";
-  import { Gas } from "$lib/vendor/w3sper.js/src/mod";
+  import { Gas } from "@dusk/w3sper";
   import {
     gasStore,
     operationsStore,

web-wallet/src/lib/contracts/executeSend.js

@@ -1,5 +1,5 @@
 import { getKey } from "lamb";
-import { Gas } from "$lib/vendor/w3sper.js/src/mod";
+import { Gas } from "@dusk/w3sper";
 
 import { walletStore } from "$lib/stores";
 

web-wallet/src/lib/dusk/string/getAddressInfo.js

@@ -1,4 +1,4 @@
-import { ProfileGenerator } from "$lib/vendor/w3sper.js/src/mod";
+import { ProfileGenerator } from "@dusk/w3sper";
 
 /**
  * Validates if an input is a shielded or an public address, with feedback on failure or success.

web-wallet/src/lib/stores/__tests__/networkStore.spec.js

@@ -9,11 +9,7 @@ import {
 } from "vitest";
 import { get } from "svelte/store";
 
-import {
-  AccountSyncer,
-  AddressSyncer,
-  Network,
-} from "$lib/vendor/w3sper.js/src/mod";
+import { AccountSyncer, AddressSyncer, Network } from "@dusk/w3sper";
 
 describe("Network store", async () => {
   const blockHeight = 999_888_777n;

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

@@ -8,12 +8,7 @@ import {
   vi,
 } from "vitest";
 import { get } from "svelte/store";
-import {
-  Bookkeeper,
-  Gas,
-  Network,
-  ProfileGenerator,
-} from "$lib/vendor/w3sper.js/src/mod";
+import { Bookkeeper, Gas, Network, ProfileGenerator } from "@dusk/w3sper";
 import { generateMnemonic } from "bip39";
 
 import { stakeInfo } from "$lib/mock-data";
@@ -312,6 +307,7 @@ describe("Wallet store", async () => {
     const memo = "";
 
     const phoenixTxResult = {
+      buffer: new Uint8Array(),
       hash: "some-tx-id",
       nullifiers: [],
     };
@@ -350,9 +346,7 @@ describe("Wallet store", async () => {
       vi.useRealTimers();
 
       const currentlyCachedBalance =
-        await new WalletTreasury().getCachedBalance(
-          defaultProfile.address.toString()
-        );
+        await new WalletTreasury().getCachedBalance(defaultProfile);
       const newNonce = currentlyCachedBalance.unshielded.nonce + 1n;
 
       let expectedTx;
@@ -371,6 +365,7 @@ describe("Wallet store", async () => {
         };
       } else {
         executeSpy.mockResolvedValueOnce({
+          buffer: new Uint8Array(),
           hash: phoenixTxResult.hash,
           nonce: newNonce,
         });

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

@@ -1,15 +1,19 @@
 import { writable } from "svelte/store";
 import { browser } from "$app/environment";
 import { always, condition, getKey, getPath, isUndefined, when } from "lamb";
-
 import {
   AccountSyncer,
   AddressSyncer,
   Network,
-} from "$lib/vendor/w3sper.js/src/mod";
+  useAsProtocolDriver,
+} from "@dusk/w3sper";
+
 import { rejectAfter } from "$lib/dusk/promise";
 import { makeNodeUrl } from "$lib/url";
 
+// eslint-disable-next-line import/no-unresolved
+import wasmPath from "$lib/vendor/dusk_wallet_core.wasm?url";
+
 function getNetworkUrl() {
   if (browser) {
     return makeNodeUrl();
@@ -55,7 +59,13 @@ const connect = async () =>
   network.connected
     ? network
     : Promise.race([
-        network.connect(),
+        fetch(wasmPath)
+          .then((response) => response.arrayBuffer())
+          .then((buffer) => {
+            useAsProtocolDriver(new Uint8Array(buffer));
+
+            return network.connect();
+          }),
         rejectAfter(
           10000,
           new Error("Timed out while connecting to the network")
@@ -68,9 +78,8 @@ const disconnect = () => network.disconnect();
 /** @type {() => Promise<AccountSyncer>} */
 const getAccountSyncer = () => connect().then(() => new AccountSyncer(network));
 
-/** @type {(options?: NetworkSyncerOptions) => Promise<AddressSyncer>} */
-const getAddressSyncer = (options) =>
-  connect().then(() => new AddressSyncer(network, options));
+/** @type {() => Promise<AddressSyncer>} */
+const getAddressSyncer = () => connect().then(() => new AddressSyncer(network));
 
 /** @type {NetworkStoreServices["getBlockHashByHeight"]} */
 const getBlockHashByHeight = (height) =>