Update positions after theyre opened/closed/withdrawn

src/pages/trade/api/positions.ts

@@ -7,11 +7,13 @@ import {
   PositionId,
   PositionState_PositionStateEnum,
 } from '@penumbra-zone/protobuf/penumbra/core/component/dex/v1/dex_pb';
+import { bech32mPositionId } from '@penumbra-zone/bech32m/plpid';
+import { queryClient } from '@/shared/const/queryClient';
 
 // 1) Query prax to get position ids
 // 2) Take those position ids and get position info from the node
 // Context on two-step fetching process: https://github.com/penumbra-zone/penumbra/pull/4837
-const fetchQuery = async (): Promise<Map<PositionId, Position>> => {
+const fetchQuery = async (): Promise<Map<string, Position>> => {
   const ownedRes = await Array.fromAsync(penumbra.service(ViewService).ownedPositionIds({}));
   const positionIds = ownedRes.map(r => r.positionId).filter(Boolean) as PositionId[];
 
@@ -23,12 +25,12 @@ const fetchQuery = async (): Promise<Map<PositionId, Position>> => {
   }
   const positions = positionsRes.map(r => r.data).filter(Boolean) as Position[];
 
-  const positionsById = new Map<PositionId, Position>();
+  const positionsById = new Map<string, Position>();
   positions.forEach((position, index) => {
     // The responses are in the same order as the requests. Hence, the index matching.
     const positionId = positionIds[index];
     if (positionId) {
-      positionsById.set(positionId, position);
+      positionsById.set(bech32mPositionId(positionId), position);
     }
   });
 
@@ -47,6 +49,10 @@ export const usePositions = () => {
   });
 };
 
+export const updatePositionsQuery = async () => {
+  await queryClient.refetchQueries({ queryKey: ['positions'], enabled: true });
+};
+
 export const stateToString = (state?: PositionState_PositionStateEnum) => {
   switch (state) {
     case PositionState_PositionStateEnum.UNSPECIFIED: {

src/pages/trade/model/positions.ts

@@ -10,14 +10,13 @@ import { Amount } from '@penumbra-zone/protobuf/penumbra/core/num/v1/num_pb';
 import { planBuildBroadcast } from '@/pages/trade/ui/order-form/helpers.tsx';
 import { connectionStore } from '@/shared/model/connection';
 import { AddressIndex } from '@penumbra-zone/protobuf/penumbra/core/keys/v1/keys_pb';
-import { queryClient } from '@/shared/const/queryClient.ts';
 import { isZero } from '@penumbra-zone/types/amount';
 import { penumbra } from '@/shared/const/penumbra.ts';
 import { DexService } from '@penumbra-zone/protobuf';
 import { openToast } from '@penumbra-zone/ui/Toast';
 import { pnum } from '@penumbra-zone/types/pnum';
-import { bech32mPositionId } from '@penumbra-zone/bech32m/plpid';
-
+import { positionIdFromBech32 } from '@penumbra-zone/bech32m/plpid';
+import { updatePositionsQuery } from '@/pages/trade/api/positions';
 export interface DisplayPosition {
   id: PositionId;
   idString: string;
@@ -45,7 +44,7 @@ export interface DisplayAsset {
 
 class PositionsStore {
   public loading = false;
-  public positionsById = new Map<PositionId, Position>();
+  public positionsById = new Map<string, Position>();
   private assets: Metadata[] = [];
   private currentPair: [Metadata, Metadata] | null = null;
 
@@ -67,7 +66,7 @@ class PositionsStore {
       });
 
       await planBuildBroadcast('positionClose', planReq);
-      await this.updatePositionsInCache(positions);
+      await updatePositionsQuery();
     } catch (e) {
       openToast({
         type: 'error',
@@ -99,7 +98,7 @@ class PositionsStore {
       });
 
       await planBuildBroadcast('positionWithdraw', planReq);
-      await this.updatePositionsInCache(positions);
+      await updatePositionsQuery();
     } catch (e) {
       openToast({
         type: 'error',
@@ -111,23 +110,7 @@ class PositionsStore {
     }
   };
 
-  private async updatePositionsInCache(positions: PositionId[]): Promise<void> {
-    const promises = positions.map(id => this.updatePositionInCache(id));
-    await Promise.all(promises);
-  }
-
-  // After a successful action, update the position state in the cache
-  private async updatePositionInCache(positionId: PositionId) {
-    const { data } = await penumbra.service(DexService).liquidityPositionById({ positionId });
-    if (data) {
-      queryClient.setQueryData(['positions'], (positionsById: Map<PositionId, Position>) => {
-        positionsById.set(positionId, data);
-        return positionsById;
-      });
-    }
-  }
-
-  setPositions = (positionsById: Map<PositionId, Position>) => {
+  setPositions = (positionsById: Map<string, Position>) => {
     this.positionsById = positionsById;
   };
 
@@ -323,8 +306,8 @@ class PositionsStore {
         });
 
         return {
-          id: id,
-          idString: bech32mPositionId(id),
+          id: new PositionId(positionIdFromBech32(id)),
+          idString: id,
           orders: orders.map(({ direction, baseAsset, quoteAsset }) => ({
             direction,
             amount:

src/pages/trade/ui/order-form/helpers.tsx

@@ -32,6 +32,7 @@ import { PromiseClient } from '@connectrpc/connect';
 import { penumbra } from '@/shared/const/penumbra';
 import { ReactNode } from 'react';
 import { shorten } from '@penumbra-zone/types/string';
+import { updatePositionsQuery } from '../../api/positions';
 
 type BroadcastStatus = BroadcastTransactionResponse['status'];
 type BuildStatus = (AuthorizeAndBuildResponse | WitnessAndBuildResponse)['status'];
@@ -130,6 +131,8 @@ export const planBuildBroadcast = async (
       persistent: false,
     });
 
+    await updatePositionsQuery();
+
     return transaction;
   } catch (e) {
     console.error(e);

src/pages/trade/ui/order-form/order-form-limit.tsx

@@ -2,9 +2,9 @@ import { observer } from 'mobx-react-lite';
 import { Button } from '@penumbra-zone/ui/Button';
 import { Text } from '@penumbra-zone/ui/Text';
 import { connectionStore } from '@/shared/model/connection';
+import { ConnectButton } from '@/features/connect/connect-button';
 import { OrderInput } from './order-input';
 import { SegmentedControl } from './segmented-control';
-import { ConnectButton } from '@/features/connect/connect-button';
 import { InfoRowTradingFee } from './info-row-trading-fee';
 import { InfoRowGasFee } from './info-row-gas-fee';
 import { SelectGroup } from './select-group';

src/pages/trade/ui/positions.tsx

@@ -13,7 +13,6 @@ import { Tooltip, TooltipProvider } from '@penumbra-zone/ui/Tooltip';
 import { stateToString, usePositions } from '@/pages/trade/api/positions.ts';
 import { Button } from '@penumbra-zone/ui/Button';
 import {
-  Position,
   PositionId,
   PositionState_PositionStateEnum,
 } from '@penumbra-zone/protobuf/penumbra/core/component/dex/v1/dex_pb';
@@ -162,7 +161,9 @@ const Positions = observer(({ showInactive }: { showInactive: boolean }) => {
   const { displayPositions, setPositions, setAssets } = positionsStore;
 
   useEffect(() => {
-    setPositions(data ?? new Map<PositionId, Position>());
+    if (data) {
+      setPositions(data);
+    }
   }, [data, setPositions]);
 
   useEffect(() => {
@@ -190,7 +191,7 @@ const Positions = observer(({ showInactive }: { showInactive: boolean }) => {
   return (
     <TooltipProvider>
       <Density variant='slim'>
-        <div className='flex justify-center px-4'>
+        <div className='flex justify-center px-4 overflow-x-auto'>
           <Table bgColor='base.blackAlt'>
             <Table.Thead>
               <Table.Tr>