@liberfi.io/ui-perpetuals 0.1.97 → 0.1.98
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +7 -7
package/dist/index.d.mts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime'),reactQuery=require('@tanstack/react-query'),ui=require('@liberfi.io/ui'),reactHookForm=require('react-hook-form');typeof window<"u"&&(window.__LIBERFI_VERSION__=window.__LIBERFI_VERSION__||{},window.__LIBERFI_VERSION__["@liberfi.io/ui-perpetuals"]="0.1.97");var er="0.1.97";var de=class{ws=null;wsEndpoint;subscriptions=new Map;reconnectAttempts=0;maxReconnectAttempts=10;reconnectDelay=1e3;heartbeatInterval=null;messageQueue=[];isConnected=false;pingInterval=3e4;reconnectTimeout=null;isReconnecting=false;constructor(e){this.wsEndpoint=e;}async connect(){return new Promise((e,r)=>{try{this.ws&&this.ws.close(),this.ws=new WebSocket(this.wsEndpoint),this.ws.onopen=()=>{console.log("[WebSocket] Connected to Hyperliquid"),this.isConnected=!0,this.reconnectAttempts=0,this.isReconnecting=!1,this.startHeartbeat(),this.flushMessageQueue(),e();},this.ws.onmessage=s=>{this.handleMessage(s.data);},this.ws.onerror=s=>{console.error("[WebSocket] Error:",s),this.isConnected=!1,this.isReconnecting||r(new Error("WebSocket connection failed"));},this.ws.onclose=s=>{console.log(`[WebSocket] Closed: ${s.code} - ${s.reason||"No reason provided"}`),this.isConnected=!1,this.stopHeartbeat(),s.code!==1e3&&this.attemptReconnect();};}catch(s){r(s);}})}disconnect(){this.stopHeartbeat(),this.subscriptions.clear(),this.reconnectTimeout!==null&&(clearTimeout(this.reconnectTimeout),this.reconnectTimeout=null),this.ws&&(this.ws.close(1e3,"Normal closure"),this.ws=null),this.isConnected=false,this.isReconnecting=false,this.reconnectAttempts=0;}attemptReconnect(){if(this.isReconnecting)return;if(this.reconnectAttempts>=this.maxReconnectAttempts){console.error("[WebSocket] Max reconnection attempts reached");return}this.isReconnecting=true,this.reconnectAttempts++;let e=Math.min(this.reconnectDelay*Math.pow(2,this.reconnectAttempts-1),3e4);console.log(`[WebSocket] Reconnecting in ${e}ms (attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts})`),this.reconnectTimeout=window.setTimeout(()=>{this.connect().then(()=>{this.resubscribeAll();}).catch(r=>{console.error("[WebSocket] Reconnection failed:",r),this.isReconnecting=false;});},e);}startHeartbeat(){this.heartbeatInterval=window.setInterval(()=>{this.isConnected&&this.ws&&this.ws.readyState===WebSocket.OPEN&&this.send({method:"ping"});},this.pingInterval);}stopHeartbeat(){this.heartbeatInterval!==null&&(clearInterval(this.heartbeatInterval),this.heartbeatInterval=null);}send(e){this.isConnected&&this.ws&&this.ws.readyState===WebSocket.OPEN?this.ws.send(JSON.stringify(e)):this.messageQueue.push(e);}flushMessageQueue(){for(;this.messageQueue.length>0;){let e=this.messageQueue.shift();e&&this.send(e);}}resubscribeAll(){this.subscriptions.forEach(e=>{this.sendSubscription(e.type,e.param);});}handleMessage(e){try{let r=JSON.parse(e);r.channel?this.handleChannelMessage(r):r.method;}catch(r){console.error("[WebSocket] Failed to parse message:",r,e);}}handleChannelMessage(e){let r=e.channel;this.subscriptions.forEach((s,n)=>{if(this.isChannelMatch(r,s.type,s.param))try{let o=this.transformData(s.type,e.data,s.param);s.callback(o);}catch(o){console.error(`[WebSocket] Error in subscription callback (${n}):`,o);}});}isChannelMatch(e,r,s){return r==="ticker"?e==="allMids":r==="trades"?e==="trades":r==="orderBook"?e==="l2Book":r==="candle"?e==="candle":r==="userFills"?e==="userFills":r==="userEvents"?e==="userEvents":false}transformData(e,r,s){return e==="ticker"?this.transformTickerData(r):e==="trades"?this.transformTradesData(r,s):e==="orderBook"?this.transformOrderBookData(r,s):e==="candle"?this.transformCandleData(r,s):e==="userFills"?this.transformUserFillsData(r):e==="userEvents"?this.transformUserEventsData(r):r}transformTickerData(e){let r=e.mids||{};return Object.entries(r).map(([s,n])=>({symbol:`${s}-USDC`,price:parseFloat(n),timestamp:Date.now()}))}transformTradesData(e,r){return Array.isArray(e)?e.map(s=>({symbol:r,side:s.side==="B"?"buy":"sell",price:parseFloat(s.px),quantity:parseFloat(s.sz),timestamp:s.time,tradeId:s.tid})):[]}transformOrderBookData(e,r){let[s,n]=e.levels||[[],[]];return {symbol:r,bids:s.map(o=>({price:parseFloat(o.px),quantity:parseFloat(o.sz),count:o.n})),asks:n.map(o=>({price:parseFloat(o.px),quantity:parseFloat(o.sz),count:o.n})),timestamp:e.time||Date.now()}}transformCandleData(e,r){let[s]=r.split(":");return {symbol:s,open:parseFloat(e.o),high:parseFloat(e.h),low:parseFloat(e.l),close:parseFloat(e.c),volume:parseFloat(e.v),timestamp:e.t,closeTimestamp:e.T}}transformUserFillsData(e){return Array.isArray(e)?e.map(r=>({tradeId:r.tid?.toString(),orderId:r.oid?.toString(),symbol:`${r.coin}-USDC`,side:r.dir?.includes("Long")?"long":"short",price:parseFloat(r.px),quantity:parseFloat(r.sz),fee:parseFloat(r.fee||"0"),feeCurrency:r.feeToken||"USDC",isMaker:r.side==="M",timestamp:r.time})):[]}transformUserEventsData(e){return e}sendSubscription(e,r){let s;if(e==="ticker")s={method:"subscribe",subscription:{type:"allMids"}};else if(e==="trades")s={method:"subscribe",subscription:{type:"trades",coin:r.split("-")[0]}};else if(e==="orderBook")s={method:"subscribe",subscription:{type:"l2Book",coin:r.split("-")[0]}};else if(e==="candle"){let[n,o]=r.split(":");s={method:"subscribe",subscription:{type:"candle",coin:n.split("-")[0],interval:o}};}else e==="userFills"?s={method:"subscribe",subscription:{type:"userFills",user:r}}:e==="userEvents"&&(s={method:"subscribe",subscription:{type:"userEvents",user:r}});s&&this.send(s);}sendUnsubscription(e,r){let s;if(e==="ticker")s={method:"unsubscribe",subscription:{type:"allMids"}};else if(e==="trades")s={method:"unsubscribe",subscription:{type:"trades",coin:r.split("-")[0]}};else if(e==="orderBook")s={method:"unsubscribe",subscription:{type:"l2Book",coin:r.split("-")[0]}};else if(e==="candle"){let[n,o]=r.split(":");s={method:"unsubscribe",subscription:{type:"candle",coin:n.split("-")[0],interval:o}};}else e==="userFills"?s={method:"unsubscribe",subscription:{type:"userFills",user:r}}:e==="userEvents"&&(s={method:"unsubscribe",subscription:{type:"userEvents",user:r}});s&&this.send(s);}subscribe(e,r,s){let n=`${e}:${r}`;return this.subscriptions.set(n,{type:e,param:r,callback:s}),this.sendSubscription(e,r),n}unsubscribe(e){let r=this.subscriptions.get(e);r&&(this.sendUnsubscription(r.type,r.param),this.subscriptions.delete(e));}isConnectedNow(){return this.isConnected}};var at={testnet:{api:"https://api.hyperliquid-testnet.xyz",ws:"wss://api.hyperliquid-testnet.xyz/ws"},mainnet:{api:"https://api.hyperliquid.xyz",ws:"wss://api.hyperliquid.xyz/ws"}},xe=class{apiEndpoint;_wsEndpoint;timeout;environment;wsManager=null;constructor(e={}){this.environment=e.environment||"testnet",this.apiEndpoint=e.apiEndpoint||at[this.environment].api,this._wsEndpoint=e.wsEndpoint||at[this.environment].ws,this.timeout=e.timeout||3e4;}async request(e,r){let s=`${this.apiEndpoint}${e}`;try{let n=new AbortController,o=setTimeout(()=>n.abort(),this.timeout),i=await fetch(s,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(r),signal:n.signal});if(clearTimeout(o),!i.ok)throw new H(`HTTP ${i.status}: ${i.statusText}`,i.status,await i.text());return await i.json()}catch(n){throw n.name==="AbortError"?new H(`Request timeout after ${this.timeout}ms`,408,""):n instanceof H?n:new H(`Network error: ${n.message}`,0,"")}}symbolToCoin(e){return e.split("-")[0]}parseInterval(e){return {"1m":6e4,"5m":3e5,"15m":9e5,"30m":18e5,"1h":36e5,"4h":144e5,"1d":864e5,"1w":6048e5}[e]}async getSupportedCoins(){let[e]=await this.request("/info",{type:"metaAndAssetCtxs"});return e.universe.map(r=>`${r.name}-USDC`)}async getMarket(e){let r=await this.getMarkets([e]);return r.length>0?r[0]:null}async getMarkets(e){let[r,s]=await this.request("/info",{type:"metaAndAssetCtxs"}),n=r.universe.map((o,i)=>{let a=s[i],l=`${o.name}-USDC`,c=parseFloat(a.midPx||a.markPx||"0"),d=a.prevDayPx?parseFloat(a.prevDayPx):c,f=d>0?(c-d)/d*100:0;return {symbol:l,price:c,change24h:f,volume24h:parseFloat(a.dayNtlVlm||"0"),fundingRate:parseFloat(a.funding||"0"),openInterest:parseFloat(a.openInterest||"0"),markPrice:parseFloat(a.markPx||"0"),indexPrice:parseFloat(a.oraclePx||a.midPx||"0")}});if(e&&e.length>0){let o=new Set(e);return n.filter(i=>o.has(i.symbol))}return n}async getKlines(e,r,s=100){let n=this.symbolToCoin(e),o=this.parseInterval(r),i=Date.now(),a=i-o*s;return (await this.request("/info",{type:"candleSnapshot",req:{coin:n,interval:r,startTime:a,endTime:i}})).map(c=>({symbol:e,open:parseFloat(c.o),high:parseFloat(c.h),low:parseFloat(c.l),close:parseFloat(c.c),volume:parseFloat(c.v),timestamp:c.t,closeTimestamp:c.T}))}async getOrderBook(e,r=10){let s=this.symbolToCoin(e),n=await this.request("/info",{type:"l2Book",coin:s}),[o,i]=n.levels;return {symbol:e,bids:o.slice(0,r).map(a=>({price:parseFloat(a.px),quantity:parseFloat(a.sz),count:a.n})),asks:i.slice(0,r).map(a=>({price:parseFloat(a.px),quantity:parseFloat(a.sz),count:a.n})),timestamp:n.time}}async getRecentTrades(e,r=50){let s=this.symbolToCoin(e);return (await this.request("/info",{type:"recentTrades",coin:s})).slice(0,r).map(o=>({symbol:e,side:o.side==="B"?"buy":"sell",price:parseFloat(o.px),quantity:parseFloat(o.sz),timestamp:o.time,tradeId:o.tid}))}async placeOrder(e){throw new Error("placeOrder() requires wallet private key configuration for EIP-712 signature. Please configure authentication before calling this method. See: https://hyperliquid.gitbook.io/hyperliquid-docs/for-developers/api/exchange-endpoint")}async cancelOrder(e){throw new Error("cancelOrder() requires wallet private key configuration for EIP-712 signature. Please configure authentication before calling this method. See: https://hyperliquid.gitbook.io/hyperliquid-docs/for-developers/api/exchange-endpoint")}async getPositions(e={}){if(!e.userAddress)throw new Error("Hyperliquid requires userAddress parameter. Example: { userAddress: '0x...' }");let r=await this.request("/info",{type:"clearinghouseState",user:e.userAddress}),s=r.assetPositions.map(o=>{let i=o.position,a=`${i.coin}-USDC`,l=parseFloat(i.szi);if(l===0)return null;let c=parseFloat(i.entryPx),d=parseFloat(i.unrealizedPnl),f=parseFloat(i.positionValue);return {symbol:a,side:l>0?"long":"short",quantity:Math.abs(l),entryPrice:c,markPrice:c,unrealizedPnl:d,unrealizedPnlPercent:parseFloat(i.returnOnEquity)*100,leverage:i.leverage.value,liquidationPrice:i.liquidationPx?parseFloat(i.liquidationPx):void 0,margin:parseFloat(i.marginUsed),notionalValue:Math.abs(f)}}).filter(Boolean),n=e.symbol?s.filter(o=>o.symbol===e.symbol):s;return {positions:n,totalEquity:parseFloat(r.marginSummary.accountValue),availableBalance:parseFloat(r.marginSummary.accountValue)-parseFloat(r.marginSummary.totalMarginUsed),totalUnrealizedPnl:n.reduce((o,i)=>o+i.unrealizedPnl,0),raw:r}}async getOpenOrders(e={}){if(!e.userAddress)throw new Error("Hyperliquid requires userAddress parameter. Example: { userAddress: '0x...' }");let r=await this.request("/info",{type:"openOrders",user:e.userAddress}),s=r.map(o=>{let i=`${o.coin}-USDC`,a=parseFloat(o.origSz),l=parseFloat(o.sz),c=a-l;return {orderId:o.oid.toString(),clientOrderId:o.cloid,symbol:i,side:o.side?"long":"short",orderType:"limit",price:parseFloat(o.limitPx),quantity:a,filledQuantity:c,remainingQuantity:l,status:c>0&&l>0?"partially_filled":"pending",timestamp:o.timestamp,updateTimestamp:o.timestamp}}),n=e.symbol?s.filter(o=>o.symbol===e.symbol):s;return {orders:n,totalCount:n.length,raw:r}}async getTrades(e={}){if(!e.userAddress)throw new Error("Hyperliquid requires userAddress parameter. Example: { userAddress: '0x...' }");let r=await this.request("/info",{type:"userFills",user:e.userAddress}),s=r.map(n=>{let o=`${n.coin}-USDC`,i=n.dir.includes("Long");return {tradeId:n.tid.toString(),orderId:n.oid.toString(),symbol:o,side:i?"long":"short",price:parseFloat(n.px),quantity:parseFloat(n.sz),fee:parseFloat(n.fee||"0"),feeCurrency:n.feeToken||"USDC",isMaker:n.side==="M",timestamp:n.time}});return e.symbol&&(s=s.filter(n=>n.symbol===e.symbol)),e.startTime&&(s=s.filter(n=>n.timestamp>=e.startTime)),e.endTime&&(s=s.filter(n=>n.timestamp<=e.endTime)),e.limit&&(s=s.slice(0,e.limit)),{trades:s,totalCount:s.length,raw:r}}async connectWebSocket(){if(this.wsManager||(this.wsManager=new de(this._wsEndpoint)),this.wsManager.isConnectedNow()){console.log("[WebSocket] Already connected");return}await this.wsManager.connect();}disconnectWebSocket(){this.wsManager&&(this.wsManager.disconnect(),this.wsManager=null);}subscribeMarketData(e,r,s){if(!this.wsManager)throw new Error("WebSocket not connected. Call connectWebSocket() first.");return this.wsManager.subscribe(e,r,s)}subscribeCandles(e,r,s){if(!this.wsManager)throw new Error("WebSocket not connected. Call connectWebSocket() first.");let n=`${e}:${r}`;return this.wsManager.subscribe("candle",n,s)}subscribeUserData(e,r,s){if(!this.wsManager)throw new Error("WebSocket not connected. Call connectWebSocket() first.");let n=e==="fills"?"userFills":"userEvents";return this.wsManager.subscribe(n,r,s)}unsubscribe(e){this.wsManager&&this.wsManager.unsubscribe(e);}},H=class extends Error{constructor(r,s,n){super(r);this.statusCode=s;this.responseBody=n;this.name="HyperliquidApiError";}};var ne=react.createContext({});function rr({client:t,children:e}){return jsxRuntime.jsx(ne.Provider,{value:{client:t},children:e})}function P(){let t=react.useContext(ne);if(!t||!t.client)throw new Error("usePerpetualsClient must be used within a PerpetualsProvider");return t}function lt(){return ["perps","coins"]}async function ct(t){return await t.getSupportedCoins()}function he(t={}){let{client:e}=P();return reactQuery.useQuery({queryKey:lt(),queryFn:async()=>ct(e),staleTime:300*1e3,...t})}function dt(t){return ["perps","market",t.symbol]}async function ut(t,{symbol:e}){return await t.getMarket(e)}function oe(t,e={}){let{client:r}=P();return reactQuery.useQuery({queryKey:dt(t),queryFn:async()=>ut(r,t),staleTime:10*1e3,...e})}function pt(t={}){return ["perps","markets",JSON.stringify((t.symbols??[]).sort())]}async function mt(t,{symbols:e}={}){return await t.getMarkets(e)}function Pe(t={},e={}){let{client:r}=P();return reactQuery.useQuery({queryKey:pt(t),queryFn:async()=>mt(r,t),staleTime:10*1e3,...e})}function ft(t){return ["perps","klines",t.symbol,t.interval,String(t.limit??100)]}async function yt(t,{symbol:e,interval:r,limit:s}){return await t.getKlines(e,r,s)}function cr(t,e={}){let{client:r}=P();return reactQuery.useQuery({queryKey:ft(t),queryFn:async()=>yt(r,t),staleTime:30*1e3,...e})}function gt(t){return ["perps","orderBook",t.symbol,String(t.maxLevel??20)]}async function bt(t,{symbol:e,maxLevel:r}){return await t.getOrderBook(e,r)}function ve(t,e={}){let{client:r}=P();return reactQuery.useQuery({queryKey:gt(t),queryFn:async()=>bt(r,t),staleTime:5*1e3,...e})}function xt(t){return ["perps","recentTrades",t.symbol,String(t.limit??50)]}async function ht(t,{symbol:e,limit:r}){return await t.getRecentTrades(e,r)}function Se(t,e={}){let{client:r}=P();return reactQuery.useQuery({queryKey:xt(t),queryFn:async()=>ht(r,t),staleTime:5*1e3,...e})}function Pt(t){return ["perps","positions",t.userAddress??"",t.symbol??""]}async function vt(t,e){return await t.getPositions(e)}function ke(t,e={}){let{client:r}=P(),{enabled:s=true,...n}=t;return reactQuery.useQuery({queryKey:Pt(n),queryFn:async()=>vt(r,n),enabled:s&&!!n.userAddress,staleTime:10*1e3,...e})}function St(t){return ["perps","orders",t.userAddress??"",t.symbol??""]}async function kt(t,e){return await t.getOpenOrders(e)}function Ce(t,e={}){let{client:r}=P(),{enabled:s=true,...n}=t;return reactQuery.useQuery({queryKey:St(n),queryFn:async()=>kt(r,n),enabled:s&&!!n.userAddress,staleTime:5*1e3,...e})}function Ct(t){return ["perps","trades",t.userAddress??"",t.symbol??"",String(t.limit??50),String(t.startTime??""),String(t.endTime??"")]}async function Nt(t,e){return await t.getTrades(e)}function Ne(t,e={}){let{client:r}=P(),{enabled:s=true,...n}=t;return reactQuery.useQuery({queryKey:Ct(n),queryFn:async()=>Nt(r,n),enabled:s&&!!n.userAddress,staleTime:30*1e3,...e})}async function wt(t,e){return await t.placeOrder(e)}function ie(t={}){let{client:e}=P();return reactQuery.useMutation({mutationFn:async r=>wt(e,r),...t})}async function Tt(t,e){return await t.cancelOrder(e)}function we(t={}){let{client:e}=P();return reactQuery.useMutation({mutationFn:async r=>Tt(e,r),...t})}function K(t){let{type:e,symbol:r,enabled:s=true}=t,{client:n}=P(),[o,i]=react.useState(null),[a,l]=react.useState(false),[c,d]=react.useState(null),f=react.useCallback(m=>{i(m);},[]);return react.useEffect(()=>{if(!s)return;let m=null,p=true;return (async()=>{try{if(await n.connectWebSocket(),!p)return;l(!0),d(null),m=n.subscribeMarketData(e,r,f);}catch(y){p&&(d(y instanceof Error?y:new Error("Connection failed")),l(false));}})(),()=>{if(p=false,m)try{n.unsubscribe(m);}catch(y){console.error("Failed to unsubscribe:",y);}n.disconnectWebSocket(),l(false),i(null);}},[n,e,r,s,f]),{data:o,isConnected:a,error:c}}function vr(t){let{symbol:e,interval:r,enabled:s=true}=t,{client:n}=P(),[o,i]=react.useState(null),[a,l]=react.useState(false),[c,d]=react.useState(null),f=react.useCallback(m=>{i(m);},[]);return react.useEffect(()=>{if(!s)return;let m=null,p=true;return (async()=>{try{if(await n.connectWebSocket(),!p)return;l(!0),d(null),m=n.subscribeCandles(e,r,f);}catch(y){p&&(d(y instanceof Error?y:new Error("Connection failed")),l(false));}})(),()=>{if(p=false,m)try{n.unsubscribe(m);}catch(y){console.error("Failed to unsubscribe:",y);}n.disconnectWebSocket(),l(false),i(null);}},[n,e,r,s,f]),{data:o,isConnected:a,error:c}}function ae(t){let{type:e,userAddress:r,enabled:s=true}=t,{client:n}=P(),[o,i]=react.useState(null),[a,l]=react.useState(false),[c,d]=react.useState(null),f=react.useCallback(m=>{i(m);},[]);return react.useEffect(()=>{if(!s||!r)return;let m=null,p=true;return (async()=>{try{if(await n.connectWebSocket(),!p)return;l(!0),d(null),m=n.subscribeUserData(e,r,f);}catch(y){p&&(d(y instanceof Error?y:new Error("Connection failed")),l(false));}})(),()=>{if(p=false,m)try{n.unsubscribe(m);}catch(y){console.error("Failed to unsubscribe:",y);}n.disconnectWebSocket(),l(false),i(null);}},[n,e,r,s,f]),{data:o,isConnected:a,error:c}}function Me(){return jsxRuntime.jsx("div",{className:"flex items-center justify-center px-4 py-3 bg-neutral-900 border-b border-neutral-800",children:jsxRuntime.jsx("span",{className:"text-neutral-400 text-sm",children:"Market data not available"})})}function Fe(){return jsxRuntime.jsxs("div",{className:"flex items-center gap-6 px-4 py-3 bg-neutral-900 border-b border-neutral-800",children:[jsxRuntime.jsxs("div",{className:"flex items-center gap-3",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-6 w-20 rounded"}),jsxRuntime.jsxs("div",{className:"flex items-center gap-2",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-8 w-28 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"})]})]}),jsxRuntime.jsx("div",{className:"h-8 w-px bg-neutral-800"}),jsxRuntime.jsxs("div",{className:"flex items-center gap-6 text-sm",children:[jsxRuntime.jsxs("div",{className:"flex flex-col gap-1",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-3 w-20 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"})]}),jsxRuntime.jsxs("div",{className:"flex flex-col gap-1",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-3 w-20 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"})]}),jsxRuntime.jsxs("div",{className:"flex flex-col gap-1",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-3 w-24 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"})]}),jsxRuntime.jsxs("div",{className:"flex flex-col gap-1",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-3 w-32 rounded"}),jsxRuntime.jsxs("div",{className:"flex items-center gap-2",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-20 rounded"})]})]})]})]})}function Re(t){let[e,r]=react.useState(),[s,n]=react.useState(0),{data:o,isPending:i}=oe({symbol:t}),{data:a,isConnected:l}=K({type:"ticker",symbol:t,enabled:!!o});return react.useEffect(()=>{o&&r(o);},[o]),react.useEffect(()=>{if(!a)return;let c=Cr(a,t);c&&r(d=>Nr(d??o??void 0,c,t));},[a,o,t]),react.useEffect(()=>{let c=()=>{let f=Date.now(),m=480*60*1e3,p=f%m,b=m-p;return Math.floor(b/1e3)};n(c());let d=setInterval(()=>{n(c());},1e3);return ()=>clearInterval(d)},[]),{marketData:e,isLoading:i,fundingCountdown:s}}function Cr(t,e){if(Array.isArray(t)){let r=t.find(s=>!s||typeof s!="object"?false:s.symbol===e);return r&&typeof r=="object"?r:null}return t&&typeof t=="object"?t:null}function j(t,e){return typeof t=="number"&&Number.isFinite(t)?t:e}function Nr(t,e,r){return {symbol:e.symbol??t?.symbol??r,price:j(e.price,t?.price??0),change24h:j(e.change24h,t?.change24h??0),volume24h:j(e.volume24h,t?.volume24h??0),fundingRate:j(e.fundingRate,t?.fundingRate??0),openInterest:j(e.openInterest,t?.openInterest??0),markPrice:j(e.markPrice,t?.markPrice??0),indexPrice:typeof e.indexPrice=="number"&&Number.isFinite(e.indexPrice)?e.indexPrice:t?.indexPrice,high24h:typeof e.high24h=="number"&&Number.isFinite(e.high24h)?e.high24h:t?.high24h,low24h:typeof e.low24h=="number"&&Number.isFinite(e.low24h)?e.low24h:t?.low24h}}function wr(t){let e=Math.floor(t/3600),r=Math.floor(t%3600/60),s=t%60;return `${String(e).padStart(2,"0")}:${String(r).padStart(2,"0")}:${String(s).padStart(2,"0")}`}function Ft(t,e=2){return typeof t!="number"||!Number.isFinite(t)?"-":t>=1e9?`$${(t/1e9).toFixed(e)}B`:t>=1e6?`$${(t/1e6).toFixed(e)}M`:t>=1e3?`$${(t/1e3).toFixed(e)}K`:`$${t.toFixed(e)}`}function It(t){return typeof t!="number"||!Number.isFinite(t)?"-":t>=1e3?t.toLocaleString("en-US",{minimumFractionDigits:0,maximumFractionDigits:0}):t>=1?t.toLocaleString("en-US",{minimumFractionDigits:2,maximumFractionDigits:4}):t.toFixed(6)}function De({marketData:t,fundingCountdown:e}){let{symbol:r,price:s,change24h:n,indexPrice:o,volume24h:i,openInterest:a,fundingRate:l}=t,c=typeof n=="number"&&Number.isFinite(n)?n:0,d=typeof l=="number"&&Number.isFinite(l)?l:0,f=c>=0,m=c.toFixed(2);return jsxRuntime.jsxs("div",{className:"flex items-center gap-4 px-4",style:{minHeight:64,maxHeight:64},children:[jsxRuntime.jsxs("div",{className:"flex items-baseline gap-2",children:[jsxRuntime.jsx("span",{className:"text-white",style:{fontSize:18,fontWeight:500,lineHeight:"23px"},children:It(s)}),jsxRuntime.jsxs("span",{className:ui.cn(f?"text-green-500":"text-red-500"),style:{fontSize:12},children:[f?"+":"",m,"%"]})]}),jsxRuntime.jsxs("div",{className:"flex items-center gap-4",style:{fontSize:13},children:[jsxRuntime.jsxs("div",{className:"flex flex-col",children:[jsxRuntime.jsx("span",{style:{fontSize:12,color:"#c8c9d1"},children:"Oracle Price"}),jsxRuntime.jsx("span",{className:"text-white",style:{fontSize:13,fontWeight:400},children:o?It(o):"-"})]}),jsxRuntime.jsxs("div",{className:"flex flex-col",children:[jsxRuntime.jsx("span",{style:{fontSize:12,color:"#c8c9d1"},children:"24h Volume"}),jsxRuntime.jsx("span",{className:"text-white",style:{fontSize:13,fontWeight:400},children:Ft(i)})]}),jsxRuntime.jsxs("div",{className:"flex flex-col",children:[jsxRuntime.jsx("span",{style:{fontSize:12,color:"#c8c9d1"},children:"Open Interest"}),jsxRuntime.jsx("span",{className:"text-white",style:{fontSize:13,fontWeight:400},children:Ft(a*(t.markPrice||s))})]}),jsxRuntime.jsxs("div",{className:"flex flex-col",children:[jsxRuntime.jsx("span",{style:{fontSize:12,color:"#c8c9d1"},children:"Funding / Countdown"}),jsxRuntime.jsxs("div",{className:"flex items-center gap-2",children:[jsxRuntime.jsxs("span",{className:ui.cn(d>=0?"text-green-500":"text-red-500"),style:{fontSize:13},children:[(d*100).toFixed(5),"%"]}),jsxRuntime.jsx("span",{style:{fontSize:13,color:"#c8c9d1"},children:wr(e)})]})]})]})]})}function Tr({symbol:t}){let{marketData:e,isLoading:r,fundingCountdown:s}=Re(t);return r?jsxRuntime.jsx(Fe,{}):e?jsxRuntime.jsx(De,{marketData:e,fundingCountdown:s}):jsxRuntime.jsx(Me,{})}function ze({onSelectCoin:t}={}){let[e,r]=react.useState(""),[s,n]=react.useState([]),{data:o,isPending:i}=he(),{data:a,isPending:l}=Pe({symbols:o},{enabled:!!o&&o.length>0});react.useEffect(()=>{a&&n(a);},[a]);let c=react.useMemo(()=>{if(!e.trim())return s;let f=e.toLowerCase().trim();return s.filter(m=>m.symbol.toLowerCase().includes(f))},[s,e]);return {coins:s,isLoading:i||l,searchQuery:e,setSearchQuery:r,filteredCoins:c,handleSelectCoin:f=>{t?.(f);}}}function Et(t,e=2){return t>=1e9?`$${(t/1e9).toFixed(e)}B`:t>=1e6?`$${(t/1e6).toFixed(e)}M`:t>=1e3?`$${(t/1e3).toFixed(e)}K`:`$${t.toFixed(e)}`}function zr(t){return t>=1e3?t.toFixed(2):t>=1?t.toFixed(4):t.toFixed(6)}function Qe({coins:t,searchQuery:e,onSearchChange:r,onSelectCoin:s,isLoading:n}){return jsxRuntime.jsxs("div",{className:"flex flex-col h-full bg-neutral-950",children:[jsxRuntime.jsx("div",{className:"p-3 border-b border-neutral-800",children:jsxRuntime.jsx(ui.Input,{type:"text",placeholder:"Search coins...",value:e,onChange:o=>r(o.target.value),startContent:jsxRuntime.jsx(ui.SearchIcon,{className:"w-4 h-4 text-neutral-400"}),classNames:{input:"text-sm",inputWrapper:"bg-neutral-900 border-neutral-800"}})}),jsxRuntime.jsx("div",{className:"flex-1 overflow-hidden",children:jsxRuntime.jsxs(ui.StyledTable,{isVirtualized:true,radius:"none",className:"h-full",classNames:{wrapper:"bg-neutral-950",th:"bg-neutral-900 text-neutral-400 text-xs font-medium",td:"text-sm"},maxTableHeight:600,rowHeight:48,"aria-label":"Search Coins",children:[jsxRuntime.jsxs(ui.TableHeader,{children:[jsxRuntime.jsx(ui.TableColumn,{width:140,children:"Token"},"token"),jsxRuntime.jsx(ui.TableColumn,{width:100,align:"end",children:"Last Price"},"lastPrice"),jsxRuntime.jsx(ui.TableColumn,{width:100,align:"end",children:"24h Change"},"change24h"),jsxRuntime.jsx(ui.TableColumn,{width:100,align:"end",children:"8h Funding"},"fundingRate"),jsxRuntime.jsx(ui.TableColumn,{width:100,align:"end",children:"24h Volume"},"volume24h"),jsxRuntime.jsx(ui.TableColumn,{width:100,align:"end",children:"Open Interest"},"openInterest")]}),jsxRuntime.jsx(ui.TableBody,{items:t,isLoading:n,emptyContent:jsxRuntime.jsx("div",{className:"flex flex-col items-center justify-center py-10",children:jsxRuntime.jsx("span",{className:"text-neutral-400 text-sm",children:e?"No coins found":"No coins available"})}),children:o=>{let i=o.change24h>=0,a=o.change24h.toFixed(2),l=(o.fundingRate*100).toFixed(4),c=o.fundingRate>=0;return jsxRuntime.jsxs(ui.TableRow,{onClick:()=>s(o.symbol),className:"cursor-pointer hover:bg-neutral-900/50 transition-colors",children:[jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsxs("div",{className:"flex items-center gap-2",children:[jsxRuntime.jsx("div",{className:"w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center",children:jsxRuntime.jsx("span",{className:"text-xs font-semibold text-white",children:o.symbol.charAt(0)})}),jsxRuntime.jsx("span",{className:"font-medium text-white",children:o.symbol})]})}),jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsx("span",{className:"text-white font-medium",children:zr(o.price)})}),jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsxs("span",{className:ui.cn("font-medium",i?"text-green-500":"text-red-500"),children:[i?"+":"",a,"%"]})}),jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsxs("span",{className:ui.cn("font-medium",c?"text-green-500":"text-red-500"),children:[l,"%"]})}),jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsx("span",{className:"text-neutral-300",children:Et(o.volume24h)})}),jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsx("span",{className:"text-neutral-300",children:Et(o.openInterest*o.price)})})]},o.symbol)}})]})})]})}function Qr({onSelectCoin:t,className:e}){let{filteredCoins:r,isLoading:s,searchQuery:n,setSearchQuery:o,handleSelectCoin:i}=ze({onSelectCoin:t});return jsxRuntime.jsx("div",{className:e,children:jsxRuntime.jsx(Qe,{coins:r,searchQuery:n,onSearchChange:o,onSelectCoin:i,isLoading:s})})}function qt(t,e){if(e<=0)return t;let r=new Map;return t.forEach(s=>{let n=Math.floor(s.price/e)*e,o=r.get(n);o?(o.quantity+=s.quantity,s.count&&(o.count=(o.count||0)+s.count)):r.set(n,{price:n,quantity:s.quantity,count:s.count});}),Array.from(r.values())}function Bt(t){let e=0,r=t.map(n=>{let o=n.quantity*n.price;return e+=o,{...n,quantity:o,total:e,percentage:0}}),s=e;return r.map(n=>({...n,percentage:s>0?n.total/s*100:0}))}function qe({symbol:t,maxLevel:e=20,precision:r=.01}){let[s,n]=react.useState(null),[o,i]=react.useState(r),{data:a,isPending:l}=ve({symbol:t,maxLevel:e}),{data:c}=K({type:"orderBook",symbol:t,enabled:!!a});return react.useEffect(()=>{c?n(c):a&&n(a);},[c,a]),{...react.useMemo(()=>{if(!s)return {bids:[],asks:[],spread:0,spreadPercentage:0};let f=qt(s.bids,o),m=qt(s.asks,o),p=f.sort((W,D)=>D.price-W.price).slice(0,e),b=m.sort((W,D)=>W.price-D.price).slice(0,e),y=Bt(p),N=Bt(b),h=y[0]?.price||0,I=(N[0]?.price||0)-h,A=h>0?I/h*100:0;return {bids:y,asks:N,spread:I,spreadPercentage:A}},[s,o,e]),isLoading:l,precision:o,setPrecision:i}}function Lr(t){return t>=1e3?t.toLocaleString("en-US",{minimumFractionDigits:0,maximumFractionDigits:0}):t>=1?t.toLocaleString("en-US",{minimumFractionDigits:2,maximumFractionDigits:4}):t.toFixed(6)}function Lt(t){return Math.round(t).toLocaleString("en-US")}function At({price:t,quantity:e,total:r,percentage:s,side:n,onClick:o}){let i=n==="ask";return jsxRuntime.jsxs("div",{className:"relative flex items-center cursor-pointer hover:bg-white/5 transition-colors",style:{height:22,minHeight:22,maxHeight:22,padding:"0 16px",gap:16,fontSize:11},onClick:o,children:[jsxRuntime.jsx("div",{className:"absolute left-0 top-0",style:{height:20,width:`${s}%`,background:i?"linear-gradient(to right, rgba(209,57,236,0), rgb(236,57,122))":"linear-gradient(to right, rgba(47,194,227,0), rgb(47,227,172))",opacity:.15}}),jsxRuntime.jsx("div",{className:"relative z-10 flex items-center",style:{flex:"1 1 0%"},children:jsxRuntime.jsx("span",{style:{color:i?"#ec397a":"#2fe3ac",fontWeight:400},children:Lr(t)})}),jsxRuntime.jsx("div",{className:"relative z-10 flex items-center justify-end",style:{flex:"1 1 0%",color:"#fcfcfc"},children:Lt(e)}),jsxRuntime.jsx("div",{className:"relative z-10 flex items-center justify-end",style:{flex:"1 1 0%",color:"#fcfcfc"},children:Lt(r)})]})}function Be({bids:t,asks:e,spread:r,spreadPercentage:s,onPriceClick:n}){let o=[...e].reverse();return jsxRuntime.jsxs("div",{className:"flex flex-col h-full",style:{backgroundColor:"#06070b",fontSize:11},children:[jsxRuntime.jsxs("div",{className:"flex items-center",style:{height:28,minHeight:28,padding:"0 16px",gap:16,color:"#777a8c",fontSize:11},children:[jsxRuntime.jsx("div",{className:"flex items-center",style:{flex:"1 1 0%"},children:"Price"}),jsxRuntime.jsx("div",{className:"flex items-center justify-end",style:{flex:"1 1 0%"},children:"Amount (USD)"}),jsxRuntime.jsx("div",{className:"flex items-center justify-end",style:{flex:"1 1 0%"},children:"Total (USD)"})]}),jsxRuntime.jsx("div",{className:"flex-1 flex flex-col-reverse overflow-hidden",children:o.map((i,a)=>jsxRuntime.jsx(At,{price:i.price,quantity:i.quantity,total:i.total,percentage:i.percentage,side:"ask",onClick:()=>n?.(i.price)},`ask-${i.price}-${a}`))}),jsxRuntime.jsx("div",{className:"flex items-center justify-center",style:{height:24,minHeight:24,padding:"0 16px",backgroundColor:"rgba(34,36,45,0.5)"},children:jsxRuntime.jsxs("div",{className:"flex items-center",style:{gap:12,fontSize:12,color:"#fcfcfc"},children:[jsxRuntime.jsx("span",{style:{color:"#fcfcfc"},children:"Spread:"}),jsxRuntime.jsx("button",{type:"button",className:"hover:text-white transition-colors cursor-pointer",style:{color:"#fcfcfc",fontWeight:400,background:"none",border:"none",padding:0},onClick:()=>n?.(r),children:r>=1?Math.round(r).toLocaleString("en-US"):r.toFixed(4)}),jsxRuntime.jsxs("span",{style:{color:"#fcfcfc"},children:[s.toFixed(3),"%"]})]})}),jsxRuntime.jsx("div",{className:"flex-1 overflow-hidden",children:t.map((i,a)=>jsxRuntime.jsx(At,{price:i.price,quantity:i.quantity,total:i.total,percentage:i.percentage,side:"bid",onClick:()=>n?.(i.price)},`bid-${i.price}-${a}`))})]})}function Ar(){return jsxRuntime.jsxs("div",{className:"flex flex-col h-full bg-neutral-950 p-2 gap-1",children:[Array.from({length:15}).map((t,e)=>jsxRuntime.jsxs("div",{className:"flex justify-between",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-20 rounded"}),jsxRuntime.jsxs("div",{className:"flex gap-2",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"})]})]},`ask-skeleton-${e}`)),jsxRuntime.jsx("div",{className:"py-2",children:jsxRuntime.jsx(ui.Skeleton,{className:"h-6 w-40 mx-auto rounded"})}),Array.from({length:15}).map((t,e)=>jsxRuntime.jsxs("div",{className:"flex justify-between",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-20 rounded"}),jsxRuntime.jsxs("div",{className:"flex gap-2",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"})]})]},`bid-skeleton-${e}`))]})}function Wr(){return jsxRuntime.jsx("div",{className:"flex items-center justify-center h-full bg-neutral-950",children:jsxRuntime.jsx("span",{className:"text-neutral-400 text-sm",children:"No order book data available"})})}function $r({symbol:t,maxLevel:e=20,onPriceClick:r,className:s}){let{bids:n,asks:o,spread:i,spreadPercentage:a,isLoading:l}=qe({symbol:t,maxLevel:e});return l?jsxRuntime.jsx(Ar,{}):n.length===0&&o.length===0?jsxRuntime.jsx(Wr,{}):jsxRuntime.jsx("div",{className:s,children:jsxRuntime.jsx(Be,{bids:n,asks:o,spread:i,spreadPercentage:a,onPriceClick:r})})}function Le({symbol:t,limit:e=50}){let[r,s]=react.useState([]),{data:n,isPending:o}=Se({symbol:t,limit:e}),{data:i}=K({type:"trades",symbol:t,enabled:!!n});return react.useEffect(()=>{n&&s(n.filter($t));},[n]),react.useEffect(()=>{i&&s(a=>{let l=Kr(i);if(l.length===0)return a;let c=l.filter(f=>!a.some(m=>m.timestamp===f.timestamp&&m.price===f.price&&m.quantity===f.quantity));return c.length===0?a:[...c,...a].slice(0,e)});},[i,e]),{trades:r,isLoading:o}}function Kr(t){return (Array.isArray(t)?t:[t]).filter($t)}function $t(t){return t?typeof t.symbol=="string"&&(t.side==="buy"||t.side==="sell")&&typeof t.price=="number"&&Number.isFinite(t.price)&&typeof t.quantity=="number"&&Number.isFinite(t.quantity)&&typeof t.timestamp=="number"&&Number.isFinite(t.timestamp):false}function Vr(t){return typeof t!="number"||!Number.isFinite(t)?"-":t>=1e3?t.toFixed(2):t>=1?t.toFixed(4):t.toFixed(6)}function Ht(t){return typeof t!="number"||!Number.isFinite(t)?"-":t>=1e6?(t/1e6).toFixed(2)+"M":t>=1e3?(t/1e3).toFixed(2)+"K":t.toFixed(2)}function _r(t){if(typeof t!="number"||!Number.isFinite(t))return "-";let e=new Date(t),r=String(e.getHours()).padStart(2,"0"),s=String(e.getMinutes()).padStart(2,"0"),n=String(e.getSeconds()).padStart(2,"0");return `${r}:${s}:${n}`}function We({trades:t,onTradeClick:e}){return jsxRuntime.jsxs("div",{className:"flex flex-col h-full overflow-auto",style:{backgroundColor:"#06070b",fontSize:11},children:[jsxRuntime.jsxs("div",{className:"sticky top-0 z-10 flex items-center",style:{height:28,minHeight:28,padding:"0 16px",gap:16,color:"#c8c9d1",fontSize:11},children:[jsxRuntime.jsx("div",{className:"flex-1",style:{maxWidth:100},children:"Price"}),jsxRuntime.jsx("div",{className:"flex-1 text-right",children:"Amount"}),jsxRuntime.jsx("div",{className:"flex-1 text-right",style:{maxWidth:100},children:"Total"}),jsxRuntime.jsx("div",{className:"flex-1 text-right",style:{maxWidth:70},children:"Time"})]}),jsxRuntime.jsx("div",{className:"flex-1",children:t.map((r,s)=>{let n=r.side==="buy",o=typeof r.price=="number"&&Number.isFinite(r.price)&&typeof r.quantity=="number"&&Number.isFinite(r.quantity)?r.price*r.quantity:void 0;return jsxRuntime.jsxs("div",{className:"flex items-center cursor-pointer hover:bg-white/5 transition-colors",style:{height:22,minHeight:22,maxHeight:22,padding:"0 16px",gap:16,fontSize:11},onClick:()=>e?.(r),children:[jsxRuntime.jsx("div",{className:"flex-1",style:{maxWidth:100},children:jsxRuntime.jsx("span",{style:{color:n?"#2fe3ac":"#ec397a",fontWeight:400},children:Vr(r.price)})}),jsxRuntime.jsx("div",{className:"flex-1 text-right",style:{color:"#fcfcfc"},children:Ht(r.quantity)}),jsxRuntime.jsx("div",{className:"flex-1 text-right",style:{maxWidth:100,color:"#fcfcfc"},children:Ht(o)}),jsxRuntime.jsx("div",{className:"flex-1 text-right",style:{maxWidth:70,color:"#c8c9d1"},children:_r(r.timestamp)})]},`${r.timestamp}-${r.price}-${s}`)})})]})}function Gr(){return jsxRuntime.jsxs("div",{className:"flex flex-col h-full bg-neutral-950 p-2 gap-1",children:[jsxRuntime.jsxs("div",{className:"flex justify-between mb-2",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-4 w-16 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-4 w-16 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-4 w-16 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-4 w-16 rounded"})]}),Array.from({length:20}).map((t,e)=>jsxRuntime.jsxs("div",{className:"flex justify-between",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-20 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"})]},`trade-skeleton-${e}`))]})}function jr(){return jsxRuntime.jsx("div",{className:"flex items-center justify-center h-full bg-neutral-950",children:jsxRuntime.jsx("span",{className:"text-neutral-400 text-sm",children:"No recent trades"})})}function Jr({symbol:t,limit:e=50,onTradeClick:r,className:s}){let{trades:n,isLoading:o}=Le({symbol:t,limit:e});return o?jsxRuntime.jsx(Gr,{}):n.length===0?jsxRuntime.jsx(jr,{}):jsxRuntime.jsx("div",{className:s,children:jsxRuntime.jsx(We,{trades:n,onTradeClick:r})})}function He({symbol:t,userAddress:e,maxLeverage:r=150,onSuccess:s,onError:n}){let[o,i]=react.useState("long"),[a,l]=react.useState("market"),c=reactHookForm.useForm({defaultValues:{amount:0,leverage:20,takeProfitPrice:void 0,takeProfitPercent:void 0,stopLossPrice:void 0,stopLossPercent:void 0}}),{data:d}=oe({symbol:t}),{mutateAsync:f,isPending:m}=ie({onSuccess:()=>{c.reset(),s?.();},onError:C=>{n?.(C);}}),p=c.watch(),{amount:b,leverage:y,price:N}=p,h=react.useMemo(()=>a==="limit"&&N?N:d?.price||0,[a,N,d?.price]),q=react.useMemo(()=>!b||!h?0:b*h*5e-4,[b,h]),I=react.useMemo(()=>!b||!h?0:b*h+q,[b,h,q]),A=react.useMemo(()=>{if(!b||!h||!y||y===1)return;let C=.005,G=h;return o==="long"?G*(1-(1/y-C)):G*(1+(1/y-C))},[b,h,y,o]),W=1e4,D=1e4,ye=0,U=react.useCallback(async C=>{if(!e)throw new Error("User address is required");let G=a==="limit"?C.price:void 0,ge=C.takeProfitPrice,be=C.stopLossPrice;if(!ge&&C.takeProfitPercent&&C.takeProfitPercent>0&&h){let se=C.takeProfitPercent/100;ge=o==="long"?h*(1+se):h*(1-se);}if(!be&&C.stopLossPercent&&C.stopLossPercent>0&&h){let se=C.stopLossPercent/100;be=o==="long"?h*(1-se):h*(1+se);}await f({symbol:t,side:o,orderType:a,amount:C.amount,price:G,leverage:C.leverage,takeProfitPrice:ge,stopLossPrice:be,userAddress:e});},[t,o,a,h,e,f]);return {form:c,side:o,orderType:a,setSide:i,setOrderType:l,handleSubmit:U,isSubmitting:m,currentPrice:h,estimatedFee:q,estimatedTotal:I,liquidationPrice:A,availableMargin:W,accountValue:D,currentPosition:ye,maxLeverage:r}}function pe(t,e=2){return t.toFixed(e)}function rs({leverage:t,maxLeverage:e,onLeverageChange:r,onClose:s}){let n=[1,2,3,5,10,20,25,50,100].filter(o=>o<=e);return jsxRuntime.jsxs("div",{className:"fixed inset-0 z-50 flex items-center justify-center",children:[jsxRuntime.jsx("div",{className:"absolute inset-0 bg-black/60",onClick:s,onKeyDown:o=>o.key==="Escape"&&s(),role:"button",tabIndex:-1,"aria-label":"Close"}),jsxRuntime.jsxs("div",{className:"relative z-10 w-72 bg-neutral-900 border border-neutral-700 rounded-lg p-4 shadow-2xl",children:[jsxRuntime.jsxs("div",{className:"flex items-center justify-between mb-4",children:[jsxRuntime.jsx("h3",{className:"text-sm font-medium text-white",children:"Adjust Leverage"}),jsxRuntime.jsx("button",{type:"button",onClick:s,className:"text-neutral-400 hover:text-white",children:jsxRuntime.jsx("svg",{className:"w-4 h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,children:jsxRuntime.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"})})})]}),jsxRuntime.jsxs("div",{className:"text-center text-2xl font-bold text-white mb-4",children:[t,"x"]}),jsxRuntime.jsx(ui.Slider,{value:[t],onChange:o=>r(Array.isArray(o)?o[0]:o),minValue:1,maxValue:e,step:1,className:"w-full mb-3"}),jsxRuntime.jsx("div",{className:"flex flex-wrap gap-1.5",children:n.map(o=>jsxRuntime.jsxs("button",{type:"button",className:ui.cn("px-2.5 py-1 text-xs rounded transition-colors",t===o?"bg-green-600 text-white":"bg-neutral-800 text-neutral-400 hover:bg-neutral-700"),onClick:()=>r(o),children:[o,"x"]},o))}),jsxRuntime.jsx("button",{type:"button",className:"w-full mt-4 text-white h-9 rounded cursor-pointer transition-colors",style:{backgroundColor:"#16a34a"},onClick:s,children:"Confirm"})]})]})}function Ke({methods:t,side:e,orderType:r,onSideChange:s,onOrderTypeChange:n,onSubmit:o,isSubmitting:i,symbol:a,currentPrice:l,estimatedFee:c,liquidationPrice:d,availableMargin:f,accountValue:m,currentPosition:p,maxLeverage:b}){let[y,N]=react.useState(false),[h,q]=react.useState(false),I=t.watch("leverage")||20,A=t.watch("amount")||0,W=a.split("-")[0],D=f>0&&l?Math.min(A*l/(f*I)*100,100):0,ye=U=>{let C=(Array.isArray(U)?U[0]:U)/100;if(l&&l>0){let G=f*I*C/l;t.setValue("amount",Number(G.toFixed(6)));}};return jsxRuntime.jsxs("div",{className:"flex flex-col h-full",style:{backgroundColor:"#06070b"},children:[jsxRuntime.jsxs("div",{className:"flex-1 overflow-y-auto",style:{padding:"16px 16px",display:"flex",flexDirection:"column",gap:16},children:[jsxRuntime.jsxs("div",{className:"flex",style:{gap:4},children:[jsxRuntime.jsx("button",{type:"button",className:"flex-1 cursor-pointer transition-colors",style:{height:32,fontSize:12,borderRadius:4,backgroundColor:e==="long"?"#2fe3ac":"transparent",color:e==="long"?"#090909":"#c8c9d1",fontWeight:e==="long"?700:500},onClick:()=>s("long"),children:"Long"}),jsxRuntime.jsx("button",{type:"button",className:"flex-1 cursor-pointer transition-colors",style:{height:32,fontSize:12,borderRadius:4,backgroundColor:e==="short"?"#ec397a":"transparent",color:e==="short"?"#090909":"#c8c9d1",fontWeight:e==="short"?700:500},onClick:()=>s("short"),children:"Short"})]}),jsxRuntime.jsxs("div",{className:"flex items-center",style:{gap:8},children:[jsxRuntime.jsxs("div",{className:"flex",style:{gap:4},children:[jsxRuntime.jsx("button",{type:"button",className:"cursor-pointer transition-colors",style:{height:24,padding:"0 8px",fontSize:12,borderRadius:4,backgroundColor:"transparent",color:r==="market"?"#fcfcfc":"#c8c9d1",fontWeight:500,border:"none",borderBottom:r==="market"?"2px solid #fcfcfc":"none"},onClick:()=>n("market"),children:"Market"}),jsxRuntime.jsx("button",{type:"button",className:"cursor-pointer transition-colors",style:{height:24,padding:"0 8px",fontSize:12,borderRadius:4,backgroundColor:"transparent",color:r==="limit"?"#fcfcfc":"#c8c9d1",fontWeight:500,border:"none",borderBottom:r==="limit"?"2px solid #fcfcfc":"none"},onClick:()=>n("limit"),children:"Limit"})]}),jsxRuntime.jsx("div",{className:"flex-1"}),jsxRuntime.jsxs("button",{type:"button",className:"cursor-pointer transition-colors",style:{height:24,padding:"0 5px",fontSize:12,borderRadius:4,backgroundColor:"rgba(34,36,45,0.5)",color:"#c8c9d1",fontWeight:500,border:"1px solid rgba(34,36,45,0.5)"},onClick:()=>N(true),children:["Leverage: ",I,"x"]})]}),jsxRuntime.jsx(ui.RHForm,{methods:t,onSubmit:o,children:jsxRuntime.jsxs("div",{className:"space-y-3 w-full",children:[r==="limit"&&jsxRuntime.jsxs("div",{children:[jsxRuntime.jsxs("div",{className:"flex justify-between items-center mb-1",children:[jsxRuntime.jsx("span",{className:"text-xs text-neutral-400",children:"Price"}),jsxRuntime.jsx("span",{className:"text-xs text-neutral-500",children:"USDC"})]}),jsxRuntime.jsx(ui.RHNumberInput,{name:"price",placeholder:"0.0",className:"w-full",endContent:jsxRuntime.jsx("span",{className:"text-neutral-500 text-xs",children:"USDC"})})]}),jsxRuntime.jsxs("div",{children:[jsxRuntime.jsxs("div",{className:"flex justify-between items-center mb-1",children:[jsxRuntime.jsx("span",{style:{fontSize:12,color:"#777a8c"},children:"Buy Amount"}),jsxRuntime.jsx("span",{style:{fontSize:12,color:"#777a8c"},children:W})]}),jsxRuntime.jsx("div",{className:"perp-buy-amt",style:{borderRadius:4,padding:8,backgroundColor:"rgba(34,36,45,0.5)",border:"1px solid rgb(34,36,45)",height:64},children:jsxRuntime.jsx(ui.RHNumberInput,{name:"amount",placeholder:"0.0 USDC",className:"w-full"})})]}),jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx("style",{children:`
|
|
1
|
+
'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime'),reactQuery=require('@tanstack/react-query'),ui=require('@liberfi.io/ui'),reactHookForm=require('react-hook-form');typeof window<"u"&&(window.__LIBERFI_VERSION__=window.__LIBERFI_VERSION__||{},window.__LIBERFI_VERSION__["@liberfi.io/ui-perpetuals"]="0.1.98");var er="0.1.98";var de=class{ws=null;wsEndpoint;subscriptions=new Map;reconnectAttempts=0;maxReconnectAttempts=10;reconnectDelay=1e3;heartbeatInterval=null;messageQueue=[];isConnected=false;pingInterval=3e4;reconnectTimeout=null;isReconnecting=false;constructor(e){this.wsEndpoint=e;}async connect(){return new Promise((e,r)=>{try{this.ws&&this.ws.close(),this.ws=new WebSocket(this.wsEndpoint),this.ws.onopen=()=>{console.log("[WebSocket] Connected to Hyperliquid"),this.isConnected=!0,this.reconnectAttempts=0,this.isReconnecting=!1,this.startHeartbeat(),this.flushMessageQueue(),e();},this.ws.onmessage=s=>{this.handleMessage(s.data);},this.ws.onerror=s=>{console.error("[WebSocket] Error:",s),this.isConnected=!1,this.isReconnecting||r(new Error("WebSocket connection failed"));},this.ws.onclose=s=>{console.log(`[WebSocket] Closed: ${s.code} - ${s.reason||"No reason provided"}`),this.isConnected=!1,this.stopHeartbeat(),s.code!==1e3&&this.attemptReconnect();};}catch(s){r(s);}})}disconnect(){this.stopHeartbeat(),this.subscriptions.clear(),this.reconnectTimeout!==null&&(clearTimeout(this.reconnectTimeout),this.reconnectTimeout=null),this.ws&&(this.ws.close(1e3,"Normal closure"),this.ws=null),this.isConnected=false,this.isReconnecting=false,this.reconnectAttempts=0;}attemptReconnect(){if(this.isReconnecting)return;if(this.reconnectAttempts>=this.maxReconnectAttempts){console.error("[WebSocket] Max reconnection attempts reached");return}this.isReconnecting=true,this.reconnectAttempts++;let e=Math.min(this.reconnectDelay*Math.pow(2,this.reconnectAttempts-1),3e4);console.log(`[WebSocket] Reconnecting in ${e}ms (attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts})`),this.reconnectTimeout=window.setTimeout(()=>{this.connect().then(()=>{this.resubscribeAll();}).catch(r=>{console.error("[WebSocket] Reconnection failed:",r),this.isReconnecting=false;});},e);}startHeartbeat(){this.heartbeatInterval=window.setInterval(()=>{this.isConnected&&this.ws&&this.ws.readyState===WebSocket.OPEN&&this.send({method:"ping"});},this.pingInterval);}stopHeartbeat(){this.heartbeatInterval!==null&&(clearInterval(this.heartbeatInterval),this.heartbeatInterval=null);}send(e){this.isConnected&&this.ws&&this.ws.readyState===WebSocket.OPEN?this.ws.send(JSON.stringify(e)):this.messageQueue.push(e);}flushMessageQueue(){for(;this.messageQueue.length>0;){let e=this.messageQueue.shift();e&&this.send(e);}}resubscribeAll(){this.subscriptions.forEach(e=>{this.sendSubscription(e.type,e.param);});}handleMessage(e){try{let r=JSON.parse(e);r.channel?this.handleChannelMessage(r):r.method;}catch(r){console.error("[WebSocket] Failed to parse message:",r,e);}}handleChannelMessage(e){let r=e.channel;this.subscriptions.forEach((s,n)=>{if(this.isChannelMatch(r,s.type,s.param))try{let o=this.transformData(s.type,e.data,s.param);s.callback(o);}catch(o){console.error(`[WebSocket] Error in subscription callback (${n}):`,o);}});}isChannelMatch(e,r,s){return r==="ticker"?e==="allMids":r==="trades"?e==="trades":r==="orderBook"?e==="l2Book":r==="candle"?e==="candle":r==="userFills"?e==="userFills":r==="userEvents"?e==="userEvents":false}transformData(e,r,s){return e==="ticker"?this.transformTickerData(r):e==="trades"?this.transformTradesData(r,s):e==="orderBook"?this.transformOrderBookData(r,s):e==="candle"?this.transformCandleData(r,s):e==="userFills"?this.transformUserFillsData(r):e==="userEvents"?this.transformUserEventsData(r):r}transformTickerData(e){let r=e.mids||{};return Object.entries(r).map(([s,n])=>({symbol:`${s}-USDC`,price:parseFloat(n),timestamp:Date.now()}))}transformTradesData(e,r){return Array.isArray(e)?e.map(s=>({symbol:r,side:s.side==="B"?"buy":"sell",price:parseFloat(s.px),quantity:parseFloat(s.sz),timestamp:s.time,tradeId:s.tid})):[]}transformOrderBookData(e,r){let[s,n]=e.levels||[[],[]];return {symbol:r,bids:s.map(o=>({price:parseFloat(o.px),quantity:parseFloat(o.sz),count:o.n})),asks:n.map(o=>({price:parseFloat(o.px),quantity:parseFloat(o.sz),count:o.n})),timestamp:e.time||Date.now()}}transformCandleData(e,r){let[s]=r.split(":");return {symbol:s,open:parseFloat(e.o),high:parseFloat(e.h),low:parseFloat(e.l),close:parseFloat(e.c),volume:parseFloat(e.v),timestamp:e.t,closeTimestamp:e.T}}transformUserFillsData(e){return Array.isArray(e)?e.map(r=>({tradeId:r.tid?.toString(),orderId:r.oid?.toString(),symbol:`${r.coin}-USDC`,side:r.dir?.includes("Long")?"long":"short",price:parseFloat(r.px),quantity:parseFloat(r.sz),fee:parseFloat(r.fee||"0"),feeCurrency:r.feeToken||"USDC",isMaker:r.side==="M",timestamp:r.time})):[]}transformUserEventsData(e){return e}sendSubscription(e,r){let s;if(e==="ticker")s={method:"subscribe",subscription:{type:"allMids"}};else if(e==="trades")s={method:"subscribe",subscription:{type:"trades",coin:r.split("-")[0]}};else if(e==="orderBook")s={method:"subscribe",subscription:{type:"l2Book",coin:r.split("-")[0]}};else if(e==="candle"){let[n,o]=r.split(":");s={method:"subscribe",subscription:{type:"candle",coin:n.split("-")[0],interval:o}};}else e==="userFills"?s={method:"subscribe",subscription:{type:"userFills",user:r}}:e==="userEvents"&&(s={method:"subscribe",subscription:{type:"userEvents",user:r}});s&&this.send(s);}sendUnsubscription(e,r){let s;if(e==="ticker")s={method:"unsubscribe",subscription:{type:"allMids"}};else if(e==="trades")s={method:"unsubscribe",subscription:{type:"trades",coin:r.split("-")[0]}};else if(e==="orderBook")s={method:"unsubscribe",subscription:{type:"l2Book",coin:r.split("-")[0]}};else if(e==="candle"){let[n,o]=r.split(":");s={method:"unsubscribe",subscription:{type:"candle",coin:n.split("-")[0],interval:o}};}else e==="userFills"?s={method:"unsubscribe",subscription:{type:"userFills",user:r}}:e==="userEvents"&&(s={method:"unsubscribe",subscription:{type:"userEvents",user:r}});s&&this.send(s);}subscribe(e,r,s){let n=`${e}:${r}`;return this.subscriptions.set(n,{type:e,param:r,callback:s}),this.sendSubscription(e,r),n}unsubscribe(e){let r=this.subscriptions.get(e);r&&(this.sendUnsubscription(r.type,r.param),this.subscriptions.delete(e));}isConnectedNow(){return this.isConnected}};var at={testnet:{api:"https://api.hyperliquid-testnet.xyz",ws:"wss://api.hyperliquid-testnet.xyz/ws"},mainnet:{api:"https://api.hyperliquid.xyz",ws:"wss://api.hyperliquid.xyz/ws"}},xe=class{apiEndpoint;_wsEndpoint;timeout;environment;wsManager=null;constructor(e={}){this.environment=e.environment||"testnet",this.apiEndpoint=e.apiEndpoint||at[this.environment].api,this._wsEndpoint=e.wsEndpoint||at[this.environment].ws,this.timeout=e.timeout||3e4;}async request(e,r){let s=`${this.apiEndpoint}${e}`;try{let n=new AbortController,o=setTimeout(()=>n.abort(),this.timeout),i=await fetch(s,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(r),signal:n.signal});if(clearTimeout(o),!i.ok)throw new H(`HTTP ${i.status}: ${i.statusText}`,i.status,await i.text());return await i.json()}catch(n){throw n.name==="AbortError"?new H(`Request timeout after ${this.timeout}ms`,408,""):n instanceof H?n:new H(`Network error: ${n.message}`,0,"")}}symbolToCoin(e){return e.split("-")[0]}parseInterval(e){return {"1m":6e4,"5m":3e5,"15m":9e5,"30m":18e5,"1h":36e5,"4h":144e5,"1d":864e5,"1w":6048e5}[e]}async getSupportedCoins(){let[e]=await this.request("/info",{type:"metaAndAssetCtxs"});return e.universe.map(r=>`${r.name}-USDC`)}async getMarket(e){let r=await this.getMarkets([e]);return r.length>0?r[0]:null}async getMarkets(e){let[r,s]=await this.request("/info",{type:"metaAndAssetCtxs"}),n=r.universe.map((o,i)=>{let a=s[i],l=`${o.name}-USDC`,c=parseFloat(a.midPx||a.markPx||"0"),d=a.prevDayPx?parseFloat(a.prevDayPx):c,f=d>0?(c-d)/d*100:0;return {symbol:l,price:c,change24h:f,volume24h:parseFloat(a.dayNtlVlm||"0"),fundingRate:parseFloat(a.funding||"0"),openInterest:parseFloat(a.openInterest||"0"),markPrice:parseFloat(a.markPx||"0"),indexPrice:parseFloat(a.oraclePx||a.midPx||"0")}});if(e&&e.length>0){let o=new Set(e);return n.filter(i=>o.has(i.symbol))}return n}async getKlines(e,r,s=100){let n=this.symbolToCoin(e),o=this.parseInterval(r),i=Date.now(),a=i-o*s;return (await this.request("/info",{type:"candleSnapshot",req:{coin:n,interval:r,startTime:a,endTime:i}})).map(c=>({symbol:e,open:parseFloat(c.o),high:parseFloat(c.h),low:parseFloat(c.l),close:parseFloat(c.c),volume:parseFloat(c.v),timestamp:c.t,closeTimestamp:c.T}))}async getOrderBook(e,r=10){let s=this.symbolToCoin(e),n=await this.request("/info",{type:"l2Book",coin:s}),[o,i]=n.levels;return {symbol:e,bids:o.slice(0,r).map(a=>({price:parseFloat(a.px),quantity:parseFloat(a.sz),count:a.n})),asks:i.slice(0,r).map(a=>({price:parseFloat(a.px),quantity:parseFloat(a.sz),count:a.n})),timestamp:n.time}}async getRecentTrades(e,r=50){let s=this.symbolToCoin(e);return (await this.request("/info",{type:"recentTrades",coin:s})).slice(0,r).map(o=>({symbol:e,side:o.side==="B"?"buy":"sell",price:parseFloat(o.px),quantity:parseFloat(o.sz),timestamp:o.time,tradeId:o.tid}))}async placeOrder(e){throw new Error("placeOrder() requires wallet private key configuration for EIP-712 signature. Please configure authentication before calling this method. See: https://hyperliquid.gitbook.io/hyperliquid-docs/for-developers/api/exchange-endpoint")}async cancelOrder(e){throw new Error("cancelOrder() requires wallet private key configuration for EIP-712 signature. Please configure authentication before calling this method. See: https://hyperliquid.gitbook.io/hyperliquid-docs/for-developers/api/exchange-endpoint")}async getPositions(e={}){if(!e.userAddress)throw new Error("Hyperliquid requires userAddress parameter. Example: { userAddress: '0x...' }");let r=await this.request("/info",{type:"clearinghouseState",user:e.userAddress}),s=r.assetPositions.map(o=>{let i=o.position,a=`${i.coin}-USDC`,l=parseFloat(i.szi);if(l===0)return null;let c=parseFloat(i.entryPx),d=parseFloat(i.unrealizedPnl),f=parseFloat(i.positionValue);return {symbol:a,side:l>0?"long":"short",quantity:Math.abs(l),entryPrice:c,markPrice:c,unrealizedPnl:d,unrealizedPnlPercent:parseFloat(i.returnOnEquity)*100,leverage:i.leverage.value,liquidationPrice:i.liquidationPx?parseFloat(i.liquidationPx):void 0,margin:parseFloat(i.marginUsed),notionalValue:Math.abs(f)}}).filter(Boolean),n=e.symbol?s.filter(o=>o.symbol===e.symbol):s;return {positions:n,totalEquity:parseFloat(r.marginSummary.accountValue),availableBalance:parseFloat(r.marginSummary.accountValue)-parseFloat(r.marginSummary.totalMarginUsed),totalUnrealizedPnl:n.reduce((o,i)=>o+i.unrealizedPnl,0),raw:r}}async getOpenOrders(e={}){if(!e.userAddress)throw new Error("Hyperliquid requires userAddress parameter. Example: { userAddress: '0x...' }");let r=await this.request("/info",{type:"openOrders",user:e.userAddress}),s=r.map(o=>{let i=`${o.coin}-USDC`,a=parseFloat(o.origSz),l=parseFloat(o.sz),c=a-l;return {orderId:o.oid.toString(),clientOrderId:o.cloid,symbol:i,side:o.side?"long":"short",orderType:"limit",price:parseFloat(o.limitPx),quantity:a,filledQuantity:c,remainingQuantity:l,status:c>0&&l>0?"partially_filled":"pending",timestamp:o.timestamp,updateTimestamp:o.timestamp}}),n=e.symbol?s.filter(o=>o.symbol===e.symbol):s;return {orders:n,totalCount:n.length,raw:r}}async getTrades(e={}){if(!e.userAddress)throw new Error("Hyperliquid requires userAddress parameter. Example: { userAddress: '0x...' }");let r=await this.request("/info",{type:"userFills",user:e.userAddress}),s=r.map(n=>{let o=`${n.coin}-USDC`,i=n.dir.includes("Long");return {tradeId:n.tid.toString(),orderId:n.oid.toString(),symbol:o,side:i?"long":"short",price:parseFloat(n.px),quantity:parseFloat(n.sz),fee:parseFloat(n.fee||"0"),feeCurrency:n.feeToken||"USDC",isMaker:n.side==="M",timestamp:n.time}});return e.symbol&&(s=s.filter(n=>n.symbol===e.symbol)),e.startTime&&(s=s.filter(n=>n.timestamp>=e.startTime)),e.endTime&&(s=s.filter(n=>n.timestamp<=e.endTime)),e.limit&&(s=s.slice(0,e.limit)),{trades:s,totalCount:s.length,raw:r}}async connectWebSocket(){if(this.wsManager||(this.wsManager=new de(this._wsEndpoint)),this.wsManager.isConnectedNow()){console.log("[WebSocket] Already connected");return}await this.wsManager.connect();}disconnectWebSocket(){this.wsManager&&(this.wsManager.disconnect(),this.wsManager=null);}subscribeMarketData(e,r,s){if(!this.wsManager)throw new Error("WebSocket not connected. Call connectWebSocket() first.");return this.wsManager.subscribe(e,r,s)}subscribeCandles(e,r,s){if(!this.wsManager)throw new Error("WebSocket not connected. Call connectWebSocket() first.");let n=`${e}:${r}`;return this.wsManager.subscribe("candle",n,s)}subscribeUserData(e,r,s){if(!this.wsManager)throw new Error("WebSocket not connected. Call connectWebSocket() first.");let n=e==="fills"?"userFills":"userEvents";return this.wsManager.subscribe(n,r,s)}unsubscribe(e){this.wsManager&&this.wsManager.unsubscribe(e);}},H=class extends Error{constructor(r,s,n){super(r);this.statusCode=s;this.responseBody=n;this.name="HyperliquidApiError";}};var ne=react.createContext({});function rr({client:t,children:e}){return jsxRuntime.jsx(ne.Provider,{value:{client:t},children:e})}function P(){let t=react.useContext(ne);if(!t||!t.client)throw new Error("usePerpetualsClient must be used within a PerpetualsProvider");return t}function lt(){return ["perps","coins"]}async function ct(t){return await t.getSupportedCoins()}function he(t={}){let{client:e}=P();return reactQuery.useQuery({queryKey:lt(),queryFn:async()=>ct(e),staleTime:300*1e3,...t})}function dt(t){return ["perps","market",t.symbol]}async function ut(t,{symbol:e}){return await t.getMarket(e)}function oe(t,e={}){let{client:r}=P();return reactQuery.useQuery({queryKey:dt(t),queryFn:async()=>ut(r,t),staleTime:10*1e3,...e})}function pt(t={}){return ["perps","markets",JSON.stringify((t.symbols??[]).sort())]}async function mt(t,{symbols:e}={}){return await t.getMarkets(e)}function Pe(t={},e={}){let{client:r}=P();return reactQuery.useQuery({queryKey:pt(t),queryFn:async()=>mt(r,t),staleTime:10*1e3,...e})}function ft(t){return ["perps","klines",t.symbol,t.interval,String(t.limit??100)]}async function yt(t,{symbol:e,interval:r,limit:s}){return await t.getKlines(e,r,s)}function cr(t,e={}){let{client:r}=P();return reactQuery.useQuery({queryKey:ft(t),queryFn:async()=>yt(r,t),staleTime:30*1e3,...e})}function gt(t){return ["perps","orderBook",t.symbol,String(t.maxLevel??20)]}async function bt(t,{symbol:e,maxLevel:r}){return await t.getOrderBook(e,r)}function ve(t,e={}){let{client:r}=P();return reactQuery.useQuery({queryKey:gt(t),queryFn:async()=>bt(r,t),staleTime:5*1e3,...e})}function xt(t){return ["perps","recentTrades",t.symbol,String(t.limit??50)]}async function ht(t,{symbol:e,limit:r}){return await t.getRecentTrades(e,r)}function Se(t,e={}){let{client:r}=P();return reactQuery.useQuery({queryKey:xt(t),queryFn:async()=>ht(r,t),staleTime:5*1e3,...e})}function Pt(t){return ["perps","positions",t.userAddress??"",t.symbol??""]}async function vt(t,e){return await t.getPositions(e)}function ke(t,e={}){let{client:r}=P(),{enabled:s=true,...n}=t;return reactQuery.useQuery({queryKey:Pt(n),queryFn:async()=>vt(r,n),enabled:s&&!!n.userAddress,staleTime:10*1e3,...e})}function St(t){return ["perps","orders",t.userAddress??"",t.symbol??""]}async function kt(t,e){return await t.getOpenOrders(e)}function Ce(t,e={}){let{client:r}=P(),{enabled:s=true,...n}=t;return reactQuery.useQuery({queryKey:St(n),queryFn:async()=>kt(r,n),enabled:s&&!!n.userAddress,staleTime:5*1e3,...e})}function Ct(t){return ["perps","trades",t.userAddress??"",t.symbol??"",String(t.limit??50),String(t.startTime??""),String(t.endTime??"")]}async function Nt(t,e){return await t.getTrades(e)}function Ne(t,e={}){let{client:r}=P(),{enabled:s=true,...n}=t;return reactQuery.useQuery({queryKey:Ct(n),queryFn:async()=>Nt(r,n),enabled:s&&!!n.userAddress,staleTime:30*1e3,...e})}async function wt(t,e){return await t.placeOrder(e)}function ie(t={}){let{client:e}=P();return reactQuery.useMutation({mutationFn:async r=>wt(e,r),...t})}async function Tt(t,e){return await t.cancelOrder(e)}function we(t={}){let{client:e}=P();return reactQuery.useMutation({mutationFn:async r=>Tt(e,r),...t})}function K(t){let{type:e,symbol:r,enabled:s=true}=t,{client:n}=P(),[o,i]=react.useState(null),[a,l]=react.useState(false),[c,d]=react.useState(null),f=react.useCallback(m=>{i(m);},[]);return react.useEffect(()=>{if(!s)return;let m=null,p=true;return (async()=>{try{if(await n.connectWebSocket(),!p)return;l(!0),d(null),m=n.subscribeMarketData(e,r,f);}catch(y){p&&(d(y instanceof Error?y:new Error("Connection failed")),l(false));}})(),()=>{if(p=false,m)try{n.unsubscribe(m);}catch(y){console.error("Failed to unsubscribe:",y);}n.disconnectWebSocket(),l(false),i(null);}},[n,e,r,s,f]),{data:o,isConnected:a,error:c}}function vr(t){let{symbol:e,interval:r,enabled:s=true}=t,{client:n}=P(),[o,i]=react.useState(null),[a,l]=react.useState(false),[c,d]=react.useState(null),f=react.useCallback(m=>{i(m);},[]);return react.useEffect(()=>{if(!s)return;let m=null,p=true;return (async()=>{try{if(await n.connectWebSocket(),!p)return;l(!0),d(null),m=n.subscribeCandles(e,r,f);}catch(y){p&&(d(y instanceof Error?y:new Error("Connection failed")),l(false));}})(),()=>{if(p=false,m)try{n.unsubscribe(m);}catch(y){console.error("Failed to unsubscribe:",y);}n.disconnectWebSocket(),l(false),i(null);}},[n,e,r,s,f]),{data:o,isConnected:a,error:c}}function ae(t){let{type:e,userAddress:r,enabled:s=true}=t,{client:n}=P(),[o,i]=react.useState(null),[a,l]=react.useState(false),[c,d]=react.useState(null),f=react.useCallback(m=>{i(m);},[]);return react.useEffect(()=>{if(!s||!r)return;let m=null,p=true;return (async()=>{try{if(await n.connectWebSocket(),!p)return;l(!0),d(null),m=n.subscribeUserData(e,r,f);}catch(y){p&&(d(y instanceof Error?y:new Error("Connection failed")),l(false));}})(),()=>{if(p=false,m)try{n.unsubscribe(m);}catch(y){console.error("Failed to unsubscribe:",y);}n.disconnectWebSocket(),l(false),i(null);}},[n,e,r,s,f]),{data:o,isConnected:a,error:c}}function Me(){return jsxRuntime.jsx("div",{className:"flex items-center justify-center px-4 py-3 bg-neutral-900 border-b border-neutral-800",children:jsxRuntime.jsx("span",{className:"text-neutral-400 text-sm",children:"Market data not available"})})}function Fe(){return jsxRuntime.jsxs("div",{className:"flex items-center gap-6 px-4 py-3 bg-neutral-900 border-b border-neutral-800",children:[jsxRuntime.jsxs("div",{className:"flex items-center gap-3",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-6 w-20 rounded"}),jsxRuntime.jsxs("div",{className:"flex items-center gap-2",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-8 w-28 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"})]})]}),jsxRuntime.jsx("div",{className:"h-8 w-px bg-neutral-800"}),jsxRuntime.jsxs("div",{className:"flex items-center gap-6 text-sm",children:[jsxRuntime.jsxs("div",{className:"flex flex-col gap-1",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-3 w-20 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"})]}),jsxRuntime.jsxs("div",{className:"flex flex-col gap-1",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-3 w-20 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"})]}),jsxRuntime.jsxs("div",{className:"flex flex-col gap-1",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-3 w-24 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"})]}),jsxRuntime.jsxs("div",{className:"flex flex-col gap-1",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-3 w-32 rounded"}),jsxRuntime.jsxs("div",{className:"flex items-center gap-2",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-20 rounded"})]})]})]})]})}function Re(t){let[e,r]=react.useState(),[s,n]=react.useState(0),{data:o,isPending:i}=oe({symbol:t}),{data:a,isConnected:l}=K({type:"ticker",symbol:t,enabled:!!o});return react.useEffect(()=>{o&&r(o);},[o]),react.useEffect(()=>{if(!a)return;let c=Cr(a,t);c&&r(d=>Nr(d??o??void 0,c,t));},[a,o,t]),react.useEffect(()=>{let c=()=>{let f=Date.now(),m=480*60*1e3,p=f%m,b=m-p;return Math.floor(b/1e3)};n(c());let d=setInterval(()=>{n(c());},1e3);return ()=>clearInterval(d)},[]),{marketData:e,isLoading:i,fundingCountdown:s}}function Cr(t,e){if(Array.isArray(t)){let r=t.find(s=>!s||typeof s!="object"?false:s.symbol===e);return r&&typeof r=="object"?r:null}return t&&typeof t=="object"?t:null}function j(t,e){return typeof t=="number"&&Number.isFinite(t)?t:e}function Nr(t,e,r){return {symbol:e.symbol??t?.symbol??r,price:j(e.price,t?.price??0),change24h:j(e.change24h,t?.change24h??0),volume24h:j(e.volume24h,t?.volume24h??0),fundingRate:j(e.fundingRate,t?.fundingRate??0),openInterest:j(e.openInterest,t?.openInterest??0),markPrice:j(e.markPrice,t?.markPrice??0),indexPrice:typeof e.indexPrice=="number"&&Number.isFinite(e.indexPrice)?e.indexPrice:t?.indexPrice,high24h:typeof e.high24h=="number"&&Number.isFinite(e.high24h)?e.high24h:t?.high24h,low24h:typeof e.low24h=="number"&&Number.isFinite(e.low24h)?e.low24h:t?.low24h}}function wr(t){let e=Math.floor(t/3600),r=Math.floor(t%3600/60),s=t%60;return `${String(e).padStart(2,"0")}:${String(r).padStart(2,"0")}:${String(s).padStart(2,"0")}`}function Ft(t,e=2){return typeof t!="number"||!Number.isFinite(t)?"-":t>=1e9?`$${(t/1e9).toFixed(e)}B`:t>=1e6?`$${(t/1e6).toFixed(e)}M`:t>=1e3?`$${(t/1e3).toFixed(e)}K`:`$${t.toFixed(e)}`}function It(t){return typeof t!="number"||!Number.isFinite(t)?"-":t>=1e3?t.toLocaleString("en-US",{minimumFractionDigits:0,maximumFractionDigits:0}):t>=1?t.toLocaleString("en-US",{minimumFractionDigits:2,maximumFractionDigits:4}):t.toFixed(6)}function De({marketData:t,fundingCountdown:e}){let{symbol:r,price:s,change24h:n,indexPrice:o,volume24h:i,openInterest:a,fundingRate:l}=t,c=typeof n=="number"&&Number.isFinite(n)?n:0,d=typeof l=="number"&&Number.isFinite(l)?l:0,f=c>=0,m=c.toFixed(2);return jsxRuntime.jsxs("div",{className:"flex items-center gap-4 px-4",style:{minHeight:64,maxHeight:64},children:[jsxRuntime.jsxs("div",{className:"flex items-baseline gap-2",children:[jsxRuntime.jsx("span",{className:"text-white",style:{fontSize:18,fontWeight:500,lineHeight:"23px"},children:It(s)}),jsxRuntime.jsxs("span",{className:ui.cn(f?"text-green-500":"text-red-500"),style:{fontSize:12},children:[f?"+":"",m,"%"]})]}),jsxRuntime.jsxs("div",{className:"flex items-center gap-4",style:{fontSize:13},children:[jsxRuntime.jsxs("div",{className:"flex flex-col",children:[jsxRuntime.jsx("span",{style:{fontSize:12,color:"#c8c9d1"},children:"Oracle Price"}),jsxRuntime.jsx("span",{className:"text-white",style:{fontSize:13,fontWeight:400},children:o?It(o):"-"})]}),jsxRuntime.jsxs("div",{className:"flex flex-col",children:[jsxRuntime.jsx("span",{style:{fontSize:12,color:"#c8c9d1"},children:"24h Volume"}),jsxRuntime.jsx("span",{className:"text-white",style:{fontSize:13,fontWeight:400},children:Ft(i)})]}),jsxRuntime.jsxs("div",{className:"flex flex-col",children:[jsxRuntime.jsx("span",{style:{fontSize:12,color:"#c8c9d1"},children:"Open Interest"}),jsxRuntime.jsx("span",{className:"text-white",style:{fontSize:13,fontWeight:400},children:Ft(a*(t.markPrice||s))})]}),jsxRuntime.jsxs("div",{className:"flex flex-col",children:[jsxRuntime.jsx("span",{style:{fontSize:12,color:"#c8c9d1"},children:"Funding / Countdown"}),jsxRuntime.jsxs("div",{className:"flex items-center gap-2",children:[jsxRuntime.jsxs("span",{className:ui.cn(d>=0?"text-green-500":"text-red-500"),style:{fontSize:13},children:[(d*100).toFixed(5),"%"]}),jsxRuntime.jsx("span",{style:{fontSize:13,color:"#c8c9d1"},children:wr(e)})]})]})]})]})}function Tr({symbol:t}){let{marketData:e,isLoading:r,fundingCountdown:s}=Re(t);return r?jsxRuntime.jsx(Fe,{}):e?jsxRuntime.jsx(De,{marketData:e,fundingCountdown:s}):jsxRuntime.jsx(Me,{})}function ze({onSelectCoin:t}={}){let[e,r]=react.useState(""),[s,n]=react.useState([]),{data:o,isPending:i}=he(),{data:a,isPending:l}=Pe({symbols:o},{enabled:!!o&&o.length>0});react.useEffect(()=>{a&&n(a);},[a]);let c=react.useMemo(()=>{if(!e.trim())return s;let f=e.toLowerCase().trim();return s.filter(m=>m.symbol.toLowerCase().includes(f))},[s,e]);return {coins:s,isLoading:i||l,searchQuery:e,setSearchQuery:r,filteredCoins:c,handleSelectCoin:f=>{t?.(f);}}}function Et(t,e=2){return t>=1e9?`$${(t/1e9).toFixed(e)}B`:t>=1e6?`$${(t/1e6).toFixed(e)}M`:t>=1e3?`$${(t/1e3).toFixed(e)}K`:`$${t.toFixed(e)}`}function zr(t){return t>=1e3?t.toFixed(2):t>=1?t.toFixed(4):t.toFixed(6)}function Qe({coins:t,searchQuery:e,onSearchChange:r,onSelectCoin:s,isLoading:n}){return jsxRuntime.jsxs("div",{className:"flex flex-col h-full bg-neutral-950",children:[jsxRuntime.jsx("div",{className:"p-3 border-b border-neutral-800",children:jsxRuntime.jsx(ui.Input,{type:"text",placeholder:"Search coins...",value:e,onChange:o=>r(o.target.value),startContent:jsxRuntime.jsx(ui.SearchIcon,{className:"w-4 h-4 text-neutral-400"}),classNames:{input:"text-sm",inputWrapper:"bg-neutral-900 border-neutral-800"}})}),jsxRuntime.jsx("div",{className:"flex-1 overflow-hidden",children:jsxRuntime.jsxs(ui.StyledTable,{isVirtualized:true,radius:"none",className:"h-full",classNames:{wrapper:"bg-neutral-950",th:"bg-neutral-900 text-neutral-400 text-xs font-medium",td:"text-sm"},maxTableHeight:600,rowHeight:48,"aria-label":"Search Coins",children:[jsxRuntime.jsxs(ui.TableHeader,{children:[jsxRuntime.jsx(ui.TableColumn,{width:140,children:"Token"},"token"),jsxRuntime.jsx(ui.TableColumn,{width:100,align:"end",children:"Last Price"},"lastPrice"),jsxRuntime.jsx(ui.TableColumn,{width:100,align:"end",children:"24h Change"},"change24h"),jsxRuntime.jsx(ui.TableColumn,{width:100,align:"end",children:"8h Funding"},"fundingRate"),jsxRuntime.jsx(ui.TableColumn,{width:100,align:"end",children:"24h Volume"},"volume24h"),jsxRuntime.jsx(ui.TableColumn,{width:100,align:"end",children:"Open Interest"},"openInterest")]}),jsxRuntime.jsx(ui.TableBody,{items:t,isLoading:n,emptyContent:jsxRuntime.jsx("div",{className:"flex flex-col items-center justify-center py-10",children:jsxRuntime.jsx("span",{className:"text-neutral-400 text-sm",children:e?"No coins found":"No coins available"})}),children:o=>{let i=o.change24h>=0,a=o.change24h.toFixed(2),l=(o.fundingRate*100).toFixed(4),c=o.fundingRate>=0;return jsxRuntime.jsxs(ui.TableRow,{onClick:()=>s(o.symbol),className:"cursor-pointer hover:bg-neutral-900/50 transition-colors",children:[jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsxs("div",{className:"flex items-center gap-2",children:[jsxRuntime.jsx("div",{className:"w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center",children:jsxRuntime.jsx("span",{className:"text-xs font-semibold text-white",children:o.symbol.charAt(0)})}),jsxRuntime.jsx("span",{className:"font-medium text-white",children:o.symbol})]})}),jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsx("span",{className:"text-white font-medium",children:zr(o.price)})}),jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsxs("span",{className:ui.cn("font-medium",i?"text-green-500":"text-red-500"),children:[i?"+":"",a,"%"]})}),jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsxs("span",{className:ui.cn("font-medium",c?"text-green-500":"text-red-500"),children:[l,"%"]})}),jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsx("span",{className:"text-neutral-300",children:Et(o.volume24h)})}),jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsx("span",{className:"text-neutral-300",children:Et(o.openInterest*o.price)})})]},o.symbol)}})]})})]})}function Qr({onSelectCoin:t,className:e}){let{filteredCoins:r,isLoading:s,searchQuery:n,setSearchQuery:o,handleSelectCoin:i}=ze({onSelectCoin:t});return jsxRuntime.jsx("div",{className:e,children:jsxRuntime.jsx(Qe,{coins:r,searchQuery:n,onSearchChange:o,onSelectCoin:i,isLoading:s})})}function qt(t,e){if(e<=0)return t;let r=new Map;return t.forEach(s=>{let n=Math.floor(s.price/e)*e,o=r.get(n);o?(o.quantity+=s.quantity,s.count&&(o.count=(o.count||0)+s.count)):r.set(n,{price:n,quantity:s.quantity,count:s.count});}),Array.from(r.values())}function Bt(t){let e=0,r=t.map(n=>{let o=n.quantity*n.price;return e+=o,{...n,quantity:o,total:e,percentage:0}}),s=e;return r.map(n=>({...n,percentage:s>0?n.total/s*100:0}))}function qe({symbol:t,maxLevel:e=20,precision:r=.01}){let[s,n]=react.useState(null),[o,i]=react.useState(r),{data:a,isPending:l}=ve({symbol:t,maxLevel:e}),{data:c}=K({type:"orderBook",symbol:t,enabled:!!a});return react.useEffect(()=>{c?n(c):a&&n(a);},[c,a]),{...react.useMemo(()=>{if(!s)return {bids:[],asks:[],spread:0,spreadPercentage:0};let f=qt(s.bids,o),m=qt(s.asks,o),p=f.sort((W,D)=>D.price-W.price).slice(0,e),b=m.sort((W,D)=>W.price-D.price).slice(0,e),y=Bt(p),N=Bt(b),h=y[0]?.price||0,I=(N[0]?.price||0)-h,A=h>0?I/h*100:0;return {bids:y,asks:N,spread:I,spreadPercentage:A}},[s,o,e]),isLoading:l,precision:o,setPrecision:i}}function Lr(t){return t>=1e3?t.toLocaleString("en-US",{minimumFractionDigits:0,maximumFractionDigits:0}):t>=1?t.toLocaleString("en-US",{minimumFractionDigits:2,maximumFractionDigits:4}):t.toFixed(6)}function Lt(t){return Math.round(t).toLocaleString("en-US")}function At({price:t,quantity:e,total:r,percentage:s,side:n,onClick:o}){let i=n==="ask";return jsxRuntime.jsxs("div",{className:"relative flex items-center cursor-pointer hover:bg-white/5 transition-colors",style:{height:22,minHeight:22,maxHeight:22,padding:"0 16px",gap:16,fontSize:11},onClick:o,children:[jsxRuntime.jsx("div",{className:"absolute left-0 top-0",style:{height:20,width:`${s}%`,background:i?"linear-gradient(to right, rgba(209,57,236,0), rgb(236,57,122))":"linear-gradient(to right, rgba(47,194,227,0), rgb(47,227,172))",opacity:.15}}),jsxRuntime.jsx("div",{className:"relative z-10 flex items-center",style:{flex:"1 1 0%"},children:jsxRuntime.jsx("span",{style:{color:i?"#ec397a":"#2fe3ac",fontWeight:400},children:Lr(t)})}),jsxRuntime.jsx("div",{className:"relative z-10 flex items-center justify-end",style:{flex:"1 1 0%",color:"#fcfcfc"},children:Lt(e)}),jsxRuntime.jsx("div",{className:"relative z-10 flex items-center justify-end",style:{flex:"1 1 0%",color:"#fcfcfc"},children:Lt(r)})]})}function Be({bids:t,asks:e,spread:r,spreadPercentage:s,onPriceClick:n}){let o=[...e].reverse();return jsxRuntime.jsxs("div",{className:"flex flex-col h-full",style:{backgroundColor:"#06070b",fontSize:11},children:[jsxRuntime.jsxs("div",{className:"flex items-center",style:{height:28,minHeight:28,padding:"0 16px",gap:16,color:"#777a8c",fontSize:11},children:[jsxRuntime.jsx("div",{className:"flex items-center",style:{flex:"1 1 0%"},children:"Price"}),jsxRuntime.jsx("div",{className:"flex items-center justify-end",style:{flex:"1 1 0%"},children:"Amount (USD)"}),jsxRuntime.jsx("div",{className:"flex items-center justify-end",style:{flex:"1 1 0%"},children:"Total (USD)"})]}),jsxRuntime.jsx("div",{className:"flex-1 flex flex-col-reverse overflow-hidden",children:o.map((i,a)=>jsxRuntime.jsx(At,{price:i.price,quantity:i.quantity,total:i.total,percentage:i.percentage,side:"ask",onClick:()=>n?.(i.price)},`ask-${i.price}-${a}`))}),jsxRuntime.jsx("div",{className:"flex items-center justify-center",style:{height:24,minHeight:24,padding:"0 16px",backgroundColor:"rgba(34,36,45,0.5)"},children:jsxRuntime.jsxs("div",{className:"flex items-center",style:{gap:12,fontSize:12,color:"#fcfcfc"},children:[jsxRuntime.jsx("span",{style:{color:"#fcfcfc"},children:"Spread:"}),jsxRuntime.jsx("button",{type:"button",className:"hover:text-white transition-colors cursor-pointer",style:{color:"#fcfcfc",fontWeight:400,background:"none",border:"none",padding:0},onClick:()=>n?.(r),children:r>=1?Math.round(r).toLocaleString("en-US"):r.toFixed(4)}),jsxRuntime.jsxs("span",{style:{color:"#fcfcfc"},children:[s.toFixed(3),"%"]})]})}),jsxRuntime.jsx("div",{className:"flex-1 overflow-hidden",children:t.map((i,a)=>jsxRuntime.jsx(At,{price:i.price,quantity:i.quantity,total:i.total,percentage:i.percentage,side:"bid",onClick:()=>n?.(i.price)},`bid-${i.price}-${a}`))})]})}function Ar(){return jsxRuntime.jsxs("div",{className:"flex flex-col h-full bg-neutral-950 p-2 gap-1",children:[Array.from({length:15}).map((t,e)=>jsxRuntime.jsxs("div",{className:"flex justify-between",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-20 rounded"}),jsxRuntime.jsxs("div",{className:"flex gap-2",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"})]})]},`ask-skeleton-${e}`)),jsxRuntime.jsx("div",{className:"py-2",children:jsxRuntime.jsx(ui.Skeleton,{className:"h-6 w-40 mx-auto rounded"})}),Array.from({length:15}).map((t,e)=>jsxRuntime.jsxs("div",{className:"flex justify-between",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-20 rounded"}),jsxRuntime.jsxs("div",{className:"flex gap-2",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"})]})]},`bid-skeleton-${e}`))]})}function Wr(){return jsxRuntime.jsx("div",{className:"flex items-center justify-center h-full bg-neutral-950",children:jsxRuntime.jsx("span",{className:"text-neutral-400 text-sm",children:"No order book data available"})})}function $r({symbol:t,maxLevel:e=20,onPriceClick:r,className:s}){let{bids:n,asks:o,spread:i,spreadPercentage:a,isLoading:l}=qe({symbol:t,maxLevel:e});return l?jsxRuntime.jsx(Ar,{}):n.length===0&&o.length===0?jsxRuntime.jsx(Wr,{}):jsxRuntime.jsx("div",{className:s,children:jsxRuntime.jsx(Be,{bids:n,asks:o,spread:i,spreadPercentage:a,onPriceClick:r})})}function Le({symbol:t,limit:e=50}){let[r,s]=react.useState([]),{data:n,isPending:o}=Se({symbol:t,limit:e}),{data:i}=K({type:"trades",symbol:t,enabled:!!n});return react.useEffect(()=>{n&&s(n.filter($t));},[n]),react.useEffect(()=>{i&&s(a=>{let l=Kr(i);if(l.length===0)return a;let c=l.filter(f=>!a.some(m=>m.timestamp===f.timestamp&&m.price===f.price&&m.quantity===f.quantity));return c.length===0?a:[...c,...a].slice(0,e)});},[i,e]),{trades:r,isLoading:o}}function Kr(t){return (Array.isArray(t)?t:[t]).filter($t)}function $t(t){return t?typeof t.symbol=="string"&&(t.side==="buy"||t.side==="sell")&&typeof t.price=="number"&&Number.isFinite(t.price)&&typeof t.quantity=="number"&&Number.isFinite(t.quantity)&&typeof t.timestamp=="number"&&Number.isFinite(t.timestamp):false}function Vr(t){return typeof t!="number"||!Number.isFinite(t)?"-":t>=1e3?t.toFixed(2):t>=1?t.toFixed(4):t.toFixed(6)}function Ht(t){return typeof t!="number"||!Number.isFinite(t)?"-":t>=1e6?(t/1e6).toFixed(2)+"M":t>=1e3?(t/1e3).toFixed(2)+"K":t.toFixed(2)}function _r(t){if(typeof t!="number"||!Number.isFinite(t))return "-";let e=new Date(t),r=String(e.getHours()).padStart(2,"0"),s=String(e.getMinutes()).padStart(2,"0"),n=String(e.getSeconds()).padStart(2,"0");return `${r}:${s}:${n}`}function We({trades:t,onTradeClick:e}){return jsxRuntime.jsxs("div",{className:"flex flex-col h-full overflow-auto",style:{backgroundColor:"#06070b",fontSize:11},children:[jsxRuntime.jsxs("div",{className:"sticky top-0 z-10 flex items-center",style:{height:28,minHeight:28,padding:"0 16px",gap:16,color:"#c8c9d1",fontSize:11},children:[jsxRuntime.jsx("div",{className:"flex-1",style:{maxWidth:100},children:"Price"}),jsxRuntime.jsx("div",{className:"flex-1 text-right",children:"Amount"}),jsxRuntime.jsx("div",{className:"flex-1 text-right",style:{maxWidth:100},children:"Total"}),jsxRuntime.jsx("div",{className:"flex-1 text-right",style:{maxWidth:70},children:"Time"})]}),jsxRuntime.jsx("div",{className:"flex-1",children:t.map((r,s)=>{let n=r.side==="buy",o=typeof r.price=="number"&&Number.isFinite(r.price)&&typeof r.quantity=="number"&&Number.isFinite(r.quantity)?r.price*r.quantity:void 0;return jsxRuntime.jsxs("div",{className:"flex items-center cursor-pointer hover:bg-white/5 transition-colors",style:{height:22,minHeight:22,maxHeight:22,padding:"0 16px",gap:16,fontSize:11},onClick:()=>e?.(r),children:[jsxRuntime.jsx("div",{className:"flex-1",style:{maxWidth:100},children:jsxRuntime.jsx("span",{style:{color:n?"#2fe3ac":"#ec397a",fontWeight:400},children:Vr(r.price)})}),jsxRuntime.jsx("div",{className:"flex-1 text-right",style:{color:"#fcfcfc"},children:Ht(r.quantity)}),jsxRuntime.jsx("div",{className:"flex-1 text-right",style:{maxWidth:100,color:"#fcfcfc"},children:Ht(o)}),jsxRuntime.jsx("div",{className:"flex-1 text-right",style:{maxWidth:70,color:"#c8c9d1"},children:_r(r.timestamp)})]},`${r.timestamp}-${r.price}-${s}`)})})]})}function Gr(){return jsxRuntime.jsxs("div",{className:"flex flex-col h-full bg-neutral-950 p-2 gap-1",children:[jsxRuntime.jsxs("div",{className:"flex justify-between mb-2",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-4 w-16 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-4 w-16 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-4 w-16 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-4 w-16 rounded"})]}),Array.from({length:20}).map((t,e)=>jsxRuntime.jsxs("div",{className:"flex justify-between",children:[jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-20 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"}),jsxRuntime.jsx(ui.Skeleton,{className:"h-5 w-16 rounded"})]},`trade-skeleton-${e}`))]})}function jr(){return jsxRuntime.jsx("div",{className:"flex items-center justify-center h-full bg-neutral-950",children:jsxRuntime.jsx("span",{className:"text-neutral-400 text-sm",children:"No recent trades"})})}function Jr({symbol:t,limit:e=50,onTradeClick:r,className:s}){let{trades:n,isLoading:o}=Le({symbol:t,limit:e});return o?jsxRuntime.jsx(Gr,{}):n.length===0?jsxRuntime.jsx(jr,{}):jsxRuntime.jsx("div",{className:s,children:jsxRuntime.jsx(We,{trades:n,onTradeClick:r})})}function He({symbol:t,userAddress:e,maxLeverage:r=150,onSuccess:s,onError:n}){let[o,i]=react.useState("long"),[a,l]=react.useState("market"),c=reactHookForm.useForm({defaultValues:{amount:0,leverage:20,takeProfitPrice:void 0,takeProfitPercent:void 0,stopLossPrice:void 0,stopLossPercent:void 0}}),{data:d}=oe({symbol:t}),{mutateAsync:f,isPending:m}=ie({onSuccess:()=>{c.reset(),s?.();},onError:C=>{n?.(C);}}),p=c.watch(),{amount:b,leverage:y,price:N}=p,h=react.useMemo(()=>a==="limit"&&N?N:d?.price||0,[a,N,d?.price]),q=react.useMemo(()=>!b||!h?0:b*h*5e-4,[b,h]),I=react.useMemo(()=>!b||!h?0:b*h+q,[b,h,q]),A=react.useMemo(()=>{if(!b||!h||!y||y===1)return;let C=.005,G=h;return o==="long"?G*(1-(1/y-C)):G*(1+(1/y-C))},[b,h,y,o]),W=1e4,D=1e4,ye=0,U=react.useCallback(async C=>{if(!e)throw new Error("User address is required");let G=a==="limit"?C.price:void 0,ge=C.takeProfitPrice,be=C.stopLossPrice;if(!ge&&C.takeProfitPercent&&C.takeProfitPercent>0&&h){let se=C.takeProfitPercent/100;ge=o==="long"?h*(1+se):h*(1-se);}if(!be&&C.stopLossPercent&&C.stopLossPercent>0&&h){let se=C.stopLossPercent/100;be=o==="long"?h*(1-se):h*(1+se);}await f({symbol:t,side:o,orderType:a,amount:C.amount,price:G,leverage:C.leverage,takeProfitPrice:ge,stopLossPrice:be,userAddress:e});},[t,o,a,h,e,f]);return {form:c,side:o,orderType:a,setSide:i,setOrderType:l,handleSubmit:U,isSubmitting:m,currentPrice:h,estimatedFee:q,estimatedTotal:I,liquidationPrice:A,availableMargin:W,accountValue:D,currentPosition:ye,maxLeverage:r}}function pe(t,e=2){return t.toFixed(e)}function rs({leverage:t,maxLeverage:e,onLeverageChange:r,onClose:s}){let n=[1,2,3,5,10,20,25,50,100].filter(o=>o<=e);return jsxRuntime.jsxs("div",{className:"fixed inset-0 z-50 flex items-center justify-center",children:[jsxRuntime.jsx("div",{className:"absolute inset-0 bg-black/60",onClick:s,onKeyDown:o=>o.key==="Escape"&&s(),role:"button",tabIndex:-1,"aria-label":"Close"}),jsxRuntime.jsxs("div",{className:"relative z-10 w-72 bg-neutral-900 border border-neutral-700 rounded-lg p-4 shadow-2xl",children:[jsxRuntime.jsxs("div",{className:"flex items-center justify-between mb-4",children:[jsxRuntime.jsx("h3",{className:"text-sm font-medium text-white",children:"Adjust Leverage"}),jsxRuntime.jsx("button",{type:"button",onClick:s,className:"text-neutral-400 hover:text-white",children:jsxRuntime.jsx("svg",{className:"w-4 h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,children:jsxRuntime.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"})})})]}),jsxRuntime.jsxs("div",{className:"text-center text-2xl font-bold text-white mb-4",children:[t,"x"]}),jsxRuntime.jsx(ui.Slider,{value:[t],onChange:o=>r(Array.isArray(o)?o[0]:o),minValue:1,maxValue:e,step:1,className:"w-full mb-3"}),jsxRuntime.jsx("div",{className:"flex flex-wrap gap-1.5",children:n.map(o=>jsxRuntime.jsxs("button",{type:"button",className:ui.cn("px-2.5 py-1 text-xs rounded transition-colors",t===o?"bg-green-600 text-white":"bg-neutral-800 text-neutral-400 hover:bg-neutral-700"),onClick:()=>r(o),children:[o,"x"]},o))}),jsxRuntime.jsx("button",{type:"button",className:"w-full mt-4 text-white h-9 rounded cursor-pointer transition-colors",style:{backgroundColor:"#16a34a"},onClick:s,children:"Confirm"})]})]})}function Ke({methods:t,side:e,orderType:r,onSideChange:s,onOrderTypeChange:n,onSubmit:o,isSubmitting:i,symbol:a,currentPrice:l,estimatedFee:c,liquidationPrice:d,availableMargin:f,accountValue:m,currentPosition:p,maxLeverage:b}){let[y,N]=react.useState(false),[h,q]=react.useState(false),I=t.watch("leverage")||20,A=t.watch("amount")||0,W=a.split("-")[0],D=f>0&&l?Math.min(A*l/(f*I)*100,100):0,ye=U=>{let C=(Array.isArray(U)?U[0]:U)/100;if(l&&l>0){let G=f*I*C/l;t.setValue("amount",Number(G.toFixed(6)));}};return jsxRuntime.jsxs("div",{className:"flex flex-col h-full",style:{backgroundColor:"#06070b"},children:[jsxRuntime.jsxs("div",{className:"flex-1 overflow-y-auto",style:{padding:"16px 16px",display:"flex",flexDirection:"column",gap:16},children:[jsxRuntime.jsxs("div",{className:"flex",style:{gap:4},children:[jsxRuntime.jsx("button",{type:"button",className:"flex-1 cursor-pointer transition-colors",style:{height:32,fontSize:12,borderRadius:4,backgroundColor:e==="long"?"#2fe3ac":"transparent",color:e==="long"?"#090909":"#c8c9d1",fontWeight:e==="long"?700:500},onClick:()=>s("long"),children:"Long"}),jsxRuntime.jsx("button",{type:"button",className:"flex-1 cursor-pointer transition-colors",style:{height:32,fontSize:12,borderRadius:4,backgroundColor:e==="short"?"#ec397a":"transparent",color:e==="short"?"#090909":"#c8c9d1",fontWeight:e==="short"?700:500},onClick:()=>s("short"),children:"Short"})]}),jsxRuntime.jsxs("div",{className:"flex items-center",style:{gap:8},children:[jsxRuntime.jsxs("div",{className:"flex",style:{gap:4},children:[jsxRuntime.jsx("button",{type:"button",className:"cursor-pointer transition-colors",style:{height:24,padding:"0 8px",fontSize:12,borderRadius:4,backgroundColor:"transparent",color:r==="market"?"#fcfcfc":"#c8c9d1",fontWeight:500,border:"none",borderBottom:r==="market"?"2px solid #fcfcfc":"none"},onClick:()=>n("market"),children:"Market"}),jsxRuntime.jsx("button",{type:"button",className:"cursor-pointer transition-colors",style:{height:24,padding:"0 8px",fontSize:12,borderRadius:4,backgroundColor:"transparent",color:r==="limit"?"#fcfcfc":"#c8c9d1",fontWeight:500,border:"none",borderBottom:r==="limit"?"2px solid #fcfcfc":"none"},onClick:()=>n("limit"),children:"Limit"})]}),jsxRuntime.jsx("div",{className:"flex-1"}),jsxRuntime.jsxs("button",{type:"button",className:"cursor-pointer transition-colors",style:{height:24,padding:"0 5px",fontSize:12,borderRadius:4,backgroundColor:"rgba(34,36,45,0.5)",color:"#c8c9d1",fontWeight:500,border:"1px solid rgba(34,36,45,0.5)"},onClick:()=>N(true),children:["Leverage: ",I,"x"]})]}),jsxRuntime.jsx(ui.RHForm,{methods:t,onSubmit:o,children:jsxRuntime.jsxs("div",{className:"space-y-3 w-full",children:[r==="limit"&&jsxRuntime.jsxs("div",{children:[jsxRuntime.jsxs("div",{className:"flex justify-between items-center mb-1",children:[jsxRuntime.jsx("span",{className:"text-xs text-neutral-400",children:"Price"}),jsxRuntime.jsx("span",{className:"text-xs text-neutral-500",children:"USDC"})]}),jsxRuntime.jsx(ui.RHNumberInput,{name:"price",placeholder:"0.0",className:"w-full",endContent:jsxRuntime.jsx("span",{className:"text-neutral-500 text-xs",children:"USDC"})})]}),jsxRuntime.jsxs("div",{children:[jsxRuntime.jsxs("div",{className:"flex justify-between items-center mb-1",children:[jsxRuntime.jsx("span",{style:{fontSize:12,color:"#777a8c"},children:"Buy Amount"}),jsxRuntime.jsx("span",{style:{fontSize:12,color:"#777a8c"},children:W})]}),jsxRuntime.jsx("div",{className:"perp-buy-amt",style:{borderRadius:4,padding:8,backgroundColor:"rgba(34,36,45,0.5)",border:"1px solid rgb(34,36,45)",height:64},children:jsxRuntime.jsx(ui.RHNumberInput,{name:"amount",placeholder:"0.0 USDC",className:"w-full"})})]}),jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx("style",{children:`
|
|
2
2
|
.perp-buy-amt input { font-size: 18px !important; }
|
|
3
3
|
.perp-slider { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; width: 100%; height: 16px; }
|
|
4
4
|
.perp-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #22242d; }
|