web-wallet: Retrieve and cache stake info using w3sper

Resolves @2946

web-wallet/src/__mocks__/AccountSyncer.js

@@ -1,5 +1,7 @@
 import { AccountSyncer } from "$lib/vendor/w3sper.js/src/network/syncer/account";
 
+import { stakeInfo } from "$lib/mock-data";
+
 class AccountSyncerMock extends AccountSyncer {
   /**
    * @param {import("$lib/vendor/w3sper.js/src/mod").Network} network
@@ -9,18 +11,23 @@ class AccountSyncerMock extends AccountSyncer {
   }
 
   /**
-   *
    * @param {Array<import("$lib/vendor/w3sper.js/src/mod").Profile>} profiles
-   * @param {Record<string, any>} [options={}]
    * @returns {Promise<AccountBalance[]>}
    */
-  // eslint-disable-next-line no-unused-vars
-  async balances(profiles, options = {}) {
+  async balances(profiles) {
     return Array(profiles.length).fill({
       nonce: 9876n,
       value: 12_345_000_000_000n,
     });
   }
+
+  /**
+   * @param {Array<import("$lib/vendor/w3sper.js/src/mod").Profile>} profiles
+   * @returns {Promise<StakeInfo[]>}
+   */
+  async stakes(profiles) {
+    return Array(profiles.length).fill(stakeInfo);
+  }
 }
 
 export default AccountSyncerMock;

web-wallet/src/__mocks__/mockedWalletStore.js

@@ -1,5 +1,7 @@
 import { ProfileGenerator } from "$lib/vendor/w3sper.js/src/profile";
 
+import { stakeInfo } from "$lib/mock-data";
+
 import { mockReadableStore } from "$lib/dusk/test-helpers";
 
 const seed = new Uint8Array(64);
@@ -20,6 +22,7 @@ const content = {
   currentProfile,
   initialized: true,
   profiles,
+  stakeInfo,
   syncStatus: {
     error: null,
     from: 0n,

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

@@ -14,7 +14,7 @@
   import { mdiArrowLeft } from "@mdi/js";
   import { Gas } from "$lib/vendor/w3sper.js/src/mod";
 
-  import { createCurrencyFormatter } from "$lib/dusk/currency";
+  import { createCurrencyFormatter, luxToDusk } from "$lib/dusk/currency";
   import { getLastTransactionHash } from "$lib/transactions";
   import {
     gasStore,
@@ -35,6 +35,14 @@
 
   const gasLimits = $gasStore;
 
+  /**
+   * Temporary replacement for the old `walletStore.getStakeInfo`
+   * function.
+   * The UI needs to be updated to just use the `stakeInfo` property
+   * directly.
+   */
+  const getStakeInfo = async () => $walletStore.stakeInfo;
+
   const collectSettings = collect([
     pick([
       "gasLimit",
@@ -47,11 +55,11 @@
     getKey("minAllowedStake"),
   ]);
 
-  /** @type {Record<string, (info: WalletStakeInfo) => boolean>} */
+  /** @type {Record<string, (info: StakeInfo) => boolean>} */
   const disablingConditions = {
-    stake: (info) => info.has_staked,
-    unstake: (info) => !info.has_staked,
-    "withdraw-rewards": (info) => info.reward <= 0,
+    stake: (info) => !!info.amount,
+    unstake: (info) => !info.amount || info.amount.total === 0n,
+    "withdraw-rewards": (info) => info.reward <= 0n,
   };
 
   /** @type {Record<StakeType, (...args: any[]) => Promise<string>>} */
@@ -83,7 +91,7 @@
    * otherwise the descriptor takes precedence.
    *
    * @param {ContractOperation[]} operations
-   * @param {WalletStakeInfo} stakeInfo
+   * @param {StakeInfo} stakeInfo
    * @returns {ContractOperation[]}
    */
   const getOperations = (operations, stakeInfo) =>
@@ -96,27 +104,29 @@
     );
 
   /**
-   * @param {WalletStakeInfo} stakeInfo
+   * @param {StakeInfo} stakeInfo
    * @param {bigint} spendable
    * @returns {ContractStatus[]}
    */
   const getStatuses = (stakeInfo, spendable) => [
     {
       label: "Spendable",
-      value: duskFormatter(spendable),
+      value: duskFormatter(luxToDusk(spendable)),
     },
     {
       label: "Total Locked",
-      value: duskFormatter(stakeInfo.amount),
+      value: stakeInfo.amount
+        ? duskFormatter(luxToDusk(stakeInfo.amount.locked))
+        : "N/A",
     },
     {
       label: "Rewards",
-      value: duskFormatter(stakeInfo.reward),
+      value: duskFormatter(luxToDusk(stakeInfo.reward)),
     },
   ];
 
   /**
-   * @param {WalletStakeInfo} stakeInfo
+   * @param {StakeInfo} stakeInfo
    * @returns {(operation: ContractOperation) => ContractOperation}
    */
   const updateOperationDisabledStatus = (stakeInfo) => (operation) => ({
@@ -137,7 +147,7 @@
     gap="medium"
     errorMessage="Failed to retrieve stake info"
     errorVariant="details"
-    waitFor={walletStore.getStakeInfo()}
+    waitFor={getStakeInfo()}
   >
     <svelte:fragment slot="pending-content">
       {#if !syncStatus.isInProgress && !syncStatus.error}
@@ -161,9 +171,9 @@
           {minAllowedStake}
           on:operationChange
           on:suppressStakingNotice
-          rewards={stakeInfo.reward}
+          rewards={luxToDusk(stakeInfo.reward)}
           spendable={balance.shielded.spendable}
-          staked={stakeInfo.amount}
+          staked={stakeInfo.amount ? luxToDusk(stakeInfo.amount.total) : 0}
           {statuses}
           {hideStakingNotice}
         />

web-wallet/src/lib/mock-data/cache-stake-info.js

@@ -0,0 +1,17 @@
+export default [
+  {
+    account: "",
+    stakeInfo: {
+      amount: {
+        eligibility: 0n,
+        locked: 0n,
+        total: 1000000000000n,
+        value: 1000000000000n,
+      },
+      faults: 0,
+      hardFaults: 0,
+      nonce: 0n,
+      reward: 11022842680864n,
+    },
+  },
+];

web-wallet/src/lib/mock-data/index.js

@@ -3,6 +3,7 @@ export { default as apiMarketData } from "./api-market-data.json";
 export { default as cacheBalances } from "./cache-balances";
 export { default as cachePendingNotesInfo } from "./cache-pending-notes-info";
 export { default as cacheSpentNotes } from "./cache-spent-notes";
+export { default as cacheStakeInfo } from "./cache-stake-info";
 export { default as cacheSyncInfo } from "./cache-sync-info";
 export { default as cacheUnspentNotes } from "./cache-unspent-notes";
 export { default as stakeInfo } from "./stakeInfo";

web-wallet/src/lib/mock-data/stakeInfo.js

@@ -1,9 +1,15 @@
-/* eslint-disable camelcase */
-
-/** @type {WalletStakeInfo} */
+/** @type {StakeInfo} */
 export default {
-  amount: 1000,
-  has_key: true,
-  has_staked: true,
-  reward: 500,
+  amount: {
+    eligibility: 0n,
+    locked: 0n,
+    get total() {
+      return this.value + this.locked;
+    },
+    value: 1000000000000n,
+  },
+  faults: 0,
+  hardFaults: 0,
+  nonce: 0n,
+  reward: 11022842680864n,
 };