Orderly throttle optimization (#475)

* add throttle for orderly page * update edit area --------- Co-authored-by: xieqian <[email protected]> Co-authored-by: xieqian <[email protected]> Co-authored-by: xieqian <[email protected]>
ref-finance · Feb 8, 2024 · a064566 · a064566
1 parent 9e07574
commit a064566
Show file tree

Hide file tree

Showing 8 changed files with 228 additions and 158 deletions.
diff --git a/src/global.css b/src/global.css
@@ -1663,7 +1663,12 @@ options-list::-webkit-scrollbar {
 #top-bin-apr-mobile {
   width: 230px;
 }
-
+table {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
 svg *:focus {
   outline: none;
   border: none;

diff --git a/src/pages/Orderly/components/AllOrders/TurnPage.tsx b/src/pages/Orderly/components/AllOrders/TurnPage.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { useOrderlyContext } from '../../orderly/OrderlyContext';
+import { ArrowPageIcon } from '../Common/Icons';
+// TODOX
+function TurnPage() {
+  const { orderPageNum, setOrderPageNum, orderTotalPage } = useOrderlyContext();
+  if ((orderTotalPage || 0) <= 1) return null;
+  const multiple = Math.floor((orderPageNum - 1) / 3);
+  const pre = multiple * 3 + 1;
+  const mid = multiple * 3 + 2;
+  const next = multiple * 3 + 3;
+  const preDisabled = orderPageNum == 1;
+  const nextDisabled = orderPageNum == orderTotalPage;
+  return (
+    <div className="flex items-center gap-2 ml-5">
+      <span
+        onClick={() => {
+          if (!preDisabled) {
+            setOrderPageNum(orderPageNum - 1);
+          }
+        }}
+        className={`flex items-center justify-center w-6 h-6 rounded-md bg-primaryText bg-opacity-20 ${
+          preDisabled ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer'
+        }`}
+      >
+        <ArrowPageIcon />
+      </span>
+      <div className="flex items-center gap-2">
+        <span
+          className={`text-xs ${
+            orderPageNum == pre
+              ? 'text-white gotham_bold'
+              : 'text-lightPurpleColorOrder'
+          }`}
+        >
+          {pre}
+        </span>
+        <span
+          className={`text-xs ${orderTotalPage < mid ? 'hidden' : ''} ${
+            orderPageNum == mid
+              ? 'text-white gotham_bold'
+              : 'text-lightPurpleColorOrder'
+          }`}
+        >
+          {mid}
+        </span>
+        <span
+          className={`text-xs ${orderTotalPage < next ? 'hidden' : ''} ${
+            orderPageNum == next
+              ? 'text-white gotham_bold'
+              : 'text-lightPurpleColorOrder'
+          }`}
+        >
+          {next}
+        </span>
+      </div>
+      <span
+        onClick={() => {
+          if (!nextDisabled) {
+            setOrderPageNum(orderPageNum + 1);
+          }
+        }}
+        className={`flex items-center justify-center w-6 h-6 rounded-md bg-primaryText bg-opacity-20 transform rotate-180 ${
+          nextDisabled ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer'
+        }`}
+      >
+        <ArrowPageIcon />
+      </span>
+    </div>
+  );
+}
+export default TurnPage;
diff --git a/src/pages/Orderly/components/AllOrders/index.tsx b/src/pages/Orderly/components/AllOrders/index.tsx
@@ -91,6 +91,7 @@ import { tickToPrecision } from '../UserBoardPerp/math';
 import PositionsTable from './PositionsTable';
 import { usePerpData } from '../UserBoardPerp/state';
 import { QuestionTip } from '../../../../components/layout/TipWrapper';
+import TurnPage from './TurnPage';
 
 export function getTranslateList(
   key: 'type' | 'side' | 'status' | 'instrument'
@@ -1020,100 +1021,86 @@ function OrderLine({
           </div>
         </td>
         <td>
-          {+price == 0 ? (
+          <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'
+              }`}
+            />
+
             <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',
+              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);
               }}
             >
-              /
+              {numberWithCommas(price)}
             </div>
-          ) : (
+
             <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',
-              }}
+              className={` w-full flex items-center border-t border-border2 text-primaryOrderly ${
+                openEditPrice ? '' : 'hidden'
+              } `}
             >
-              <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={`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="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());
                 }}
               >
-                {numberWithCommas(price)}
+                <AiOutlineClose></AiOutlineClose>
               </div>
 
               <div
-                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();
+                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);
-                    setPrice(order.price.toString());
-                  }}
-                >
-                  <AiOutlineClose></AiOutlineClose>
-                </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) {
-                      setOpenEditPrice(false);
-                      return;
-                    }
+                    return;
+                  }
 
-                    if (editValidator(price, quantity)) return;
+                  if (editValidator(price, quantity)) return;
 
-                    setShowEditModal(true);
-                    setEditType('price');
-                  }}
-                >
-                  <AiOutlineCheck></AiOutlineCheck>
-                </div>
+                  setShowEditModal(true);
+                  setEditType('price');
+                }}
+              >
+                <AiOutlineCheck></AiOutlineCheck>
               </div>
             </div>
-          )}
+          </div>
         </td>
 
         <td
@@ -2277,7 +2264,7 @@ function MobileFilterModal(
       </div>
     );
   }
-
+  // TODOX
   function SelectListDex({ listKey }: { listKey: string }) {
     return (
       <div className="mb-5 flex items-start w-full justify-between">
@@ -2320,6 +2307,7 @@ function MobileFilterModal(
                 defaultMessage: 'All',
               })}
             </span>
+            <TurnPage />
           </div>
         </div>
       </div>
@@ -4472,9 +4460,6 @@ function AllOrderBoard({
           })
     ),
   ];
-
-  // const { storageEnough } = useOrderlyContext();
-
   const allTokens = useBatchTokenMetaFromSymbols(
     allTokenSymbols.length > 0 ? allTokenSymbols : null,
     tokenInfo
@@ -4739,7 +4724,7 @@ function AllOrderBoard({
               ></CheckBox>
 
               <span
-                className="ml-2 frcs cursor-pointer"
+                className="ml-2 frcs cursor-pointer gap-1"
                 onClick={() => {
                   setShowRefOnly(false);
                 }}
@@ -4755,6 +4740,7 @@ function AllOrderBoard({
                   uniquenessId="display_all_orders_dexes"
                 ></QuestionTip>
               </span>
+              <TurnPage />
             </div>
           </FlexRow>
 

diff --git a/src/pages/Orderly/components/Common/Icons.tsx b/src/pages/Orderly/components/Common/Icons.tsx
@@ -1376,3 +1376,22 @@ export function BidAskShape() {
     </svg>
   );
 }
+export function ArrowPageIcon(props: any) {
+  return (
+    <svg
+      {...props}
+      width="7"
+      height="10"
+      viewBox="0 0 7 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 1L2 5L6 9"
+        stroke="#7E8A93"
+        stroke-width="2"
+        stroke-linecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/pages/Orderly/orderly/OrderlyContext.tsx b/src/pages/Orderly/orderly/OrderlyContext.tsx
@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 import { useHistory } from 'react-router-dom';
-
+import _, { orderBy, sortBy, filter } from 'lodash';
 import { useWalletSelector } from '../../../context/WalletSelectorContext';
 import { isNewHostName } from '../../../services/config';
 import {
@@ -22,7 +22,7 @@ import {
   useAllPositions,
   useOrderlySystemAvailable,
 } from './state';
-import { useAllOrdersSymbol, useStorageEnough, useTokenInfo } from './state';
+import { useStorageEnough, useTokenInfo } from './state';
 import {
   ClientInfo,
   EstFundingrate,
@@ -96,6 +96,10 @@ interface OrderlyContextValue {
   needRefresh: boolean;
   setPositionTrigger: React.Dispatch<React.SetStateAction<boolean>>;
   positionPushReceiver: boolean;
+  orderPageNum: number;
+  setOrderPageNum: (num: number) => void;
+  orderTotalPage: number;
+  setOrderTotalPage: (num: number) => void;
 }
 
 export const REF_ORDERLY_SYMBOL_KEY = 'REF_ORDERLY_SYMBOL_KEY';
@@ -150,7 +154,8 @@ const OrderlyContextProvider: React.FC<any> = ({ children }) => {
   };
 
   const [bridgePrice, setBridgePrice] = useState<string>('');
-
+  const [orderPageNum, setOrderPageNum] = useState(1);
+  const [orderTotalPage, setOrderTotalPage] = useState(0);
   const privateValue = useOrderlyPrivateData({
     validAccountSig,
   });
@@ -160,11 +165,14 @@ const OrderlyContextProvider: React.FC<any> = ({ children }) => {
 
   const availableSymbols = useAllSymbolInfo();
 
+  // TODOX
   const allOrders = useAllOrders({
     refreshingTag:
       privateValue.balanceTimeStamp + privateValue.positionTimeStamp,
     type: symbolType,
     validAccountSig,
+    orderPageNum,
+    setOrderTotalPage,
   })?.map((order) => {
     if (order.status == 'NEW' && !order.price) {
       order.price = 0;
@@ -327,6 +335,10 @@ const OrderlyContextProvider: React.FC<any> = ({ children }) => {
         userInfo,
         setUserInfo,
         setPositionTrigger,
+        orderPageNum,
+        setOrderPageNum,
+        orderTotalPage,
+        setOrderTotalPage,
       }}
     >
       {children}