feat(ui): #2053: Add base for the ActionView component

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

@@ -0,0 +1,51 @@
+import { ActionView as ActionViewMessage } from '@penumbra-zone/protobuf/penumbra/core/transaction/v1/transaction_pb';
+import { ActionViewType, ActionViewValueType } from './types';
+import { UnknownAction } from './unknown';
+
+import { SpendAction } from './actions/spend';
+import { OutputAction } from './actions/output';
+import { FC } from 'react';
+
+export interface ActionViewProps {
+  action: ActionViewMessage;
+}
+
+const componentMap = {
+  spend: SpendAction,
+  output: OutputAction,
+  delegate: UnknownAction,
+  delegatorVote: UnknownAction,
+  ibcRelayAction: UnknownAction,
+  ics20Withdrawal: UnknownAction,
+  positionClose: UnknownAction,
+  positionOpen: UnknownAction,
+  positionRewardClaim: UnknownAction,
+  positionWithdraw: UnknownAction,
+  proposalDepositClaim: UnknownAction,
+  proposalSubmit: UnknownAction,
+  proposalWithdraw: UnknownAction,
+  swap: UnknownAction,
+  swapClaim: UnknownAction,
+  undelegate: UnknownAction,
+  undelegateClaim: UnknownAction,
+  validatorDefinition: UnknownAction,
+  validatorVote: UnknownAction,
+  actionDutchAuctionEnd: UnknownAction,
+  actionDutchAuctionSchedule: UnknownAction,
+  actionDutchAuctionWithdraw: UnknownAction,
+  communityPoolDeposit: UnknownAction,
+  communityPoolOutput: UnknownAction,
+  communityPoolSpend: UnknownAction,
+  unknown: UnknownAction,
+} as const satisfies Record<ActionViewType | 'unknown', unknown>;
+
+/**
+ * In Penumbra, each transaction has 'actions' of different types,
+ * representing a blockchain state change performed by a transaction.
+ */
+export const ActionView = ({ action }: ActionViewProps) => {
+  const type = action.actionView.case ?? 'unknown';
+  const Component = componentMap[type] as FC<{ value?: ActionViewValueType }>;
+
+  return <Component value={action.actionView.value} />;
+};

packages/ui/src/ActionView/actions/incognito-icon.tsx

@@ -0,0 +1,18 @@
+export const IncognitoIcon = () => {
+  return (
+    <svg
+      className='size-4'
+      xmlns='http://www.w3.org/2000/svg'
+      width='16'
+      height='16'
+      viewBox='0 0 16 16'
+      fill='currentColor'
+    >
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M3.34267 6.55733C3.33656 6.59346 3.33343 6.63003 3.33333 6.66667H2.66667C2.48986 6.66667 2.32029 6.7369 2.19526 6.86193C2.07024 6.98695 2 7.15652 2 7.33333C2 7.51014 2.07024 7.67971 2.19526 7.80474C2.32029 7.92976 2.48986 8 2.66667 8H13.3333C13.5101 8 13.6797 7.92976 13.8047 7.80474C13.9298 7.67971 14 7.51014 14 7.33333C14 7.15652 13.9298 6.98695 13.8047 6.86193C13.6797 6.7369 13.5101 6.66667 13.3333 6.66667H12.6667C12.6666 6.63003 12.6634 6.59346 12.6573 6.55733L12.1767 3.67067C12.0987 3.20368 11.8576 2.7795 11.4963 2.47358C11.1349 2.16766 10.6768 1.99985 10.2033 2H5.79667C5.32312 1.99988 4.8649 2.16778 4.50354 2.47383C4.14219 2.77989 3.90115 3.20423 3.82333 3.67133L3.34267 6.55733ZM4.66667 8.66667C5.25797 8.66652 5.83256 8.8629 6.30007 9.22494C6.76758 9.58698 7.10151 10.0941 7.24933 10.6667H8.75067C8.91449 10.0397 9.30091 9.49374 9.83778 9.1308C10.3747 8.76786 11.0253 8.61273 11.6681 8.69438C12.311 8.77602 12.9022 9.08886 13.3313 9.57448C13.7604 10.0601 13.9981 10.6853 14 11.3333C14.0006 11.9828 13.7642 12.6103 13.3351 13.0978C12.906 13.5854 12.3136 13.8996 11.6693 13.9814C11.025 14.0632 10.3729 13.9071 9.83554 13.5423C9.29816 13.1774 8.9124 12.6291 8.75067 12H7.24933C7.08551 12.627 6.69909 13.1729 6.16222 13.5359C5.62535 13.8988 4.97473 14.0539 4.33185 13.9723C3.68897 13.8906 3.09779 13.5778 2.66868 13.0922C2.23958 12.6066 2.00189 11.9814 2 11.3333C2 10.6261 2.28095 9.94781 2.78105 9.44772C3.28115 8.94762 3.95942 8.66667 4.66667 8.66667Z'
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,15 @@
+import { OutputView } from '@penumbra-zone/protobuf/penumbra/core/component/shielded_pool/v1/shielded_pool_pb';
+import { Density } from '../../Density';
+import { ActionWrapper } from './wrapper';
+
+export interface SpendActionProps {
+  value: OutputView;
+}
+
+export const OutputAction = ({ value }: SpendActionProps) => {
+  return (
+    <ActionWrapper title='Spend' opaque={value.outputView.case === 'opaque'}>
+      {value.outputView.case === 'visible' && <Density slim>Outputsss</Density>}
+    </ActionWrapper>
+  );
+};

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

@@ -0,0 +1,15 @@
+import { SpendView } from '@penumbra-zone/protobuf/penumbra/core/component/shielded_pool/v1/shielded_pool_pb';
+import { Density } from '../../Density';
+import { ActionWrapper } from './wrapper';
+
+export interface SpendActionProps {
+  value: SpendView;
+}
+
+export const SpendAction = ({ value }: SpendActionProps) => {
+  return (
+    <ActionWrapper title='Spend' opaque={value.spendView.case === 'opaque'}>
+      {value.spendView.case === 'visible' && <Density slim>Actions</Density>}
+    </ActionWrapper>
+  );
+};

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

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { IncognitoIcon } from './incognito-icon';
+import { Text } from '../../Text';
+
+export interface ActionWrapperProps {
+  title: string;
+  opaque?: boolean;
+  children?: ReactNode;
+}
+
+export const ActionWrapper = ({ opaque, children, title }: ActionWrapperProps) => {
+  // const density = useDensity();
+
+  return (
+    <div className='flex h-10 w-full items-center justify-between gap-1 rounded-sm bg-other-tonalFill5 px-3 py-2'>
+      {opaque && (
+        <i className='block text-neutral-light'>
+          <IncognitoIcon />
+        </i>
+      )}
+
+      <div className='grow truncate'>
+        <Text smallTechnical color={opaque ? 'text.secondary' : 'text.primary'}>
+          {title}
+        </Text>
+      </div>
+
+      {!opaque && <div className='flex items-center gap-1'>{children}</div>}
+    </div>
+  );
+};

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

@@ -0,0 +1,29 @@
+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 } from '../utils/bufs';
+
+const OPTIONS: Record<string, ActionViewMessage> = {
+  Spend: SpendAction,
+};
+
+const meta: Meta<typeof ActionView> = {
+  component: ActionView,
+  tags: ['autodocs', '!dev', 'density'],
+  argTypes: {
+    action: {
+      options: Object.keys(OPTIONS),
+      mapping: OPTIONS,
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ActionView>;
+
+export const Basic: Story = {
+  args: {
+    action: SpendAction,
+  },
+};

packages/ui/src/ActionView/index.tsx

@@ -0,0 +1,3 @@
+export { ActionView } from './action-view';
+export type { ActionViewProps } from './action-view';
+export type { ActionViewType } from './types';

packages/ui/src/ActionView/types.ts

@@ -0,0 +1,5 @@
+import { ActionView } from '@penumbra-zone/protobuf/penumbra/core/transaction/v1/transaction_pb';
+
+export type ActionViewType = Exclude<ActionView['actionView']['case'], undefined>;
+
+export type ActionViewValueType = Exclude<ActionView['actionView']['value'], undefined>;

packages/ui/src/ActionView/unknown.tsx

@@ -0,0 +1,9 @@
+import { Text } from '../Text';
+
+export const UnknownAction = () => {
+  return (
+    <div>
+      <Text>Unknown action</Text>
+    </div>
+  );
+};

packages/ui/src/utils/bufs/action-view.ts

@@ -0,0 +1,51 @@
+import { ActionView } from '@penumbra-zone/protobuf/penumbra/core/transaction/v1/transaction_pb';
+import { SpendView } from '@penumbra-zone/protobuf/penumbra/core/component/shielded_pool/v1/shielded_pool_pb';
+
+export const SpendAction = new ActionView({
+  actionView: {
+    case: 'spend',
+    value: new SpendView({
+      spendView: {
+        case: 'visible',
+        value: {
+          note: {
+            address: {
+              addressView: {
+                case: 'decoded',
+                value: {
+                  address: {
+                    inner: Uint8Array.from([0, 1, 2, 3]),
+                  },
+                  index: {
+                    account: 0,
+                  },
+                },
+              },
+            },
+            value: {
+              valueView: {
+                case: 'unknownAssetId',
+                value: {
+                  amount: {
+                    hi: 1n,
+                    lo: 0n,
+                  },
+                  assetId: {
+                    inner: Uint8Array.from([0, 1, 2, 3]),
+                  },
+                },
+              },
+            },
+          },
+          spend: {
+            body: {
+              balanceCommitment: {
+                inner: Uint8Array.from([0, 1, 2, 3]),
+              },
+            },
+          },
+        },
+      },
+    }),
+  },
+});

packages/ui/src/utils/bufs/index.ts

@@ -7,3 +7,4 @@ export * from './metadata';
 export * from './value-view';
 export * from './address-view';
 export * from './balances-responses';
+export * from './action-view';