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