web-wallet: Add unshielded balance calculation

Resolves #2753

web-wallet/src/__mocks__/AccountSyncer.js

@@ -0,0 +1,27 @@
+import { AccountSyncer } from "$lib/vendor/w3sper.js/src/network/syncer/account";
+
+class AccountSyncerMock extends AccountSyncer {
+  /**
+   * @param {import("$lib/vendor/w3sper.js/src/mod").Network} network
+   * @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<Array<{ nonce: bigint, value: bigint }>>}
+   */
+  // eslint-disable-next-line no-unused-vars
+  async balances(profiles, options = {}) {
+    return Array(profiles.length).fill({
+      nonce: 9876n,
+      value: 12_345_000_000_000n,
+    });
+  }
+}
+
+export default AccountSyncerMock;

web-wallet/src/__mocks__/mockedWalletStore.js

@@ -12,10 +12,11 @@ const profiles = [
 ];
 const currentProfile = profiles[0];
 const shielded = { spendable: 50_000_000_000_000n, value: 2_345_000_000_000n };
+const unshielded = { nonce: 1234n, value: shielded.value / 2n };
 
 /** @type {WalletStoreContent} */
 const content = {
-  balance: { shielded },
+  balance: { shielded, unshielded },
   currentProfile,
   initialized: true,
   profiles,

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

@@ -50,7 +50,7 @@
       {fiatFormatter(fiatPrice ? fiatPrice * tokens : 0)}
     </strong>
   </p>
-  {#if shieldedTokensPercentage}
+  {#if shieldedTokensPercentage !== undefined}
     <UsageIndicator
       className="dusk-balance__usage"
       value={shieldedTokensPercentage}

web-wallet/src/lib/components/__tests__/Balance.spec.js

@@ -8,6 +8,7 @@ describe("Balance", () => {
     fiatCurrency: "USD",
     fiatPrice: 10,
     locale: "en",
+    shieldedTokensPercentage: 35,
     tokenCurrency: "DUSK",
     tokens: 2_000_000,
   };
@@ -21,6 +22,7 @@ describe("Balance", () => {
   it("renders the Balance component", () => {
     const { container } = render(Balance, baseOptions);
 
+    expect(container.querySelector(".dusk-balance__usage")).toBeInTheDocument();
     expect(container.firstChild).toMatchSnapshot();
   });
 
@@ -77,20 +79,19 @@ describe("Balance", () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it("should display the usage indicator if there are shielded tokens", () => {
+  it("should display the usage indicator if the shielded percentage is zero", () => {
     const props = {
       ...baseProps,
-      shieldedTokensPercentage: 50,
-      tokens: 100,
+      shieldedTokensPercentage: 0,
     };
     const { container } = render(Balance, { ...baseOptions, props });
 
     expect(container.querySelector(".dusk-balance__usage")).toBeInTheDocument();
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it("should not display the usage indicator if there are no shielded tokens", () => {
-    const props = { ...baseProps, tokens: 100 };
+  it("should not display the usage indicator if the shielded percentage is `undefined`", () => {
+    const props = { ...baseProps, shieldedTokensPercentage: undefined };
     const { container } = render(Balance, { ...baseOptions, props });
 
     expect(