From 5cf7c553b29f112aaf085e10988f02e13ae932e2 Mon Sep 17 00:00:00 2001
From: Tal Derei <70081547+TalDerei@users.noreply.github.com>
Date: Mon, 25 Nov 2024 13:43:35 -0800
Subject: [PATCH] views: prop for optionally displaying value on
 ValueViewComponent (#1923)

* prop for optionally displaying value on ValueViewComponent

* changeset

* feedback
---
 .changeset/dull-bikes-reflect.md    |  5 +++++
 packages/ui/src/ValueView/index.tsx | 31 +++++++++++++++++------------
 2 files changed, 23 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/dull-bikes-reflect.md

diff --git a/.changeset/dull-bikes-reflect.md b/.changeset/dull-bikes-reflect.md
new file mode 100644
index 000000000..a24d7a4be
--- /dev/null
+++ b/.changeset/dull-bikes-reflect.md
@@ -0,0 +1,5 @@
+---
+'@penumbra-zone/ui': patch
+---
+
+showValue prop for ValueViewComponent to display amounts
diff --git a/packages/ui/src/ValueView/index.tsx b/packages/ui/src/ValueView/index.tsx
index d4a4f5eba..533732922 100644
--- a/packages/ui/src/ValueView/index.tsx
+++ b/packages/ui/src/ValueView/index.tsx
@@ -36,13 +36,17 @@ export interface ValueViewComponentProps<SelectedContext extends Context> {
    */
   priority?: PillProps['priority'];
   /**
-   * If true, the asset symbol will be hidden.
+   * If true, the asset symbol will be visible.
    */
-  hideSymbol?: boolean;
+  showSymbol?: boolean;
   /**
    * If true, the displayed amount will be shortened.
    */
   abbreviate?: boolean;
+  /**
+   * If false, the amount will not be displayed.
+   */
+  showValue?: boolean;
 }
 
 /**
@@ -56,8 +60,9 @@ export const ValueViewComponent = <SelectedContext extends Context = 'default'>(
   valueView,
   context,
   priority = 'primary',
-  hideSymbol = false,
+  showSymbol = true,
   abbreviate = false,
+  showValue = true,
 }: ValueViewComponentProps<SelectedContext>) => {
   const density = useDensity();
 
@@ -65,12 +70,10 @@ export const ValueViewComponent = <SelectedContext extends Context = 'default'>(
     return null;
   }
 
-  let formattedAmount: string;
-  if (abbreviate) {
-    const amount = getFormattedAmtFromValueView(valueView, false);
-    formattedAmount = shortify(Number(amount));
-  } else {
-    formattedAmount = getFormattedAmtFromValueView(valueView, true);
+  let formattedAmount: string | undefined;
+  if (showValue) {
+    const amount = getFormattedAmtFromValueView(valueView, !abbreviate);
+    formattedAmount = abbreviate ? shortify(Number(amount)) : amount;
   }
 
   const metadata = getMetadata.optional(valueView);
@@ -109,10 +112,12 @@ export const ValueViewComponent = <SelectedContext extends Context = 'default'>(
             getGap(density),
           )}
         >
-          <div className='shrink grow' title={formattedAmount}>
-            <ValueText density={density}>{formattedAmount}</ValueText>
-          </div>
-          {!hideSymbol && (
+          {showValue && (
+            <div className='shrink grow' title={formattedAmount ?? undefined}>
+              <ValueText density={density}>{formattedAmount}</ValueText>
+            </div>
+          )}
+          {showSymbol && (
             <div className='shrink grow truncate' title={symbol}>
               <ValueText density={density}>{symbol}</ValueText>
             </div>