feat(ui): #2053: implement PositionWithdraw and RewardClaim actions

penumbra-zone · Feb 21, 2025 · 2fcb394 · 2fcb394
1 parent c8ff315
commit 2fcb394
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 11 deletions.
diff --git a/packages/ui/src/ActionView/index.stories.tsx b/packages/ui/src/ActionView/index.stories.tsx
@@ -14,6 +14,8 @@ import {
   registry,
   PositionOpenAction,
   PositionCloseAction,
+  PositionWithdrawAction,
+  PositionRewardClaimAction,
 } from '../utils/bufs';
 
 const OPTIONS: Record<string, ActionViewMessage> = {
@@ -23,6 +25,8 @@ const OPTIONS: Record<string, ActionViewMessage> = {
   SwapClaim: SwapClaimAction,
   PositionOpen: PositionOpenAction,
   PositionClose: PositionCloseAction,
+  PositionWithdraw: PositionWithdrawAction,
+  PositionRewardClaim: PositionRewardClaimAction,
   'Opaque: Spend': SpendActionOpaque,
   'Opaque: Output': OutputActionOpaque,
   'Opaque: Swap': SwapActionOpaque,

diff --git a/packages/ui/src/ActionView/position/position-reward-claim.tsx b/packages/ui/src/ActionView/position/position-reward-claim.tsx
@@ -1,11 +1,28 @@
 import { PositionRewardClaim } from '@penumbra-zone/protobuf/penumbra/core/component/dex/v1/dex_pb';
-import { UnknownAction } from '../actions/unknown';
+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;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
-export const PositionRewardClaimAction = (_: PositionRewardClaimActionProps) => {
-  return <UnknownAction label='Position Reward Claim' opaque={false} />;
+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)}
+            />
+          )}
+        </>
+      }
+    />
+  );
 };
diff --git a/packages/ui/src/ActionView/position/position-withdraw.tsx b/packages/ui/src/ActionView/position/position-withdraw.tsx
@@ -1,11 +1,28 @@
 import { PositionWithdraw } from '@penumbra-zone/protobuf/penumbra/core/component/dex/v1/dex_pb';
-import { UnknownAction } from '../actions/unknown';
+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;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars -- unimplemented
-export const PositionWithdrawAction = (_: PositionWithdrawActionProps) => {
-  return <UnknownAction label='Position Withdraw' opaque={false} />;
+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)}
+            />
+          )}
+        </>
+      }
+    />
+  );
 };
diff --git a/packages/ui/src/utils/bufs/action-view.ts b/packages/ui/src/utils/bufs/action-view.ts
@@ -6,8 +6,9 @@ import {
 } from '@penumbra-zone/protobuf/penumbra/core/component/shielded_pool/v1/shielded_pool_pb';
 import {
   PositionClose,
-  PositionId,
   PositionOpen,
+  PositionRewardClaim,
+  PositionWithdraw,
   SwapClaimView,
   SwapView,
 } from '@penumbra-zone/protobuf/penumbra/core/component/dex/v1/dex_pb';
@@ -228,12 +229,40 @@ export const PositionCloseAction = new ActionView({
   actionView: {
     case: 'positionClose',
     value: new PositionClose({
-      positionId: new PositionId({
+      positionId: {
         inner: new Uint8Array([
           0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5,
           6, 7,
         ]),
-      }),
+      },
+    }),
+  },
+});
+
+export const PositionWithdrawAction = new ActionView({
+  actionView: {
+    case: 'positionWithdraw',
+    value: new PositionWithdraw({
+      positionId: {
+        inner: new Uint8Array([
+          0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5,
+          6, 7,
+        ]),
+      },
+    }),
+  },
+});
+
+export const PositionRewardClaimAction = new ActionView({
+  actionView: {
+    case: 'positionRewardClaim',
+    value: new PositionRewardClaim({
+      positionId: {
+        inner: new Uint8Array([
+          0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5,
+          6, 7,
+        ]),
+      },
     }),
   },
 });