feat(ui): #2053: ActionView component part 3

.changeset/weak-plums-relax.md

@@ -0,0 +1,5 @@
+---
+'@penumbra-zone/ui': minor
+---
+
+Implement ActionViews related to positions

packages/ui/src/ActionView/action-view.tsx

@@ -1,22 +1,27 @@
 import { FC } from 'react';
 import { ActionView as ActionViewMessage } from '@penumbra-zone/protobuf/penumbra/core/transaction/v1/transaction_pb';
-import { ActionViewType, ActionViewValueType, GetMetadataByAssetId } from './types';
+import {
+  ActionViewBaseProps,
+  ActionViewType,
+  ActionViewValueType,
+  GetMetadataByAssetId,
+} from './types';
 import { UnknownAction } from './actions/unknown';
 
 import { SpendAction } from './actions/spend';
 import { OutputAction } from './actions/output';
-import { SwapAction } from './actions/swap';
-import { SwapClaimAction } from './actions/swap-claim';
+import { SwapAction } from './swap/swap';
+import { SwapClaimAction } from './swap/swap-claim';
 import { DelegateAction } from './actions/delegate';
 import { DelegatorVoteAction } from './actions/delegator-vote';
 import { IbcRelayAction } from './actions/ibc-relay';
 import { Ics20WithdrawalAction } from './actions/ics-20-withdrawal';
 import { UndelegateAction } from './actions/undelegate';
 import { UndelegateClaimAction } from './actions/undelegate-claim';
-import { PositionCloseAction } from './actions/position-close';
-import { PositionOpenAction } from './actions/position-open';
-import { PositionRewardClaimAction } from './actions/position-reward-claim';
-import { PositionWithdrawAction } from './actions/position-withdraw';
+import { PositionCloseAction } from './position/position-close';
+import { PositionOpenAction } from './position/position-open';
+import { PositionRewardClaimAction } from './position/position-reward-claim';
+import { PositionWithdrawAction } from './position/position-withdraw';
 import { ProposalDepositClaimAction } from './actions/proposal-deposit-claim';
 import { ProposalSubmitAction } from './actions/proposal-submit';
 import { ProposalWithdrawAction } from './actions/proposal-withdraw';
@@ -30,35 +35,31 @@ import { CommunityPoolOutputAction } from './actions/community-pool-output';
 import { CommunityPoolSpendAction } from './actions/community-pool-spend';
 import { LiquidityTournamentVoteAction } from './actions/liquidity-tournament-vote';
 
-export interface ActionViewProps {
+export interface ActionViewProps extends ActionViewBaseProps {
   /**
    * The `ActionViewMessage` protobuf describing an action within a transaction in Penumbra.
    * Can be one of multiple types: Spend, Output, Swap, SwapClaim, etc.
    */
   action: ActionViewMessage;
-  /**
-   * A helper function that is needed for better fees calculation.
-   * Can be omitted, but it generally improves the rendering logic, especially for opaque views.
-   */
-  getMetadataByAssetId?: GetMetadataByAssetId;
 }
 
 const componentMap = {
   spend: SpendAction,
   output: OutputAction,
   swap: SwapAction,
   swapClaim: SwapClaimAction,
+  positionOpen: PositionOpenAction,
+  positionClose: PositionCloseAction,
+  positionWithdraw: PositionWithdrawAction,
+  positionRewardClaim: PositionRewardClaimAction,
   // TODO: Implement the actions below
+  actionLiquidityTournamentVote: LiquidityTournamentVoteAction,
   delegate: DelegateAction,
   delegatorVote: DelegatorVoteAction,
   undelegate: UndelegateAction,
   undelegateClaim: UndelegateClaimAction,
   ibcRelayAction: IbcRelayAction,
   ics20Withdrawal: Ics20WithdrawalAction,
-  positionClose: PositionCloseAction,
-  positionOpen: PositionOpenAction,
-  positionRewardClaim: PositionRewardClaimAction,
-  positionWithdraw: PositionWithdrawAction,
   proposalDepositClaim: ProposalDepositClaimAction,
   proposalSubmit: ProposalSubmitAction,
   proposalWithdraw: ProposalWithdrawAction,
@@ -70,7 +71,6 @@ const componentMap = {
   communityPoolDeposit: CommunityPoolDepositAction,
   communityPoolOutput: CommunityPoolOutputAction,
   communityPoolSpend: CommunityPoolSpendAction,
-  actionLiquidityTournamentVote: LiquidityTournamentVoteAction,
   unknown: UnknownAction,
 } as const satisfies Record<ActionViewType | 'unknown', unknown>;
 

packages/ui/src/ActionView/actions/output.tsx

@@ -3,9 +3,9 @@ import { getNote } from '@penumbra-zone/getters/output-view';
 import { getAddress } from '@penumbra-zone/getters/note-view';
 import { Density } from '../../Density';
 import { useDensity } from '../../utils/density';
-import { ActionWrapper } from './wrapper';
 import { ValueViewComponent } from '../../ValueView';
 import { AddressViewComponent } from '../../AddressView';
+import { ActionWrapper } from '../shared/wrapper';
 
 export interface OutputActionProps {
   value: OutputView;

packages/ui/src/ActionView/actions/spend.tsx

@@ -1,9 +1,9 @@
 import { SpendView } from '@penumbra-zone/protobuf/penumbra/core/component/shielded_pool/v1/shielded_pool_pb';
 import { Density } from '../../Density';
-import { ActionWrapper } from './wrapper';
 import { ValueViewComponent } from '../../ValueView';
 import { AddressViewComponent } from '../../AddressView';
 import { useDensity } from '../../utils/density';
+import { ActionWrapper } from '../shared/wrapper';
 
 export interface SpendActionProps {
   value: SpendView;

packages/ui/src/ActionView/actions/unknown.tsx

@@ -1,5 +1,5 @@
 import { Text } from '../../Text';
-import { ActionWrapper } from './wrapper';
+import { ActionWrapper } from '../shared/wrapper';
 
 export interface UnknownActionProps {
   label: string;

packages/ui/src/ActionView/index.stories.tsx

@@ -12,13 +12,21 @@ import {
   SwapClaimAction,
   SwapClaimActionOpaque,
   registry,
+  PositionOpenAction,
+  PositionCloseAction,
+  PositionWithdrawAction,
+  PositionRewardClaimAction,
 } from '../utils/bufs';
 
 const OPTIONS: Record<string, ActionViewMessage> = {
   Spend: SpendAction,
   Output: OutputAction,
   Swap: SwapAction,
   SwapClaim: SwapClaimAction,
+  PositionOpen: PositionOpenAction,
+  PositionClose: PositionCloseAction,
+  PositionWithdraw: PositionWithdrawAction,
+  PositionRewardClaim: PositionRewardClaimAction,
   'Opaque: Spend': SpendActionOpaque,
   'Opaque: Output': OutputActionOpaque,
   'Opaque: Swap': SwapActionOpaque,

packages/ui/src/ActionView/position/position-close.tsx

@@ -0,0 +1,30 @@
+import { PositionClose } from '@penumbra-zone/protobuf/penumbra/core/component/dex/v1/dex_pb';
+import { ActionViewBaseProps, GetMetadataByAssetId } from '../types';
+import { ActionWrapper } from '../shared/wrapper';
+import { ActionRow } from '../shared/action-row';
+import { bech32mPositionId } from '@penumbra-zone/bech32m/plpid';
+import { shorten } from '@penumbra-zone/types/string';
+
+export interface PositionCloseActionProps extends ActionViewBaseProps {
+  value: PositionClose;
+  getMetadataByAssetId?: GetMetadataByAssetId;
+}
+
+export const PositionCloseAction = ({ value }: PositionCloseActionProps) => {
+  return (
+    <ActionWrapper
+      title='Position Close'
+      infoRows={
+        <>
+          {value.positionId && (
+            <ActionRow
+              label='Position ID'
+              info={shorten(bech32mPositionId(value.positionId), 8)}
+              copyText={bech32mPositionId(value.positionId)}
+            />
+          )}
+        </>
+      }
+    />
+  );
+};

packages/ui/src/ActionView/position/position-open.tsx

@@ -0,0 +1,118 @@
+import { useMemo } from 'react';
+import { PositionOpen } from '@penumbra-zone/protobuf/penumbra/core/component/dex/v1/dex_pb';
+import { ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
+import { ValueViewComponent } from '../../ValueView';
+import { AssetGroup } from '../../AssetIcon';
+import { Density } from '../../Density';
+import { Pill } from '../../Pill';
+import { Text } from '../../Text';
+import { ActionViewBaseProps } from '../types';
+import { ActionWrapper } from '../shared/wrapper';
+import { ActionRow } from '../shared/action-row';
+
+export interface PositionOpenActionProps extends ActionViewBaseProps {
+  value: PositionOpen;
+}
+
+export const PositionOpenAction = ({ value, getMetadataByAssetId }: PositionOpenActionProps) => {
+  const asset1 = useMemo(() => {
+    const id = value.position?.phi?.pair?.asset1;
+    return id ? getMetadataByAssetId?.(id) : undefined;
+  }, [value, getMetadataByAssetId]);
+
+  const asset2 = useMemo(() => {
+    const id = value.position?.phi?.pair?.asset2;
+    return id ? getMetadataByAssetId?.(id) : undefined;
+  }, [value, getMetadataByAssetId]);
+
+  // TODO: find a way to compute positionId without WASM functions
+  const positionId = useMemo(() => {
+    return '';
+  }, []);
+
+  const r1 = useMemo(() => {
+    if (!value.position?.reserves?.r1?.lo) {
+      return undefined;
+    }
+    return new ValueView({
+      valueView: asset1
+        ? {
+            case: 'knownAssetId',
+            value: {
+              metadata: asset1,
+              amount: value.position.reserves.r1,
+            },
+          }
+        : {
+            case: 'unknownAssetId',
+            value: {
+              amount: value.position.reserves.r1,
+              assetId: value.position.phi?.pair?.asset1,
+            },
+          },
+    });
+  }, [asset1, value]);
+
+  const r2 = useMemo(() => {
+    if (!value.position?.reserves?.r2?.lo) {
+      return undefined;
+    }
+    return new ValueView({
+      valueView: asset2
+        ? {
+            case: 'knownAssetId',
+            value: {
+              metadata: asset2,
+              amount: value.position.reserves.r2,
+            },
+          }
+        : {
+            case: 'unknownAssetId',
+            value: {
+              amount: value.position.reserves.r2,
+              assetId: value.position.phi?.pair?.asset2,
+            },
+          },
+    });
+  }, [asset2, value]);
+
+  return (
+    <ActionWrapper
+      title='Position Open'
+      infoRows={
+        <>
+          {positionId && <ActionRow label='Position ID' info={positionId} />}
+
+          {!!value.position?.phi?.component?.fee && (
+            <ActionRow label='Fee' info={value.position.phi.component.fee} />
+          )}
+
+          <Density slim>
+            {r1 && (
+              <ActionRow
+                label='Reserves'
+                info={<ValueViewComponent valueView={r1} priority='tertiary' showIcon={false} />}
+              />
+            )}
+            {r2 && (
+              <ActionRow
+                label='Reserves'
+                info={<ValueViewComponent valueView={r2} priority='tertiary' showIcon={false} />}
+              />
+            )}
+          </Density>
+        </>
+      }
+    >
+      <Pill>
+        <AssetGroup assets={[asset1, asset2]} variant='split' />
+        <span />
+        <Text detailTechnical>
+          {asset1?.symbol}
+          {!!asset1 && !!asset2 && '/'}
+          {asset2?.symbol}
+        </Text>
+      </Pill>
+    </ActionWrapper>
+  );
+};

packages/ui/src/ActionView/position/position-reward-claim.tsx

@@ -0,0 +1,28 @@
+import { PositionRewardClaim } from '@penumbra-zone/protobuf/penumbra/core/component/dex/v1/dex_pb';
+import { ActionWrapper } from '../shared/wrapper';
+import { ActionRow } from '../shared/action-row';
+import { shorten } from '@penumbra-zone/types/string';
+import { bech32mPositionId } from '@penumbra-zone/bech32m/plpid';
+
+export interface PositionRewardClaimActionProps {
+  value: PositionRewardClaim;
+}
+
+export const PositionRewardClaimAction = ({ value }: PositionRewardClaimActionProps) => {
+  return (
+    <ActionWrapper
+      title='Position Reward Claim'
+      infoRows={
+        <>
+          {value.positionId && (
+            <ActionRow
+              label='Position ID'
+              info={shorten(bech32mPositionId(value.positionId), 8)}
+              copyText={bech32mPositionId(value.positionId)}
+            />
+          )}
+        </>
+      }
+    />
+  );
+};

packages/ui/src/ActionView/position/position-withdraw.tsx

@@ -0,0 +1,28 @@
+import { PositionWithdraw } from '@penumbra-zone/protobuf/penumbra/core/component/dex/v1/dex_pb';
+import { shorten } from '@penumbra-zone/types/string';
+import { bech32mPositionId } from '@penumbra-zone/bech32m/plpid';
+import { ActionWrapper } from '../shared/wrapper';
+import { ActionRow } from '../shared/action-row';
+
+export interface PositionWithdrawActionProps {
+  value: PositionWithdraw;
+}
+
+export const PositionWithdrawAction = ({ value }: PositionWithdrawActionProps) => {
+  return (
+    <ActionWrapper
+      title='Position Withdraw'
+      infoRows={
+        <>
+          {value.positionId && (
+            <ActionRow
+              label='Position ID'
+              info={shorten(bech32mPositionId(value.positionId), 8)}
+              copyText={bech32mPositionId(value.positionId)}
+            />
+          )}
+        </>
+      }
+    />
+  );
+};