Shortened amount props for ValueViewComponent #1915

grod220 · 2024-11-19T16:50:30Z

Updating ValueViewComponent to support displaying for this view on the dex explorer:

At the moment those display raw numbers, but given the metadata of the assets, we need them to be ValueViewComponent to handle the display exponents.

changeset-bot · 2024-11-19T16:50:33Z

🦋 Changeset detected

Latest commit: 8737509

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages

Name	Type
@penumbra-zone/types	Minor
@penumbra-zone/ui	Minor
minifront	Patch
node-status	Patch
@penumbra-zone/crypto-web	Major
@penumbra-zone/query	Major
@penumbra-zone/services	Major
@penumbra-zone/storage	Major
@penumbra-zone/ui-deprecated	Patch
@penumbra-zone/wasm	Major
@repo/tailwind-config	Patch
@penumbra-zone/perspective	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2024-11-19T16:52:58Z

Visit the preview URL for this PR (updated for commit 8737509):

https://penumbra-ui-preview--pr1915-value-view-additions-molvhrc8.web.app

_{(expires Wed, 27 Nov 2024 15:04:43 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 709d729610ef7a6369b23f1cb2b820a60cc685b1}

grod220 · 2024-11-19T16:53:38Z

packages/types/src/round.ts

+export function round({ value, decimals, roundingMode = 'round' }: RoundOptions): string {
+  const roundingFn = roundingStrategies[roundingMode];
+  const roundedNumber = roundingFn(value, decimals);
+  return roundedNumber.toFixed(decimals);
+}


Both round() and shortify() come from the dex explorer. However, expanded these quite a bit w/ testing as well.

If this works, after publishing, will delete the local one in the dex explorer

grod220 · 2024-11-19T16:54:20Z

packages/ui/src/ValueView/index.tsx

+  /**
+   * If true, the asset icon will be hidden.
+   */
+  hideIcon?: boolean;
+  /**
+   * If true, the asset symbol will be hidden.
+   */
+  hideSymbol?: boolean;
+  /**
+   * If true, the displayed amount will be shortened.
+   */
+  abbreviate?: boolean;


I'm not entirely sure if these kinds of props are in the spirit of the v2 UI component prop style

Also these design changes should be validated on the storybook preview link in the main page of the PR

comment: validated storybook props in preview

grod220 · 2024-11-19T16:54:58Z

packages/ui/src/ValueView/index.tsx

+          <div className='shrink grow' title={formattedAmount}>
+            <ValueText density={density}>{formattedAmount}</ValueText>


Bug fix, the min width made it too wide

grod220 · 2024-11-19T16:56:12Z

packages/ui/src/ValueView/index.tsx

+        <span
+          className={cn(
+            density === 'sparse' ? technical : detailTechnical,
+            priority === 'primary' ? 'text-text-primary' : 'text-secondary-dark',
+          )}
+        >
+          {children}
+        </span>


Needed to have this else branch as the Pill was giving the font/color in the other branch and this one wasn't getting any.

TalDerei · 2024-11-20T05:21:12Z

packages/ui/src/ValueView/index.tsx

+  /**
+   * If true, the asset icon will be hidden.
+   */
+  hideIcon?: boolean;
+  /**
+   * If true, the asset symbol will be hidden.
+   */
+  hideSymbol?: boolean;
+  /**
+   * If true, the displayed amount will be shortened.
+   */
+  abbreviate?: boolean;


comment: validated storybook props in preview

TalDerei · 2024-11-20T05:26:50Z

packages/ui/src/ValueView/index.tsx

-  const formattedAmount = getFormattedAmtFromValueView(valueView, true);
+  let formattedAmount: string;
+  if (abbreviate) {
+    const amount = getFormattedAmtFromValueView(valueView, false);


comment: what if getFormattedAmtFromValueView returns something unparseable (eg. null, undefined)? should we add validation guards to shortify to prevent breakage?

The function returns a string type, so all good.

TalDerei · 2024-11-20T05:29:39Z

packages/ui/src/ValueView/index.tsx

-          </div>
-          <div className='min-w-[50px] shrink grow truncate' title={symbol}>
-            <ValueText density={density}>{symbol}</ValueText>
+          <div className='shrink grow' title={formattedAmount}>


nit; using both shrink-0 and shrink in the same contexts.

The shrink-0 prevents the icon from shrinking, The uses of shrink on the other two say that is' ok to shrink.

grod220

Going to add a few more tweaks to better support the compact version

grod220 · 2024-11-20T14:53:35Z

packages/ui/src/ValueView/index.tsx

-  const formattedAmount = getFormattedAmtFromValueView(valueView, true);
+  let formattedAmount: string;
+  if (abbreviate) {
+    const amount = getFormattedAmtFromValueView(valueView, false);


The function returns a string type, so all good.

grod220 · 2024-11-20T14:55:44Z

packages/ui/src/ValueView/index.tsx

-          </div>
-          <div className='min-w-[50px] shrink grow truncate' title={symbol}>
-            <ValueText density={density}>{symbol}</ValueText>
+          <div className='shrink grow' title={formattedAmount}>


The shrink-0 prevents the icon from shrinking, The uses of shrink on the other two say that is' ok to shrink.

Update value view component w/ shortened amount

955e09a

grod220 force-pushed the value-view-additions branch from 0c29102 to 955e09a Compare November 19, 2024 16:50

Changesets add

cd6d81c

grod220 commented Nov 19, 2024

View reviewed changes

grod220 requested a review from a team November 19, 2024 17:02

TalDerei approved these changes Nov 20, 2024

View reviewed changes

grod220 commented Nov 20, 2024

View reviewed changes

grod220 added 2 commits November 20, 2024 15:58

post review updates

bc44381

De-dupe trailing zeros func

8737509

grod220 merged commit 291bc7d into main Nov 20, 2024
8 checks passed

grod220 deleted the value-view-additions branch November 20, 2024 15:12

grod220 mentioned this pull request Nov 20, 2024

Round func updates #1917

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Shortened amount props for ValueViewComponent #1915

Shortened amount props for ValueViewComponent #1915

grod220 commented Nov 19, 2024

changeset-bot bot commented Nov 19, 2024 •

edited

Loading

github-actions bot commented Nov 19, 2024 •

edited

Loading

grod220 Nov 19, 2024

grod220 Nov 19, 2024

grod220 Nov 19, 2024

grod220 Nov 19, 2024 •

edited

Loading

TalDerei Nov 20, 2024

grod220 Nov 19, 2024

grod220 Nov 19, 2024

TalDerei Nov 20, 2024

TalDerei Nov 20, 2024

grod220 Nov 20, 2024

TalDerei Nov 20, 2024

grod220 Nov 20, 2024

grod220 left a comment

grod220 Nov 20, 2024

grod220 Nov 20, 2024

		<div className='shrink grow' title={formattedAmount}>
		<ValueText density={density}>{formattedAmount}</ValueText>

Shortened amount props for ValueViewComponent #1915

Shortened amount props for ValueViewComponent #1915

Conversation

grod220 commented Nov 19, 2024

changeset-bot bot commented Nov 19, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Nov 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

grod220 Nov 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

grod220 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

changeset-bot bot commented Nov 19, 2024 •

edited

Loading

github-actions bot commented Nov 19, 2024 •

edited

Loading

grod220 Nov 19, 2024 •

edited

Loading