show all positions and orders

OrderlyNetwork · Nov 12, 2024 · dd80d51 · dd80d51
1 parent f831269
commit dd80d51
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 39 deletions.
diff --git a/app/components/ClosePosition.tsx b/app/components/ClosePosition.tsx
@@ -18,11 +18,10 @@ type Inputs = {
 };
 
 export const ClosePosition: FC<{
-  symbol: string;
   position: API.PositionExt;
   refresh: import('swr/_internal').KeyedMutator<API.PositionInfo>;
   setOpen: Dispatch<SetStateAction<boolean>>;
-}> = ({ symbol, position, refresh, setOpen }) => {
+}> = ({ position, refresh, setOpen }) => {
   const [loading, setLoading] = useState(false);
 
   const symbolsInfo = useSymbolsInfo();
@@ -36,7 +35,7 @@ export const ClosePosition: FC<{
   });
   const { onSubmit, helper } = useOrderEntry(
     {
-      symbol,
+      symbol: position.symbol,
       side: OrderSide.BUY,
       order_type: OrderType.MARKET
     },
@@ -56,7 +55,7 @@ export const ClosePosition: FC<{
       message: 'Closing position...'
     });
     try {
-      await onSubmit(getInput(data, symbol));
+      await onSubmit(getInput(data, position.symbol));
       update({
         eventCode: 'closePositionSuccess',
         type: 'success',
@@ -78,8 +77,8 @@ export const ClosePosition: FC<{
     }
   };
 
-  const symbolInfo = symbolsInfo[symbol]();
-  const [_, base] = symbol.split('_');
+  const symbolInfo = symbolsInfo[position.symbol]();
+  const [_, base] = position.symbol.split('_');
   const [baseDecimals] = getDecimalsFromTick(symbolInfo);
 
   return (
@@ -97,7 +96,7 @@ export const ClosePosition: FC<{
           rules={{
             validate: {
               custom: async (_, data) => {
-                const errors = await getValidationErrors(data, symbol, helper.validator);
+                const errors = await getValidationErrors(data, position.symbol, helper.validator);
                 return errors?.order_quantity != null ? errors.order_quantity.message : true;
               }
             }

diff --git a/app/components/OrderTabs.tsx b/app/components/OrderTabs.tsx
@@ -12,10 +12,10 @@ export const OrderTabs: FC<{ symbol: string }> = ({ symbol }) => {
       </Tabs.List>
 
       <Tabs.Content value="positions">
-        <Positions symbol={symbol} />
+        <Positions symbol={symbol} showAll={true} />
       </Tabs.Content>
       <Tabs.Content value="pending">
-        <PendingOrders symbol={symbol} />
+        <PendingOrders symbol={symbol} showAll={true} />
       </Tabs.Content>
     </Tabs.Root>
   );

diff --git a/app/components/PendingOrder.tsx b/app/components/PendingOrder.tsx
@@ -10,10 +10,9 @@ import { baseFormatter, usdFormatter } from '~/utils';
 
 export const PendingOrder: FC<{
   order: { isAlgoOrder: false; order: API.Order } | { isAlgoOrder: true; order: API.AlgoOrder };
-  symbol: string;
   cancelOrder: ReturnType<typeof useOrderStream>[1]['cancelOrder'];
   cancelAlgoOrder: ReturnType<typeof useOrderStream>[1]['cancelAlgoOrder'];
-}> = ({ order, symbol, cancelOrder, cancelAlgoOrder }) => {
+}> = ({ order, cancelOrder, cancelAlgoOrder }) => {
   const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(false);
   const [_0, customNotification] = useNotifications();
@@ -72,9 +71,9 @@ export const PendingOrder: FC<{
                     });
                     try {
                       if (order.isAlgoOrder) {
-                        await cancelAlgoOrder(order.order.algo_order_id, symbol);
+                        await cancelAlgoOrder(order.order.algo_order_id, order.order.symbol);
                       } else {
-                        await cancelOrder(order.order.order_id, symbol);
+                        await cancelOrder(order.order.order_id, order.order.symbol);
                       }
                       update({
                         eventCode: 'cancelOrderSuccess',

diff --git a/app/components/PendingOrders.tsx b/app/components/PendingOrders.tsx
@@ -5,9 +5,12 @@ import { FC } from 'react';
 
 import { Spinner, PendingOrder } from '.';
 
-export const PendingOrders: FC<{ symbol: string }> = ({ symbol }) => {
+export const PendingOrders: FC<{ symbol: string; showAll?: boolean }> = ({
+  symbol,
+  showAll = true
+}) => {
   const [ordersUntyped, { cancelOrder, cancelAlgoOrder, isLoading }] = useOrderStream({
-    symbol,
+    symbol: showAll ? undefined : symbol,
     status: OrderStatus.INCOMPLETE
   });
   const orders = ordersUntyped as (API.Order | API.AlgoOrder)[];
@@ -48,7 +51,6 @@ export const PendingOrders: FC<{ symbol: string }> = ({ symbol }) => {
             <PendingOrder
               key={order.isAlgoOrder ? order.order.algo_order_id : order.order.order_id}
               order={order}
-              symbol={symbol}
               cancelOrder={cancelOrder}
               cancelAlgoOrder={cancelAlgoOrder}
             />

diff --git a/app/components/Positions.tsx b/app/components/Positions.tsx
@@ -7,8 +7,13 @@ import { Spinner, UpdatePosition } from '.';
 
 import { baseFormatter, usdFormatter } from '~/utils';
 
-export const Positions: FC<{ symbol: string }> = ({ symbol }) => {
-  const [positions, _info, { refresh, isLoading }] = usePositionStream();
+export const Positions: FC<{ symbol: string; showAll?: boolean }> = ({
+  symbol,
+  showAll = true
+}) => {
+  const [positions, _info, { refresh, isLoading }] = usePositionStream(
+    showAll ? undefined : symbol
+  );
   const { state } = useAccount();
 
   if (state.status <= AccountStatusEnum.NotSignedIn) {
@@ -48,7 +53,7 @@ export const Positions: FC<{ symbol: string }> = ({ symbol }) => {
                   <Badge color="red">Short</Badge>
                 )}
               </Table.Cell>
-              <Table.Cell>{baseFormatter.format(position.position_qty)}</Table.Cell>
+              <Table.Cell>{baseFormatter.format(Math.abs(position.position_qty))}</Table.Cell>
               <Table.Cell>{usdFormatter.format(position.average_open_price)}</Table.Cell>
               <Table.Cell>{usdFormatter.format(position.mark_price)}</Table.Cell>
               <Table.Cell>
@@ -59,7 +64,7 @@ export const Positions: FC<{ symbol: string }> = ({ symbol }) => {
                 {position.est_liq_price ? usdFormatter.format(position.est_liq_price) : '-'}
               </Table.Cell>
               <Table.Cell>
-                <UpdatePosition symbol={symbol} position={position} refresh={refresh} />
+                <UpdatePosition position={position} refresh={refresh} />
               </Table.Cell>
             </Table.Row>
           );

diff --git a/app/components/StopOrder.tsx b/app/components/StopOrder.tsx
@@ -20,11 +20,10 @@ type Inputs = {
 };
 
 export const StopOrder: FC<{
-  symbol: string;
   position: API.PositionExt;
   refresh: import('swr/_internal').KeyedMutator<API.PositionInfo>;
   setOpen: Dispatch<SetStateAction<boolean>>;
-}> = ({ symbol, position, refresh, setOpen }) => {
+}> = ({ position, refresh, setOpen }) => {
   const [loading, setLoading] = useState(false);
 
   const symbolsInfo = useSymbolsInfo();
@@ -39,7 +38,7 @@ export const StopOrder: FC<{
   });
   const { onSubmit, helper } = useOrderEntry(
     {
-      symbol,
+      symbol: position.symbol,
       side: OrderSide.BUY,
       order_type: OrderType.STOP_MARKET
     },
@@ -87,8 +86,8 @@ export const StopOrder: FC<{
     markPrice: Number(watch('trigger_price') ?? 0)
   });
 
-  const symbolInfo = symbolsInfo[symbol]();
-  const [_, base, quote] = symbol.split('_');
+  const symbolInfo = symbolsInfo[position.symbol]();
+  const [_, base, quote] = position.symbol.split('_');
   const [baseDecimals, quoteDecimals] = getDecimalsFromTick(symbolInfo);
 
   return (

diff --git a/app/components/TpSlOrder.tsx b/app/components/TpSlOrder.tsx
@@ -17,11 +17,10 @@ type Inputs = {
 };
 
 export const TpSlOrder: FC<{
-  symbol: string;
   position: API.PositionExt;
   refresh: import('swr/_internal').KeyedMutator<API.PositionInfo>;
   setOpen: Dispatch<SetStateAction<boolean>>;
-}> = ({ symbol, position, refresh, setOpen }) => {
+}> = ({ position, refresh, setOpen }) => {
   const [loading, setLoading] = useState(false);
 
   const symbolsInfo = useSymbolsInfo();
@@ -95,8 +94,8 @@ export const TpSlOrder: FC<{
   //   markPrice: Number(watch('trigger_price') ?? 0)
   // });
 
-  const symbolInfo = symbolsInfo[symbol]();
-  const [_, base, quote] = symbol.split('_');
+  const symbolInfo = symbolsInfo[position.symbol]();
+  const [_, base, quote] = position.symbol.split('_');
   const [baseDecimals, quoteDecimals] = getDecimalsFromTick(symbolInfo);
 
   return (

diff --git a/app/components/UpdatePosition.tsx b/app/components/UpdatePosition.tsx
@@ -9,10 +9,9 @@ import { TpSlOrder } from './TpSlOrder';
 import { baseFormatter, usdFormatter } from '~/utils';
 
 export const UpdatePosition: FC<{
-  symbol: string;
   position: API.PositionExt;
   refresh: import('swr/_internal').KeyedMutator<API.PositionInfo>;
-}> = ({ symbol, position, refresh }) => {
+}> = ({ position, refresh }) => {
   const [open, setOpen] = useState(false);
 
   const renderPositionValue = (header: string, value: string) => (
@@ -69,18 +68,13 @@ export const UpdatePosition: FC<{
           </Tabs.List>
 
           <Tabs.Content value="close" className="mt-3">
-            <ClosePosition
-              symbol={symbol}
-              position={position}
-              refresh={refresh}
-              setOpen={setOpen}
-            />
+            <ClosePosition position={position} refresh={refresh} setOpen={setOpen} />
           </Tabs.Content>
           <Tabs.Content value="stop" className="mt-3">
-            <StopOrder symbol={symbol} position={position} refresh={refresh} setOpen={setOpen} />
+            <StopOrder position={position} refresh={refresh} setOpen={setOpen} />
           </Tabs.Content>
           <Tabs.Content value="tp_sl" className="mt-3">
-            <TpSlOrder symbol={symbol} position={position} refresh={refresh} setOpen={setOpen} />
+            <TpSlOrder position={position} refresh={refresh} setOpen={setOpen} />
           </Tabs.Content>
         </Tabs.Root>
       </Dialog.Content>