From 6c7b28b035272a8e66cc19a3c3a12901ec52cebb Mon Sep 17 00:00:00 2001
From: Kieran Hall <kieran.hall@gmail.com>
Date: Sat, 31 Aug 2024 18:37:32 +0200
Subject: [PATCH] web-wallet: Add UsageIndicator to Balance component

Resolves #2234
---
 .../lib/components/Allocate/Allocate.svelte   |   2 +-
 .../src/lib/components/Balance/Balance.svelte |  24 +-
 .../UsageIndicator/UsageIndicator.svelte      |   5 +-
 .../lib/components/__tests__/Balance.spec.js  |  18 +-
 .../__snapshots__/Balance.spec.js.snap        | 270 ++++++++--------
 .../src/routes/(app)/dashboard/+layout.svelte |   3 +
 .../__snapshots__/layout.spec.js.snap         | 296 ++++++++++++------
 .../__tests__/__snapshots__/page.spec.js.snap |  20 +-
 .../components-showcase/Balances.svelte       |  14 +-
 .../src/style/dusk-components/balance.css     |  10 +-
 web-wallet/src/style/dusk/language.css        |   1 +
 11 files changed, 417 insertions(+), 246 deletions(-)

diff --git a/web-wallet/src/lib/components/Allocate/Allocate.svelte b/web-wallet/src/lib/components/Allocate/Allocate.svelte
index e7714c5d07..53af14e372 100644
--- a/web-wallet/src/lib/components/Allocate/Allocate.svelte
+++ b/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);
diff --git a/web-wallet/src/lib/components/Balance/Balance.svelte b/web-wallet/src/lib/components/Balance/Balance.svelte
index bfc78777dc..366dcb68cc 100644
--- a/web-wallet/src/lib/components/Balance/Balance.svelte
+++ b/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,6 +26,9 @@
   /** @type {number} */
   export let tokens;
 
+  /** @type {number | undefined} */
+  export let shieldedTokens = undefined;
+
   $: classes = makeClassName(["dusk-balance", className]);
   $: duskFormatter = createCurrencyFormatter(locale, tokenCurrency, 9);
   $: fiatFormatter = createCurrencyFormatter(locale, fiatCurrency, 2);
@@ -34,25 +36,23 @@
 
 <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 shieldedTokens}
+    <div class="dusk-balance__usage">
+      <UsageIndicator value={shieldedTokens} />
+    </div>
+  {/if}
 </article>
diff --git a/web-wallet/src/lib/components/UsageIndicator/UsageIndicator.svelte b/web-wallet/src/lib/components/UsageIndicator/UsageIndicator.svelte
index f57762995f..99da6c2f78 100644
--- a/web-wallet/src/lib/components/UsageIndicator/UsageIndicator.svelte
+++ b/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]);
diff --git a/web-wallet/src/lib/components/__tests__/Balance.spec.js b/web-wallet/src/lib/components/__tests__/Balance.spec.js
index 499fcadbe7..cf0235f680 100644
--- a/web-wallet/src/lib/components/__tests__/Balance.spec.js
+++ b/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, shieldedTokens: 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();
   });
 });
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/Balance.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/Balance.spec.js.snap
index 66b21bf4b5..454f310b93 100644
--- a/web-wallet/src/lib/components/__tests__/__snapshots__/Balance.spec.js.snap
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/Balance.spec.js.snap
@@ -7,7 +7,9 @@ exports[`Balance > renders the Balance component 1`] = `
   <header
     class="dusk-balance__header"
   >
-    <h2>
+    <h2
+      class="sr-only"
+    >
       Your Balance:
     </h2>
   </header>
@@ -19,40 +21,103 @@ exports[`Balance > renders the Balance component 1`] = `
       2,000,000.000000000
     </strong>
      
-    <svg
-      class="dusk-icon dusk-icon--size--default dusk-balance__icon"
-      data-tooltip-id="balance-tooltip"
-      data-tooltip-place="right"
-      data-tooltip-text="DUSK"
-      role="graphics-symbol"
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M12.335 0.005a12.186 12.186 0 0 0 -2.58 0.204C4.2 1.259 0 6.14 0 11.999 0 17.859 4.203 22.74 9.759 23.79c0.726 0.138 1.476 0.21 2.241 0.21 6.789 0 12.261 -5.64 11.991 -12.49C23.741 5.249 18.599 0.173 12.335 0.005Zm0.207 21.58c-0.204 0.012 -0.336 -0.222 -0.21 -0.384 1.974 -2.541 3.153 -5.733 3.153 -9.202 0 -3.468 -1.176 -6.663 -3.153 -9.202 -0.126 -0.162 0.003 -0.396 0.207 -0.384 5.052 0.282 9.06 4.465 9.06 9.586 0 5.121 -4.005 9.304 -9.057 9.586Z"
-      />
-    </svg>
-    
+    <strong>
+      DUSK
+    </strong>
   </p>
    
   <p
     class="dusk-balance__fiat dusk-balance__fiat--visible"
   >
     <strong>
-      (
       $20,000,000.00
-      )
     </strong>
   </p>
    
+</article>
+`;
+
+exports[`Balance > should display the usage indicator if there are shielded tokens 1`] = `
+<article
+  class="dusk-balance"
+>
+  <header
+    class="dusk-balance__header"
+  >
+    <h2
+      class="sr-only"
+    >
+      Your Balance:
+    </h2>
+  </header>
+   
+  <p
+    class="dusk-balance__dusk"
+  >
+    <strong>
+      100.000000000
+    </strong>
+     
+    <strong>
+      DUSK
+    </strong>
+  </p>
+   
+  <p
+    class="dusk-balance__fiat dusk-balance__fiat--visible"
+  >
+    <strong>
+      $1,000.00
+    </strong>
+  </p>
    
   <div
-    aria-hidden="true"
-    class="dusk-tooltip dusk-tooltip-top dusk-tooltip-info"
-    id="balance-tooltip"
-    role="tooltip"
-    style="left: 0px; top: 0px;"
+    class="dusk-balance__usage"
   >
-    
+    <div
+      class="usage-indicator"
+    >
+      <svg
+        class="dusk-icon dusk-icon--size--default usage-indicator__icon"
+        data-tooltip-id="main-tooltip"
+        data-tooltip-text="You have put 50% of your funds in your shielded account"
+        role="graphics-symbol"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.1 14.8,9.5V11C15.4,11 16,11.6 16,12.3V15.8C16,16.4 15.4,17 14.7,17H9.2C8.6,17 8,16.4 8,15.7V12.2C8,11.6 8.6,11 9.2,11V9.5C9.2,8.1 10.6,7 12,7M12,8.2C11.2,8.2 10.5,8.7 10.5,9.5V11H13.5V9.5C13.5,8.7 12.8,8.2 12,8.2Z"
+        />
+      </svg>
+      
+       
+      <div
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="50"
+        aria-valuetext="You have put 50% of your funds in your shielded account"
+        class="usage-indicator__meter"
+        role="meter"
+      >
+        <div
+          aria-hidden="true"
+          class="usage-indicator__meter-bar"
+          style="width: 50%;"
+        />
+      </div>
+       
+      <svg
+        class="dusk-icon dusk-icon--size--default usage-indicator__icon"
+        data-tooltip-id="main-tooltip"
+        data-tooltip-text="You have put 50% of your funds in your unshielded account"
+        role="graphics-symbol"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M21 11C21 16.5 17.2 21.7 12 23C6.8 21.7 3 16.5 3 11V5L12 1L21 5V11M12 21C15.8 20 19 15.5 19 11.2V6.3L12 3.2L5 6.3V11.2C5 15.5 8.2 20 12 21M14.8 11H10.5V8.5C10.5 7.7 11.2 7.2 12 7.2S13.5 7.7 13.5 8.5V9H14.8V8.5C14.8 7.1 13.4 6 12 6S9.2 7.1 9.2 8.5V11C8.6 11 8 11.6 8 12.2V15.7C8 16.4 8.6 17 9.2 17H14.7C15.4 17 16 16.4 16 15.8V12.3C16 11.6 15.4 11 14.8 11Z"
+        />
+      </svg>
+      
+    </div>
   </div>
 </article>
 `;
@@ -64,7 +129,9 @@ exports[`Balance > should not display the fiat value if the fiat price is \`unde
   <header
     class="dusk-balance__header"
   >
-    <h2>
+    <h2
+      class="sr-only"
+    >
       Your Balance:
     </h2>
   </header>
@@ -76,41 +143,19 @@ exports[`Balance > should not display the fiat value if the fiat price is \`unde
       2,000,000.000000000
     </strong>
      
-    <svg
-      class="dusk-icon dusk-icon--size--default dusk-balance__icon"
-      data-tooltip-id="balance-tooltip"
-      data-tooltip-place="right"
-      data-tooltip-text="DUSK"
-      role="graphics-symbol"
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M12.335 0.005a12.186 12.186 0 0 0 -2.58 0.204C4.2 1.259 0 6.14 0 11.999 0 17.859 4.203 22.74 9.759 23.79c0.726 0.138 1.476 0.21 2.241 0.21 6.789 0 12.261 -5.64 11.991 -12.49C23.741 5.249 18.599 0.173 12.335 0.005Zm0.207 21.58c-0.204 0.012 -0.336 -0.222 -0.21 -0.384 1.974 -2.541 3.153 -5.733 3.153 -9.202 0 -3.468 -1.176 -6.663 -3.153 -9.202 -0.126 -0.162 0.003 -0.396 0.207 -0.384 5.052 0.282 9.06 4.465 9.06 9.586 0 5.121 -4.005 9.304 -9.057 9.586Z"
-      />
-    </svg>
-    
+    <strong>
+      DUSK
+    </strong>
   </p>
    
   <p
     class="dusk-balance__fiat"
   >
     <strong>
-      (
       $0.00
-      )
     </strong>
   </p>
    
-   
-  <div
-    aria-hidden="true"
-    class="dusk-tooltip dusk-tooltip-top dusk-tooltip-info"
-    id="balance-tooltip"
-    role="tooltip"
-    style="left: 0px; top: 0px;"
-  >
-    
-  </div>
 </article>
 `;
 
@@ -121,7 +166,9 @@ exports[`Balance > should not display the fiat value if there are no tokens 1`]
   <header
     class="dusk-balance__header"
   >
-    <h2>
+    <h2
+      class="sr-only"
+    >
       Your Balance:
     </h2>
   </header>
@@ -133,41 +180,56 @@ exports[`Balance > should not display the fiat value if there are no tokens 1`]
       0.000000000
     </strong>
      
-    <svg
-      class="dusk-icon dusk-icon--size--default dusk-balance__icon"
-      data-tooltip-id="balance-tooltip"
-      data-tooltip-place="right"
-      data-tooltip-text="DUSK"
-      role="graphics-symbol"
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M12.335 0.005a12.186 12.186 0 0 0 -2.58 0.204C4.2 1.259 0 6.14 0 11.999 0 17.859 4.203 22.74 9.759 23.79c0.726 0.138 1.476 0.21 2.241 0.21 6.789 0 12.261 -5.64 11.991 -12.49C23.741 5.249 18.599 0.173 12.335 0.005Zm0.207 21.58c-0.204 0.012 -0.336 -0.222 -0.21 -0.384 1.974 -2.541 3.153 -5.733 3.153 -9.202 0 -3.468 -1.176 -6.663 -3.153 -9.202 -0.126 -0.162 0.003 -0.396 0.207 -0.384 5.052 0.282 9.06 4.465 9.06 9.586 0 5.121 -4.005 9.304 -9.057 9.586Z"
-      />
-    </svg>
-    
+    <strong>
+      DUSK
+    </strong>
   </p>
    
   <p
     class="dusk-balance__fiat"
   >
     <strong>
-      (
       $0.00
-      )
     </strong>
   </p>
    
+</article>
+`;
+
+exports[`Balance > should not display the usage indicator if there are no shielded tokens 1`] = `
+<article
+  class="dusk-balance"
+>
+  <header
+    class="dusk-balance__header"
+  >
+    <h2
+      class="sr-only"
+    >
+      Your Balance:
+    </h2>
+  </header>
    
-  <div
-    aria-hidden="true"
-    class="dusk-tooltip dusk-tooltip-top dusk-tooltip-info"
-    id="balance-tooltip"
-    role="tooltip"
-    style="left: 0px; top: 0px;"
+  <p
+    class="dusk-balance__dusk"
   >
-    
-  </div>
+    <strong>
+      100.000000000
+    </strong>
+     
+    <strong>
+      DUSK
+    </strong>
+  </p>
+   
+  <p
+    class="dusk-balance__fiat dusk-balance__fiat--visible"
+  >
+    <strong>
+      $1,000.00
+    </strong>
+  </p>
+   
 </article>
 `;
 
@@ -178,7 +240,9 @@ exports[`Balance > should update the Balance component when the props change 1`]
   <header
     class="dusk-balance__header"
   >
-    <h2>
+    <h2
+      class="sr-only"
+    >
       Your Balance:
     </h2>
   </header>
@@ -190,41 +254,19 @@ exports[`Balance > should update the Balance component when the props change 1`]
       2,000,000.000000000
     </strong>
      
-    <svg
-      class="dusk-icon dusk-icon--size--default dusk-balance__icon"
-      data-tooltip-id="balance-tooltip"
-      data-tooltip-place="right"
-      data-tooltip-text="DUSK"
-      role="graphics-symbol"
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M12.335 0.005a12.186 12.186 0 0 0 -2.58 0.204C4.2 1.259 0 6.14 0 11.999 0 17.859 4.203 22.74 9.759 23.79c0.726 0.138 1.476 0.21 2.241 0.21 6.789 0 12.261 -5.64 11.991 -12.49C23.741 5.249 18.599 0.173 12.335 0.005Zm0.207 21.58c-0.204 0.012 -0.336 -0.222 -0.21 -0.384 1.974 -2.541 3.153 -5.733 3.153 -9.202 0 -3.468 -1.176 -6.663 -3.153 -9.202 -0.126 -0.162 0.003 -0.396 0.207 -0.384 5.052 0.282 9.06 4.465 9.06 9.586 0 5.121 -4.005 9.304 -9.057 9.586Z"
-      />
-    </svg>
-    
+    <strong>
+      DUSK
+    </strong>
   </p>
    
   <p
     class="dusk-balance__fiat dusk-balance__fiat--visible"
   >
     <strong>
-      (
       $20,000,000.00
-      )
     </strong>
   </p>
    
-   
-  <div
-    aria-hidden="true"
-    class="dusk-tooltip dusk-tooltip-top dusk-tooltip-info"
-    id="balance-tooltip"
-    role="tooltip"
-    style="left: 0px; top: 0px;"
-  >
-    
-  </div>
 </article>
 `;
 
@@ -235,7 +277,9 @@ exports[`Balance > should update the Balance component when the props change 2`]
   <header
     class="dusk-balance__header"
   >
-    <h2>
+    <h2
+      class="sr-only"
+    >
       Your Balance:
     </h2>
   </header>
@@ -247,40 +291,18 @@ exports[`Balance > should update the Balance component when the props change 2`]
       4.000.000,000000000
     </strong>
      
-    <svg
-      class="dusk-icon dusk-icon--size--default dusk-balance__icon"
-      data-tooltip-id="balance-tooltip"
-      data-tooltip-place="right"
-      data-tooltip-text="DUSK"
-      role="graphics-symbol"
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M12.335 0.005a12.186 12.186 0 0 0 -2.58 0.204C4.2 1.259 0 6.14 0 11.999 0 17.859 4.203 22.74 9.759 23.79c0.726 0.138 1.476 0.21 2.241 0.21 6.789 0 12.261 -5.64 11.991 -12.49C23.741 5.249 18.599 0.173 12.335 0.005Zm0.207 21.58c-0.204 0.012 -0.336 -0.222 -0.21 -0.384 1.974 -2.541 3.153 -5.733 3.153 -9.202 0 -3.468 -1.176 -6.663 -3.153 -9.202 -0.126 -0.162 0.003 -0.396 0.207 -0.384 5.052 0.282 9.06 4.465 9.06 9.586 0 5.121 -4.005 9.304 -9.057 9.586Z"
-      />
-    </svg>
-    
+    <strong>
+      DUSK
+    </strong>
   </p>
    
   <p
     class="dusk-balance__fiat dusk-balance__fiat--visible"
   >
     <strong>
-      (
       80.000.000,00 €
-      )
     </strong>
   </p>
    
-   
-  <div
-    aria-hidden="true"
-    class="dusk-tooltip dusk-tooltip-top dusk-tooltip-info"
-    id="balance-tooltip"
-    role="tooltip"
-    style="left: 0px; top: 0px;"
-  >
-    
-  </div>
 </article>
 `;
diff --git a/web-wallet/src/routes/(app)/dashboard/+layout.svelte b/web-wallet/src/routes/(app)/dashboard/+layout.svelte
index 984970be71..bf168a9e74 100644
--- a/web-wallet/src/routes/(app)/dashboard/+layout.svelte
+++ b/web-wallet/src/routes/(app)/dashboard/+layout.svelte
@@ -66,6 +66,9 @@
       locale={language}
       tokenCurrency="DUSK"
       tokens={balance.value}
+      shieldedTokens={import.meta.env.VITE_CONTRACT_ALLOCATE_DISABLED
+        ? (balance.value / balance.value) * 100
+        : undefined}
     />
 
     <slot />
diff --git a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
index a2e831d6e0..126850b901 100644
--- a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
+++ b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
@@ -78,7 +78,9 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
         <header
           class="dusk-balance__header"
         >
-          <h2>
+          <h2
+            class="sr-only"
+          >
             Your Balance:
           </h2>
         </header>
@@ -90,40 +92,66 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
             2,345.000000000
           </strong>
            
-          <svg
-            class="dusk-icon dusk-icon--size--default dusk-balance__icon"
-            data-tooltip-id="balance-tooltip"
-            data-tooltip-place="right"
-            data-tooltip-text="DUSK"
-            role="graphics-symbol"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12.335 0.005a12.186 12.186 0 0 0 -2.58 0.204C4.2 1.259 0 6.14 0 11.999 0 17.859 4.203 22.74 9.759 23.79c0.726 0.138 1.476 0.21 2.241 0.21 6.789 0 12.261 -5.64 11.991 -12.49C23.741 5.249 18.599 0.173 12.335 0.005Zm0.207 21.58c-0.204 0.012 -0.336 -0.222 -0.21 -0.384 1.974 -2.541 3.153 -5.733 3.153 -9.202 0 -3.468 -1.176 -6.663 -3.153 -9.202 -0.126 -0.162 0.003 -0.396 0.207 -0.384 5.052 0.282 9.06 4.465 9.06 9.586 0 5.121 -4.005 9.304 -9.057 9.586Z"
-            />
-          </svg>
-          
+          <strong>
+            DUSK
+          </strong>
         </p>
          
         <p
           class="dusk-balance__fiat"
         >
           <strong>
-            (
             $0.00
-            )
           </strong>
         </p>
          
-         
         <div
-          aria-hidden="true"
-          class="dusk-tooltip dusk-tooltip-top dusk-tooltip-info"
-          id="balance-tooltip"
-          role="tooltip"
-          style="left: 0px; top: 0px;"
+          class="dusk-balance__usage"
         >
-          
+          <div
+            class="usage-indicator"
+          >
+            <svg
+              class="dusk-icon dusk-icon--size--default usage-indicator__icon"
+              data-tooltip-id="main-tooltip"
+              data-tooltip-text="You have put 100% of your funds in your shielded account"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.1 14.8,9.5V11C15.4,11 16,11.6 16,12.3V15.8C16,16.4 15.4,17 14.7,17H9.2C8.6,17 8,16.4 8,15.7V12.2C8,11.6 8.6,11 9.2,11V9.5C9.2,8.1 10.6,7 12,7M12,8.2C11.2,8.2 10.5,8.7 10.5,9.5V11H13.5V9.5C13.5,8.7 12.8,8.2 12,8.2Z"
+              />
+            </svg>
+            
+             
+            <div
+              aria-valuemax="100"
+              aria-valuemin="0"
+              aria-valuenow="100"
+              aria-valuetext="You have put 100% of your funds in your shielded account"
+              class="usage-indicator__meter"
+              role="meter"
+            >
+              <div
+                aria-hidden="true"
+                class="usage-indicator__meter-bar"
+                style="width: 100%;"
+              />
+            </div>
+             
+            <svg
+              class="dusk-icon dusk-icon--size--default usage-indicator__icon"
+              data-tooltip-id="main-tooltip"
+              data-tooltip-text="You have put 0% of your funds in your unshielded account"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M21 11C21 16.5 17.2 21.7 12 23C6.8 21.7 3 16.5 3 11V5L12 1L21 5V11M12 21C15.8 20 19 15.5 19 11.2V6.3L12 3.2L5 6.3V11.2C5 15.5 8.2 20 12 21M14.8 11H10.5V8.5C10.5 7.7 11.2 7.2 12 7.2S13.5 7.7 13.5 8.5V9H14.8V8.5C14.8 7.1 13.4 6 12 6S9.2 7.1 9.2 8.5V11C8.6 11 8 11.6 8 12.2V15.7C8 16.4 8.6 17 9.2 17H14.7C15.4 17 16 16.4 16 15.8V12.3C16 11.6 15.4 11 14.8 11Z"
+              />
+            </svg>
+            
+          </div>
         </div>
       </article>
        
@@ -272,7 +300,9 @@ exports[`Dashboard Layout > should render the dashboard layout and show a throbb
       <header
         class="dusk-balance__header"
       >
-        <h2>
+        <h2
+          class="sr-only"
+        >
           Your Balance:
         </h2>
       </header>
@@ -284,40 +314,66 @@ exports[`Dashboard Layout > should render the dashboard layout and show a throbb
           2,345.000000000
         </strong>
          
-        <svg
-          class="dusk-icon dusk-icon--size--default dusk-balance__icon"
-          data-tooltip-id="balance-tooltip"
-          data-tooltip-place="right"
-          data-tooltip-text="DUSK"
-          role="graphics-symbol"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12.335 0.005a12.186 12.186 0 0 0 -2.58 0.204C4.2 1.259 0 6.14 0 11.999 0 17.859 4.203 22.74 9.759 23.79c0.726 0.138 1.476 0.21 2.241 0.21 6.789 0 12.261 -5.64 11.991 -12.49C23.741 5.249 18.599 0.173 12.335 0.005Zm0.207 21.58c-0.204 0.012 -0.336 -0.222 -0.21 -0.384 1.974 -2.541 3.153 -5.733 3.153 -9.202 0 -3.468 -1.176 -6.663 -3.153 -9.202 -0.126 -0.162 0.003 -0.396 0.207 -0.384 5.052 0.282 9.06 4.465 9.06 9.586 0 5.121 -4.005 9.304 -9.057 9.586Z"
-          />
-        </svg>
-        
+        <strong>
+          DUSK
+        </strong>
       </p>
        
       <p
         class="dusk-balance__fiat"
       >
         <strong>
-          (
           $0.00
-          )
         </strong>
       </p>
        
-       
       <div
-        aria-hidden="true"
-        class="dusk-tooltip dusk-tooltip-top dusk-tooltip-info"
-        id="balance-tooltip"
-        role="tooltip"
-        style="left: 0px; top: 0px;"
+        class="dusk-balance__usage"
       >
-        
+        <div
+          class="usage-indicator"
+        >
+          <svg
+            class="dusk-icon dusk-icon--size--default usage-indicator__icon"
+            data-tooltip-id="main-tooltip"
+            data-tooltip-text="You have put 100% of your funds in your shielded account"
+            role="graphics-symbol"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.1 14.8,9.5V11C15.4,11 16,11.6 16,12.3V15.8C16,16.4 15.4,17 14.7,17H9.2C8.6,17 8,16.4 8,15.7V12.2C8,11.6 8.6,11 9.2,11V9.5C9.2,8.1 10.6,7 12,7M12,8.2C11.2,8.2 10.5,8.7 10.5,9.5V11H13.5V9.5C13.5,8.7 12.8,8.2 12,8.2Z"
+            />
+          </svg>
+          
+           
+          <div
+            aria-valuemax="100"
+            aria-valuemin="0"
+            aria-valuenow="100"
+            aria-valuetext="You have put 100% of your funds in your shielded account"
+            class="usage-indicator__meter"
+            role="meter"
+          >
+            <div
+              aria-hidden="true"
+              class="usage-indicator__meter-bar"
+              style="width: 100%;"
+            />
+          </div>
+           
+          <svg
+            class="dusk-icon dusk-icon--size--default usage-indicator__icon"
+            data-tooltip-id="main-tooltip"
+            data-tooltip-text="You have put 0% of your funds in your unshielded account"
+            role="graphics-symbol"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M21 11C21 16.5 17.2 21.7 12 23C6.8 21.7 3 16.5 3 11V5L12 1L21 5V11M12 21C15.8 20 19 15.5 19 11.2V6.3L12 3.2L5 6.3V11.2C5 15.5 8.2 20 12 21M14.8 11H10.5V8.5C10.5 7.7 11.2 7.2 12 7.2S13.5 7.7 13.5 8.5V9H14.8V8.5C14.8 7.1 13.4 6 12 6S9.2 7.1 9.2 8.5V11C8.6 11 8 11.6 8 12.2V15.7C8 16.4 8.6 17 9.2 17H14.7C15.4 17 16 16.4 16 15.8V12.3C16 11.6 15.4 11 14.8 11Z"
+            />
+          </svg>
+          
+        </div>
       </div>
     </article>
      
@@ -466,7 +522,9 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
         <header
           class="dusk-balance__header"
         >
-          <h2>
+          <h2
+            class="sr-only"
+          >
             Your Balance:
           </h2>
         </header>
@@ -478,40 +536,66 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
             2,345.000000000
           </strong>
            
-          <svg
-            class="dusk-icon dusk-icon--size--default dusk-balance__icon"
-            data-tooltip-id="balance-tooltip"
-            data-tooltip-place="right"
-            data-tooltip-text="DUSK"
-            role="graphics-symbol"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12.335 0.005a12.186 12.186 0 0 0 -2.58 0.204C4.2 1.259 0 6.14 0 11.999 0 17.859 4.203 22.74 9.759 23.79c0.726 0.138 1.476 0.21 2.241 0.21 6.789 0 12.261 -5.64 11.991 -12.49C23.741 5.249 18.599 0.173 12.335 0.005Zm0.207 21.58c-0.204 0.012 -0.336 -0.222 -0.21 -0.384 1.974 -2.541 3.153 -5.733 3.153 -9.202 0 -3.468 -1.176 -6.663 -3.153 -9.202 -0.126 -0.162 0.003 -0.396 0.207 -0.384 5.052 0.282 9.06 4.465 9.06 9.586 0 5.121 -4.005 9.304 -9.057 9.586Z"
-            />
-          </svg>
-          
+          <strong>
+            DUSK
+          </strong>
         </p>
          
         <p
           class="dusk-balance__fiat dusk-balance__fiat--visible"
         >
           <strong>
-            (
             $1,172.50
-            )
           </strong>
         </p>
          
-         
         <div
-          aria-hidden="true"
-          class="dusk-tooltip dusk-tooltip-top dusk-tooltip-info"
-          id="balance-tooltip"
-          role="tooltip"
-          style="left: 0px; top: 0px;"
+          class="dusk-balance__usage"
         >
-          
+          <div
+            class="usage-indicator"
+          >
+            <svg
+              class="dusk-icon dusk-icon--size--default usage-indicator__icon"
+              data-tooltip-id="main-tooltip"
+              data-tooltip-text="You have put 100% of your funds in your shielded account"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.1 14.8,9.5V11C15.4,11 16,11.6 16,12.3V15.8C16,16.4 15.4,17 14.7,17H9.2C8.6,17 8,16.4 8,15.7V12.2C8,11.6 8.6,11 9.2,11V9.5C9.2,8.1 10.6,7 12,7M12,8.2C11.2,8.2 10.5,8.7 10.5,9.5V11H13.5V9.5C13.5,8.7 12.8,8.2 12,8.2Z"
+              />
+            </svg>
+            
+             
+            <div
+              aria-valuemax="100"
+              aria-valuemin="0"
+              aria-valuenow="100"
+              aria-valuetext="You have put 100% of your funds in your shielded account"
+              class="usage-indicator__meter"
+              role="meter"
+            >
+              <div
+                aria-hidden="true"
+                class="usage-indicator__meter-bar"
+                style="width: 100%;"
+              />
+            </div>
+             
+            <svg
+              class="dusk-icon dusk-icon--size--default usage-indicator__icon"
+              data-tooltip-id="main-tooltip"
+              data-tooltip-text="You have put 0% of your funds in your unshielded account"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M21 11C21 16.5 17.2 21.7 12 23C6.8 21.7 3 16.5 3 11V5L12 1L21 5V11M12 21C15.8 20 19 15.5 19 11.2V6.3L12 3.2L5 6.3V11.2C5 15.5 8.2 20 12 21M14.8 11H10.5V8.5C10.5 7.7 11.2 7.2 12 7.2S13.5 7.7 13.5 8.5V9H14.8V8.5C14.8 7.1 13.4 6 12 6S9.2 7.1 9.2 8.5V11C8.6 11 8 11.6 8 12.2V15.7C8 16.4 8.6 17 9.2 17H14.7C15.4 17 16 16.4 16 15.8V12.3C16 11.6 15.4 11 14.8 11Z"
+              />
+            </svg>
+            
+          </div>
         </div>
       </article>
        
@@ -682,7 +766,9 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
         <header
           class="dusk-balance__header"
         >
-          <h2>
+          <h2
+            class="sr-only"
+          >
             Your Balance:
           </h2>
         </header>
@@ -694,40 +780,66 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
             2,345.000000000
           </strong>
            
-          <svg
-            class="dusk-icon dusk-icon--size--default dusk-balance__icon"
-            data-tooltip-id="balance-tooltip"
-            data-tooltip-place="right"
-            data-tooltip-text="DUSK"
-            role="graphics-symbol"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12.335 0.005a12.186 12.186 0 0 0 -2.58 0.204C4.2 1.259 0 6.14 0 11.999 0 17.859 4.203 22.74 9.759 23.79c0.726 0.138 1.476 0.21 2.241 0.21 6.789 0 12.261 -5.64 11.991 -12.49C23.741 5.249 18.599 0.173 12.335 0.005Zm0.207 21.58c-0.204 0.012 -0.336 -0.222 -0.21 -0.384 1.974 -2.541 3.153 -5.733 3.153 -9.202 0 -3.468 -1.176 -6.663 -3.153 -9.202 -0.126 -0.162 0.003 -0.396 0.207 -0.384 5.052 0.282 9.06 4.465 9.06 9.586 0 5.121 -4.005 9.304 -9.057 9.586Z"
-            />
-          </svg>
-          
+          <strong>
+            DUSK
+          </strong>
         </p>
          
         <p
           class="dusk-balance__fiat dusk-balance__fiat--visible"
         >
           <strong>
-            (
             $1,172.50
-            )
           </strong>
         </p>
          
-         
         <div
-          aria-hidden="true"
-          class="dusk-tooltip dusk-tooltip-top dusk-tooltip-info"
-          id="balance-tooltip"
-          role="tooltip"
-          style="left: 0px; top: 0px;"
+          class="dusk-balance__usage"
         >
-          
+          <div
+            class="usage-indicator"
+          >
+            <svg
+              class="dusk-icon dusk-icon--size--default usage-indicator__icon"
+              data-tooltip-id="main-tooltip"
+              data-tooltip-text="You have put 100% of your funds in your shielded account"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.1 14.8,9.5V11C15.4,11 16,11.6 16,12.3V15.8C16,16.4 15.4,17 14.7,17H9.2C8.6,17 8,16.4 8,15.7V12.2C8,11.6 8.6,11 9.2,11V9.5C9.2,8.1 10.6,7 12,7M12,8.2C11.2,8.2 10.5,8.7 10.5,9.5V11H13.5V9.5C13.5,8.7 12.8,8.2 12,8.2Z"
+              />
+            </svg>
+            
+             
+            <div
+              aria-valuemax="100"
+              aria-valuemin="0"
+              aria-valuenow="100"
+              aria-valuetext="You have put 100% of your funds in your shielded account"
+              class="usage-indicator__meter"
+              role="meter"
+            >
+              <div
+                aria-hidden="true"
+                class="usage-indicator__meter-bar"
+                style="width: 100%;"
+              />
+            </div>
+             
+            <svg
+              class="dusk-icon dusk-icon--size--default usage-indicator__icon"
+              data-tooltip-id="main-tooltip"
+              data-tooltip-text="You have put 0% of your funds in your unshielded account"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M21 11C21 16.5 17.2 21.7 12 23C6.8 21.7 3 16.5 3 11V5L12 1L21 5V11M12 21C15.8 20 19 15.5 19 11.2V6.3L12 3.2L5 6.3V11.2C5 15.5 8.2 20 12 21M14.8 11H10.5V8.5C10.5 7.7 11.2 7.2 12 7.2S13.5 7.7 13.5 8.5V9H14.8V8.5C14.8 7.1 13.4 6 12 6S9.2 7.1 9.2 8.5V11C8.6 11 8 11.6 8 12.2V15.7C8 16.4 8.6 17 9.2 17H14.7C15.4 17 16 16.4 16 15.8V12.3C16 11.6 15.4 11 14.8 11Z"
+              />
+            </svg>
+            
+          </div>
         </div>
       </article>
        
diff --git a/web-wallet/src/routes/(app)/dashboard/allocate/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/allocate/__tests__/__snapshots__/page.spec.js.snap
index 12335431b5..9120d01e52 100644
--- a/web-wallet/src/routes/(app)/dashboard/allocate/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(app)/dashboard/allocate/__tests__/__snapshots__/page.spec.js.snap
@@ -38,7 +38,7 @@ exports[`Allocate > should render the allocation page 1`] = `
     class="dusk-card__body-container"
   >
     <div
-      class="operation svelte-1u9bchi"
+      class="operation svelte-d2yng8"
     >
       <div
         class="dusk-wizard"
@@ -46,7 +46,7 @@ exports[`Allocate > should render the allocation page 1`] = `
          
          
         <div
-          class="operation__send svelte-1u9bchi"
+          class="operation__send svelte-d2yng8"
         >
           <p>
             Edit the value to change the allocation of your Dusk between your
@@ -54,16 +54,16 @@ exports[`Allocate > should render the allocation page 1`] = `
           </p>
            
           <fieldset
-            class="operation__fieldset svelte-1u9bchi"
+            class="operation__fieldset svelte-d2yng8"
           >
             <div
-              class="operation__send-amount operation__label svelte-1u9bchi"
+              class="operation__send-amount operation__label svelte-d2yng8"
             >
               Shielded
             </div>
              
             <div
-              class="operation__send-amount operation__address operation__space-between svelte-1u9bchi"
+              class="operation__send-amount operation__address operation__space-between svelte-d2yng8"
             >
               <svg
                 class="dusk-icon dusk-icon--size--default"
@@ -80,7 +80,7 @@ exports[`Allocate > should render the allocation page 1`] = `
             </div>
              
             <div
-              class="operation__send-amount operation__input svelte-1u9bchi"
+              class="operation__send-amount operation__input svelte-d2yng8"
             >
               <input
                 class="dusk-textbox dusk-textbox-number operation__input-field"
@@ -107,17 +107,17 @@ exports[`Allocate > should render the allocation page 1`] = `
             </div>
              
             <hr
-              class="glyph svelte-1u9bchi"
+              class="glyph svelte-d2yng8"
             />
              
             <div
-              class="operation__send-amount operation__label svelte-1u9bchi"
+              class="operation__send-amount operation__label svelte-d2yng8"
             >
               Unshielded
             </div>
              
             <div
-              class="operation__send-amount operation__address operation__space-between svelte-1u9bchi"
+              class="operation__send-amount operation__address operation__space-between svelte-d2yng8"
             >
               <svg
                 class="dusk-icon dusk-icon--size--default"
@@ -134,7 +134,7 @@ exports[`Allocate > should render the allocation page 1`] = `
             </div>
              
             <div
-              class="operation__send-amount operation__input svelte-1u9bchi"
+              class="operation__send-amount operation__input svelte-d2yng8"
             >
               <input
                 class="dusk-textbox dusk-textbox-number operation__input-field"
diff --git a/web-wallet/src/routes/components-showcase/Balances.svelte b/web-wallet/src/routes/components-showcase/Balances.svelte
index 306a77e1be..3e7ba3d0ed 100644
--- a/web-wallet/src/routes/components-showcase/Balances.svelte
+++ b/web-wallet/src/routes/components-showcase/Balances.svelte
@@ -1,5 +1,8 @@
 <script>
   import { Balance } from "$lib/components";
+
+  const balance = 20000000;
+  const shieldedTokens = 10000000;
 </script>
 
 <section>
@@ -8,6 +11,15 @@
     fiatPrice={10}
     locale="en"
     tokenCurrency="DUSK"
-    tokens={2000000}
+    tokens={balance}
+  />
+
+  <Balance
+    fiatCurrency="GBP"
+    fiatPrice={10}
+    locale="en"
+    tokenCurrency="DUSK"
+    tokens={balance}
+    shieldedTokens={(shieldedTokens / balance) * 100}
   />
 </section>
diff --git a/web-wallet/src/style/dusk-components/balance.css b/web-wallet/src/style/dusk-components/balance.css
index 68a8c5ae19..80f0081f4b 100644
--- a/web-wallet/src/style/dusk-components/balance.css
+++ b/web-wallet/src/style/dusk-components/balance.css
@@ -1,6 +1,7 @@
 .dusk-balance {
   display: flex;
   flex-direction: column;
+  text-align: center;
 }
 
 .dusk-balance__header > h2 {
@@ -13,6 +14,7 @@
   display: flex;
   align-items: center;
   gap: 0.5em;
+  justify-content: center;
 }
 
 .dusk-balance__dusk > strong {
@@ -28,14 +30,14 @@
   line-height: 150%;
   letter-spacing: -0.01em;
   visibility: hidden;
+  color: var(--muted-color);
 }
 
 .dusk-balance__fiat--visible > strong {
   visibility: unset;
 }
 
-.dusk-icon.dusk-balance__icon {
-  width: 1.3125em;
-  height: 1.3125em;
-  flex-shrink: 0;
+.dusk-balance__usage {
+  padding: 0.62em 0.75em;
+  margin-top: 0.62em;
 }
diff --git a/web-wallet/src/style/dusk/language.css b/web-wallet/src/style/dusk/language.css
index 74aff3f4d6..821f6e5fd7 100644
--- a/web-wallet/src/style/dusk/language.css
+++ b/web-wallet/src/style/dusk/language.css
@@ -15,6 +15,7 @@
   --success-color: var(--success-500);
   --success-color-variant-dark: var(--success-700);
   --warning-color: var(--warning);
+  --muted-color: var(--granite-grey);
 
   --on-background-color: var(--smokey-black);
   --on-primary-color: var(--light-grey);