views: prop for optionally displaying value on ValueViewComponent (#1923

) * prop for optionally displaying value on ValueViewComponent * changeset * feedback
penumbra-zone · Nov 25, 2024 · 5cf7c55 · 5cf7c55
1 parent ebc9f59
commit 5cf7c55
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/.changeset/dull-bikes-reflect.md 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
@@ -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,21 +60,20 @@ export const ValueViewComponent = <SelectedContext extends Context = 'default'>(
   valueView,
   context,
   priority = 'primary',
-  hideSymbol = false,
+  showSymbol = true,
   abbreviate = false,
+  showValue = true,
 }: ValueViewComponentProps<SelectedContext>) => {
   const density = useDensity();
 
   if (!valueView) {
     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>