From 9b19fc9035bf722fafb3942ae2b93bc8b80af01b 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 | 22 ++++++++++---------
 .../src/style/dusk-components/balance.css     | 10 +++++----
 web-wallet/src/style/dusk/language.css        |  1 +
 4 files changed, 20 insertions(+), 15 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..03bce1e6c8 100644
--- a/web-wallet/src/lib/components/Balance/Balance.svelte
+++ b/web-wallet/src/lib/components/Balance/Balance.svelte
@@ -2,6 +2,7 @@
 
 <script>
   import { Icon, Tooltip } from "$lib/dusk/components";
+  import { UsageIndicator } from "$lib/components";
   import { logo } from "$lib/dusk/icons";
   import { makeClassName } from "$lib/dusk/string";
   import { createCurrencyFormatter } from "$lib/dusk/currency";
@@ -27,6 +28,9 @@
   /** @type {number} */
   export let tokens;
 
+  /** @type {number} */
+  export let shieldedTokens = 100;
+
   $: classes = makeClassName(["dusk-balance", className]);
   $: duskFormatter = createCurrencyFormatter(locale, tokenCurrency, 9);
   $: fiatFormatter = createCurrencyFormatter(locale, fiatCurrency, 2);
@@ -34,25 +38,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 !!import.meta.env.VITE_CONTRACT_ALLOCATE_DISABLED}
+    <div class="dusk-balance__usage">
+      <UsageIndicator value={shieldedTokens} />
+    </div>
+  {/if}
 </article>
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);