Orderly optimization (#464)

* fetch orders logic optimization * farm ui optimization * fix orderly exception * remove field in pool detail page * ui * fix no price issue * mobile data handle --------- Co-authored-by: nature.xie <[email protected]>
ref-finance · Jan 12, 2024 · 52509d6 · 52509d6
1 parent 461e4cb
commit 52509d6
Show file tree

Hide file tree

Showing 10 changed files with 134 additions and 108 deletions.
diff --git a/src/components/farm/FarmsDetail.tsx b/src/components/farm/FarmsDetail.tsx
@@ -1289,7 +1289,7 @@ function DetailSymbol({
   id: string | number;
 }) {
   return (
-    <div className="text-sm text-white flex items-center">
+    <div className="text-xs text-white flex items-center flex-wrap whitespace-nowrap">
       <span className="pl-2">
         {tokens.map((token) => toRealSymbol(token.symbol)).join('-')}
       </span>
@@ -1350,7 +1350,7 @@ function PoolDetailCard({
   };
 
   return (
-    <div className="bg-cardBg rounded-2xl p-6 text-xs w-full right-0">
+    <div className="bg-cardBg rounded-2xl p-6 xsm:p-3 text-xs w-full right-0">
       <div className="detail-header flex items-center justify-between">
         <div className="flex items-center">
           <DetailIcons tokens={tokens} />

diff --git a/src/pages/Orderly/OrderlyPerpetual.tsx b/src/pages/Orderly/OrderlyPerpetual.tsx
@@ -157,7 +157,9 @@ function MobileTradingBoard() {
   const [subOrderTab, setSubOrderTab] = useState<'open' | 'history'>('open');
 
   const intl = useIntl();
-
+  const openOrders = allOrders?.filter((o) => {
+    return o.status === 'NEW' || o.status === 'PARTIAL_FILLED';
+  });
   if (maintenance === undefined) return null;
 
   return (
@@ -316,7 +318,11 @@ function MobileTradingBoard() {
 
           {displayTab === 'positions' && (
             <div className="text-primaryText">
-              <PositionsTable hidden={false} showCurSymbol={false} />
+              <PositionsTable
+                hidden={false}
+                showCurSymbol={false}
+                futureOrders={openOrders}
+              />
             </div>
           )}
 

diff --git a/src/pages/Orderly/components/AllOrders/PositionsTable.tsx b/src/pages/Orderly/components/AllOrders/PositionsTable.tsx
@@ -43,9 +43,11 @@ const is_mobile = isMobile();
 function PositionsTable({
   hidden,
   showCurSymbol,
+  futureOrders,
 }: {
   hidden: boolean;
   showCurSymbol: boolean;
+  futureOrders: MyOrder[];
 }) {
   const intl = useIntl();
   const { marketList, allTokens } = useMarketlist();
@@ -230,27 +232,27 @@ function PositionsTable({
     });
   };
 
-  const getFutureOrders = async () => {
-    const { data } = await getPortfolioAllOrders({
-      accountId,
-      OrderProps: {
-        page: 1,
-        size: 500,
-        status: 'INCOMPLETE',
-      },
-    });
-    const filterOrders: MyOrder[] = data?.rows?.filter((order: MyOrder) =>
-      order.symbol.includes('PERP')
-    );
-
-    setFutureOrders(filterOrders);
-  };
-
-  useEffect(() => {
-    getFutureOrders();
-  }, [myPendingOrdersRefreshing, triggerPositionBasedData]);
-
-  const [futureOrders, setFutureOrders] = useState<MyOrder[]>([]);
+  // const getFutureOrders = async () => {
+  //   const { data } = await getPortfolioAllOrders({
+  //     accountId,
+  //     OrderProps: {
+  //       page: 1,
+  //       size: 500,
+  //       status: 'INCOMPLETE',
+  //     },
+  //   });
+  //   const filterOrders: MyOrder[] = data?.rows?.filter((order: MyOrder) =>
+  //     order.symbol.includes('PERP')
+  //   );
+
+  //   setFutureOrders(filterOrders);
+  // };
+
+  // useEffect(() => {
+  //   getFutureOrders();
+  // }, [myPendingOrdersRefreshing, triggerPositionBasedData]);
+
+  // const [futureOrders, setFutureOrders] = useState<MyOrder[]>([]);
 
   if (hidden) return null;
 

diff --git a/src/pages/Orderly/components/AllOrders/index.tsx b/src/pages/Orderly/components/AllOrders/index.tsx
@@ -1020,86 +1020,100 @@ function OrderLine({
           </div>
         </td>
         <td>
-          <div
-            className={`flex font-nunito mb-1 flex-col overflow-hidden  rounded-lg  ${
-              openEditPrice ? 'border bg-dark2 ' : ''
-            } border-border2 text-sm   max-w-max text-white`}
-            style={{
-              width: `${order.price.toString().length * 12.5}px`,
-              minWidth: '48px',
-            }}
-          >
-            <input
-              ref={inputRefPrice}
-              inputMode="decimal"
-              type={'number'}
-              value={price}
-              onChange={(e) => {
-                setPrice(e.target.value);
-              }}
-              onFocus={() => {
-                setOpenEditPrice(true);
-                setOpenEditQuantity(false);
-                setQuantity(order.quantity.toString());
-                setOtherLineOpenTrigger(order.order_id);
-              }}
-              className={`px-2 py-1 pt-1.5   ${
-                !openEditPrice ? 'hidden' : 'text-center'
-              }`}
-            />
-
+          {+price == 0 ? (
             <div
-              className={`px-2 py-1 pt-1.5   ${
-                !openEditPrice ? 'text-left' : 'hidden'
-              }`}
-              onClick={() => {
-                setOpenEditPrice(true);
-                setOpenEditQuantity(false);
-                setQuantity(order.quantity.toString());
-                setOtherLineOpenTrigger(order.order_id);
+              className={`flex font-nunito mb-1 flex-col overflow-hidden  rounded-lg  ${
+                openEditPrice ? 'border bg-dark2 ' : ''
+              } border-border2 text-sm   max-w-max text-white`}
+              style={{
+                width: `${order.price.toString().length * 12.5}px`,
+                minWidth: '48px',
               }}
             >
-              {numberWithCommas(price)}
+              /
             </div>
-
+          ) : (
             <div
-              className={` w-full flex items-center border-t border-border2 text-primaryOrderly ${
-                openEditPrice ? '' : 'hidden'
-              } `}
+              className={`flex font-nunito mb-1 flex-col overflow-hidden  rounded-lg  ${
+                openEditPrice ? 'border bg-dark2 ' : ''
+              } border-border2 text-sm   max-w-max text-white`}
+              style={{
+                width: `${order.price.toString().length * 12.5}px`,
+                minWidth: '48px',
+              }}
             >
+              <input
+                ref={inputRefPrice}
+                inputMode="decimal"
+                type={'number'}
+                value={price}
+                onChange={(e) => {
+                  setPrice(e.target.value);
+                }}
+                onFocus={() => {
+                  setOpenEditPrice(true);
+                  setOpenEditQuantity(false);
+                  setQuantity(order.quantity.toString());
+                  setOtherLineOpenTrigger(order.order_id);
+                }}
+                className={`px-2 py-1 pt-1.5   ${
+                  !openEditPrice ? 'hidden' : 'text-center'
+                }`}
+              />
+
               <div
-                className="w-1/2 border-r border-border2 flex items-center py-1 justify-center cursor-pointer"
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  setOpenEditPrice(false);
-                  setPrice(order.price.toString());
+                className={`px-2 py-1 pt-1.5   ${
+                  !openEditPrice ? 'text-left' : 'hidden'
+                }`}
+                onClick={() => {
+                  setOpenEditPrice(true);
+                  setOpenEditQuantity(false);
+                  setQuantity(order.quantity.toString());
+                  setOtherLineOpenTrigger(order.order_id);
                 }}
               >
-                <AiOutlineClose></AiOutlineClose>
+                {numberWithCommas(price)}
               </div>
 
               <div
-                className="w-1/2 relative z-50 flex items-center justify-center cursor-pointer py-1"
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  //   handleEditOrder();
-                  if (validateChange) {
+                className={` w-full flex items-center border-t border-border2 text-primaryOrderly ${
+                  openEditPrice ? '' : 'hidden'
+                } `}
+              >
+                <div
+                  className="w-1/2 border-r border-border2 flex items-center py-1 justify-center cursor-pointer"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
                     setOpenEditPrice(false);
-                    return;
-                  }
+                    setPrice(order.price.toString());
+                  }}
+                >
+                  <AiOutlineClose></AiOutlineClose>
+                </div>
 
-                  if (editValidator(price, quantity)) return;
+                <div
+                  className="w-1/2 relative z-50 flex items-center justify-center cursor-pointer py-1"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    //   handleEditOrder();
+                    if (validateChange) {
+                      setOpenEditPrice(false);
+                      return;
+                    }
 
-                  setShowEditModal(true);
-                  setEditType('price');
-                }}
-              >
-                <AiOutlineCheck></AiOutlineCheck>
+                    if (editValidator(price, quantity)) return;
+
+                    setShowEditModal(true);
+                    setEditType('price');
+                  }}
+                >
+                  <AiOutlineCheck></AiOutlineCheck>
+                </div>
               </div>
             </div>
-          </div>
+          )}
         </td>
 
         <td
@@ -2465,7 +2479,6 @@ function InfoLineOpenOrder({
   return (
     <div className="flex items-center justify-between mt-4 text-base">
       <div className="text-primaryText">{title}</div>
-
       <div
         className={`text-white flex items-center ${
           title === 'Instrument' ? 'relative left-2' : ''
@@ -4435,6 +4448,7 @@ function AllOrderBoard({
     tokenInfo,
     availableSymbols: AllAvailableSymbols,
     allOrders,
+    storageEnough,
   } = useOrderlyContext();
   const symbolType = PerpOrSpot(symbol);
 
@@ -4458,7 +4472,7 @@ function AllOrderBoard({
     ),
   ];
 
-  const { storageEnough } = useOrderlyContext();
+  // const { storageEnough } = useOrderlyContext();
 
   const allTokens = useBatchTokenMetaFromSymbols(
     allTokenSymbols.length > 0 ? allTokenSymbols : null,
@@ -4801,6 +4815,7 @@ function AllOrderBoard({
         <PositionsTable
           hidden={tab !== 'positions' || !!isMobile}
           showCurSymbol={showCurSymbol}
+          futureOrders={openOrders}
         />
       </div>
     </>

diff --git a/src/pages/Orderly/components/OrderBoard/index.tsx b/src/pages/Orderly/components/OrderBoard/index.tsx
@@ -1109,7 +1109,6 @@ function OrderBoard() {
   const { accountId } = useWalletSelector();
 
   const history = useHistory();
-  //   const allOrders = useAllOrders({ symbol, refreshingTag: false });
 
   const [tab, setTab] = useState<'open' | 'history'>('open');
 

diff --git a/src/pages/Orderly/orderly/OrderlyContext.tsx b/src/pages/Orderly/orderly/OrderlyContext.tsx
@@ -161,11 +161,16 @@ const OrderlyContextProvider: React.FC<any> = ({ children }) => {
   const availableSymbols = useAllSymbolInfo();
 
   const allOrders = useAllOrders({
-    refreshingTag: myPendingOrdersRefreshing,
+    refreshingTag:
+      privateValue.balanceTimeStamp + privateValue.positionTimeStamp,
     type: symbolType,
     validAccountSig,
+  })?.map((order) => {
+    if (order.status == 'NEW' && !order.price) {
+      order.price = 0;
+    }
+    return order;
   });
-
   const isPerp = isNewHostName
     ? pathname.includes('perp') || pathname == '/'
     : pathname.includes('perp');

diff --git a/src/pages/Orderly/orderly/off-chain-ws.ts b/src/pages/Orderly/orderly/off-chain-ws.ts
@@ -61,7 +61,6 @@ export const useOrderlyWS = () => {
     [ReadyState.CLOSED]: 'Closed',
     [ReadyState.UNINSTANTIATED]: 'Uninstantiated',
   }[readyState];
-
   return {
     connectionStatus,
     messageHistory,

diff --git a/src/pages/Orderly/orderly/state.ts b/src/pages/Orderly/orderly/state.ts
@@ -139,15 +139,12 @@ export function useAllOrders({
   type,
   validAccountSig,
 }: {
-  refreshingTag: boolean;
+  refreshingTag: number;
   type?: 'SPOT' | 'PERP';
   validAccountSig?: boolean;
 }) {
   const [liveOrders, setLiveOrders] = useState<MyOrder[]>();
-
   const { accountId } = useWalletSelector();
-  // const { validAccountSig } = useOrderlyContext();
-
   const setFunc = useCallback(async () => {
     if (accountId === null || !validAccountSig) return;
     try {
@@ -161,10 +158,9 @@ export function useAllOrders({
       setLiveOrders(allOrders);
     } catch (error) {}
   }, [refreshingTag, validAccountSig]);
-
   useEffect(() => {
     setFunc();
-  }, [refreshingTag]);
+  }, [refreshingTag, accountId, validAccountSig]);
 
   return liveOrders?.filter((o) => o.symbol.indexOf(type || 'SPOT') > -1);
 }