Add trailingZeros option to ValueView (#1949)

* Add trailingZeros option to ValueView * Fix lint * Add changeset
penumbra-zone · Dec 19, 2024 · 6f74253 · 6f74253
1 parent d3dec0f
commit 6f74253
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/.changeset/five-boxes-compare.md b/.changeset/five-boxes-compare.md
@@ -0,0 +1,5 @@
+---
+'@penumbra-zone/ui': minor
+---
+
+Add trailingZeros option to ValueView
diff --git a/packages/ui/src/ValueView/index.tsx b/packages/ui/src/ValueView/index.tsx
@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 import { ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
 import { getMetadata } from '@penumbra-zone/getters/value-view';
-import { getFormattedAmtFromValueView } from '@penumbra-zone/types/value-view';
 import { ConditionalWrap } from '../ConditionalWrap';
 import { Pill, PillProps } from '../Pill';
 import { Text } from '../Text';
@@ -10,6 +9,7 @@ import { Density, useDensity } from '../utils/density';
 import cn from 'clsx';
 import { shortify } from '@penumbra-zone/types/shortify';
 import { detailTechnical, technical } from '../utils/typography.ts';
+import { pnum } from '@penumbra-zone/types/pnum';
 
 type Context = 'default' | 'table';
 
@@ -47,6 +47,10 @@ export interface ValueViewComponentProps<SelectedContext extends Context> {
    * If false, the amount will not be displayed.
    */
   showValue?: boolean;
+  /**
+   * If true, the amount will have trailing zeros.
+   */
+  trailingZeros?: boolean;
 }
 
 /**
@@ -63,18 +67,17 @@ export const ValueViewComponent = <SelectedContext extends Context = 'default'>(
   showSymbol = true,
   abbreviate = false,
   showValue = true,
+  trailingZeros = false,
 }: ValueViewComponentProps<SelectedContext>) => {
   const density = useDensity();
 
   if (!valueView) {
     return null;
   }
 
-  let formattedAmount: string | undefined;
-  if (showValue) {
-    const amount = getFormattedAmtFromValueView(valueView, !abbreviate);
-    formattedAmount = abbreviate ? shortify(Number(amount)) : amount;
-  }
+  const formattedAmount = abbreviate
+    ? shortify(pnum(valueView).toNumber())
+    : pnum(valueView).toFormattedString({ trailingZeros });
 
   const metadata = getMetadata.optional(valueView);
   // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- possibly empty string
@@ -113,7 +116,7 @@ export const ValueViewComponent = <SelectedContext extends Context = 'default'>(
           )}
         >
           {showValue && (
-            <div className='shrink grow' title={formattedAmount ?? undefined}>
+            <div className='shrink grow' title={formattedAmount}>
               <ValueText density={density}>{formattedAmount}</ValueText>
             </div>
           )}