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

Jump to bottom

views: improve approval dialogue rendering #241

Merged
merged 8 commits into from
Nov 25, 2024
Merged

views: improve approval dialogue rendering #241

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ac920a0
use valueViewComponent from ui library
TalDerei Nov 22, 2024
0a8034a
manual css
TalDerei Nov 22, 2024
3715a16
refactor arrow for one-way swaps
TalDerei Nov 25, 2024
06b5630
revert accidental commit
TalDerei Nov 25, 2024
96270e0
truncate value component
TalDerei Nov 25, 2024
81e3ea4
background of approval and deny button layer
TalDerei Nov 25, 2024
7c22192
ignore site
TalDerei Nov 25, 2024
a450d91
address 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
1 change: 1 addition & 0 deletions apps/extension/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
"@penumbra-zone/transport-chrome": "8.0.1",
"@penumbra-zone/transport-dom": "7.5.0",
"@penumbra-zone/types": "26.1.0",
"@penumbra-zone/ui": "13.3.1",
TalDerei marked this conversation as resolved.
Show resolved Hide resolved
"@penumbra-zone/wasm": "32.0.0",
"@radix-ui/react-icons": "^1.3.0",
"@repo/context": "workspace:*",
Expand Down
2 changes: 2 additions & 0 deletions packages/ui/components/ui/tx/action-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@ const getLabelForActionCase = (actionCase: ActionView['actionView']['case']): st
return String(actionCase);
};

// note: ensure to update the ValueViewComponent to handle unimplemented views
// once support for them is added.
export const ActionViewComponent = ({
av: { actionView },
feeValueView,
Expand Down
15 changes: 13 additions & 2 deletions packages/ui/components/ui/tx/actions-views/delegator-vote.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { ViewBox } from '../viewbox';
import { ValueViewComponent } from '../../value';
import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
import { Density } from '@penumbra-zone/ui/Density';
import { getAddress } from '@penumbra-zone/getters/note-view';
import { ActionDetails } from './action-details';
import {
Expand Down Expand Up @@ -116,7 +117,17 @@ const VoteBodyDetails = ({ body }: { body?: DelegatorVoteBody }) => {
)}
{!!body?.unbondedAmount && (
<ActionDetails.Row label='Voting power'>
<ValueViewComponent view={umValueView(body.unbondedAmount)} />
<Density compact>
<div className='ml-4'>
<ValueViewComponent
TalDerei marked this conversation as resolved.
Show resolved Hide resolved
valueView={umValueView(body.unbondedAmount)}
context='default'
priority='primary'
hideSymbol={true}
abbreviate={false}
/>
</div>
</Density>
</ActionDetails.Row>
)}
</>
Expand Down
15 changes: 13 additions & 2 deletions packages/ui/components/ui/tx/actions-views/output.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { OutputView } from '@penumbra-zone/protobuf/penumbra/core/component/shielded_pool/v1/shielded_pool_pb';
import { ViewBox } from '../viewbox';
import { ValueViewComponent } from '../../value';
import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
import { Density } from '@penumbra-zone/ui/Density';
import { ValueWithAddress } from './value-with-address';
import { getNote } from '@penumbra-zone/getters/output-view';
import { getAddress } from '@penumbra-zone/getters/note-view';
Expand All @@ -15,7 +16,17 @@ export const OutputViewComponent = ({ value }: { value: OutputView }) => {
label='Output'
visibleContent={
<ValueWithAddress addressView={address} label='to'>
<ValueViewComponent view={note.value} />
<Density compact>
<div className='ml-4'>
<ValueViewComponent
valueView={note.value}
context='default'
priority='primary'
hideSymbol={true}
abbreviate={false}
/>
</div>
</Density>
</ValueWithAddress>
}
/>
Expand Down
15 changes: 13 additions & 2 deletions packages/ui/components/ui/tx/actions-views/spend.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { SpendView } from '@penumbra-zone/protobuf/penumbra/core/component/shielded_pool/v1/shielded_pool_pb';
import { ViewBox } from '../viewbox';
import { ValueViewComponent } from '../../value';
import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
import { Density } from '@penumbra-zone/ui/Density';
import { ValueWithAddress } from './value-with-address';
import { getNote } from '@penumbra-zone/getters/spend-view';
import { getAddress } from '@penumbra-zone/getters/note-view';
Expand All @@ -15,7 +16,17 @@ export const SpendViewComponent = ({ value }: { value: SpendView }) => {
label='Spend'
visibleContent={
<ValueWithAddress addressView={address} label='from'>
<ValueViewComponent view={note.value} />
<Density compact>
<div className='ml-4'>
<ValueViewComponent
valueView={note.value}
context='default'
priority='primary'
hideSymbol={true}
abbreviate={false}
/>
</div>
</Density>
</ValueWithAddress>
}
/>
Expand Down
27 changes: 24 additions & 3 deletions packages/ui/components/ui/tx/actions-views/swap/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import {
getClaimFeeFromSwapView,
getClaimTx,
} from '@penumbra-zone/getters/swap-view';
import { ValueViewComponent } from '../../../value';
import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
import { Density } from '@penumbra-zone/ui/Density';
import { ActionDetails } from '../action-details';
import { ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';

Expand Down Expand Up @@ -48,13 +49,33 @@ export const SwapViewComponent = ({
<ActionDetails>
{oneWaySwap?.unfilled && (
<ActionDetails.Row label='Unfilled'>
<ValueViewComponent view={oneWaySwap.unfilled} />
<Density compact>
<div className='ml-4'>
<ValueViewComponent
valueView={oneWaySwap.unfilled}
context='default'
priority='primary'
hideSymbol={true}
abbreviate={false}
/>
</div>
</Density>
</ActionDetails.Row>
)}

<ActionDetails.Row label='Swap Claim Fee'>
<div className='font-mono'>
<ValueViewComponent view={prepaidClaimFee} />
<Density compact>
<div className='ml-4'>
<ValueViewComponent
valueView={prepaidClaimFee}
context='default'
priority='primary'
hideSymbol={true}
abbreviate={false}
/>
</div>
</Density>
</div>
</ActionDetails.Row>

Expand Down
31 changes: 26 additions & 5 deletions packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { ValueViewComponent } from '../../../value';
import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
import { Density } from '@penumbra-zone/ui/Density';
import { ArrowRight } from 'lucide-react';
import { ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
import { getAmount } from '@penumbra-zone/getters/value-view';
// import { getAmount } from '@penumbra-zone/getters/value-view';

/**
* Renders a one-way swap (which should be the only kind of swap that ever
Expand All @@ -10,15 +11,35 @@ import { getAmount } from '@penumbra-zone/getters/value-view';
* 1.23INPUT -> 4.56OUTPUT
*/
export const OneWaySwap = ({ input, output }: { input: ValueView; output: ValueView }) => {
const outputAmount = getAmount.optional(output);
// const outputAmount = getAmount.optional(output);

return (
<div className='flex items-center gap-2'>
<ValueViewComponent view={input} />
<Density compact>
<div className='ml-4'>
<ValueViewComponent
valueView={input}
context='default'
priority='primary'
hideSymbol={true}
abbreviate={false}
/>
</div>
</Density>

<ArrowRight />

<ValueViewComponent view={output} showValue={!!outputAmount} />
<Density compact>
<div className='ml-4'>
<ValueViewComponent
valueView={output}
TalDerei marked this conversation as resolved.
Show resolved Hide resolved
context='default'
priority='primary'
hideSymbol={true}
abbreviate={false}
/>
</div>
</Density>
</div>
);
};
27 changes: 24 additions & 3 deletions packages/ui/components/ui/tx/actions-views/swap/swap-claim.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import {
import { getAmount } from '@penumbra-zone/getters/value-view';
import { getAmount as getAmountFee } from '@penumbra-zone/getters/fee';
import { isZero, joinLoHiAmount } from '@penumbra-zone/types/amount';
import { ValueViewComponent } from '../../../value';
import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
import { Density } from '@penumbra-zone/ui/Density';
import { Amount } from '@penumbra-zone/protobuf/penumbra/core/num/v1/num_pb';

const getClaimLabel = (
Expand Down Expand Up @@ -44,10 +45,30 @@ export const SwapClaimViewComponent = ({ value }: { value: SwapClaimView }) => {
<ActionDetails.Row label={claimLabel}>
<div className='flex gap-2'>
{output1Amount && !isZero(output1Amount) && (
<ValueViewComponent view={output1Value} />
<Density compact>
<div className='ml-4'>
<ValueViewComponent
valueView={output1Value}
context='default'
priority='primary'
hideSymbol={true}
abbreviate={false}
/>
</div>
</Density>
)}
{output2Amount && !isZero(output2Amount) && (
<ValueViewComponent view={output2Value} />
<Density compact>
<div className='ml-4'>
<ValueViewComponent
valueView={output2Value}
context='default'
priority='primary'
hideSymbol={true}
abbreviate={false}
/>
</div>
</Density>
)}
</div>
</ActionDetails.Row>
Expand Down
28 changes: 24 additions & 4 deletions packages/ui/components/ui/tx/dutch-auction-component/progress-bar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Metadata } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
import { ValueViewComponent } from '../../../value';
import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
import { Density } from '@penumbra-zone/ui/Density';
import { DutchAuction } from '@penumbra-zone/protobuf/penumbra/core/component/auction/v1/auction_pb';
import { Separator } from '../../../separator';
import { Indicator } from './indicator';
Expand Down Expand Up @@ -41,8 +42,17 @@ export const ProgressBar = ({

return (
<div className='relative flex grow items-center justify-between gap-2 overflow-hidden'>
<ValueViewComponent view={input} size='sm' />

<Density compact>
<div className='ml-4'>
<ValueViewComponent
valueView={input}
context='default'
priority='primary'
hideSymbol={true}
abbreviate={false}
/>
</div>
</Density>
<div className='relative flex min-h-4 shrink grow items-center overflow-hidden'>
{!auctionIsUpcoming && (
<Indicator dutchAuction={dutchAuction} fullSyncHeight={fullSyncHeight} />
Expand Down Expand Up @@ -84,7 +94,17 @@ export const ProgressBar = ({
</div>

{outputMetadata && (
<ValueViewComponent view={getEmptyValueView(outputMetadata)} size='sm' showValue={false} />
<Density compact>
<div className='ml-4'>
<ValueViewComponent
valueView={getEmptyValueView(outputMetadata)}
context='default'
priority='primary'
hideSymbol={true}
abbreviate={false}
/>
</div>
</Density>
)}
</div>
);
Expand Down
15 changes: 13 additions & 2 deletions packages/ui/components/ui/tx/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import {
Metadata,
ValueView,
} from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
import { ValueViewComponent } from '../value';
import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
import { Density } from '@penumbra-zone/ui/Density';
import { useEffect, useState } from 'react';

// Likely something that calls the registry or view service for metadata
Expand Down Expand Up @@ -76,7 +77,17 @@ export const TransactionViewComponent = ({
label='Transaction Fee'
visibleContent={
<div className='flex items-center gap-2'>
<ValueViewComponent view={feeValueView} />
<Density compact>
<div className='ml-4'>
<ValueViewComponent
valueView={feeValueView}
context='default'
priority='primary'
hideSymbol={true}
abbreviate={false}
/>
</div>
</Density>
{isLoading && <span className='font-mono text-light-brown'>Loading...</span>}
{error ? (
<span className='font-mono text-red-400'>Error: {String(error)}</span>
Expand Down
1 change: 1 addition & 0 deletions packages/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@penumbra-zone/protobuf": "6.3.0",
"@penumbra-zone/types": "26.1.0",
"@penumbra-zone/wasm": "32.0.0",
"@penumbra-zone/ui": "13.3.1",
"@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-checkbox": "^1.1.1",
"@radix-ui/react-dialog": "1.1.1",
Expand Down
Loading