Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

views: prop for optionally displaying value on ValueViewComponent #1923

Merged
merged 3 commits into from
Nov 25, 2024
Merged

views: prop for optionally displaying value on ValueViewComponent #1923

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6d25583
prop for optionally displaying value on ValueViewComponent
TalDerei Nov 22, 2024
fa1f448
changeset
TalDerei Nov 22, 2024
73ffd08
feedback
TalDerei Nov 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/dull-bikes-reflect.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@penumbra-zone/ui': patch
---

showValue prop for ValueViewComponent to display amounts
27 changes: 18 additions & 9 deletions packages/ui/src/ValueView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@ export interface ValueViewComponentProps<SelectedContext extends Context> {
* If true, the displayed amount will be shortened.
*/
abbreviate?: boolean;
/**
* If false, the amount will not be displayed.
*/
showValue?: boolean;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please review the storybook preview link

}

/**
Expand All @@ -58,19 +62,22 @@ export const ValueViewComponent = <SelectedContext extends Context = 'default'>(
priority = 'primary',
hideSymbol = false,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thought: hmm, maybe we should have called this showSymbol with a default to true 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that’s clearer now — it’s been renamed to showSymbol. Currently, the v2 ValueViewComponent is only used once within the dex-explorer in the SummaryCard.

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) {
if (abbreviate) {
const amount = getFormattedAmtFromValueView(valueView, false);
formattedAmount = shortify(Number(amount));
} else {
formattedAmount = getFormattedAmtFromValueView(valueView, true);
}
TalDerei marked this conversation as resolved.
Show resolved Hide resolved
}

const metadata = getMetadata.optional(valueView);
Expand Down Expand Up @@ -109,9 +116,11 @@ export const ValueViewComponent = <SelectedContext extends Context = 'default'>(
getGap(density),
)}
>
<div className='shrink grow' title={formattedAmount}>
<ValueText density={density}>{formattedAmount}</ValueText>
</div>
{showValue && (
<div className='shrink grow' title={formattedAmount ?? undefined}>
<ValueText density={density}>{formattedAmount}</ValueText>
</div>
)}
{!hideSymbol && (
<div className='shrink grow truncate' title={symbol}>
<ValueText density={density}>{symbol}</ValueText>
Expand Down
Loading