feat(ui): #2053: create skeleton files for unimplemented actions

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

@@ -7,6 +7,27 @@ import { SpendAction } from './actions/spend';
 import { OutputAction } from './actions/output';
 import { SwapAction } from './actions/swap';
 import { SwapClaimAction } from './actions/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 { ProposalDepositClaimAction } from './actions/proposal-deposit-claim';
+import { ProposalSubmitAction } from './actions/proposal-submit';
+import { ProposalWithdrawAction } from './actions/proposal-withdraw';
+import { ValidatorDefinitionAction } from './actions/validator-definition';
+import { ValidatorVoteAction } from './actions/validator-vote';
+import { DutchAuctionEndAction } from './actions/dutch-auction-end';
+import { DutchAuctionScheduleAction } from './actions/dutch-auction-schedule';
+import { DutchAuctionWithdrawAction } from './actions/dutch-auction-withdraw';
+import { CommunityPoolDepositAction } from './actions/community-pool-deposit';
+import { CommunityPoolOutputAction } from './actions/community-pool-output';
+import { CommunityPoolSpendAction } from './actions/community-pool-spend';
 
 export interface ActionViewProps {
   action: ActionViewMessage;
@@ -18,27 +39,27 @@ const componentMap = {
   swap: SwapAction,
   // TODO: Implement the actions below
   swapClaim: SwapClaimAction,
-  delegate: UnknownAction,
-  delegatorVote: UnknownAction,
-  ibcRelayAction: UnknownAction,
-  ics20Withdrawal: UnknownAction,
-  positionClose: UnknownAction,
-  positionOpen: UnknownAction,
-  positionRewardClaim: UnknownAction,
-  positionWithdraw: UnknownAction,
-  proposalDepositClaim: UnknownAction,
-  proposalSubmit: UnknownAction,
-  proposalWithdraw: UnknownAction,
-  undelegate: UnknownAction,
-  undelegateClaim: UnknownAction,
-  validatorDefinition: UnknownAction,
-  validatorVote: UnknownAction,
-  actionDutchAuctionEnd: UnknownAction,
-  actionDutchAuctionSchedule: UnknownAction,
-  actionDutchAuctionWithdraw: UnknownAction,
-  communityPoolDeposit: UnknownAction,
-  communityPoolOutput: UnknownAction,
-  communityPoolSpend: UnknownAction,
+  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,
+  validatorDefinition: ValidatorDefinitionAction,
+  validatorVote: ValidatorVoteAction,
+  actionDutchAuctionEnd: DutchAuctionEndAction,
+  actionDutchAuctionSchedule: DutchAuctionScheduleAction,
+  actionDutchAuctionWithdraw: DutchAuctionWithdrawAction,
+  communityPoolDeposit: CommunityPoolDepositAction,
+  communityPoolOutput: CommunityPoolOutputAction,
+  communityPoolSpend: CommunityPoolSpendAction,
   unknown: UnknownAction,
 } as const satisfies Record<ActionViewType | 'unknown', unknown>;
 

packages/ui/src/ActionView/actions/community-pool-deposit.tsx

@@ -0,0 +1,11 @@
+import { CommunityPoolDeposit } from '@penumbra-zone/protobuf/penumbra/core/component/governance/v1/governance_pb';
+import { UnknownAction } from './unknown';
+
+export interface CommunityPoolDepositActionProps {
+  value: CommunityPoolDeposit;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const CommunityPoolDepositAction = (_: CommunityPoolDepositActionProps) => {
+  return <UnknownAction label='Community Pool Deposit' opaque={false} />;
+};

packages/ui/src/ActionView/actions/community-pool-output.tsx

@@ -0,0 +1,11 @@
+import { CommunityPoolOutput } from '@penumbra-zone/protobuf/penumbra/core/component/governance/v1/governance_pb';
+import { UnknownAction } from './unknown';
+
+export interface CommunityPoolOutputActionProps {
+  value: CommunityPoolOutput;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const CommunityPoolOutputAction = (_: CommunityPoolOutputActionProps) => {
+  return <UnknownAction label='Community Pool Output' opaque={false} />;
+};

packages/ui/src/ActionView/actions/community-pool-spend.tsx

@@ -0,0 +1,11 @@
+import { CommunityPoolSpend } from '@penumbra-zone/protobuf/penumbra/core/component/governance/v1/governance_pb';
+import { UnknownAction } from './unknown';
+
+export interface CommunityPoolSpendActionProps {
+  value: CommunityPoolSpend;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const CommunityPoolSpendAction = (_: CommunityPoolSpendActionProps) => {
+  return <UnknownAction label='Community Pool Spend' opaque={false} />;
+};

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

@@ -0,0 +1,11 @@
+import { Delegate } from '@penumbra-zone/protobuf/penumbra/core/component/stake/v1/stake_pb';
+import { UnknownAction } from './unknown';
+
+export interface DelegateActionProps {
+  value: Delegate;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const DelegateAction = (_: DelegateActionProps) => {
+  return <UnknownAction label='Delegate' opaque={false} />;
+};

packages/ui/src/ActionView/actions/delegator-vote.tsx

@@ -0,0 +1,10 @@
+import { DelegatorVoteView } from '@penumbra-zone/protobuf/penumbra/core/component/governance/v1/governance_pb';
+import { UnknownAction } from './unknown';
+
+export interface DelegatorVoteActionProps {
+  value: DelegatorVoteView;
+}
+
+export const DelegatorVoteAction = ({ value }: DelegatorVoteActionProps) => {
+  return <UnknownAction label='Delegator Vote' opaque={value.delegatorVote.case === 'opaque'} />;
+};

packages/ui/src/ActionView/actions/dutch-auction-end.tsx

@@ -0,0 +1,11 @@
+import { UnknownAction } from './unknown';
+import { ActionDutchAuctionEnd } from '@penumbra-zone/protobuf/penumbra/core/component/auction/v1/auction_pb';
+
+export interface DutchAuctionEndActionProps {
+  value: ActionDutchAuctionEnd;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const DutchAuctionEndAction = (_: DutchAuctionEndActionProps) => {
+  return <UnknownAction label='Dutch Auction End' opaque={false} />;
+};

packages/ui/src/ActionView/actions/dutch-auction-schedule.tsx

@@ -0,0 +1,11 @@
+import { ActionDutchAuctionScheduleView } from '@penumbra-zone/protobuf/penumbra/core/component/auction/v1/auction_pb';
+import { UnknownAction } from './unknown';
+
+export interface DutchAuctionScheduleActionProps {
+  value: ActionDutchAuctionScheduleView;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const DutchAuctionScheduleAction = (_: DutchAuctionScheduleActionProps) => {
+  return <UnknownAction label='Dutch Auction Schedule' opaque={false} />;
+};

packages/ui/src/ActionView/actions/dutch-auction-withdraw.tsx

@@ -0,0 +1,11 @@
+import { ActionDutchAuctionWithdrawView } from '@penumbra-zone/protobuf/penumbra/core/component/auction/v1/auction_pb';
+import { UnknownAction } from './unknown';
+
+export interface DutchAuctionWithdrawActionProps {
+  value: ActionDutchAuctionWithdrawView;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const DutchAuctionWithdrawAction = (_: DutchAuctionWithdrawActionProps) => {
+  return <UnknownAction label='Dutch Auction Withdraw' opaque={false} />;
+};

packages/ui/src/ActionView/actions/ibc-relay.tsx

@@ -0,0 +1,11 @@
+import { IbcRelay } from '@penumbra-zone/protobuf/penumbra/core/component/ibc/v1/ibc_pb';
+import { UnknownAction } from './unknown';
+
+export interface IbcRelayActionProps {
+  value: IbcRelay;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const IbcRelayAction = (_: IbcRelayActionProps) => {
+  return <UnknownAction label='IBC Relay' opaque={false} />;
+};

packages/ui/src/ActionView/actions/ics-20-withdrawal.tsx

@@ -0,0 +1,11 @@
+import { Ics20Withdrawal } from '@penumbra-zone/protobuf/penumbra/core/component/ibc/v1/ibc_pb';
+import { UnknownAction } from './unknown';
+
+export interface Ics20WithdrawalActionProps {
+  value: Ics20Withdrawal;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const Ics20WithdrawalAction = (_: Ics20WithdrawalActionProps) => {
+  return <UnknownAction label='ICS 20 Withdrawal' opaque={false} />;
+};

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

@@ -0,0 +1,11 @@
+import { PositionClose } from '@penumbra-zone/protobuf/penumbra/core/component/dex/v1/dex_pb';
+import { UnknownAction } from './unknown';
+
+export interface PositionCloseActionProps {
+  value: PositionClose;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const PositionCloseAction = (_: PositionCloseActionProps) => {
+  return <UnknownAction label='Position Close' opaque={false} />;
+};

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

@@ -0,0 +1,11 @@
+import { PositionOpen } from '@penumbra-zone/protobuf/penumbra/core/component/dex/v1/dex_pb';
+import { UnknownAction } from './unknown';
+
+export interface PositionOpenActionProps {
+  value: PositionOpen;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const PositionOpenAction = (_: PositionOpenActionProps) => {
+  return <UnknownAction label='Position Open' opaque={false} />;
+};

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

@@ -0,0 +1,11 @@
+import { PositionRewardClaim } from '@penumbra-zone/protobuf/penumbra/core/component/dex/v1/dex_pb';
+import { UnknownAction } from './unknown';
+
+export interface PositionRewardClaimActionProps {
+  value: PositionRewardClaim;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const PositionRewardClaimAction = (_: PositionRewardClaimActionProps) => {
+  return <UnknownAction label='Position Reward Claim' opaque={false} />;
+};

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

@@ -0,0 +1,11 @@
+import { PositionWithdraw } from '@penumbra-zone/protobuf/penumbra/core/component/dex/v1/dex_pb';
+import { UnknownAction } from './unknown';
+
+export interface PositionWithdrawActionProps {
+  value: PositionWithdraw;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const PositionWithdrawAction = (_: PositionWithdrawActionProps) => {
+  return <UnknownAction label='Position Withdraw' opaque={false} />;
+};

packages/ui/src/ActionView/actions/proposal-deposit-claim.tsx

@@ -0,0 +1,11 @@
+import { ProposalDepositClaim } from '@penumbra-zone/protobuf/penumbra/core/component/governance/v1/governance_pb';
+import { UnknownAction } from './unknown';
+
+export interface ProposalDepositClaimActionProps {
+  value: ProposalDepositClaim;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const ProposalDepositClaimAction = (_: ProposalDepositClaimActionProps) => {
+  return <UnknownAction label='Proposal Deposit Claim' opaque={false} />;
+};

packages/ui/src/ActionView/actions/proposal-submit.tsx

@@ -0,0 +1,11 @@
+import { ProposalSubmit } from '@penumbra-zone/protobuf/penumbra/core/component/governance/v1/governance_pb';
+import { UnknownAction } from './unknown';
+
+export interface ProposalSubmitActionProps {
+  value: ProposalSubmit;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const ProposalSubmitAction = (_: ProposalSubmitActionProps) => {
+  return <UnknownAction label='Proposal Submit' opaque={false} />;
+};

packages/ui/src/ActionView/actions/proposal-withdraw.tsx

@@ -0,0 +1,11 @@
+import { ProposalWithdraw } from '@penumbra-zone/protobuf/penumbra/core/component/governance/v1/governance_pb';
+import { UnknownAction } from './unknown';
+
+export interface ProposalWithdrawActionProps {
+  value: ProposalWithdraw;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const ProposalWithdrawAction = (_: ProposalWithdrawActionProps) => {
+  return <UnknownAction label='Proposal Withdraw' opaque={false} />;
+};

packages/ui/src/ActionView/actions/swap-claim.tsx

@@ -6,5 +6,5 @@ export interface SwapClaimActionProps {
 }
 
 export const SwapClaimAction = ({ value }: SwapClaimActionProps) => {
-  return <UnknownAction label='Swap Claim' opaque={value.swapClaimView.case === 'opaque'} />
+  return <UnknownAction label='Swap Claim' opaque={value.swapClaimView.case === 'opaque'} />;
 };

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

@@ -107,14 +107,16 @@ export const SwapAction = ({ value }: SwapActionProps) => {
     <ActionWrapper
       title='Swap'
       opaque={!isVisible}
-      infoRows={isVisible &&
-        <>
-          {!!fee && <ActionRow label='Swap Claim fee' info={fee} />}
-          {!!txId && (
-            <ActionRow label='Swap Claim Transaction' info={shorten(txId, 8)} copyText={txId} />
-          )}
-          {unfilled && <ActionRow label='Unfilled Amount' info={unfilled} />}
-        </>
+      infoRows={
+        isVisible && (
+          <>
+            {!!fee && <ActionRow label='Swap Claim fee' info={fee} />}
+            {!!txId && (
+              <ActionRow label='Swap Claim Transaction' info={shorten(txId, 8)} copyText={txId} />
+            )}
+            {unfilled && <ActionRow label='Unfilled Amount' info={unfilled} />}
+          </>
+        )
       }
     >
       {swap && (

packages/ui/src/ActionView/actions/undelegate-claim.tsx

@@ -0,0 +1,11 @@
+import { UnknownAction } from './unknown';
+import { UndelegateClaim } from '@penumbra-zone/protobuf/penumbra/core/component/stake/v1/stake_pb';
+
+export interface UndelegateClaimActionProps {
+  value: UndelegateClaim;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const UndelegateClaimAction = (_: UndelegateClaimActionProps) => {
+  return <UnknownAction label='Swap Claim' opaque={false} />;
+};

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

@@ -0,0 +1,11 @@
+import { Undelegate } from '@penumbra-zone/protobuf/penumbra/core/component/stake/v1/stake_pb';
+import { UnknownAction } from './unknown';
+
+export interface UndelegateActionProps {
+  value: Undelegate;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const UndelegateAction = (_: UndelegateActionProps) => {
+  return <UnknownAction label='Undelegate' opaque={false} />;
+};

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

@@ -6,10 +6,12 @@ export interface UnknownActionProps {
   opaque?: boolean;
 }
 
-export const UnknownAction = ({ label, opaque }: UnknownActionProps) => {
+export const UnknownAction = ({ label = 'Unknown action', opaque }: UnknownActionProps) => {
   return (
     <ActionWrapper opaque={opaque} title={label}>
-      <Text smallTechnical>Unimplemented</Text>
+      <Text smallTechnical color='text.secondary'>
+        Unimplemented
+      </Text>
     </ActionWrapper>
   );
 };

packages/ui/src/ActionView/actions/validator-definition.tsx

@@ -0,0 +1,11 @@
+import { ValidatorDefinition } from '@penumbra-zone/protobuf/penumbra/core/component/stake/v1/stake_pb';
+import { UnknownAction } from './unknown';
+
+export interface ValidatorDefinitionActionProps {
+  value: ValidatorDefinition;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const ValidatorDefinitionAction = (_: ValidatorDefinitionActionProps) => {
+  return <UnknownAction label='Validator Definition' opaque={false} />;
+};

packages/ui/src/ActionView/actions/validator-vote.tsx

@@ -0,0 +1,11 @@
+import { ValidatorVote } from '@penumbra-zone/protobuf/penumbra/core/component/governance/v1/governance_pb';
+import { UnknownAction } from './unknown';
+
+export interface ValidatorVoteActionProps {
+  value: ValidatorVote;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
+export const ValidatorVoteAction = (_: ValidatorVoteActionProps) => {
+  return <UnknownAction label='Delegator Vote' opaque={false} />;
+};

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

@@ -2,12 +2,21 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { ActionView as ActionViewMessage } from '@penumbra-zone/protobuf/penumbra/core/transaction/v1/transaction_pb';
 
 import { ActionView } from '.';
-import { SpendAction, OutputAction, SwapAction, SpendActionOpaque, OutputActionOpaque, SwapActionOpaque } from '../utils/bufs';
+import {
+  SpendAction,
+  OutputAction,
+  SwapAction,
+  SpendActionOpaque,
+  OutputActionOpaque,
+  SwapActionOpaque,
+  SwapClaimAction,
+} from '../utils/bufs';
 
 const OPTIONS: Record<string, ActionViewMessage> = {
   Spend: SpendAction,
   Output: OutputAction,
   Swap: SwapAction,
+  SwapClaim: SwapClaimAction,
   'Opaque: Spend': SpendActionOpaque,
   'Opaque: Output': OutputActionOpaque,
   'Opaque: Swap': SwapActionOpaque,