web-wallet: Add UsageIndicator to Balance component

Resolves #2234
dusk-network · Aug 31, 2024 · 0017f5d · 0017f5d
1 parent 8879b48
commit 0017f5d
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 15 deletions.
diff --git 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
@@ -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,32 +28,33 @@
   /** @type {number} */
   export let tokens;
 
+  /** @type {number} */
+  export let shieldedTokens;
+
   $: 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 shieldedTokens}
+    <div class="dusk-balance__usage">
+      <UsageIndicator value={shieldedTokens} />
+    </div>
+  {/if}
 </article>
diff --git a/web-wallet/src/routes/(app)/dashboard/+layout.svelte b/web-wallet/src/routes/(app)/dashboard/+layout.svelte
@@ -66,6 +66,7 @@
       locale={language}
       tokenCurrency="DUSK"
       tokens={balance.value}
+      shieldedTokens={!!import.meta.env.VITE_CONTRACT_ALLOCATE_DISABLED && balance.value}
     />
 
     <slot />

diff --git 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
@@ -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);