@orderly.network/trading
Version:
21 lines (20 loc) • 107 kB
JavaScript
import { useTranslation, Trans } from '@orderly.network/i18n';
import { AccountStatusEnum, ChainNamespace, AlgoOrderRootType, OrderStatus, OrderSide } from '@orderly.network/types';
import { installExtension, ExtensionPositionEnum, cn as cn$1, modal, Button, formatAddress, useModal, toast as toast$1, Flex, Text, ArrowRightShortIcon, Tabs, TabPanel, Divider, Box, ListView, ArrowDownShortIcon, useScreen, gradientTextVariants, Tooltip, EditIcon, Grid, EyeIcon, EyeCloseIcon, Statistic, RefreshIcon, ArrowUpShortIcon, ChevronDownIcon, Spinner, ExtensionSlot, SimpleSheet, SimpleDialog, Checkbox, DropdownMenuRoot, DropdownMenuTrigger, SettingFillIcon, DropdownMenuContent, Picker, CaretUpIcon, CaretDownIcon, Select, Popover, ChainIcon, CloseIcon, DropdownMenuPortal, TooltipRoot, TooltipTrigger, TooltipContent, TooltipArrow, parseNumber } from '@orderly.network/ui';
import { TabType, DesktopOrderListWidget, MobileOrderListWidget } from '@orderly.network/ui-orders';
import { PositionHistoryWidget, LiquidationWidget, PositionsWidget, MobileLiquidationWidget, MobilePositionsWidget, MobilePositionHistoryWidget } from '@orderly.network/ui-positions';
import { isTestnet, Decimal, commifyOptional, removeTrailingZeros, capitalizeString, getPrecisionByNumber } from '@orderly.network/utils';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useAccount, useLocalStorage, useConfig, useWalletConnector, useMutation, useChains, useReferralInfo, useCurEpochEstimate, TWType, useEpochInfo, usePositionStream, useOrderStream, useSymbolsInfo, useOrderbookStream, useEventEmitter, useCollateral, useMarginRatio, useLeverage, useDebouncedCallback, useMediaQuery, useMarketTradeStream, useAccountInstance, useWalletSubscription, useSettleSubscription, usePrivateQuery, useFundingRate, useTickerStream } from '@orderly.network/hooks';
import { useDataTap, useAppContext } from '@orderly.network/react-app';
import Sl, { createContext, forwardRef, useMemo, useContext, useState, useEffect, useRef, useCallback } from 'react';
import { AuthGuard } from '@orderly.network/ui-connector';
import { DepositAndWithdrawWithSheetId, TransferSheetId, DepositAndWithdrawWithDialogId, TransferDialogId } from '@orderly.network/ui-transfer';
import { LeverageWidgetWithDialogId } from '@orderly.network/ui-leverage';
import Ru from '@uiw/react-split';
import { ScanQRCodeWidget } from '@orderly.network/ui-scaffold';
import { ChainSelectorSheetId } from '@orderly.network/ui-chain-selector';
import { SymbolInfoBarWidget, MarketsSheetWidget, SideMarketsWidget, SymbolInfoBarFullWidget } from '@orderly.network/markets';
import { OrderEntryWidget } from '@orderly.network/ui-order-entry';
import { TradingviewWidget } from '@orderly.network/ui-tradingview';
var co=e=>{let{isMobile:t}=useScreen();return t?jsx(Wa,{...e}):jsx(Va,{...e})},Wa=e=>{let{t}=useTranslation();return jsxs(Flex,{direction:"column",gap:2,width:"100%",itemAlign:"start",p:2,className:"oui-bg-base-9 oui-rounded-b-xl",children:[jsxs(Flex,{width:"100%",justify:"between",children:[jsx(ar,{classNames:{label:"oui-text-2xs oui-text-base-contrast-54",root:"oui-text-sm"},...e}),jsx(sr,{classNames:{label:"oui-text-2xs oui-text-base-contrast-54",root:"oui-text-sm"},...e})]}),jsx(Divider,{className:"oui-w-full"}),jsxs(Flex,{className:"oui-gap-[2px] oui-cursor-pointer",children:[jsx(Checkbox,{id:"oui-checkbox-hideOtherSymbols",color:"white",checked:!e.showAllSymbol,onCheckedChange:o=>{e.setShowAllSymbol(!o);}}),jsx("label",{className:"oui-text-2xs oui-text-base-contrast-54 oui-cursor-pointer",htmlFor:"oui-checkbox-hideOtherSymbols",children:t("trading.hideOtherSymbols")})]})]})},Va=e=>jsxs(Flex,{py:2,px:3,gap:6,width:"100%",justify:"start",children:[jsx(ar,{...e,classNames:{label:"oui-text-base-contrast-54"}}),jsx(sr,{...e,classNames:{label:"oui-text-base-contrast-54"}})]}),ar=e=>{let{t}=useTranslation(),o=typeof e.unrealPnL=="number"?e.unrealPnL>=0?"oui-text-trade-profit":"oui-text-trade-loss":"oui-text-base-contrast-80",i=typeof e.unrealPnL=="number"&&e.unrealPnlROI?e.unrealPnlROI>=0?"oui-text-success-darken":"oui-text-danger-darken":"oui-text-base-contrast-80";return jsx(Statistic,{label:t("common.unrealizedPnl"),classNames:e.classNames,children:jsxs(Flex,{gap:1,children:[jsx(Text.numeral,{dp:e.pnlNotionalDecimalPrecision,rm:Decimal.ROUND_DOWN,intensity:80,className:o,children:e.unrealPnL??"--"}),typeof e.unrealPnlROI<"u"&&jsx(Text.numeral,{prefix:"(",suffix:")",rule:"percentages",size:"2xs",dp:e.pnlNotionalDecimalPrecision,rm:Decimal.ROUND_DOWN,className:i,children:e.unrealPnlROI})]})})},sr=e=>{let{t}=useTranslation();return jsx(Statistic,{label:t("common.notional"),classNames:e.classNames,children:jsx(Text.numeral,{dp:e.pnlNotionalDecimalPrecision,rm:Decimal.ROUND_DOWN,intensity:80,children:e.notional??"--"})})};var G=e=>{let[t,o]=useLocalStorage("unPnlPriceBasis","markPrice"),[i,r]=useLocalStorage("pnlNotionalDecimalPrecision",e?.pnlNotionalDecimalPrecision??2),[n,a]=useLocalStorage("showAllSymbol",true),[s,c]=useLocalStorage("hideAssets",false);return {unPnlPriceBasis:t,setUnPnlPriceBasic:o,pnlNotionalDecimalPrecision:i,setPnlNotionalDecimalPrecision:r,showAllSymbol:n,setShowAllSymbol:a,hideAssets:s,setHideAssets:c}};var lr=e=>{let{pnlNotionalDecimalPrecision:t,unPnlPriceBasis:o,symbol:i}=e,r=o,[n]=usePositionStream(i,{calcMode:r}),a=useDataTap(n.aggregated),s=a?.total_unreal_pnl,c=a?.unrealPnlROI,l=a?.notional,{showAllSymbol:d,setShowAllSymbol:u}=G();return {pnlNotionalDecimalPrecision:t,unrealPnL:s,unrealPnlROI:c,notional:l,showAllSymbol:d,setShowAllSymbol:u}};var tt=e=>{let t=lr(e);return jsx(co,{...t})};var ot=e=>{let{showAllSymbol:t}=G(),[o]=usePositionStream(t?void 0:e),i=useMemo(()=>o.rows?.length,[o.rows?.length]);return {positionCount:useDataTap(i)??0}};var it=e=>{let {showAllSymbol:t}=G();`orderly_${TabType.pending}_pageSize`;`orderly_${TabType.tp_sl}_pageSize`;let [r,{total:n}]=useOrderStream({symbol:t?void 0:e,status:OrderStatus.INCOMPLETE,excludes:[AlgoOrderRootType.POSITIONAL_TP_SL,AlgoOrderRootType.TP_SL],size:500},{keeplive:true}),[a,{total:s}]=useOrderStream({symbol:t?void 0:e,status:OrderStatus.INCOMPLETE,includes:[AlgoOrderRootType.POSITIONAL_TP_SL,AlgoOrderRootType.TP_SL],size:500},{keeplive:true}),c=useDataTap(n)??0,l=useDataTap(s)??0;return {pendingOrderCount:c,tpSlOrderCount:l}};var rt=e=>({base_dp:e("base_dp"),quote_dp:e("quote_dp"),base_tick:e("base_tick"),base:e("base"),quote:e("quote")});var gr=createContext({}),V=()=>useContext(gr),fr=e=>{let t=useSymbolsInfo()[e.symbol];return jsx(gr.Provider,{value:{...e,symbolInfo:{...rt(t),symbol:e.symbol}},children:e.children})};var pr=e=>{let{current:t,pnlNotionalDecimalPrecision:o,sharePnLConfig:i,symbol:r,includedPendingOrder:n}=e,a=G({pnlNotionalDecimalPrecision:o}),{onSymbolChange:s}=V(),{positionCount:c}=ot(e.symbol),{pendingOrderCount:l,tpSlOrderCount:d}=it(e.symbol);return {current:t,sharePnLConfig:i,symbol:r,calcMode:a.unPnlPriceBasis,includedPendingOrder:n,...a,positionCount:c,pendingOrderCount:l,tpSlOrderCount:d,onSymbolChange:s}};var uo=e=>{let[t,o]=useState(false),{t:i}=useTranslation();return jsxs(Flex,{gap:0,children:[jsxs(Flex,{gap:1,children:[jsx(Checkbox,{id:"oui-checkbox-hideOtherSymbols",color:"white",checked:e.hideOtherSymbols,onCheckedChange:r=>{e.setHideOtherSymbols(r);}}),jsx("label",{className:"oui-text-xs oui-text-base-contrast-54 oui-cursor-pointer",htmlFor:"oui-checkbox-hideOtherSymbols",children:i("trading.hideOtherSymbols")})]}),jsxs(DropdownMenuRoot,{open:t,onOpenChange:o,children:[jsx(DropdownMenuTrigger,{asChild:true,children:jsx(Button,{size:"xs",type:"button",variant:"contained",className:"oui-bg-transparent hover:oui-bg-transparent",children:jsx(SettingFillIcon,{size:16,color:"white",opacity:1,className:"oui-text-white/[.36] hover:oui-text-white/80"})})}),jsx(DropdownMenuContent,{className:"oui-px-5 oui-py-3 oui-w-[360px]",alignOffset:2,align:"end",children:jsxs("div",{className:"oui-flex oui-flex-col oui-text-sm",children:[jsx(Text,{className:"oui-text-base oui-pb-3",children:i("trading.portfolioSettings")}),jsx(Divider,{}),jsx(Text,{className:"oui-pb-3 oui-text-base-contrast-54 oui-mt-2",children:i("trading.portfolioSettings.decimalPrecision")}),jsx(ss,{value:e.pnlNotionalDecimalPrecision,onValueChange:r=>{e.setPnlNotionalDecimalPrecision(r),o(false);}}),jsx(Divider,{className:"oui-my-3"}),jsx(Text,{className:"oui-pb-3 oui-text-base-contrast-54 oui-mt-2",children:i("trading.portfolioSettings.unrealPnlPriceBasis")}),jsx(as,{value:e.unPnlPriceBasis,onValueChange:r=>{e.setUnPnlPriceBasic(r),o(false);}})]})})]})]})},as=e=>{let{value:t,onValueChange:o}=e,{t:i}=useTranslation();return jsxs(Flex,{gap:2,children:[jsx(nt,{sel:t==="markPrice",label:i("common.markPrice"),value:"markPrice",onCheckChange:o}),jsx(nt,{sel:t==="lastPrice",label:i("common.lastPrice"),value:"lastPrice",onCheckChange:o})]})},ss=e=>{let{value:t,onValueChange:o}=e;return jsxs(Flex,{gap:2,children:[jsx(nt,{sel:t===0,label:1,value:0,onCheckChange:o}),jsx(nt,{sel:t===1,label:.1,value:1,onCheckChange:o}),jsx(nt,{sel:t===2,label:.01,value:2,onCheckChange:o})]})},nt=e=>{let{sel:t,label:o,value:i,onCheckChange:r}=e;return jsxs(Flex,{onClick:n=>{r(i),n.stopPropagation();},gap:1,className:"oui-cursor-pointer",children:[t?jsx(ls,{}):jsx(cs,{}),jsx(Text,{size:"2xs",intensity:t?98:54,children:o})]})},ls=()=>jsxs("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",className:"oui-fill-white",children:[jsx("path",{d:"M8.01 1.333a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333m0 1.333a5.334 5.334 0 1 1-.001 10.667 5.334 5.334 0 0 1 0-10.667",fill:"#fff",fillOpacity:".36"}),jsx("circle",{cx:"8",cy:"8",r:"3.333"})]}),cs=()=>jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsx("path",{d:"M8.01 1.333a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333m0 1.333a5.334 5.334 0 1 1-.001 10.667 5.334 5.334 0 0 1 0-10.667",fill:"#fff",fillOpacity:".54"})});var xr=e=>({...e});var mo=e=>{let t=xr(e);return jsx(uo,{...t})};var fo=e=>{let{t}=useTranslation();return jsxs(Tabs,{defaultValue:e.current||"Positions",variant:"contained",trailing:jsx(mo,{pnlNotionalDecimalPrecision:e.pnlNotionalDecimalPrecision,setPnlNotionalDecimalPrecision:e.setPnlNotionalDecimalPrecision,unPnlPriceBasis:e.unPnlPriceBasis,setUnPnlPriceBasic:e.setUnPnlPriceBasic,hideOtherSymbols:!e.showAllSymbol,setHideOtherSymbols:o=>e.setShowAllSymbol(!o)}),size:"lg",className:"oui-h-full",classNames:{tabsContent:"oui-h-[calc(100%_-_32px)]"},children:[jsx(TabPanel,{testid:"oui-testid-dataList-position-tab",value:"Positions",title:`${t("common.positions")} ${(e.positionCount??0)>0?`(${e.positionCount})`:""}`,children:jsx(ys,{...e})}),jsx(TabPanel,{testid:"oui-testid-dataList-pending-tab",value:"Pending",title:`${t("orders.status.pending")} ${(e.pendingOrderCount??0)>0?`(${e.pendingOrderCount})`:""}`,children:jsx(DesktopOrderListWidget,{type:TabType.pending,ordersStatus:OrderStatus.INCOMPLETE,symbol:e.showAllSymbol?void 0:e.symbol,onSymbolChange:e.onSymbolChange,testIds:{tableBody:"oui-testid-dataList-pending-table-body"}})}),jsx(TabPanel,{testid:"oui-testid-dataList-tpsl-tab",value:"TP/SL",title:`${t("common.tpsl")} ${(e.tpSlOrderCount??0)>0?`(${e.tpSlOrderCount})`:""}`,children:jsx(DesktopOrderListWidget,{type:TabType.tp_sl,ordersStatus:OrderStatus.INCOMPLETE,symbol:e.showAllSymbol?void 0:e.symbol,onSymbolChange:e.onSymbolChange,testIds:{tableBody:"oui-testid-dataList-tpsl-table-body"}})}),jsx(TabPanel,{testid:"oui-testid-dataList-filled-tab",value:"Filled",title:t("orders.status.filled"),children:jsx(DesktopOrderListWidget,{type:TabType.filled,symbol:e.showAllSymbol?void 0:e.symbol,pnlNotionalDecimalPrecision:e.pnlNotionalDecimalPrecision,ordersStatus:OrderStatus.FILLED,onSymbolChange:e.onSymbolChange,testIds:{tableBody:"oui-testid-dataList-filled-table-body"},sharePnLConfig:e.sharePnLConfig})}),jsx(TabPanel,{testid:"oui-testid-dataList-positionHistory-tab",value:"Position history",title:t("positions.positionHistory"),children:jsx(PositionHistoryWidget,{pnlNotionalDecimalPrecision:e.pnlNotionalDecimalPrecision,symbol:e.showAllSymbol?void 0:e.symbol,onSymbolChange:e.onSymbolChange,sharePnLConfig:e.sharePnLConfig})}),jsx(TabPanel,{testid:"oui-testid-dataList-orderHistory-tab",value:"Order history",title:t("orders.orderHistory"),children:jsx(DesktopOrderListWidget,{type:TabType.orderHistory,pnlNotionalDecimalPrecision:e.pnlNotionalDecimalPrecision,symbol:e.showAllSymbol?void 0:e.symbol,onSymbolChange:e.onSymbolChange,testIds:{tableBody:"oui-testid-dataList-orderHistory-table-body"},sharePnLConfig:e.sharePnLConfig})}),jsx(TabPanel,{testid:"oui-testid-dataList-liquidation-tab",value:"Liquidation",title:t("positions.liquidation"),children:jsx(LiquidationWidget,{symbol:e.showAllSymbol?void 0:e.symbol})})]})},ys=e=>jsxs(Flex,{direction:"column",width:"100%",height:"100%",children:[jsx(tt,{pnlNotionalDecimalPrecision:e.pnlNotionalDecimalPrecision,symbol:e.showAllSymbol?void 0:e.symbol,unPnlPriceBasis:e.unPnlPriceBasis}),jsx(Divider,{className:"oui-w-full"}),jsx(Box,{className:"oui-h-[calc(100%_-_60px)]",width:"100%",children:jsx(PositionsWidget,{symbol:e.showAllSymbol?void 0:e.symbol,pnlNotionalDecimalPrecision:e.pnlNotionalDecimalPrecision,sharePnLConfig:e.sharePnLConfig,calcMode:e.calcMode,includedPendingOrder:e.includedPendingOrder,onSymbolChange:e.onSymbolChange})})]});var po=e=>{let t=pr({...e});return jsx(fo,{...t})};var ho=e=>jsxs(Box,{className:cn$1("oui-grid oui-grid-rows=[auto,1fr] oui-h-full oui-w-full",e.classNames?.root),style:e.style,children:[jsx(Box,{className:"oui-pr-1",children:jsx(Ps,{base:e.base,quote:e.quote,className:e.classNames?.listHeader})}),jsx(Ns,{data:e.data,isLoading:e.isLoading,baseDp:e.baseDp,quoteDp:e.quoteDp,classNames:e.classNames?.listItem,className:e.classNames?.list})]}),vr=e=>{let{left:t,mid:o,right:i,classNames:r}=e;return jsxs(Grid,{cols:3,gapX:2,width:"100%",className:cn$1("oui-text-xs oui-tabular-nums",r?.root),children:[jsx("div",{className:cn$1("oui-flex-1",r?.left),children:t}),jsx("div",{className:cn$1("oui-flex-1",r?.mid),children:o}),jsx("div",{className:cn$1("oui-flex-1 oui-text-right",r?.right),children:i})]})},Ps=e=>{let{t}=useTranslation();return jsx(vr,{left:t("common.time"),mid:`${t("common.price")}(${e.quote})`,right:`${t("common.qty")}(${e.base})`,classNames:{root:cn$1("oui-text-base-contrast-54 oui-h-[32px] oui-sticky",e.className)}})},Ns=e=>jsx(ListView,{dataSource:e.data,className:cn$1("oui-last-trades-list","oui-w-full oui-h-full",e.className,"oui-overflow-auto"),contentClassName:"!oui-space-y-0 oui-pr-[-4px]",renderItem:(t,o)=>jsx(vr,{left:jsx(Text.formatted,{rule:"date",formatString:"HH:mm:ss",children:t?.ts}),mid:commifyOptional(t?.price,{fix:e.quoteDp}),right:commifyOptional(t?.size,{fix:e.baseDp}),classNames:{left:cn$1("oui-text-base-contrast-80",e.classNames?.left),right:cn$1(t.side===OrderSide.BUY?"oui-text-trade-profit":"oui-text-trade-loss",e.classNames?.mid),mid:cn$1(t.side===OrderSide.BUY?"oui-text-trade-profit":"oui-text-trade-loss",e.classNames?.right)}},o)});var Pr=e=>{let{data:t,isLoading:o}=useMarketTradeStream(e),i=useSymbolsInfo()?.[e],r=i?.("base"),n=i?.("quote"),a=i?.("base_dp"),s=i?.("quote_dp");return {base:r,quote:n,data:t,isLoading:o,baseDp:a,quoteDp:s}};var Me=e=>{let t=Pr(e.symbol);return jsx(ho,{...t,classNames:e.classNames,style:e.style})};function Nr(e){let{t}=useTranslation();return e.showFaucet?jsx(Button,{variant:"outlined",fullWidth:true,size:"md",onClick:e.getFaucet,loading:e.loading,className:"oui-text-primary-light oui-border-primary-light oui-rounded","data-testid":"oui-testid-assetView-getFaucet-button",children:t("trading.faucet.getTestUSDC")}):null}function Lr(){let{t:e}=useTranslation(),{connectedChain:t,namespace:o}=useWalletConnector(),{state:i,account:r}=useAccount(),n=useConfig(),a=n.get("operatorUrl"),[s,{isMutating:c}]=useMutation(`${a}/v1/faucet/usdc`),[l,d]=useState(false),u=useMemo(()=>!t||!t.id?false:(i.status===AccountStatusEnum.EnableTrading||i.status===AccountStatusEnum.EnableTradingWithoutConnected)&&isTestnet(parseInt(t.id)),[i,t]);return {getFaucet:()=>{if(l)return;d(true);let g=e("trading.faucet.getTestUSDC.success",{quantity:o===ChainNamespace.solana?"100":"1,000"});return s({chain_id:r.walletAdapter?.chainId.toString(),user_address:i.address,broker_id:n.get("brokerId")}).then(f=>{if(d(false),f.success)return modal.alert({title:e("trading.faucet.getTestUSDC"),message:g,onOk:()=>new Promise(p=>p(true))});f.message&&toast$1.error(f.message);},f=>{toast$1.error(f.message);})},showFaucet:u,loading:l}}function bo(){let e=Lr();return jsx(Nr,{...e})}var ol=()=>{let{state:e}=useAccount(),{wrongNetwork:t,disabledConnect:o}=useAppContext(),{t:i}=useTranslation();return useMemo(()=>{let r={wrongNetwork:{title:i("connector.wrongNetwork"),description:i("connector.wrongNetwork.tooltip"),titleColor:"warning"},connectWallet:{title:i("connector.connectWallet"),description:i("connector.trade.connectWallet.tooltip"),titleClsName:"oui-text-transparent oui-bg-clip-text oui-gradient-brand"},notSignedIn:{title:i("connector.signIn"),description:i("connector.trade.signIn.tooltip"),titleColor:"primary"},disabledTrading:{title:i("connector.enableTrading"),description:i("connector.trade.enableTrading.tooltip"),titleColor:"primary"},default:{title:"",description:""}};if(o)return r.connectWallet;if(t)return r.wrongNetwork;switch(e.status){case AccountStatusEnum.NotConnected:return r.connectWallet;case AccountStatusEnum.NotSignedIn:return r.notSignedIn;case AccountStatusEnum.DisabledTrading:return r.disabledTrading;default:return r.default}},[e.status,t,i])},To=({description:e,formula:t})=>jsxs("div",{className:"oui-min-w-[204px] oui-max-w-[240px] oui-text-2xs oui-leading-normal oui-text-base-contrast-80",children:[jsx("span",{children:e}),jsx(Divider,{className:"oui-border-white/10",my:2}),jsx("span",{children:t})]}),il=({totalValue:e,visible:t=true,onToggleVisibility:o})=>{let{t:i}=useTranslation();return jsxs(Flex,{direction:"column",gap:1,className:"oui-text-2xs",itemAlign:"center",children:[jsx(Text.numeral,{visible:t,weight:"bold",size:"2xl",className:gradientTextVariants({color:"brand"}),as:"div",padding:false,dp:2,children:e??"--"}),jsxs(Flex,{gap:1,itemAlign:"center",children:[jsx(Text,{size:"2xs",color:"neutral",weight:"semibold",children:`${i("trading.asset.myAssets")} (USDC)`}),jsx("button",{onClick:o,children:t?jsx(EyeIcon,{size:18,className:"oui-text-base-contrast-54"}):jsx(EyeCloseIcon,{size:18,className:"oui-text-base-contrast-54"})})]})]})},So=({label:e,description:t,formula:o,visible:i,value:r,unit:n,rule:a,isConnected:s,showPercentage:c=false,placeholder:l})=>jsxs(Flex,{justify:"between",children:[jsx(Tooltip,{content:jsx(To,{description:t,formula:o}),children:jsx(Text,{size:"2xs",color:"neutral",weight:"semibold",className:"oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",children:e})}),jsx(Text.numeral,{visible:i,size:"2xs",unit:n,unitClassName:"oui-text-base-contrast-36 oui-ml-0.5",as:"div",rule:a,padding:false,dp:2,placeholder:l,children:r||"--"})]}),rl=({visible:e=true,freeCollateral:t,marginRatioVal:o,renderMMR:i,isConnected:r})=>{let[n,a]=useLocalStorage("orderly_entry_asset_list_open",false),[s,c]=useState(n),{t:l}=useTranslation(),d=useCallback(()=>{c(u=>!u),setTimeout(()=>{a(!s);},0);},[]);return jsxs(Box,{className:"oui-group",children:[jsxs(Flex,{justify:"center",gap:1,itemAlign:"center",className:"oui-cursor-pointer",onClick:d,children:[jsx(Divider,{className:"oui-flex-1"}),jsx(ChevronDownIcon,{size:12,color:"white",className:cn$1("oui-transition-transform",s&&"oui-rotate-180")}),jsx(Divider,{className:"oui-flex-1"})]}),jsxs(Box,{style:{transform:"translateZ(0)"},className:cn$1("oui-select-none oui-space-y-1.5 oui-overflow-hidden","oui-transition-[max-height] oui-duration-150","group-hover:oui-will-change-[max-height]",s?"oui-max-h-[69px]":"oui-max-h-0"),children:[jsx(So,{label:l("trading.asset.freeCollateral"),description:l("trading.asset.freeCollateral.tooltip"),formula:l("trading.asset.freeCollateral.formula"),visible:e,value:t===0?"0":t,unit:"USDC"}),jsx(So,{label:l("trading.asset.marginRatio"),description:l("trading.asset.marginRatio.tooltip"),formula:l("trading.asset.marginRatio.formula"),visible:e,value:o,isConnected:r,rule:"percentages",showPercentage:true,placeholder:"--%"}),jsx(So,{label:l("trading.asset.maintenanceMarginRatio"),description:l("trading.asset.maintenanceMarginRatio.tooltip"),formula:l("trading.asset.maintenanceMarginRatio.formula"),visible:e,value:i,rule:"percentages",showPercentage:true,placeholder:"--%"})]})]})},Po=({networkId:e,isFirstTimeDeposit:t,totalValue:o,onDeposit:i,onWithdraw:r,onTransfer:n,toggleVisible:a,visible:s,freeCollateral:c,marginRatioVal:l,renderMMR:d,isConnected:u,isMainAccount:m,hasSubAccount:g})=>{let{title:f,description:p,titleColor:C,titleClsName:y}=ol(),{t:b}=useTranslation(),w=g&&jsx(Button,{fullWidth:true,color:"secondary",size:"md",onClick:n,"data-testid":"oui-testid-assetView-transfer-button",children:jsx(Text,{children:b("common.transfer")})}),x=m&&jsxs(Fragment,{children:[jsxs(Button,{fullWidth:true,color:"secondary",size:"md",onClick:r,"data-testid":"oui-testid-assetView-withdraw-button",children:[!g&&jsx(ArrowDownShortIcon,{color:"white",opacity:1,className:"oui-rotate-180"}),jsx(Text,{children:b("common.withdraw")})]}),jsxs(Button,{"data-testid":"oui-testid-assetView-deposit-button",fullWidth:true,size:"md",onClick:i,children:[!g&&jsx(ArrowDownShortIcon,{color:"white",opacity:1}),jsx(Text,{children:b("common.deposit")})]})]});return jsxs(Box,{className:"oui-relative",children:[f&&p&&jsxs(Flex,{direction:"column",gap:1,className:"oui-mb-[32px]",children:[jsx(Text,{size:"lg",weight:"bold",color:C||"inherit",className:y,children:f}),jsx(Text,{size:"2xs",color:"neutral",weight:"semibold",className:"oui-text-center",children:p})]}),jsx(AuthGuard,{networkId:e,buttonProps:{size:"md",fullWidth:true},children:t&&m?jsxs(Fragment,{children:[jsx(Box,{children:jsxs(Flex,{direction:"column",gap:1,className:"oui-mb-[32px]",children:[jsx(Text.gradient,{size:"lg",weight:"bold",color:"brand",children:b("trading.asset.startTrading")}),jsx(Text,{size:"2xs",color:"neutral",weight:"semibold",children:b("trading.asset.startTrading.description")})]})}),jsxs(Button,{"data-testid":"oui-testid-assetView-deposit-button",fullWidth:true,size:"md",onClick:i,children:[jsx(ArrowDownShortIcon,{color:"white",opacity:1}),jsx(Text,{children:b("common.deposit")})]}),jsx(Box,{className:"oui-mt-3",children:jsx(bo,{})})]}):jsxs(Box,{className:"oui-space-y-4",children:[jsx(il,{totalValue:o,visible:s,onToggleVisibility:a}),jsx(rl,{visible:s,freeCollateral:c,marginRatioVal:l,renderMMR:d,isConnected:u}),jsx(Flex,{gap:m?g?2:3:0,itemAlign:"center",children:m?jsxs(Fragment,{children:[w,x]}):w}),m&&jsx(bo,{})]})}),jsx("div",{className:cn$1("oui-absolute oui-inset-0 oui-rotate-180","oui-pointer-events-none oui-rounded-2xl oui-blur-[200px]"),style:{background:"conic-gradient(from -40.91deg at 40.63% 50.41%, rgba(159, 115, 241, 0) -48.92deg, rgba(242, 98, 181, 0) 125.18deg, #5FC5FF 193.41deg, #FFAC89 216.02deg, #8155FF 236.07deg, #789DFF 259.95deg, rgba(159, 115, 241, 0) 311.08deg, rgba(242, 98, 181, 0) 485.18deg)"}})]})};var Do=()=>{let{state:e}=useAccount(),{wrongNetwork:t,disabledConnect:o}=useAppContext(),{totalValue:i}=useCollateral({dp:2}),r=t||o||e.status<AccountStatusEnum.EnableTrading&&e.status!==AccountStatusEnum.EnableTradingWithoutConnected,n=useMemo(()=>{let s=new Date,c=new Date;c.setDate(s.getDate()-90);let l=c.getTime(),d=s.getTime(),u=new URLSearchParams;return u.set("page","1"),u.set("size","5"),u.set("side","DEPOSIT"),u.set("status","COMPLETED"),u.set("startTime",l.toString()),u.set("endTime",d.toString()),`/v1/asset/history?${u.toString()}`},[]),{data:a}=usePrivateQuery(n,{formatter:s=>s});return {isFirstTimeDeposit:!r&&i===0&&a?.meta?.total===0,totalValue:i}},Ir=()=>{let {t:e}=useTranslation(),t=useAccountInstance(),o=useEventEmitter(),{isFirstTimeDeposit:i,totalValue:r}=Do(),n=useConfig("networkId"),{state:a,isMainAccount:s}=useAccount(),{freeCollateral:c}=useCollateral({dp:2}),{marginRatio:l,mmr:d}=useMarginRatio(),u=a.status>=AccountStatusEnum.Connected,[{aggregated:m,totalUnrealizedROI:g},f]=usePositionStream(),p=useMemo(()=>Math.min(10,m.notional===0?f.margin_ratio(10):l),[l,m]);useMemo(()=>d?new Decimal(d).mul(100).todp(2,0).toFixed(2):"",[d]);let y=useCallback(L=>modal.show(DepositAndWithdrawWithDialogId,{activeTab:L}),[]),b=useCallback(async()=>y("deposit"),[]),w=useCallback(async()=>y("withdraw"),[]),x=useCallback(async()=>modal.show(TransferDialogId),[]),T=useCallback(async()=>t.settle().catch(L=>{if(L.code===-1104)return toast$1.error(e("settle.settlement.error")),Promise.reject(L);L.message.indexOf("Signing off chain messages with Ledger is not yet supported")!==-1&&o.emit("wallet:sign-message-with-ledger-error",{message:L.message,userAddress:t.address});}).then(L=>(toast$1.success(e("settle.settlement.requested")),Promise.resolve(L))),[t,e]),[z,S]=useLocalStorage("orderly_assets_visible",true),M=useCallback(()=>{S(L=>!L);},[z]);useWalletSubscription({onMessage:L=>{let{side:W,transStatus:Nt}=L;if(Nt==="COMPLETED"){let Ae={DEPOSIT:e("transfer.deposit.completed"),WITHDRAW:e("transfer.withdraw.completed")},Je=`${capitalizeString(W)} completed`;toast$1.success(Ae[W]||Je);}else if(Nt==="FAILED"){let Ae={DEPOSIT:e("transfer.deposit.failed"),WITHDRAW:e("transfer.withdraw.failed")},Je=`${capitalizeString(W)} failed`;toast$1.error(Ae[W]||Je);}o.emit("wallet:changed",L);}}),useSettleSubscription({onMessage:L=>{let{status:W}=L;switch(W){case "COMPLETED":toast$1.success(e("settle.settlement.completed"));break;case "FAILED":toast$1.error(e("settle.settlement.failed"));break;}}});let K=useDataTap(c)??void 0,J=useDataTap(p)??void 0,ve=useDataTap(d)??void 0,Ie=useDataTap(r)??void 0;return {onDeposit:b,onWithdraw:w,onTransfer:x,onSettle:T,visible:z,toggleVisible:M,networkId:n,isFirstTimeDeposit:i,totalValue:Ie,status:a.status,freeCollateral:K,marginRatioVal:J,renderMMR:ve,isConnected:u,isMainAccount:s,hasSubAccount:!!a.subAccounts?.length}};var Lo=()=>{let e=Ir();return jsx(Po,{...e})};var At=createContext({cellHeight:22}),ee=()=>useContext(At),Ne="orderbook_coin_type",ze="orderbook_mobile_coin_type",Mt=e=>{let[t,o]=useState("quantity"),[i,r]=useState("quantity"),n=Sl.useMemo(()=>({cellHeight:e.cellHeight,onItemClick:e.onItemClick,mode:t,totalMode:i||"quantity",depth:e.depth,onModeChange:o,onTotalModeChange:r,showTotal:e.showTotal||false,pendingOrders:e.pendingOrders,symbolInfo:e.symbolInfo}),[t,e.cellHeight,e.depth,e.onItemClick,e.pendingOrders,e.showTotal,e.symbolInfo,i]);return jsx(At.Provider,{value:n,children:e.children})};var _t=e=>{let{direction:t=1}=e,o=useMemo(()=>{let i=Math.max(e.width,0);return t===0?{transform:`translateX(${i}%)`}:{transform:`translateX(-${i}%)`}},[e.width]);return jsx("div",{className:cn$1("oui-absolute oui-right-[-100%] oui-top-0 oui-h-full oui-w-full oui-transition-transform oui-pointer-events-none",t===0&&"oui-left-[-100%]",e.className),style:o})};var Hr=e=>{let{cellHeight:t,showTotal:o,onItemClick:i,depth:r,pendingOrders:n}=ee(),{symbolInfo:a,currentHover:s,accumulated:c,accumulatedAmount:l,count:d,price:u,quantity:m,base:g,quote:f}=e,{base_dp:p,quote_dp:C}=a,[y]=useLocalStorage(Ne,g),b=Number.isNaN(u)?0:c/d*100,w=useMemo(()=>getPrecisionByNumber(r||`${C}`),[r,C]),x=Number.isNaN(c)?"-":l?.toString(),T=useMemo(()=>{let z=parseNumber(u,{dp:w,padding:true});return n.some(S=>z===parseNumber(S,{dp:w,padding:true}))},[n,u,w]);return jsxs("div",{className:"oui-relative oui-flex oui-cursor-pointer oui-flex-row oui-justify-between oui-pl-3 oui-text-xs oui-tabular-nums oui-text-base-contrast-80",style:{height:`${t}px`},onClick:()=>{Number.isNaN(u)||Number.isNaN(m)||i?.([u,m]);},onMouseEnter:e.onMouseEnter,onMouseLeave:e.onMouseLeave,children:[jsxs("div",{className:cn$1("oui-mr-2 oui-flex oui-basis-7/12 oui-flex-row oui-items-center",o&&"oui-basis-5/12"),children:[jsx("div",{className:cn$1("oui-flex-1 oui-text-left",e.type==="ask"?"oui-text-trade-loss":"oui-text-trade-profit"),children:jsx(Text.numeral,{dp:w,children:u})}),jsx("div",{className:"oui-flex-1 oui-text-right oui-text-base-contrast-80",children:jsx(Text.numeral,{dp:p,children:m})})]}),jsxs("div",{className:cn$1("oui-fex-row oui-relative oui-flex oui-basis-5/12 oui-items-center oui-justify-end oui-overflow-hidden",o&&"oui-basis-7/12"),children:[o?jsxs(Fragment,{children:[jsx("div",{className:cn$1("oui-flex-1 oui-pr-3 oui-text-right"),children:jsx(Text.numeral,{dp:p,className:"oui-z-10",children:c})}),jsx("div",{className:cn$1("oui-flex-1 oui-pr-3 oui-text-right"),children:jsx(Text.numeral,{dp:2,className:"oui-z-10",children:x})})]}):jsxs("div",{className:cn$1("oui-flex-1 oui-pr-3 oui-text-right"),children:[y===g&&jsx(Text.numeral,{dp:p,className:"oui-z-10",children:c}),y===f&&jsx(Text.numeral,{dp:2,className:"oui-z-10",children:x})]}),jsx(_t,{width:b,direction:0,className:e.type==="ask"?"oui-bg-trade-loss/10":"oui-bg-trade-profit/10"})]}),T&&jsx("div",{className:cn$1("oui-pointer-events-none oui-absolute oui-left-[4px] oui-size-[4px] oui-rounded-full",e.type==="ask"&&"oui-bg-trade-loss",e.type==="bid"&&"oui-bg-trade-profit"),style:{top:`${t/2-2}px`}}),e.isHover&&jsx("div",{className:"oui-absolute oui-inset-0 oui-bg-white oui-opacity-[.12]"}),s&&jsx("div",{className:cn$1("oui-absolute oui-inset-x-0",e.type==="ask"&&"oui-top-0",e.type==="bid"&&"oui-bottom-0"),children:jsx(Divider,{lineStyle:"dashed",className:cn$1("oui-w-full",e.type==="bid"&&"oui-border-trade-profit",e.type==="ask"&&"oui-border-trade-loss")})})]})};var Ht=e=>{let{data:t,type:o,countQty:i}=e,{symbolInfo:r,depth:n}=ee(),a=useCallback(()=>{if((t?.length||0)===0)return null;if(o==="ask"){let u=t.findIndex(m=>!Number.isNaN(m[0]));return u!=-1?t[u]:null}else {for(let u=t.length-1;u>=0;u--){let m=t[u];if(!Number.isNaN(m[0]))return m}return null}},[t,o]),s=useMemo(()=>n?.toString().includes(".")?n.toString().split(".")[1].length:0,[n]),c=useMemo(()=>t.reduce((u,m)=>Math.max(u,m[1]),0),[t]),[l,d]=useState(-1);return jsx("div",{className:"oui-order-book-list oui-flex oui-flex-col oui-gap-px",children:t.map((u,m)=>jsx(El,{index:m,item:u,countQty:i,setHoverIndex:d,hoverIndex:l,type:o,maxQty:c,priceDp:s,symbolInfo:r,findMaxItem:a},m))})},El=e=>{let{index:t,item:o,setHoverIndex:i,type:r,maxQty:n,hoverIndex:a,priceDp:s,countQty:c,symbolInfo:l}=e,{base:d,quote:u,base_dp:m,quote_dp:g}=l,{t:f}=useTranslation(),p=a!==-1?r==="ask"?t>=a:t<=a:false,[C,y]=useState(false),b=x=>{if(x===null)return {sumQty:0,sumQtyAmount:0,avgPrice:0};let T={sumQty:0,sumQtyAmount:0};return Number.isNaN(x[2])||(T={sumQty:x[2],sumQtyAmount:x[3]}),{...T,avgPrice:T.sumQtyAmount==0?0:T.sumQtyAmount/T.sumQty}},w=useMemo(()=>{let x=b(o);return x.avgPrice===0?b(e.findMaxItem()):x},[o,e]);return jsxs(TooltipRoot,{open:C,onOpenChange:y,children:[jsx(TooltipTrigger,{children:jsx(Hr,{background:"",price:o[0],quantity:o[1],accumulated:o[2],count:c,type:r,accumulatedAmount:o[3],maxQty:n,isHover:p,currentHover:a===t,symbolInfo:l,base:d,quote:u,onMouseEnter:()=>{i(t),y(true);},onMouseLeave:()=>{i(-1),y(false);}})}),jsxs(TooltipContent,{className:cn$1("oui-rounded-base oui-flex oui-w-full oui-max-w-[400px] oui-flex-col oui-gap-2 oui-bg-base-6 oui-p-3 oui-text-2xs oui-shadow-md"),align:r==="ask"?"end":"start",alignOffset:-25.4,side:"left",sideOffset:2,onPointerEnter:x=>x.preventDefault(),children:[jsx(Bo,{title:`${f("common.avgPrice")}\u2248`,content:w.avgPrice,contentDp:s}),jsx(Bo,{title:`${f("trading.orderBook.sum")} (${d})`,content:w.sumQty,contentDp:m}),jsx(Bo,{title:`${f("trading.orderBook.sum")} (${u})`,content:w.sumQtyAmount,contentDp:g}),jsx(TooltipArrow,{className:"oui-fill-base-6",style:{transform:r==="ask"?"translateX(80%)":"translateX(-80%)"}})]})]})},Bo=e=>{let{title:t,content:o,contentDp:i}=e;return jsxs("div",{className:"oui-flex oui-flex-row oui-justify-between oui-gap-4",children:[jsx("div",{className:"oui-text-base-contrast-36",children:t}),jsx("div",{className:"oui-text-right",children:jsx(Text.numeral,{dp:i,children:o})})]})};var zr=e=>{let{data:t}=e,o=useMemo(()=>{let i=Number.NaN,r=t.length,n=0;for(;Number.isNaN(i)&&n<r;)i=t[n][2],n++;return i},[t]);return jsx(Ht,{type:"ask",data:t,countQty:o})};var Wr=e=>{let{data:t}=e,o=useMemo(()=>{let i=Number.NaN,r=t.length-1;for(;Number.isNaN(i)&&r>0;)i=t[r][2],r--;return i},[t]);return jsx(Ht,{type:"bid",data:t,countQty:o})};var qr=e=>{let t=useMemo(()=>e.depths.map(o=>({value:o,label:`${o}`})),[e.depths]);return jsx(Box,{pl:3,width:97,className:"oui-py-[10px]",children:jsx(Select.options,{options:t,size:"xs",value:e.value,onValueChange:o=>{e.onChange?.(o);}})})};var Zl=e=>{let{item:t,base:o,onClick:i}=e,{t:r}=useTranslation(),[n,a]=useLocalStorage(Ne,o);return jsxs(Flex,{justify:"between",itemAlign:"center",className:cn$1("oui-w-full oui-px-2 oui-py-[3px]","oui-cursor-pointer","oui-text-xs","oui-text-base-contrast-54","hover:oui-bg-base-6","oui-rounded-[3px]","oui-transition-all",n===t&&"oui-bg-base-5"),onClick:s=>{a(t),i(s);},children:[r("common.total"),"(",t,")",jsx("div",{className:cn$1("oui-transition-all","oui-w-1","oui-h-1","oui-rounded-full","oui-bg-gradient-to-r",n===t&&"oui-from-[rgb(var(--oui-gradient-brand-start))] oui-to-[rgb(var(--oui-gradient-brand-end))]")})]})},Ur=e=>{let{base:t,quote:o}=e,{showTotal:i}=ee(),{t:r}=useTranslation(),[n,a]=Sl.useState(false),[s]=useLocalStorage(Ne,t),c=n?CaretUpIcon:CaretDownIcon;return jsxs(Flex,{pl:3,justify:"between",className:"oui-py-[6px]",children:[jsxs(Flex,{gap:1,className:cn$1("oui-basis-7/12",i&&"oui-basis-1/2"),children:[jsx(Box,{width:"100%",children:jsx(ct,{id:"oui-order-book-header-price",className:"oui-text-base-contrast-36",children:`${r("common.price")}(${o})`})}),jsx(Box,{width:"100%",children:jsx(ct,{justifyEnd:true,id:"oui-order-book-header-qty",className:"oui-text-base-contrast-36",children:`${r("common.qty")}(${t})`})})]}),jsx(Flex,{gap:1,pr:3,className:cn$1("oui-basis-5/12",i&&"oui-basis-1/2"),children:i?jsxs(Fragment,{children:[jsx(Box,{className:"oui-text-base-contrast-36",width:"100%",children:jsx(ct,{id:"oui-order-book-header-total-quote",justifyEnd:true,children:`${r("common.total")}(${t})`})}),jsx(Box,{className:"oui-text-base-contrast-36",width:"100%",children:jsx(ct,{justifyEnd:true,id:"oui-order-book-header-total-base",children:`${r("common.total")}(${o})`})})]}):jsx(Box,{width:"100%",children:jsx(Popover,{open:n,onOpenChange:a,contentProps:{className:cn$1("oui-w-28 oui-p-1")},content:jsx(Flex,{direction:"column",itemAlign:"start",className:cn$1("oui-w-full oui-gap-0.5"),children:[t,o].map(l=>jsx(Zl,{item:l,base:t,onClick:()=>a(false)},`type-${l}`))}),children:jsxs(Flex,{justify:"end",itemAlign:"center",className:"oui-cursor-pointer oui-select-none oui-text-base-contrast-36 oui-transition-all hover:oui-text-base-contrast",children:[jsx(ct,{justifyEnd:true,id:"oui-order-book-header-total-base",children:`${r("common.total")}(${s})`}),jsx(c,{color:"inherit",className:"oui-size-4 oui-text-3xs"})]})})})})]})},ct=e=>{let{children:t,className:o,justifyEnd:i=false}=e;return jsx(Flex,{id:e.id,className:cn$1(o,"oui-items-end oui-text-xs",i&&"oui-justify-end"),children:t})};var Et=e=>{let{markPrice:t=0,lastPrice:o,quote_dp:i,className:r,iconSize:n=18}=e,[a,s]=o,c=s<a,l=s>a;return jsxs(Flex,{gap:1,className:cn$1(l?"oui-text-trade-profit":c?"oui-text-trade-loss":"",r),children:[jsx(Text.numeral,{dp:i,intensity:98,children:s}),jsxs(Box,{width:19,children:[c&&jsx(ArrowDownShortIcon,{size:n,color:"danger",opacity:1}),l&&jsx(ArrowUpShortIcon,{size:n,color:"success",opacity:1})]})]})};var zt=e=>{let{isMobile:t}=useScreen();return t?jsx(uc,{...e}):jsx(cc,{...e})},cc=e=>{let{quote_dp:t,className:o,iconSize:i=18}=e,{t:r}=useTranslation();return jsx(Tooltip,{content:r("trading.orderBook.markPrice.tooltip"),className:"oui-max-w-[270px]",children:jsxs(Flex,{gap:1,className:cn$1("oui-cursor-pointer oui-text-2xs",o),children:[jsx(Zr,{size:i}),jsx(Text.numeral,{dp:t,color:"warning",className:"oui-underline oui-text-base oui-decoration-dashed oui-decoration-1 oui-underline-offset-4 oui-decoration-warning-darken",children:e.markPrice})]})})},uc=e=>{let{quote_dp:t,className:o,iconSize:i=18}=e,[r,n]=useState(false),{t:a}=useTranslation();return jsxs(Fragment,{children:[jsxs(Flex,{gap:1,className:cn$1("oui-cursor-pointer oui-text-2xs",o),onClick:()=>{n(true);},children:[jsx(Zr,{size:i}),jsx(Text.numeral,{dp:t,color:"warning",className:"oui-underline oui-decoration-dashed oui-decoration-1 oui-underline-offset-4 oui-decoration-warning-darken",children:e.markPrice})]}),jsx(SimpleDialog,{size:"xs",open:r,onOpenChange:n,title:a("common.tips"),actions:{primary:{label:a("common.ok"),onClick:()=>n(false)}},children:jsx(Text,{children:a("trading.orderBook.markPrice.tooltip")})})]})},Zr=e=>jsx("svg",{width:e.size,height:e.size,viewBox:"0 0 18 18",fill:"currenColor",xmlns:"http://www.w3.org/2000/svg",className:"oui-fill-warning-darken",children:jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M3.75 1.5a.75.75 0 0 1 .75.75h6a.75.75 0 0 1 .75.75v1.5h3a.75.75 0 0 1 .75.75V12a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75v-1.5H4.5v5.25a.75.75 0 0 1-1.5 0V2.25a.75.75 0 0 1 .75-.75M4.5 9h5.25V3.75H4.5zm6.75-3v3.75a.75.75 0 0 1-.75.75H8.25v.75h5.25V6z"})});var tn=e=>{let{markPrice:t=0,lastPrice:o,asks:i,bids:r,symbolInfo:n}=e,{showTotal:a}=ee();return jsxs("div",{className:"oui-flex oui-flex-row oui-pl-3 oui-tabular-nums oui-justify-between oui-text-base-contrast-80 oui-text-xs oui-relative oui-cursor-pointer oui-py-[6px]",children:[jsxs("div",{className:cn$1("oui-basis-7/12 oui-flex oui-flex-row oui-items-center oui-mr-2 oui-justify-between",a&&"oui-basis-5/12"),children:[jsx(Et,{markPrice:t,lastPrice:o,quote_dp:n.quote_dp,className:"oui-text-base"}),jsx(zt,{markPrice:t,quote_dp:n.quote_dp})]}),jsx("div",{className:cn$1("oui-basis-5/12 oui-flex oui-items-center oui-fex-row oui-overflow-hidden oui-relative oui-justify-end",a&&"oui-basis-7/12","oui-pr-3"),children:jsx(hc,{asks:i,bids:r})})]})},hc=e=>{let{asks:t,bids:o}=e,{t:i}=useTranslation(),r=useMemo(()=>{if(o.length===0&&t.length===0)return 0;let n=Number.isNaN(o[0][0])?0:o[0][0],a=t.reverse().findIndex(l=>!Number.isNaN(l[0])),s=0;a!==-1&&(s=Number.isNaN(t[a][0])?0:t[a][0]);let c=new Decimal(s).sub(n).div(new Decimal(s).add(n).div(2));return Math.ceil(c.toNumber()*1e6+.1)/1e4},[t,o]);return jsx("div",{children:jsx(Tooltip,{content:i("trading.orderBook.spreadRatio.tooltip"),className:"oui-max-w-[240px]",children:jsx(Text,{size:"2xs",intensity:36,className:"oui-cursor-pointer oui-underline oui-decoration-dashed oui-decoration-1 oui-underline-offset-4 oui-decoration-base-contrast-36",children:`${r}%`})})})};var rn=e=>{let{lastPrice:t,markPrice:o,quote:i,base:r,isLoading:n,onDepthChange:a}=e,s=useRef(null),[c,l]=useState(false),[d,u]=useLocalStorage(Ne,r);return useEffect(()=>{d!==i&&r&&u(r);},[r,i]),useEffect(()=>{let m=new ResizeObserver(f=>{for(let p of f){let{inlineSize:C}=p.borderBoxSize[0];l(C>=360);}}),g=s.current;return g&&m.observe(g),()=>{g&&m.unobserve(g);}},[]),jsx(Mt,{cellHeight:e.cellHeight??20,onItemClick:e.onItemClick,depth:e.activeDepth,showTotal:c,pendingOrders:e.pendingOrders||[],symbolInfo:e.symbolInfo,children:jsxs(Grid,{cols:1,rows:5,id:"oui-orderbook-desktop",ref:s,className:"oui-relative oui-size-full oui-grid-rows-[auto,auto,1fr,auto,1fr]",children:[jsx(qr,{depths:e.depths,value:e.activeDepth,onChange:a}),jsx(Ur,{quote:i,base:r}),jsx(zr,{data:[...e.asks]}),jsx(tn,{lastPrice:t,markPrice:o,asks:[...e.asks],bids:[...e.bids],symbolInfo:e.symbolInfo}),jsx(Wr,{data:[...e.bids]}),n&&jsx("div",{className:"oui-bg-bg-8/70 oui-absolute oui-inset-0 oui-z-10 oui-flex oui-items-center oui-justify-center",children:jsx(Spinner,{})})]})})};var Mo=e=>{let t=e.data.est_funding_rate,o=e.data.countDown,{t:i}=useTranslation();return jsxs(Flex,{direction:"column",itemAlign:"start",pb:2,children:[jsx(Text,{intensity:36,size:"2xs",children:i("trading.fundingRate.predFundingRate")}),t===null?"--":jsxs("div",{className:"orderly-flex orderly-gap-1 oui-text-2xs oui-text-base-contrast-36",children:[jsx(Text.numeral,{coloring:true,suffix:"%",dp:4,children:t??"--"}),jsx("span",{children:" in"}),jsx("span",{children:" "+o})]})]})};var _o=e=>({data:useFundingRate(e)});var Ho=e=>{let t=_o(e.symbol);return jsx(Mo,{...t})};var cn=e=>{let{accumulated:t,count:o,quantity:i,price:r,type:n,accumulatedAmount:a}=e,s=t/o*100,{cellHeight:c,onItemClick:l,depth:d,symbolInfo:u}=useContext(At),{base_dp:m,quote_dp:g,base:f,quote:p}=u,[C,y]=useLocalStorage(ze,["total",f].join("_")),[b,w]=C?.split("_")??[],x=Number.isNaN(t)?"-":a?.toString(),T=useMemo(()=>getPrecisionByNumber(d||`${g}`),[d,g]);return jsxs(Box,{className:cn$1("oui-relative oui-w-full oui-cursor-pointer oui-overflow-hidden oui-text-2xs oui-tabular-nums"),style:{height:`${c}px`},onClick:()=>{Number.isNaN(r)||Number.isNaN(i)||l?.([r,i]);},children:[jsxs(Flex,{itemAlign:"center",justify:"between",children:[jsx(Text.numeral,{color:n==="bid"?"buy":"sell",dp:T,children:r}),b==="qty"&&jsx(Text.numeral,{className:"oui-text-base-contrast-80",dp:m,children:Number.isNaN(i)?"-":i}),b==="total"&&w===f&&jsx(Text.numeral,{className:"oui-text-base-contrast-80",dp:m,children:t}),b==="total"&&w===p&&jsx(Text.numeral,{className:"oui-text-base-contrast-80",dp:2,children:x})]}),Number.isNaN(s)?null:jsx(_t,{width:s,className:cn$1(n==="ask"?"oui-bg-trade-loss/20":"oui-bg-trade-profit/20")})]})};var qt=e=>{let{data:t}=e,{mode:o}=ee();return jsx(Box,{className:"oui-order-book-list oui-flex oui-w-full oui-flex-col oui-gap-px",children:t.map((i,r)=>jsx(cn,{background:"",price:i[0],quantity:i[1],accumulated:i[2],accumulatedAmount:i[3],count:e.countQty,type:e.type,mode:o},`item-${r}`))})};var dn=e=>{let{data:t}=e,o=useMemo(()=>{let i=t.length,r=Number.NaN,n=0;for(;Number.isNaN(r)&&n<i;)r=t[n][2],n++;return r},[t]);return jsx(qt,{type:"ask",data:t,countQty:o})};var mn=e=>{let{data:t}=e,o=useMemo(()=>{let i=Number.NaN,r=t.length-1;for(;Number.isNaN(i)&&r>0;)i=t[r][2],r--;return i},[t]);return jsx(qt,{type:"bid",data:t,countQty:o})};var fn=e=>{let t=useMemo(()=>e.depth.map(o=>({value:o,label:`${o}`})),[e.depth]);return jsx(Box,{id:"oui-order-book-depth",className:"oui-w-full oui-pt-2",children:jsx(Picker,{options:t,fullWidth:true,size:"sm",value:e.value,className:"oui-text-2xs oui-text-base-contrast-54",onValueChange:o=>{e.onChange?.(o);}})})};var pn=e=>{let{t}=useTranslation(),{base:o,quote:i}=e,[r,n]=useLocalStorage(ze,["total",o].join("_")),a=useMemo(()=>[{value:["qty",o].join("_"),label:`${t("common.quantity")}(${o})`,data:[t("common.quantity"),o]},{value:["total",o].join("_"),label:`${t("common.total")}(${o})`,data:[t("common.total"),o]},{value:["total",i].join("_"),label:`${t("common.total")}(${i})`,data:[t("common.total"),i]}],[t,o,i]);return jsxs(Flex,{justify:"between",width:"100%",className:"oui-py-[5px] oui-text-2xs oui-text-base-contrast-36",children:[jsxs(Flex,{direction:"column",itemAlign:"start",id:"oui-order-book-header-price",children:[jsx(Text,{children:t("common.price")}),jsx(Text,{children:`(${i})`})]}),jsx(Picker,{size:"sm",value:r,onValueChange:n,options:a,valueRenderer:(s,{open:c,data:l})=>jsxs(Flex,{justify:"between",itemAlign:"center",gap:1,children:[Array.isArray(l)&&jsxs(Flex,{direction:"column",itemAlign:"end",children:[l[0]&&jsx(Text,{children:l[0]}),l[1]&&jsxs(Text,{children:["(",l[1],")"]})]}),c?jsx(CaretUpIcon,{size:14,color:"inherit"}):jsx(CaretDownIcon,{size:14,color:"inherit"})]})})]})};var bn=e=>{let{symbolInfo:t}=ee(),{quote_dp:o}=t;return jsxs(Flex,{id:"oui-order-book-mark-price",className:"oui-py-[6px]",width:"100%",justify:"between",children:[jsx(Et,{markPrice:e.markPrice,lastPrice:e.lastPrice,quote_dp:o,className:"oui-text-sm",iconSize:14}),jsx(zt,{markPrice:e.markPrice,quote_dp:o,className:"oui-text-2xs",iconSize:12})]})};var xn=e=>{let{lastPrice:t,markPrice:o,quote:i,base:r,isLoading:n,onDepthChange:a}=e,s=`PERP_${e.symbolInfo.base}_${e.symbolInfo.quote}`,[c,l]=useLocalStorage(ze,["total",r].join("_"));return useEffect(()=>{let[d]=c?.split("_")??[];!c.includes(i)&&r&&l([d,r].join("_"));},[i,r,c]),jsx(Mt,{cellHeight:e.cellHeight??20,onItemClick:e.onItemClick,depth:e.activeDepth,pendingOrders:[],showTotal:false,symbolInfo:e.symbolInfo,children:jsxs(Flex,{direction:"column",p:2,id:"oui-orderbook-mobile",className:cn$1("oui-relative oui-size-full",e.className),justify:"start",itemAlign:"start",children:[jsx(Ho,{symbol:s}),jsx(pn,{quote:i,base:r}),jsx(dn,{data:e.asks}),jsx(bn,{lastPrice:t,markPrice:o}),jsx(mn,{data:e.bids}),jsx(fn,{depth:e.depths||[],value:e.activeDepth,onChange:a}),n&&jsx("div",{className:"oui-bg-base-800/70 oui-absolute oui-inset-0 oui-z-10 oui-flex oui-h-full oui-min-h-[420px] oui-items-center oui-justify-center",children:jsx(Spinner,{})})]})})};var zo=e=>jsx(Box,{className:"oui-font-semibold",width:"100%",height:"100%",children:e.isMobile?jsx(xn,{level:e.level,asks:e.asks,bids:e.bids,markPrice:e.markPrice,lastPrice:e.lastPrice,depths:e.depths,activeDepth:e.selDepth,base:e.base,quote:e.quote,isLoading:e.isLoading,onItemClick:e.onItemClick,cellHeight:e.cellHeight,onDepthChange:e.onDepthChange,className:e.className,symbolInfo:e.symbolInfo}):jsx(rn,{level:e.level,asks:e.asks,bids:e.bids,markPrice:e.markPrice,lastPrice:e.lastPrice,depths:e.depths,activeDepth:e.selDepth,base:e.base,quote:e.quote,isLoading:e.isLoading,onItemClick:e.onItemClick,cellHeight:e.cellHeight,onDepthChange:e.onDepthChange,className:e.className,pendingOrders:e.pendingOrders,symbolInfo:e.symbolInfo})});var gt=20,Cn=104,Vo=e=>{let{symbol:t,height:o}=e,i=useSymbolsInfo()[e.symbol],[r,n]=useState(gt),[a,s]=useState(10),{base:c,quote:l,quote_dp:d}=rt(i),[u,{onDepthChange:m,isLoading:g,onItemClick:f,depth:p,allDepths:C}]=useOrderbookStream(t,void 0,{level:a}),y=lu(t);useEffect(()=>{if(o){let T=Math.floor((o-Cn)/((gt+1)*2)),z=(gt+1)*2*T,S=o-Cn-z;S>10?n(gt+S/T/2):n(gt),s(T);}},[o]);let b=useMemo(()=>typeof p>"u"||typeof d>"u"?void 0:removeTrailingZeros(p),[p,d]),w=useMemo(()=>C?.map(T=>removeTrailingZeros(T))||[],[C,d]),{isMobile:x}=useScreen();return {level:a,asks:u?.asks,bids:u?.bids,markPrice:u?.markPrice,lastPrice:u?.middlePrice,depths:w,selDepth:b,base:c,quote:l,isLoading:g,onItemClick:f,cellHeight:r,onDepthChange:m,pendingOrders:y,symbolInfo:rt(i),isMobile:x}},lu=e=>{let[t]=useOrderStream({status:OrderStatus.INCOMPLETE,symbol:e});return useMemo(()=>t?.filter(r=>r.symbol===e).reduce((r,n)=>{let a=n.price||n.trigger_price||0;return [...r,a]},[]),[t,e])};var Ge=e=>{let t=Vo({symbol:e.symbol,height:e.height});return jsx(zo,{...t,className:e.className})};var Go=e=>{let{riskRate:t,riskRateColor:o,currentLeverage:i,maxLeverage:r}=e,{isHigh:n,isMedium:a,isLow:s}=o,{wrongNetwork:c}=useAppContext(),{t:l}=useTranslation(),d=c?"":n?"oui-text-danger":a?"oui-text-warning-darken":s?gradientTextVariants({color:"brand"}):"";return jsxs(Box,{"data-risk":"",className:"oui-space-y-2",children:[jsx(Flex,{itemAlign:"center",justify:"start",className:"oui-w-full oui-bg-base-6 oui-rounded-full oui-h-2 oui-px-[1px]",children:jsx(Box,{className:c?"oui-bg-gradient-to-r oui-opacity-20 oui-from-[#26fefe] oui-via-[#ff7d00] oui-to-[#d92d6b] oui-h-1.5 oui-rounded-full":n?"oui-bg-gradient-to-tr oui-from-[#791438] oui-to-[#ff447c] oui-h-1.5 oui-rounded-full":a?"oui-bg-gradient-to-tr oui-from-[#792e00] oui-to-[#ffb65d] oui-h-1.5 oui-rounded-full":s?"oui-bg-gradient-to-tr oui-from-[#59b0fe] oui-to-[#26fefe] oui-h-1.5 oui-rounded-full":"oui-bg-gradient-to-r oui-opacity-20 oui-from-[#26fefe] oui-via-[#ff7d00] oui-to-[#d92d6b] oui-h-1.5 oui-rounded-full",style:t&&t!=="--"?{width:t}:{width:"100%"}})}),jsxs(Flex,{className:"oui-gap-2",justify:"between",children:[jsxs(Flex,{direction:"column",children:[jsx(Tooltip,{content:jsx(To,{description:l("trading.riskRate.tooltip"),formula:l("trading.riskRate.formula")}),children:jsx(Text,{size:"2xs",color:"neutral",weight:"semibold",className:cn$1("oui-cursor-pointer","oui-border-b oui-border-dashed oui-border-b-white/10"),children:l("trading.riskRate")})}),jsx(Text,{size:"xs",color:"neutral",weight:"semibold",className:cn$1(d),children:t??"--"})]}),jsxs(Flex,{direction:"column",children:[jsx(Text,{size:"2xs",color:"neutral",weight:"semibold",className:cn$1("oui-cursor-pointer","oui-border-b oui-border-b-transparent"),children:l("leverage.maxAccountLeverage")}),jsxs(Flex,{className:"oui-gap-1",children:[jsx(Text.numeral,{dp:2,padding:false,suffix:i?"x":void 0,children:i??"--"}),jsx("span",{className:"oui-text-base-contrast-54",children:"/"}),jsxs("button",{className:"oui-flex oui-items-center oui-gap-1",onClick:()=>{modal.show(LeverageWidgetWithDialogId,{currentLeverage:5});},"data-testid":"oui-testid-riskRate-leverage-button",children:[jsx(Text.numeral,{dp:2,padding:false,suffix:r?"x":void 0,"data-testid":"oui-testid-riskRate-leverage-value",children:r??"--"}),typeof r<"u"&&r!==null&&jsx(EditIcon,{size:12,color:"white"})]})]})]})]})]})};var Su=e=>{if(e===null)return {isHigh:false,isMedium:false,isLow:false,isDefault:true};let t=e<40,o=e>=40&&e<80,i=e>=80;return {isHigh:i,isMedium:o,isLow:t,isDefault:!t&&!o&&!i}},Nn=()=>{let{state:e}=useAccount(),t=e.status>=AccountStatusEnum.EnableTrading||e.status===AccountStatusEnum.EnableTradingWithoutConnected,{marginRatio:o,currentLeverage:i,mmr:r}=useMarginRatio(),{curLeverage:n}=useLeverage(),a=useMemo(()=>!t||o===null||r===null?"--":o===0||r===0?"0%":`${new Decimal(r).div(o).mul(100).todp(2,Decimal.ROUND_UP).toString().replace(/\.?0+$/,"")}%`,[t,o,r]),s=a==="--"?null:parseFloat(a),c=useMemo(()=>Su(s),[s]),l=useDataTap(i),d=useDataTap(n);return {riskRate:useDataTap(a),riskRateColor:c,isConnected:t,currentLeverage:l,maxLeverage:d}};var Uo=()=>{let e=Nn();return jsx(Go,{...e})};var Qo=e=>jsx("div",{ref:e.containerRef,className:"oui-h-full",chi