@orderly.network/trading
Version:
28 lines (24 loc) • 117 kB
JavaScript
'use strict';
var i18n = require('@orderly.network/i18n');
var types = require('@orderly.network/types');
var ui = require('@orderly.network/ui');
var uiOrders = require('@orderly.network/ui-orders');
var uiPositions = require('@orderly.network/ui-positions');
var utils = require('@orderly.network/utils');
var jsxRuntime = require('react/jsx-runtime');
var hooks = require('@orderly.network/hooks');
var reactApp = require('@orderly.network/react-app');
var Sl = require('react');
var uiConnector = require('@orderly.network/ui-connector');
var uiTransfer = require('@orderly.network/ui-transfer');
var uiLeverage = require('@orderly.network/ui-leverage');
var Ru = require('@uiw/react-split');
var uiScaffold = require('@orderly.network/ui-scaffold');
var uiChainSelector = require('@orderly.network/ui-chain-selector');
var markets = require('@orderly.network/markets');
var uiOrderEntry = require('@orderly.network/ui-order-entry');
var uiTradingview = require('@orderly.network/ui-tradingview');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var Sl__default = /*#__PURE__*/_interopDefault(Sl);
var Ru__default = /*#__PURE__*/_interopDefault(Ru);
var co=e=>{let{isMobile:t}=ui.useScreen();return t?jsxRuntime.jsx(Wa,{...e}):jsxRuntime.jsx(Va,{...e})},Wa=e=>{let{t}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Flex,{direction:"column",gap:2,width:"100%",itemAlign:"start",p:2,className:"oui-bg-base-9 oui-rounded-b-xl",children:[jsxRuntime.jsxs(ui.Flex,{width:"100%",justify:"between",children:[jsxRuntime.jsx(ar,{classNames:{label:"oui-text-2xs oui-text-base-contrast-54",root:"oui-text-sm"},...e}),jsxRuntime.jsx(sr,{classNames:{label:"oui-text-2xs oui-text-base-contrast-54",root:"oui-text-sm"},...e})]}),jsxRuntime.jsx(ui.Divider,{className:"oui-w-full"}),jsxRuntime.jsxs(ui.Flex,{className:"oui-gap-[2px] oui-cursor-pointer",children:[jsxRuntime.jsx(ui.Checkbox,{id:"oui-checkbox-hideOtherSymbols",color:"white",checked:!e.showAllSymbol,onCheckedChange:o=>{e.setShowAllSymbol(!o);}}),jsxRuntime.jsx("label",{className:"oui-text-2xs oui-text-base-contrast-54 oui-cursor-pointer",htmlFor:"oui-checkbox-hideOtherSymbols",children:t("trading.hideOtherSymbols")})]})]})},Va=e=>jsxRuntime.jsxs(ui.Flex,{py:2,px:3,gap:6,width:"100%",justify:"start",children:[jsxRuntime.jsx(ar,{...e,classNames:{label:"oui-text-base-contrast-54"}}),jsxRuntime.jsx(sr,{...e,classNames:{label:"oui-text-base-contrast-54"}})]}),ar=e=>{let{t}=i18n.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 jsxRuntime.jsx(ui.Statistic,{label:t("common.unrealizedPnl"),classNames:e.classNames,children:jsxRuntime.jsxs(ui.Flex,{gap:1,children:[jsxRuntime.jsx(ui.Text.numeral,{dp:e.pnlNotionalDecimalPrecision,rm:utils.Decimal.ROUND_DOWN,intensity:80,className:o,children:e.unrealPnL??"--"}),typeof e.unrealPnlROI<"u"&&jsxRuntime.jsx(ui.Text.numeral,{prefix:"(",suffix:")",rule:"percentages",size:"2xs",dp:e.pnlNotionalDecimalPrecision,rm:utils.Decimal.ROUND_DOWN,className:i,children:e.unrealPnlROI})]})})},sr=e=>{let{t}=i18n.useTranslation();return jsxRuntime.jsx(ui.Statistic,{label:t("common.notional"),classNames:e.classNames,children:jsxRuntime.jsx(ui.Text.numeral,{dp:e.pnlNotionalDecimalPrecision,rm:utils.Decimal.ROUND_DOWN,intensity:80,children:e.notional??"--"})})};var G=e=>{let[t,o]=hooks.useLocalStorage("unPnlPriceBasis","markPrice"),[i,r]=hooks.useLocalStorage("pnlNotionalDecimalPrecision",e?.pnlNotionalDecimalPrecision??2),[n,a]=hooks.useLocalStorage("showAllSymbol",true),[s,c]=hooks.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]=hooks.usePositionStream(i,{calcMode:r}),a=reactApp.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 jsxRuntime.jsx(co,{...t})};var ot=e=>{let{showAllSymbol:t}=G(),[o]=hooks.usePositionStream(t?void 0:e),i=Sl.useMemo(()=>o.rows?.length,[o.rows?.length]);return {positionCount:reactApp.useDataTap(i)??0}};var it=e=>{let {showAllSymbol:t}=G();`orderly_${uiOrders.TabType.pending}_pageSize`;`orderly_${uiOrders.TabType.tp_sl}_pageSize`;let [r,{total:n}]=hooks.useOrderStream({symbol:t?void 0:e,status:types.OrderStatus.INCOMPLETE,excludes:[types.AlgoOrderRootType.POSITIONAL_TP_SL,types.AlgoOrderRootType.TP_SL],size:500},{keeplive:true}),[a,{total:s}]=hooks.useOrderStream({symbol:t?void 0:e,status:types.OrderStatus.INCOMPLETE,includes:[types.AlgoOrderRootType.POSITIONAL_TP_SL,types.AlgoOrderRootType.TP_SL],size:500},{keeplive:true}),c=reactApp.useDataTap(n)??0,l=reactApp.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=Sl.createContext({}),V=()=>Sl.useContext(gr),fr=e=>{let t=hooks.useSymbolsInfo()[e.symbol];return jsxRuntime.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]=Sl.useState(false),{t:i}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Flex,{gap:0,children:[jsxRuntime.jsxs(ui.Flex,{gap:1,children:[jsxRuntime.jsx(ui.Checkbox,{id:"oui-checkbox-hideOtherSymbols",color:"white",checked:e.hideOtherSymbols,onCheckedChange:r=>{e.setHideOtherSymbols(r);}}),jsxRuntime.jsx("label",{className:"oui-text-xs oui-text-base-contrast-54 oui-cursor-pointer",htmlFor:"oui-checkbox-hideOtherSymbols",children:i("trading.hideOtherSymbols")})]}),jsxRuntime.jsxs(ui.DropdownMenuRoot,{open:t,onOpenChange:o,children:[jsxRuntime.jsx(ui.DropdownMenuTrigger,{asChild:true,children:jsxRuntime.jsx(ui.Button,{size:"xs",type:"button",variant:"contained",className:"oui-bg-transparent hover:oui-bg-transparent",children:jsxRuntime.jsx(ui.SettingFillIcon,{size:16,color:"white",opacity:1,className:"oui-text-white/[.36] hover:oui-text-white/80"})})}),jsxRuntime.jsx(ui.DropdownMenuContent,{className:"oui-px-5 oui-py-3 oui-w-[360px]",alignOffset:2,align:"end",children:jsxRuntime.jsxs("div",{className:"oui-flex oui-flex-col oui-text-sm",children:[jsxRuntime.jsx(ui.Text,{className:"oui-text-base oui-pb-3",children:i("trading.portfolioSettings")}),jsxRuntime.jsx(ui.Divider,{}),jsxRuntime.jsx(ui.Text,{className:"oui-pb-3 oui-text-base-contrast-54 oui-mt-2",children:i("trading.portfolioSettings.decimalPrecision")}),jsxRuntime.jsx(ss,{value:e.pnlNotionalDecimalPrecision,onValueChange:r=>{e.setPnlNotionalDecimalPrecision(r),o(false);}}),jsxRuntime.jsx(ui.Divider,{className:"oui-my-3"}),jsxRuntime.jsx(ui.Text,{className:"oui-pb-3 oui-text-base-contrast-54 oui-mt-2",children:i("trading.portfolioSettings.unrealPnlPriceBasis")}),jsxRuntime.jsx(as,{value:e.unPnlPriceBasis,onValueChange:r=>{e.setUnPnlPriceBasic(r),o(false);}})]})})]})]})},as=e=>{let{value:t,onValueChange:o}=e,{t:i}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Flex,{gap:2,children:[jsxRuntime.jsx(nt,{sel:t==="markPrice",label:i("common.markPrice"),value:"markPrice",onCheckChange:o}),jsxRuntime.jsx(nt,{sel:t==="lastPrice",label:i("common.lastPrice"),value:"lastPrice",onCheckChange:o})]})},ss=e=>{let{value:t,onValueChange:o}=e;return jsxRuntime.jsxs(ui.Flex,{gap:2,children:[jsxRuntime.jsx(nt,{sel:t===0,label:1,value:0,onCheckChange:o}),jsxRuntime.jsx(nt,{sel:t===1,label:.1,value:1,onCheckChange:o}),jsxRuntime.jsx(nt,{sel:t===2,label:.01,value:2,onCheckChange:o})]})},nt=e=>{let{sel:t,label:o,value:i,onCheckChange:r}=e;return jsxRuntime.jsxs(ui.Flex,{onClick:n=>{r(i),n.stopPropagation();},gap:1,className:"oui-cursor-pointer",children:[t?jsxRuntime.jsx(ls,{}):jsxRuntime.jsx(cs,{}),jsxRuntime.jsx(ui.Text,{size:"2xs",intensity:t?98:54,children:o})]})},ls=()=>jsxRuntime.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:[jsxRuntime.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"}),jsxRuntime.jsx("circle",{cx:"8",cy:"8",r:"3.333"})]}),cs=()=>jsxRuntime.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsxRuntime.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 jsxRuntime.jsx(uo,{...t})};var fo=e=>{let{t}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Tabs,{defaultValue:e.current||"Positions",variant:"contained",trailing:jsxRuntime.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:[jsxRuntime.jsx(ui.TabPanel,{testid:"oui-testid-dataList-position-tab",value:"Positions",title:`${t("common.positions")} ${(e.positionCount??0)>0?`(${e.positionCount})`:""}`,children:jsxRuntime.jsx(ys,{...e})}),jsxRuntime.jsx(ui.TabPanel,{testid:"oui-testid-dataList-pending-tab",value:"Pending",title:`${t("orders.status.pending")} ${(e.pendingOrderCount??0)>0?`(${e.pendingOrderCount})`:""}`,children:jsxRuntime.jsx(uiOrders.DesktopOrderListWidget,{type:uiOrders.TabType.pending,ordersStatus:types.OrderStatus.INCOMPLETE,symbol:e.showAllSymbol?void 0:e.symbol,onSymbolChange:e.onSymbolChange,testIds:{tableBody:"oui-testid-dataList-pending-table-body"}})}),jsxRuntime.jsx(ui.TabPanel,{testid:"oui-testid-dataList-tpsl-tab",value:"TP/SL",title:`${t("common.tpsl")} ${(e.tpSlOrderCount??0)>0?`(${e.tpSlOrderCount})`:""}`,children:jsxRuntime.jsx(uiOrders.DesktopOrderListWidget,{type:uiOrders.TabType.tp_sl,ordersStatus:types.OrderStatus.INCOMPLETE,symbol:e.showAllSymbol?void 0:e.symbol,onSymbolChange:e.onSymbolChange,testIds:{tableBody:"oui-testid-dataList-tpsl-table-body"}})}),jsxRuntime.jsx(ui.TabPanel,{testid:"oui-testid-dataList-filled-tab",value:"Filled",title:t("orders.status.filled"),children:jsxRuntime.jsx(uiOrders.DesktopOrderListWidget,{type:uiOrders.TabType.filled,symbol:e.showAllSymbol?void 0:e.symbol,pnlNotionalDecimalPrecision:e.pnlNotionalDecimalPrecision,ordersStatus:types.OrderStatus.FILLED,onSymbolChange:e.onSymbolChange,testIds:{tableBody:"oui-testid-dataList-filled-table-body"},sharePnLConfig:e.sharePnLConfig})}),jsxRuntime.jsx(ui.TabPanel,{testid:"oui-testid-dataList-positionHistory-tab",value:"Position history",title:t("positions.positionHistory"),children:jsxRuntime.jsx(uiPositions.PositionHistoryWidget,{pnlNotionalDecimalPrecision:e.pnlNotionalDecimalPrecision,symbol:e.showAllSymbol?void 0:e.symbol,onSymbolChange:e.onSymbolChange,sharePnLConfig:e.sharePnLConfig})}),jsxRuntime.jsx(ui.TabPanel,{testid:"oui-testid-dataList-orderHistory-tab",value:"Order history",title:t("orders.orderHistory"),children:jsxRuntime.jsx(uiOrders.DesktopOrderListWidget,{type:uiOrders.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})}),jsxRuntime.jsx(ui.TabPanel,{testid:"oui-testid-dataList-liquidation-tab",value:"Liquidation",title:t("positions.liquidation"),children:jsxRuntime.jsx(uiPositions.LiquidationWidget,{symbol:e.showAllSymbol?void 0:e.symbol})})]})},ys=e=>jsxRuntime.jsxs(ui.Flex,{direction:"column",width:"100%",height:"100%",children:[jsxRuntime.jsx(tt,{pnlNotionalDecimalPrecision:e.pnlNotionalDecimalPrecision,symbol:e.showAllSymbol?void 0:e.symbol,unPnlPriceBasis:e.unPnlPriceBasis}),jsxRuntime.jsx(ui.Divider,{className:"oui-w-full"}),jsxRuntime.jsx(ui.Box,{className:"oui-h-[calc(100%_-_60px)]",width:"100%",children:jsxRuntime.jsx(uiPositions.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 jsxRuntime.jsx(fo,{...t})};var ho=e=>jsxRuntime.jsxs(ui.Box,{className:ui.cn("oui-grid oui-grid-rows=[auto,1fr] oui-h-full oui-w-full",e.classNames?.root),style:e.style,children:[jsxRuntime.jsx(ui.Box,{className:"oui-pr-1",children:jsxRuntime.jsx(Ps,{base:e.base,quote:e.quote,className:e.classNames?.listHeader})}),jsxRuntime.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 jsxRuntime.jsxs(ui.Grid,{cols:3,gapX:2,width:"100%",className:ui.cn("oui-text-xs oui-tabular-nums",r?.root),children:[jsxRuntime.jsx("div",{className:ui.cn("oui-flex-1",r?.left),children:t}),jsxRuntime.jsx("div",{className:ui.cn("oui-flex-1",r?.mid),children:o}),jsxRuntime.jsx("div",{className:ui.cn("oui-flex-1 oui-text-right",r?.right),children:i})]})},Ps=e=>{let{t}=i18n.useTranslation();return jsxRuntime.jsx(vr,{left:t("common.time"),mid:`${t("common.price")}(${e.quote})`,right:`${t("common.qty")}(${e.base})`,classNames:{root:ui.cn("oui-text-base-contrast-54 oui-h-[32px] oui-sticky",e.className)}})},Ns=e=>jsxRuntime.jsx(ui.ListView,{dataSource:e.data,className:ui.cn("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)=>jsxRuntime.jsx(vr,{left:jsxRuntime.jsx(ui.Text.formatted,{rule:"date",formatString:"HH:mm:ss",children:t?.ts}),mid:utils.commifyOptional(t?.price,{fix:e.quoteDp}),right:utils.commifyOptional(t?.size,{fix:e.baseDp}),classNames:{left:ui.cn("oui-text-base-contrast-80",e.classNames?.left),right:ui.cn(t.side===types.OrderSide.BUY?"oui-text-trade-profit":"oui-text-trade-loss",e.classNames?.mid),mid:ui.cn(t.side===types.OrderSide.BUY?"oui-text-trade-profit":"oui-text-trade-loss",e.classNames?.right)}},o)});var Pr=e=>{let{data:t,isLoading:o}=hooks.useMarketTradeStream(e),i=hooks.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 jsxRuntime.jsx(ho,{...t,classNames:e.classNames,style:e.style})};function Nr(e){let{t}=i18n.useTranslation();return e.showFaucet?jsxRuntime.jsx(ui.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}=i18n.useTranslation(),{connectedChain:t,namespace:o}=hooks.useWalletConnector(),{state:i,account:r}=hooks.useAccount(),n=hooks.useConfig(),a=n.get("operatorUrl"),[s,{isMutating:c}]=hooks.useMutation(`${a}/v1/faucet/usdc`),[l,d]=Sl.useState(false),u=Sl.useMemo(()=>!t||!t.id?false:(i.status===types.AccountStatusEnum.EnableTrading||i.status===types.AccountStatusEnum.EnableTradingWithoutConnected)&&utils.isTestnet(parseInt(t.id)),[i,t]);return {getFaucet:()=>{if(l)return;d(true);let g=e("trading.faucet.getTestUSDC.success",{quantity:o===types.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 ui.modal.alert({title:e("trading.faucet.getTestUSDC"),message:g,onOk:()=>new Promise(p=>p(true))});f.message&&ui.toast.error(f.message);},f=>{ui.toast.error(f.message);})},showFaucet:u,loading:l}}function bo(){let e=Lr();return jsxRuntime.jsx(Nr,{...e})}var ol=()=>{let{state:e}=hooks.useAccount(),{wrongNetwork:t,disabledConnect:o}=reactApp.useAppContext(),{t:i}=i18n.useTranslation();return Sl.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 types.AccountStatusEnum.NotConnected:return r.connectWallet;case types.AccountStatusEnum.NotSignedIn:return r.notSignedIn;case types.AccountStatusEnum.DisabledTrading:return r.disabledTrading;default:return r.default}},[e.status,t,i])},To=({description:e,formula:t})=>jsxRuntime.jsxs("div",{className:"oui-min-w-[204px] oui-max-w-[240px] oui-text-2xs oui-leading-normal oui-text-base-contrast-80",children:[jsxRuntime.jsx("span",{children:e}),jsxRuntime.jsx(ui.Divider,{className:"oui-border-white/10",my:2}),jsxRuntime.jsx("span",{children:t})]}),il=({totalValue:e,visible:t=true,onToggleVisibility:o})=>{let{t:i}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Flex,{direction:"column",gap:1,className:"oui-text-2xs",itemAlign:"center",children:[jsxRuntime.jsx(ui.Text.numeral,{visible:t,weight:"bold",size:"2xl",className:ui.gradientTextVariants({color:"brand"}),as:"div",padding:false,dp:2,children:e??"--"}),jsxRuntime.jsxs(ui.Flex,{gap:1,itemAlign:"center",children:[jsxRuntime.jsx(ui.Text,{size:"2xs",color:"neutral",weight:"semibold",children:`${i("trading.asset.myAssets")} (USDC)`}),jsxRuntime.jsx("button",{onClick:o,children:t?jsxRuntime.jsx(ui.EyeIcon,{size:18,className:"oui-text-base-contrast-54"}):jsxRuntime.jsx(ui.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})=>jsxRuntime.jsxs(ui.Flex,{justify:"between",children:[jsxRuntime.jsx(ui.Tooltip,{content:jsxRuntime.jsx(To,{description:t,formula:o}),children:jsxRuntime.jsx(ui.Text,{size:"2xs",color:"neutral",weight:"semibold",className:"oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",children:e})}),jsxRuntime.jsx(ui.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]=hooks.useLocalStorage("orderly_entry_asset_list_open",false),[s,c]=Sl.useState(n),{t:l}=i18n.useTranslation(),d=Sl.useCallback(()=>{c(u=>!u),setTimeout(()=>{a(!s);},0);},[]);return jsxRuntime.jsxs(ui.Box,{className:"oui-group",children:[jsxRuntime.jsxs(ui.Flex,{justify:"center",gap:1,itemAlign:"center",className:"oui-cursor-pointer",onClick:d,children:[jsxRuntime.jsx(ui.Divider,{className:"oui-flex-1"}),jsxRuntime.jsx(ui.ChevronDownIcon,{size:12,color:"white",className:ui.cn("oui-transition-transform",s&&"oui-rotate-180")}),jsxRuntime.jsx(ui.Divider,{className:"oui-flex-1"})]}),jsxRuntime.jsxs(ui.Box,{style:{transform:"translateZ(0)"},className:ui.cn("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:[jsxRuntime.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"}),jsxRuntime.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:"--%"}),jsxRuntime.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}=i18n.useTranslation(),w=g&&jsxRuntime.jsx(ui.Button,{fullWidth:true,color:"secondary",size:"md",onClick:n,"data-testid":"oui-testid-assetView-transfer-button",children:jsxRuntime.jsx(ui.Text,{children:b("common.transfer")})}),x=m&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(ui.Button,{fullWidth:true,color:"secondary",size:"md",onClick:r,"data-testid":"oui-testid-assetView-withdraw-button",children:[!g&&jsxRuntime.jsx(ui.ArrowDownShortIcon,{color:"white",opacity:1,className:"oui-rotate-180"}),jsxRuntime.jsx(ui.Text,{children:b("common.withdraw")})]}),jsxRuntime.jsxs(ui.Button,{"data-testid":"oui-testid-assetView-deposit-button",fullWidth:true,size:"md",onClick:i,children:[!g&&jsxRuntime.jsx(ui.ArrowDownShortIcon,{color:"white",opacity:1}),jsxRuntime.jsx(ui.Text,{children:b("common.deposit")})]})]});return jsxRuntime.jsxs(ui.Box,{className:"oui-relative",children:[f&&p&&jsxRuntime.jsxs(ui.Flex,{direction:"column",gap:1,className:"oui-mb-[32px]",children:[jsxRuntime.jsx(ui.Text,{size:"lg",weight:"bold",color:C||"inherit",className:y,children:f}),jsxRuntime.jsx(ui.Text,{size:"2xs",color:"neutral",weight:"semibold",className:"oui-text-center",children:p})]}),jsxRuntime.jsx(uiConnector.AuthGuard,{networkId:e,buttonProps:{size:"md",fullWidth:true},children:t&&m?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(ui.Box,{children:jsxRuntime.jsxs(ui.Flex,{direction:"column",gap:1,className:"oui-mb-[32px]",children:[jsxRuntime.jsx(ui.Text.gradient,{size:"lg",weight:"bold",color:"brand",children:b("trading.asset.startTrading")}),jsxRuntime.jsx(ui.Text,{size:"2xs",color:"neutral",weight:"semibold",children:b("trading.asset.startTrading.description")})]})}),jsxRuntime.jsxs(ui.Button,{"data-testid":"oui-testid-assetView-deposit-button",fullWidth:true,size:"md",onClick:i,children:[jsxRuntime.jsx(ui.ArrowDownShortIcon,{color:"white",opacity:1}),jsxRuntime.jsx(ui.Text,{children:b("common.deposit")})]}),jsxRuntime.jsx(ui.Box,{className:"oui-mt-3",children:jsxRuntime.jsx(bo,{})})]}):jsxRuntime.jsxs(ui.Box,{className:"oui-space-y-4",children:[jsxRuntime.jsx(il,{totalValue:o,visible:s,onToggleVisibility:a}),jsxRuntime.jsx(rl,{visible:s,freeCollateral:c,marginRatioVal:l,renderMMR:d,isConnected:u}),jsxRuntime.jsx(ui.Flex,{gap:m?g?2:3:0,itemAlign:"center",children:m?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[w,x]}):w}),m&&jsxRuntime.jsx(bo,{})]})}),jsxRuntime.jsx("div",{className:ui.cn("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}=hooks.useAccount(),{wrongNetwork:t,disabledConnect:o}=reactApp.useAppContext(),{totalValue:i}=hooks.useCollateral({dp:2}),r=t||o||e.status<types.AccountStatusEnum.EnableTrading&&e.status!==types.AccountStatusEnum.EnableTradingWithoutConnected,n=Sl.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}=hooks.usePrivateQuery(n,{formatter:s=>s});return {isFirstTimeDeposit:!r&&i===0&&a?.meta?.total===0,totalValue:i}},Ir=()=>{let {t:e}=i18n.useTranslation(),t=hooks.useAccountInstance(),o=hooks.useEventEmitter(),{isFirstTimeDeposit:i,totalValue:r}=Do(),n=hooks.useConfig("networkId"),{state:a,isMainAccount:s}=hooks.useAccount(),{freeCollateral:c}=hooks.useCollateral({dp:2}),{marginRatio:l,mmr:d}=hooks.useMarginRatio(),u=a.status>=types.AccountStatusEnum.Connected,[{aggregated:m,totalUnrealizedROI:g},f]=hooks.usePositionStream(),p=Sl.useMemo(()=>Math.min(10,m.notional===0?f.margin_ratio(10):l),[l,m]);Sl.useMemo(()=>d?new utils.Decimal(d).mul(100).todp(2,0).toFixed(2):"",[d]);let y=Sl.useCallback(L=>ui.modal.show(uiTransfer.DepositAndWithdrawWithDialogId,{activeTab:L}),[]),b=Sl.useCallback(async()=>y("deposit"),[]),w=Sl.useCallback(async()=>y("withdraw"),[]),x=Sl.useCallback(async()=>ui.modal.show(uiTransfer.TransferDialogId),[]),T=Sl.useCallback(async()=>t.settle().catch(L=>{if(L.code===-1104)return ui.toast.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=>(ui.toast.success(e("settle.settlement.requested")),Promise.resolve(L))),[t,e]),[z,S]=hooks.useLocalStorage("orderly_assets_visible",true),M=Sl.useCallback(()=>{S(L=>!L);},[z]);hooks.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=`${utils.capitalizeString(W)} completed`;ui.toast.success(Ae[W]||Je);}else if(Nt==="FAILED"){let Ae={DEPOSIT:e("transfer.deposit.failed"),WITHDRAW:e("transfer.withdraw.failed")},Je=`${utils.capitalizeString(W)} failed`;ui.toast.error(Ae[W]||Je);}o.emit("wallet:changed",L);}}),hooks.useSettleSubscription({onMessage:L=>{let{status:W}=L;switch(W){case "COMPLETED":ui.toast.success(e("settle.settlement.completed"));break;case "FAILED":ui.toast.error(e("settle.settlement.failed"));break;}}});let K=reactApp.useDataTap(c)??void 0,J=reactApp.useDataTap(p)??void 0,ve=reactApp.useDataTap(d)??void 0,Ie=reactApp.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 jsxRuntime.jsx(Po,{...e})};var At=Sl.createContext({cellHeight:22}),ee=()=>Sl.useContext(At),Ne="orderbook_coin_type",ze="orderbook_mobile_coin_type",Mt=e=>{let[t,o]=Sl.useState("quantity"),[i,r]=Sl.useState("quantity"),n=Sl__default.default.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 jsxRuntime.jsx(At.Provider,{value:n,children:e.children})};var _t=e=>{let{direction:t=1}=e,o=Sl.useMemo(()=>{let i=Math.max(e.width,0);return t===0?{transform:`translateX(${i}%)`}:{transform:`translateX(-${i}%)`}},[e.width]);return jsxRuntime.jsx("div",{className:ui.cn("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]=hooks.useLocalStorage(Ne,g),b=Number.isNaN(u)?0:c/d*100,w=Sl.useMemo(()=>utils.getPrecisionByNumber(r||`${C}`),[r,C]),x=Number.isNaN(c)?"-":l?.toString(),T=Sl.useMemo(()=>{let z=ui.parseNumber(u,{dp:w,padding:true});return n.some(S=>z===ui.parseNumber(S,{dp:w,padding:true}))},[n,u,w]);return jsxRuntime.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:[jsxRuntime.jsxs("div",{className:ui.cn("oui-mr-2 oui-flex oui-basis-7/12 oui-flex-row oui-items-center",o&&"oui-basis-5/12"),children:[jsxRuntime.jsx("div",{className:ui.cn("oui-flex-1 oui-text-left",e.type==="ask"?"oui-text-trade-loss":"oui-text-trade-profit"),children:jsxRuntime.jsx(ui.Text.numeral,{dp:w,children:u})}),jsxRuntime.jsx("div",{className:"oui-flex-1 oui-text-right oui-text-base-contrast-80",children:jsxRuntime.jsx(ui.Text.numeral,{dp:p,children:m})})]}),jsxRuntime.jsxs("div",{className:ui.cn("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?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:ui.cn("oui-flex-1 oui-pr-3 oui-text-right"),children:jsxRuntime.jsx(ui.Text.numeral,{dp:p,className:"oui-z-10",children:c})}),jsxRuntime.jsx("div",{className:ui.cn("oui-flex-1 oui-pr-3 oui-text-right"),children:jsxRuntime.jsx(ui.Text.numeral,{dp:2,className:"oui-z-10",children:x})})]}):jsxRuntime.jsxs("div",{className:ui.cn("oui-flex-1 oui-pr-3 oui-text-right"),children:[y===g&&jsxRuntime.jsx(ui.Text.numeral,{dp:p,className:"oui-z-10",children:c}),y===f&&jsxRuntime.jsx(ui.Text.numeral,{dp:2,className:"oui-z-10",children:x})]}),jsxRuntime.jsx(_t,{width:b,direction:0,className:e.type==="ask"?"oui-bg-trade-loss/10":"oui-bg-trade-profit/10"})]}),T&&jsxRuntime.jsx("div",{className:ui.cn("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&&jsxRuntime.jsx("div",{className:"oui-absolute oui-inset-0 oui-bg-white oui-opacity-[.12]"}),s&&jsxRuntime.jsx("div",{className:ui.cn("oui-absolute oui-inset-x-0",e.type==="ask"&&"oui-top-0",e.type==="bid"&&"oui-bottom-0"),children:jsxRuntime.jsx(ui.Divider,{lineStyle:"dashed",className:ui.cn("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=Sl.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=Sl.useMemo(()=>n?.toString().includes(".")?n.toString().split(".")[1].length:0,[n]),c=Sl.useMemo(()=>t.reduce((u,m)=>Math.max(u,m[1]),0),[t]),[l,d]=Sl.useState(-1);return jsxRuntime.jsx("div",{className:"oui-order-book-list oui-flex oui-flex-col oui-gap-px",children:t.map((u,m)=>jsxRuntime.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}=i18n.useTranslation(),p=a!==-1?r==="ask"?t>=a:t<=a:false,[C,y]=Sl.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=Sl.useMemo(()=>{let x=b(o);return x.avgPrice===0?b(e.findMaxItem()):x},[o,e]);return jsxRuntime.jsxs(ui.TooltipRoot,{open:C,onOpenChange:y,children:[jsxRuntime.jsx(ui.TooltipTrigger,{children:jsxRuntime.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);}})}),jsxRuntime.jsxs(ui.TooltipContent,{className:ui.cn("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:[jsxRuntime.jsx(Bo,{title:`${f("common.avgPrice")}\u2248`,content:w.avgPrice,contentDp:s}),jsxRuntime.jsx(Bo,{title:`${f("trading.orderBook.sum")} (${d})`,content:w.sumQty,contentDp:m}),jsxRuntime.jsx(Bo,{title:`${f("trading.orderBook.sum")} (${u})`,content:w.sumQtyAmount,contentDp:g}),jsxRuntime.jsx(ui.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 jsxRuntime.jsxs("div",{className:"oui-flex oui-flex-row oui-justify-between oui-gap-4",children:[jsxRuntime.jsx("div",{className:"oui-text-base-contrast-36",children:t}),jsxRuntime.jsx("div",{className:"oui-text-right",children:jsxRuntime.jsx(ui.Text.numeral,{dp:i,children:o})})]})};var zr=e=>{let{data:t}=e,o=Sl.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 jsxRuntime.jsx(Ht,{type:"ask",data:t,countQty:o})};var Wr=e=>{let{data:t}=e,o=Sl.useMemo(()=>{let i=Number.NaN,r=t.length-1;for(;Number.isNaN(i)&&r>0;)i=t[r][2],r--;return i},[t]);return jsxRuntime.jsx(Ht,{type:"bid",data:t,countQty:o})};var qr=e=>{let t=Sl.useMemo(()=>e.depths.map(o=>({value:o,label:`${o}`})),[e.depths]);return jsxRuntime.jsx(ui.Box,{pl:3,width:97,className:"oui-py-[10px]",children:jsxRuntime.jsx(ui.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}=i18n.useTranslation(),[n,a]=hooks.useLocalStorage(Ne,o);return jsxRuntime.jsxs(ui.Flex,{justify:"between",itemAlign:"center",className:ui.cn("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,")",jsxRuntime.jsx("div",{className:ui.cn("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}=i18n.useTranslation(),[n,a]=Sl__default.default.useState(false),[s]=hooks.useLocalStorage(Ne,t),c=n?ui.CaretUpIcon:ui.CaretDownIcon;return jsxRuntime.jsxs(ui.Flex,{pl:3,justify:"between",className:"oui-py-[6px]",children:[jsxRuntime.jsxs(ui.Flex,{gap:1,className:ui.cn("oui-basis-7/12",i&&"oui-basis-1/2"),children:[jsxRuntime.jsx(ui.Box,{width:"100%",children:jsxRuntime.jsx(ct,{id:"oui-order-book-header-price",className:"oui-text-base-contrast-36",children:`${r("common.price")}(${o})`})}),jsxRuntime.jsx(ui.Box,{width:"100%",children:jsxRuntime.jsx(ct,{justifyEnd:true,id:"oui-order-book-header-qty",className:"oui-text-base-contrast-36",children:`${r("common.qty")}(${t})`})})]}),jsxRuntime.jsx(ui.Flex,{gap:1,pr:3,className:ui.cn("oui-basis-5/12",i&&"oui-basis-1/2"),children:i?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(ui.Box,{className:"oui-text-base-contrast-36",width:"100%",children:jsxRuntime.jsx(ct,{id:"oui-order-book-header-total-quote",justifyEnd:true,children:`${r("common.total")}(${t})`})}),jsxRuntime.jsx(ui.Box,{className:"oui-text-base-contrast-36",width:"100%",children:jsxRuntime.jsx(ct,{justifyEnd:true,id:"oui-order-book-header-total-base",children:`${r("common.total")}(${o})`})})]}):jsxRuntime.jsx(ui.Box,{width:"100%",children:jsxRuntime.jsx(ui.Popover,{open:n,onOpenChange:a,contentProps:{className:ui.cn("oui-w-28 oui-p-1")},content:jsxRuntime.jsx(ui.Flex,{direction:"column",itemAlign:"start",className:ui.cn("oui-w-full oui-gap-0.5"),children:[t,o].map(l=>jsxRuntime.jsx(Zl,{item:l,base:t,onClick:()=>a(false)},`type-${l}`))}),children:jsxRuntime.jsxs(ui.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:[jsxRuntime.jsx(ct,{justifyEnd:true,id:"oui-order-book-header-total-base",children:`${r("common.total")}(${s})`}),jsxRuntime.jsx(c,{color:"inherit",className:"oui-size-4 oui-text-3xs"})]})})})})]})},ct=e=>{let{children:t,className:o,justifyEnd:i=false}=e;return jsxRuntime.jsx(ui.Flex,{id:e.id,className:ui.cn(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 jsxRuntime.jsxs(ui.Flex,{gap:1,className:ui.cn(l?"oui-text-trade-profit":c?"oui-text-trade-loss":"",r),children:[jsxRuntime.jsx(ui.Text.numeral,{dp:i,intensity:98,children:s}),jsxRuntime.jsxs(ui.Box,{width:19,children:[c&&jsxRuntime.jsx(ui.ArrowDownShortIcon,{size:n,color:"danger",opacity:1}),l&&jsxRuntime.jsx(ui.ArrowUpShortIcon,{size:n,color:"success",opacity:1})]})]})};var zt=e=>{let{isMobile:t}=ui.useScreen();return t?jsxRuntime.jsx(uc,{...e}):jsxRuntime.jsx(cc,{...e})},cc=e=>{let{quote_dp:t,className:o,iconSize:i=18}=e,{t:r}=i18n.useTranslation();return jsxRuntime.jsx(ui.Tooltip,{content:r("trading.orderBook.markPrice.tooltip"),className:"oui-max-w-[270px]",children:jsxRuntime.jsxs(ui.Flex,{gap:1,className:ui.cn("oui-cursor-pointer oui-text-2xs",o),children:[jsxRuntime.jsx(Zr,{size:i}),jsxRuntime.jsx(ui.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]=Sl.useState(false),{t:a}=i18n.useTranslation();return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(ui.Flex,{gap:1,className:ui.cn("oui-cursor-pointer oui-text-2xs",o),onClick:()=>{n(true);},children:[jsxRuntime.jsx(Zr,{size:i}),jsxRuntime.jsx(ui.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})]}),jsxRuntime.jsx(ui.SimpleDialog,{size:"xs",open:r,onOpenChange:n,title:a("common.tips"),actions:{primary:{label:a("common.ok"),onClick:()=>n(false)}},children:jsxRuntime.jsx(ui.Text,{children:a("trading.orderBook.markPrice.tooltip")})})]})},Zr=e=>jsxRuntime.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:jsxRuntime.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 jsxRuntime.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:[jsxRuntime.jsxs("div",{className:ui.cn("oui-basis-7/12 oui-flex oui-flex-row oui-items-center oui-mr-2 oui-justify-between",a&&"oui-basis-5/12"),children:[jsxRuntime.jsx(Et,{markPrice:t,lastPrice:o,quote_dp:n.quote_dp,className:"oui-text-base"}),jsxRuntime.jsx(zt,{markPrice:t,quote_dp:n.quote_dp})]}),jsxRuntime.jsx("div",{className:ui.cn("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:jsxRuntime.jsx(hc,{asks:i,bids:r})})]})},hc=e=>{let{asks:t,bids:o}=e,{t:i}=i18n.useTranslation(),r=Sl.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 utils.Decimal(s).sub(n).div(new utils.Decimal(s).add(n).div(2));return Math.ceil(c.toNumber()*1e6+.1)/1e4},[t,o]);return jsxRuntime.jsx("div",{children:jsxRuntime.jsx(ui.Tooltip,{content:i("trading.orderBook.spreadRatio.tooltip"),className:"oui-max-w-[240px]",children:jsxRuntime.jsx(ui.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=Sl.useRef(null),[c,l]=Sl.useState(false),[d,u]=hooks.useLocalStorage(Ne,r);return Sl.useEffect(()=>{d!==i&&r&&u(r);},[r,i]),Sl.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);}},[]),jsxRuntime.jsx(Mt,{cellHeight:e.cellHeight??20,onItemClick:e.onItemClick,depth:e.activeDepth,showTotal:c,pendingOrders:e.pendingOrders||[],symbolInfo:e.symbolInfo,children:jsxRuntime.jsxs(ui.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:[jsxRuntime.jsx(qr,{depths:e.depths,value:e.activeDepth,onChange:a}),jsxRuntime.jsx(Ur,{quote:i,base:r}),jsxRuntime.jsx(zr,{data:[...e.asks]}),jsxRuntime.jsx(tn,{lastPrice:t,markPrice:o,asks:[...e.asks],bids:[...e.bids],symbolInfo:e.symbolInfo}),jsxRuntime.jsx(Wr,{data:[...e.bids]}),n&&jsxRuntime.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:jsxRuntime.jsx(ui.Spinner,{})})]})})};var Mo=e=>{let t=e.data.est_funding_rate,o=e.data.countDown,{t:i}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Flex,{direction:"column",itemAlign:"start",pb:2,children:[jsxRuntime.jsx(ui.Text,{intensity:36,size:"2xs",children:i("trading.fundingRate.predFundingRate")}),t===null?"--":jsxRuntime.jsxs("div",{className:"orderly-flex orderly-gap-1 oui-text-2xs oui-text-base-contrast-36",children:[jsxRuntime.jsx(ui.Text.numeral,{coloring:true,suffix:"%",dp:4,children:t??"--"}),jsxRuntime.jsx("span",{children:" in"}),jsxRuntime.jsx("span",{children:" "+o})]})]})};var _o=e=>({data:hooks.useFundingRate(e)});var Ho=e=>{let t=_o(e.symbol);return jsxRuntime.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}=Sl.useContext(At),{base_dp:m,quote_dp:g,base:f,quote:p}=u,[C,y]=hooks.useLocalStorage(ze,["total",f].join("_")),[b,w]=C?.split("_")??[],x=Number.isNaN(t)?"-":a?.toString(),T=Sl.useMemo(()=>utils.getPrecisionByNumber(d||`${g}`),[d,g]);return jsxRuntime.jsxs(ui.Box,{className:ui.cn("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:[jsxRuntime.jsxs(ui.Flex,{itemAlign:"center",justify:"between",children:[jsxRuntime.jsx(ui.Text.numeral,{color:n==="bid"?"buy":"sell",dp:T,children:r}),b==="qty"&&jsxRuntime.jsx(ui.Text.numeral,{className:"oui-text-base-contrast-80",dp:m,children:Number.isNaN(i)?"-":i}),b==="total"&&w===f&&jsxRuntime.jsx(ui.Text.numeral,{className:"oui-text-base-contrast-80",dp:m,children:t}),b==="total"&&w===p&&jsxRuntime.jsx(ui.Text.numeral,{className:"oui-text-base-contrast-80",dp:2,children:x})]}),Number.isNaN(s)?null:jsxRuntime.jsx(_t,{width:s,className:ui.cn(n==="ask"?"oui-bg-trade-loss/20":"oui-bg-trade-profit/20")})]})};var qt=e=>{let{data:t}=e,{mode:o}=ee();return jsxRuntime.jsx(ui.Box,{className:"oui-order-book-list oui-flex oui-w-full oui-flex-col oui-gap-px",children:t.map((i,r)=>jsxRuntime.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=Sl.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 jsxRuntime.jsx(qt,{type:"ask",data:t,countQty:o})};var mn=e=>{let{data:t}=e,o=Sl.useMemo(()=>{let i=Number.NaN,r=t.length-1;for(;Number.isNaN(i)&&r>0;)i=t[r][2],r--;return i},[t]);return jsxRuntime.jsx(qt,{type:"bid",data:t,countQty:o})};var fn=e=>{let t=Sl.useMemo(()=>e.depth.map(o=>({value:o,label:`${o}`})),[e.depth]);return jsxRuntime.jsx(ui.Box,{id:"oui-order-book-depth",className:"oui-w-full oui-pt-2",children:jsxRuntime.jsx(ui.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}=i18n.useTranslation(),{base:o,quote:i}=e,[r,n]=hooks.useLocalStorage(ze,["total",o].join("_")),a=Sl.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 jsxRuntime.jsxs(ui.Flex,{justify:"between",width:"100%",className:"oui-py-[5px] oui-text-2xs oui-text-base-contrast-36",children:[jsxRuntime.jsxs(ui.Flex,{direction:"column",itemAlign:"start",id:"oui-order-book-header-price",children:[jsxRuntime.jsx(ui.Text,{children:t("common.price")}),jsxRuntime.jsx(ui.Text,{children:`(${i})`})]}),jsxRuntime.jsx(ui.Picker,{size:"sm",value:r,onValueChange:n,options:a,valueRenderer:(s,{open:c,data:l})=>jsxRuntime.jsxs(ui.Flex,{justify:"between",itemAlign:"center",gap:1,children:[Array.isArray(l)&&jsxRuntime.jsxs(ui.Flex,{direction:"column",itemAlign:"end",children:[l[0]&&jsxRuntime.jsx(ui.Text,{children:l[0]}),l[1]&&jsxRuntime.jsxs(ui.Text,{children:["(",l[1],")"]})]}),c?jsxRuntime.jsx(ui.CaretUpIcon,{size:14,color:"inherit"}):jsxRuntime.jsx(ui.CaretDownIcon,{size:14,color:"inherit"})]})})]})};var bn=e=>{let{symbolInfo:t}=ee(),{quote_dp:o}=t;return jsxRuntime.jsxs(ui.Flex,{id:"oui-order-book-mark-price",className:"oui-py-[6px]",width:"100%",justify:"between",children:[jsxRuntime.jsx(Et,{markPrice:e.markPrice,lastPrice:e.lastPrice,quote_dp:o,className:"oui-text-sm",iconSize:14}),jsxRuntime.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]=hooks.useLocalStorage(ze,["total",r].join("_"));return Sl.useEffect(()=>{let[d]=c?.split("_")??[];!c.includes(i)&&r&&l([d,r].join("_"));},[i,r,c]),jsxRuntime.jsx(Mt,{cellHeight:e.cellHeight??20,onItemClick:e.onItemClick,depth:e.activeDepth,pendingOrders:[],showTotal:false,symbolInfo:e.symbolInfo,children:jsxRuntime.jsxs(ui.Flex,{direction:"column",p:2,id:"oui-orderbook-mobile",className:ui.cn("oui-relative oui-size-full",e.className),justify:"start",itemAlign:"start",children:[jsxRuntime.jsx(Ho,{symbol:s}),jsxRuntime.jsx(pn,{quote:i,base:r}),jsxRuntime.jsx(dn,{data:e.asks}),jsxRuntime.jsx(bn,{lastPrice:t,markPrice:o}),jsxRuntime.jsx(mn,{data:e.bids}),jsxRuntime.jsx(fn,{depth:e.depths||[],value:e.activeDepth,onChange:a}),n&&jsxRuntime.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:jsxRuntime.jsx(ui.Spinner,{})})]})})};var zo=e=>jsxRuntime.jsx(ui.Box,{className:"oui-font-semibold",width:"100%",height:"100%",children:e.isMobile?jsxRuntime.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}):jsxRuntime.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=hooks.useSymbolsInfo()[e.symbol],[r,n]=Sl.useState(gt),[a,s]=Sl.useState(10),{base:c,quote:l,quote_dp:d}=rt(i),[u,{onDepthChange:m,isLoading:g,onItemClick:f,depth:p,allDepths:C}]=hooks.useOrderbookStream(t,void 0,{level:a}),y=lu(t);Sl.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=Sl.useMemo(()=>typeof p>"u"||typeof d>"u"?void 0:utils.removeTrailingZeros(p),[p,d]),w=Sl.useMemo(()=>C?.map(T=>utils.removeTrailingZeros(T))||[],[C,d]),{isMobile:x}=ui.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]=hooks.useOrderStream({status:types.OrderStatus.INCOMPLETE,symbol:e});return Sl.useMemo(()=>t?.filter(r=>r.symbol===e).reduce((r,n)=>{let a=n.price||n.trigger_price||0;return [...r,a]},