From 52509d6702074e3f586542726deb37f98985d913 Mon Sep 17 00:00:00 2001 From: Joe Zhu Date: Fri, 12 Jan 2024 16:22:19 +0800 Subject: [PATCH] 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 --- src/components/farm/FarmsDetail.tsx | 4 +- src/pages/Orderly/OrderlyPerpetual.tsx | 10 +- .../components/AllOrders/PositionsTable.tsx | 44 +++--- .../Orderly/components/AllOrders/index.tsx | 145 ++++++++++-------- .../Orderly/components/OrderBoard/index.tsx | 1 - src/pages/Orderly/orderly/OrderlyContext.tsx | 9 +- src/pages/Orderly/orderly/off-chain-ws.ts | 1 - src/pages/Orderly/orderly/state.ts | 8 +- src/pages/pools/DetailsPage.tsx | 19 ++- src/services/farm.ts | 1 + 10 files changed, 134 insertions(+), 108 deletions(-) diff --git a/src/components/farm/FarmsDetail.tsx b/src/components/farm/FarmsDetail.tsx index 4b32f50c9..a60028c65 100644 --- a/src/components/farm/FarmsDetail.tsx +++ b/src/components/farm/FarmsDetail.tsx @@ -1289,7 +1289,7 @@ function DetailSymbol({ id: string | number; }) { return ( -
+
{tokens.map((token) => toRealSymbol(token.symbol)).join('-')} @@ -1350,7 +1350,7 @@ function PoolDetailCard({ }; return ( -
+
diff --git a/src/pages/Orderly/OrderlyPerpetual.tsx b/src/pages/Orderly/OrderlyPerpetual.tsx index 58bc5c46d..23db42e0b 100644 --- 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' && (
-
)} diff --git a/src/pages/Orderly/components/AllOrders/PositionsTable.tsx b/src/pages/Orderly/components/AllOrders/PositionsTable.tsx index 15a297164..4531f9931 100644 --- 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([]); + // 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([]); if (hidden) return null; diff --git a/src/pages/Orderly/components/AllOrders/index.tsx b/src/pages/Orderly/components/AllOrders/index.tsx index 8cf2cfae1..a537abe55 100644 --- a/src/pages/Orderly/components/AllOrders/index.tsx +++ b/src/pages/Orderly/components/AllOrders/index.tsx @@ -1020,86 +1020,100 @@ function OrderLine({
-
- { - 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 ? (
{ - 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)} + /
- + ) : (
+ { + 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' + }`} + /> +
{ - 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); }} > - + {numberWithCommas(price)}
{ - e.preventDefault(); - e.stopPropagation(); - // handleEditOrder(); - if (validateChange) { + className={` w-full flex items-center border-t border-border2 text-primaryOrderly ${ + openEditPrice ? '' : 'hidden' + } `} + > +
{ + e.preventDefault(); + e.stopPropagation(); setOpenEditPrice(false); - return; - } + setPrice(order.price.toString()); + }} + > + +
- if (editValidator(price, quantity)) return; +
{ + e.preventDefault(); + e.stopPropagation(); + // handleEditOrder(); + if (validateChange) { + setOpenEditPrice(false); + return; + } - setShowEditModal(true); - setEditType('price'); - }} - > - + if (editValidator(price, quantity)) return; + + setShowEditModal(true); + setEditType('price'); + }} + > + +
-
+ )}
{title}
-
0 ? allTokenSymbols : null, @@ -4801,6 +4815,7 @@ function AllOrderBoard({
diff --git a/src/pages/Orderly/components/OrderBoard/index.tsx b/src/pages/Orderly/components/OrderBoard/index.tsx index c1486be02..fce3af41b 100644 --- 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 index 7b7965a2d..ea7be38a4 100644 --- a/src/pages/Orderly/orderly/OrderlyContext.tsx +++ b/src/pages/Orderly/orderly/OrderlyContext.tsx @@ -161,11 +161,16 @@ const OrderlyContextProvider: React.FC = ({ 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 index fb3e841e6..4e0492d7a 100644 --- 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 index fc750857b..e4e65c6ba 100644 --- 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(); - 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); } diff --git a/src/pages/pools/DetailsPage.tsx b/src/pages/pools/DetailsPage.tsx index e120c7167..728035678 100644 --- a/src/pages/pools/DetailsPage.tsx +++ b/src/pages/pools/DetailsPage.tsx @@ -292,7 +292,7 @@ function DetailSymbol({ id: string | number; }) { return ( -
+
{tokens.map((token) => toRealSymbol(token.symbol)).join('-')} @@ -353,7 +353,7 @@ function PoolDetailCard({ }; return ( -
+
@@ -2679,13 +2679,13 @@ export default function PoolDetailsPage() { <>   - {dayVolume && seedFarms && BaseApr().rawApr > 0 && ( + {/* {dayVolume && seedFarms && BaseApr().rawApr > 0 && ( <> ( + ) - )} + )} */} } id="apr" @@ -2768,9 +2768,12 @@ export default function PoolDetailsPage() { className="grid grid-cols-10 px-5 py-3 items-center hover:bg-chartBg hover:bg-opacity-30 justify-items-start text-base text-white" >
- +
-
+
{toRealSymbol(token.symbol)} { @@ -2804,7 +2807,7 @@ export default function PoolDetailsPage() {
0 && Number(tokenAmount) < 0.01 ? '< 0.01' @@ -2817,7 +2820,7 @@ export default function PoolDetailsPage() {