From 453be44bd4e8280ef18a22ed5b59f2fdc683f83e Mon Sep 17 00:00:00 2001
From: "Jason M. Hasperhoven" <martijn.hasperhoven@gmail.com>
Date: Tue, 17 Dec 2024 19:21:27 +0400
Subject: [PATCH 1/3] Add trailingZeros option to ValueView

---
 packages/ui/src/ValueView/index.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/ValueView/index.tsx b/packages/ui/src/ValueView/index.tsx
index 3f6f40fa9..c72a54c6d 100644
--- 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,6 +67,7 @@ export const ValueViewComponent = <SelectedContext extends Context = 'default'>(
   showSymbol = true,
   abbreviate = false,
   showValue = true,
+  trailingZeros = false,
 }: ValueViewComponentProps<SelectedContext>) => {
   const density = useDensity();
 
@@ -70,11 +75,9 @@ export const ValueViewComponent = <SelectedContext extends Context = 'default'>(
     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

From 467a2ee835e23f3b8642ad8549e0870e3056b434 Mon Sep 17 00:00:00 2001
From: "Jason M. Hasperhoven" <martijn.hasperhoven@gmail.com>
Date: Wed, 18 Dec 2024 18:20:25 +0400
Subject: [PATCH 2/3] Fix lint

---
 packages/ui/src/ValueView/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/ValueView/index.tsx b/packages/ui/src/ValueView/index.tsx
index c72a54c6d..ff08836bc 100644
--- a/packages/ui/src/ValueView/index.tsx
+++ b/packages/ui/src/ValueView/index.tsx
@@ -116,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>
           )}

From bd3995fe2884d59c0bed3924ffaf7d494e2164d5 Mon Sep 17 00:00:00 2001
From: "Jason M. Hasperhoven" <martijn.hasperhoven@gmail.com>
Date: Wed, 18 Dec 2024 18:21:22 +0400
Subject: [PATCH 3/3] Add changeset

---
 .changeset/five-boxes-compare.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/five-boxes-compare.md

diff --git a/.changeset/five-boxes-compare.md b/.changeset/five-boxes-compare.md
new file mode 100644
index 000000000..0c98d6e49
--- /dev/null
+++ b/.changeset/five-boxes-compare.md
@@ -0,0 +1,5 @@
+---
+'@penumbra-zone/ui': minor
+---
+
+Add trailingZeros option to ValueView