web-wallet: Add UsageIndicator to Balance component

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

@@ -314,7 +314,7 @@
       flex-direction: column;
       justify-content: center;
       align-items: flex-start;
-      gap: var(--gap-medium);
+      gap: var(--medium-gap);
       align-self: stretch;
 
       border-radius: var(--fieldset-border-radius);

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

@@ -1,8 +1,7 @@
 <svelte:options immutable={true} />
 
 <script>
-  import { Icon, Tooltip } from "$lib/dusk/components";
-  import { logo } from "$lib/dusk/icons";
+  import { UsageIndicator } from "$lib/components";
   import { makeClassName } from "$lib/dusk/string";
   import { createCurrencyFormatter } from "$lib/dusk/currency";
 
@@ -27,32 +26,34 @@
   /** @type {number} */
   export let tokens;
 
+  /** @type {number | undefined} */
+  export let shieldedTokensPercentage = undefined;
+
   $: classes = makeClassName(["dusk-balance", className]);
   $: duskFormatter = createCurrencyFormatter(locale, tokenCurrency, 9);
   $: fiatFormatter = createCurrencyFormatter(locale, fiatCurrency, 2);
 </script>
 
 <article {...$$restProps} class={classes}>
   <header class="dusk-balance__header">
-    <h2>Your Balance:</h2>
+    <h2 class="sr-only">Your Balance:</h2>
   </header>
   <p class="dusk-balance__dusk">
     <strong>{duskFormatter(tokens)}</strong>
-    <Icon
-      className="dusk-balance__icon"
-      path={logo}
-      data-tooltip-id="balance-tooltip"
-      data-tooltip-text={tokenCurrency}
-      data-tooltip-place="right"
-    />
+    <strong>{tokenCurrency}</strong>
   </p>
   <p
     class="dusk-balance__fiat"
     class:dusk-balance__fiat--visible={fiatPrice !== undefined && tokens}
   >
     <strong>
-      ({fiatFormatter(fiatPrice ? fiatPrice * tokens : 0)})
+      {fiatFormatter(fiatPrice ? fiatPrice * tokens : 0)}
     </strong>
   </p>
-  <Tooltip id="balance-tooltip" />
+  {#if shieldedTokensPercentage}
+    <UsageIndicator
+      className="dusk-balance__usage"
+      value={shieldedTokensPercentage}
+    />
+  {/if}
 </article>

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

@@ -9,7 +9,10 @@
   /** @type {string | undefined} */
   export let className = undefined;
 
-  /** @type {number} */
+  /**
+   * The percentage of shielded tokens
+   * @type {number}
+   * */
   export let value;
 
   $: classes = makeClassName(["usage-indicator", className]);

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

@@ -66,7 +66,6 @@ describe("Balance", () => {
     const { container } = render(Balance, { ...baseOptions, props });
 
     expect(container.querySelector(".dusk-balance__fiat--visible")).toBeNull();
-
     expect(container.firstChild).toMatchSnapshot();
   });
 
@@ -75,7 +74,24 @@ describe("Balance", () => {
     const { container } = render(Balance, { ...baseOptions, props });
 
     expect(container.querySelector(".dusk-balance__fiat--visible")).toBeNull();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should display the usage indicator if there are shielded tokens", () => {
+    const props = { ...baseProps, shieldedTokensPercentage: 50, tokens: 100 };
+    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 };
+    const { container } = render(Balance, { ...baseOptions, props });
 
+    expect(
+      container.querySelector(".dusk-balance__usage")
+    ).not.toBeInTheDocument();
     expect(container.firstChild).toMatchSnapshot();
   });
 });