@pear-protocol/hyperliquid-sdk 0.0.72 → 0.0.73

package/dist/index.js

@@ -1,6 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useCallback, useEffect, useMemo, useContext, createContext } from 'react';
-import { create } from 'zustand';
+import React, { useState, useRef, useCallback, useEffect, useMemo, useContext, createContext } from 'react';
 
 // Browser-compatible WebSocket ready state enum (mirrors native values)
 var ReadyState;
@@ -11,6 +10,47 @@ var ReadyState;
     ReadyState[ReadyState["CLOSED"] = 3] = "CLOSED";
 })(ReadyState || (ReadyState = {}));
 
+const createStoreImpl = (createState) => {
+  let state;
+  const listeners = /* @__PURE__ */ new Set();
+  const setState = (partial, replace) => {
+    const nextState = typeof partial === "function" ? partial(state) : partial;
+    if (!Object.is(nextState, state)) {
+      const previousState = state;
+      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
+      listeners.forEach((listener) => listener(state, previousState));
+    }
+  };
+  const getState = () => state;
+  const getInitialState = () => initialState;
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const api = { setState, getState, getInitialState, subscribe };
+  const initialState = state = createState(setState, getState, api);
+  return api;
+};
+const createStore = ((createState) => createState ? createStoreImpl(createState) : createStoreImpl);
+
+const identity = (arg) => arg;
+function useStore(api, selector = identity) {
+  const slice = React.useSyncExternalStore(
+    api.subscribe,
+    React.useCallback(() => selector(api.getState()), [api, selector]),
+    React.useCallback(() => selector(api.getInitialState()), [api, selector])
+  );
+  React.useDebugValue(slice);
+  return slice;
+}
+const createImpl = (createState) => {
+  const api = createStore(createState);
+  const useBoundStore = (selector) => useStore(api, selector);
+  Object.assign(useBoundStore, api);
+  return useBoundStore;
+};
+const create = ((createState) => createState ? createImpl(createState) : createImpl);
+
 const useUserData = create((set) => ({
     accessToken: null,
     refreshToken: null,
@@ -23,6 +63,7 @@ const useUserData = create((set) => ({
     twapDetails: null,
     notifications: null,
     userExtraAgents: null,
+    spotState: null,
     setAccessToken: (token) => set({ accessToken: token }),
     setRefreshToken: (token) => set({ refreshToken: token }),
     setIsAuthenticated: (value) => set({ isAuthenticated: value }),
@@ -43,6 +84,7 @@ const useUserData = create((set) => ({
     setAccountSummary: (value) => set({ accountSummary: value }),
     setTwapDetails: (value) => set({ twapDetails: value }),
     setNotifications: (value) => set({ notifications: value }),
+    setSpotState: (value) => set({ spotState: value }),
     clean: () => set({
         accessToken: null,
         refreshToken: null,
@@ -54,6 +96,7 @@ const useUserData = create((set) => ({
         accountSummary: null,
         twapDetails: null,
         notifications: null,
+        spotState: null,
     }),
     setUserExtraAgents: (value) => set({ userExtraAgents: value }),
 }));
@@ -71,18 +114,71 @@ const useMarketData = create((set) => ({
  * Convert a full/prefixed symbol (e.g., "xyz:XYZ100") to a display symbol (e.g., "XYZ100").
  */
 function toDisplaySymbol(symbol) {
-    const parts = symbol.split(":");
+    const parts = symbol.split(':');
     return parts.length > 1 ? parts.slice(-1)[0] : symbol;
 }
 /**
  * Convert a display symbol back to backend form using a provided map.
  * If mapping is missing, returns the original symbol.
- * @param displaySymbol e.g., "XYZ100"
- * @param displayToFull map of display -> full (e.g., "XYZ100" -> "xyz:XYZ100")
+ * For multi-market assets, returns the first available market.
+ * @param displaySymbol e.g., "TSLA"
+ * @param hip3Assets map of display -> all full market names (e.g., "TSLA" -> ["xyz:TSLA", "flx:TSLA"])
+ */
+function toBackendSymbol(displaySymbol, hip3Assets) {
+    const markets = hip3Assets.get(displaySymbol);
+    // Return first market if available, otherwise return original symbol
+    return markets && markets.length > 0 ? markets[0] : displaySymbol;
+}
+/**
+ * Convert a display symbol to backend form for a specific market prefix.
+ * This is useful when an asset is available on multiple markets (e.g., xyz:TSLA and flx:TSLA).
+ * @param displaySymbol e.g., "TSLA"
+ * @param marketPrefix e.g., "xyz" or "flx"
+ * @param hip3Assets map of display -> all full market names
+ * @returns Full market name if found, null if prefix not specified for multi-market asset, otherwise displaySymbol with prefix
+ */
+function toBackendSymbolWithMarket(displaySymbol, marketPrefix, hip3Assets) {
+    const availableMarkets = hip3Assets.get(displaySymbol);
+    if (!availableMarkets || availableMarkets.length === 0) {
+        // Not a HIP-3 asset, return as-is or with prefix if provided
+        return marketPrefix ? `${marketPrefix}:${displaySymbol}` : displaySymbol;
+    }
+    if (marketPrefix) {
+        // Find the market with the specified prefix
+        const targetMarket = availableMarkets.find((market) => market.toLowerCase().startsWith(`${marketPrefix.toLowerCase()}:`));
+        if (targetMarket) {
+            return targetMarket;
+        }
+    }
+    // No prefix specified or not found, return null to force explicit market selection
+    return null;
+}
+/**
+ * Get all available markets for a display symbol.
+ * @param displaySymbol e.g., "TSLA"
+ * @param hip3Assets map of display -> all full market names
+ * @returns Array of full market names, e.g., ["xyz:TSLA", "flx:TSLA"]
  */
-function toBackendSymbol(displaySymbol, displayToFull) {
+function getAvailableMarkets(displaySymbol, hip3Assets) {
     var _a;
-    return (_a = displayToFull.get(displaySymbol)) !== null && _a !== void 0 ? _a : displaySymbol;
+    return (_a = hip3Assets.get(displaySymbol)) !== null && _a !== void 0 ? _a : [];
+}
+/**
+ * Extract the market prefix from a full market name.
+ * @param fullSymbol e.g., "xyz:TSLA"
+ * @returns The prefix (e.g., "xyz") or undefined if no prefix
+ */
+function getMarketPrefix(fullSymbol) {
+    const parts = fullSymbol.split(':');
+    return parts.length > 1 ? parts[0] : undefined;
+}
+/**
+ * Check if a symbol is a HIP-3 market (has a prefix).
+ * @param symbol e.g., "xyz:TSLA" or "TSLA"
+ * @returns true if the symbol has a market prefix
+ */
+function isHip3Market(symbol) {
+    return symbol.includes(':');
 }
 
 const useHyperliquidWebSocket = ({ wsUrl, address, enabled = true, }) => {
@@ -99,7 +195,8 @@ const useHyperliquidWebSocket = ({ wsUrl, address, enabled = true, }) => {
         try {
             const message = JSON.parse(event.data);
             // Handle subscription responses (only if they don't have channel data)
-            if (('success' in message || 'error' in message) && !('channel' in message)) {
+            if (('success' in message || 'error' in message) &&
+                !('channel' in message)) {
                 if (message.error) {
                     setLastError(message.error);
                 }
@@ -118,12 +215,21 @@ const useHyperliquidWebSocket = ({ wsUrl, address, enabled = true, }) => {
                 switch (dataMessage.channel) {
                     case 'trade-histories':
                         {
+                            const mapAsset = (a) => {
+                                var _a, _b;
+                                const extractedPrefix = getMarketPrefix(a.coin);
+                                return {
+                                    ...a,
+                                    coin: toDisplaySymbol(a.coin),
+                                    marketPrefix: (_b = (_a = a.marketPrefix) !== null && _a !== void 0 ? _a : extractedPrefix) !== null && _b !== void 0 ? _b : null,
+                                };
+                            };
                             const list = dataMessage.data.map((item) => {
                                 var _a, _b;
                                 return ({
                                     ...item,
-                                    closedLongAssets: item.closedLongAssets.map((a) => ({ ...a, coin: toDisplaySymbol(a.coin) })),
-                                    closedShortAssets: item.closedShortAssets.map((a) => ({ ...a, coin: toDisplaySymbol(a.coin) })),
+                                    closedLongAssets: item.closedLongAssets.map(mapAsset),
+                                    closedShortAssets: item.closedShortAssets.map(mapAsset),
                                     positionLongAssets: (_a = item.positionLongAssets) === null || _a === void 0 ? void 0 : _a.map((a) => toDisplaySymbol(a)),
                                     positionShortAssets: (_b = item.positionShortAssets) === null || _b === void 0 ? void 0 : _b.map((a) => toDisplaySymbol(a)),
                                 });
@@ -133,10 +239,19 @@ const useHyperliquidWebSocket = ({ wsUrl, address, enabled = true, }) => {
                         break;
                     case 'open-positions':
                         {
+                            const enrichAsset = (a) => {
+                                var _a, _b;
+                                const extractedPrefix = getMarketPrefix(a.coin);
+                                return {
+                                    ...a,
+                                    coin: toDisplaySymbol(a.coin),
+                                    marketPrefix: (_b = (_a = a.marketPrefix) !== null && _a !== void 0 ? _a : extractedPrefix) !== null && _b !== void 0 ? _b : null,
+                                };
+                            };
                             const list = dataMessage.data.map((pos) => ({
                                 ...pos,
-                                longAssets: pos.longAssets.map((a) => ({ ...a, coin: toDisplaySymbol(a.coin) })),
-                                shortAssets: pos.shortAssets.map((a) => ({ ...a, coin: toDisplaySymbol(a.coin) })),
+                                longAssets: pos.longAssets.map(enrichAsset),
+                                shortAssets: pos.shortAssets.map(enrichAsset),
                             }));
                             setRawOpenPositions(list);
                         }
@@ -145,8 +260,14 @@ const useHyperliquidWebSocket = ({ wsUrl, address, enabled = true, }) => {
                         {
                             const list = dataMessage.data.map((order) => ({
                                 ...order,
-                                longAssets: order.longAssets.map((a) => ({ ...a, asset: toDisplaySymbol(a.asset) })),
-                                shortAssets: order.shortAssets.map((a) => ({ ...a, asset: toDisplaySymbol(a.asset) })),
+                                longAssets: order.longAssets.map((a) => ({
+                                    ...a,
+                                    asset: toDisplaySymbol(a.asset),
+                                })),
+                                shortAssets: order.shortAssets.map((a) => ({
+                                    ...a,
+                                    asset: toDisplaySymbol(a.asset),
+                                })),
                             }));
                             setOpenOrders(list);
                         }
@@ -156,10 +277,20 @@ const useHyperliquidWebSocket = ({ wsUrl, address, enabled = true, }) => {
                         break;
                     case 'twap-details':
                         {
+                            const mapTwapAsset = (a) => {
+                                var _a, _b, _c;
+                                const extractedPrefix = getMarketPrefix(a.asset);
+                                return {
+                                    ...a,
+                                    asset: toDisplaySymbol(a.asset),
+                                    marketPrefix: (_b = (_a = a.marketPrefix) !== null && _a !== void 0 ? _a : extractedPrefix) !== null && _b !== void 0 ? _b : null,
+                                    collateralToken: (_c = a.collateralToken) !== null && _c !== void 0 ? _c : undefined,
+                                };
+                            };
                             const list = dataMessage.data.map((twap) => ({
                                 ...twap,
-                                longAssets: twap.longAssets.map((a) => ({ ...a, asset: toDisplaySymbol(a.asset) })),
-                                shortAssets: twap.shortAssets.map((a) => ({ ...a, asset: toDisplaySymbol(a.asset) })),
+                                longAssets: twap.longAssets.map(mapTwapAsset),
+                                shortAssets: twap.shortAssets.map(mapTwapAsset),
                             }));
                             setTwapDetails(list);
                         }
@@ -172,8 +303,14 @@ const useHyperliquidWebSocket = ({ wsUrl, address, enabled = true, }) => {
                             const md = dataMessage.data;
                             const mapGroup = (g) => ({
                                 ...g,
-                                longAssets: g.longAssets.map((a) => ({ ...a, asset: toDisplaySymbol(a.asset) })),
-                                shortAssets: g.shortAssets.map((a) => ({ ...a, asset: toDisplaySymbol(a.asset) })),
+                                longAssets: g.longAssets.map((a) => ({
+                                    ...a,
+                                    asset: toDisplaySymbol(a.asset),
+                                })),
+                                shortAssets: g.shortAssets.map((a) => ({
+                                    ...a,
+                                    asset: toDisplaySymbol(a.asset),
+                                })),
                             });
                             const mapped = {
                                 active: md.active.map(mapGroup),
@@ -191,7 +328,15 @@ const useHyperliquidWebSocket = ({ wsUrl, address, enabled = true, }) => {
         catch (error) {
             setLastError(`Failed to parse message: ${error instanceof Error ? error.message : String(error)}`);
         }
-    }, [setTradeHistories, setRawOpenPositions, setOpenOrders, setAccountSummary, setTwapDetails, setNotifications, setMarketData]);
+    }, [
+        setTradeHistories,
+        setRawOpenPositions,
+        setOpenOrders,
+        setAccountSummary,
+        setTwapDetails,
+        setNotifications,
+        setMarketData,
+    ]);
     const connect = useCallback(() => {
         if (!enabled || !wsUrl)
             return;
@@ -260,7 +405,7 @@ const useHyperliquidWebSocket = ({ wsUrl, address, enabled = true, }) => {
             'open-orders',
             'twap-details',
             'fills-checkpoint',
-            'notifications'
+            'notifications',
         ];
         const globalChannels = ['market-data'];
         if (address && address !== lastSubscribedAddress) {
@@ -269,14 +414,14 @@ const useHyperliquidWebSocket = ({ wsUrl, address, enabled = true, }) => {
                 sendMessage(JSON.stringify({
                     action: 'unsubscribe',
                     address: lastSubscribedAddress,
-                    channels: addressSpecificChannels
+                    channels: addressSpecificChannels,
                 }));
             }
             // Subscribe to all channels (global + address-specific)
             sendMessage(JSON.stringify({
                 action: 'subscribe',
                 address: address,
-                channels: [...globalChannels, ...addressSpecificChannels]
+                channels: [...globalChannels, ...addressSpecificChannels],
             }));
             setLastSubscribedAddress(address);
             setLastError(null);
@@ -286,7 +431,7 @@ const useHyperliquidWebSocket = ({ wsUrl, address, enabled = true, }) => {
             sendMessage(JSON.stringify({
                 action: 'unsubscribe',
                 address: lastSubscribedAddress,
-                channels: addressSpecificChannels
+                channels: addressSpecificChannels,
             }));
             setLastSubscribedAddress(null);
         }
@@ -294,7 +439,7 @@ const useHyperliquidWebSocket = ({ wsUrl, address, enabled = true, }) => {
             // If no address but connected, subscribe to global channels only
             sendMessage(JSON.stringify({
                 action: 'subscribe',
-                channels: globalChannels
+                channels: globalChannels,
             }));
         }
     }, [isConnected, address, lastSubscribedAddress, sendMessage]);
@@ -317,11 +462,14 @@ const useHyperliquidData = create((set, get) => ({
     finalAssetContexts: null,
     finalAtOICaps: null,
     aggregatedClearingHouseState: null,
+    rawClearinghouseStates: null,
     perpMetaAssets: null,
-    hip3DisplayToFull: new Map(),
+    allPerpMetaAssets: null,
+    hip3Assets: new Map(),
+    hip3MarketPrefixes: new Map(),
     setAllMids: (value) => set({ allMids: value }),
     setActiveAssetData: (value) => set((state) => ({
-        activeAssetData: typeof value === 'function' ? value(state.activeAssetData) : value
+        activeAssetData: typeof value === 'function' ? value(state.activeAssetData) : value,
     })),
     deleteActiveAssetData: (key) => {
         set((state) => {
@@ -356,13 +504,16 @@ const useHyperliquidData = create((set, get) => ({
         activeAssetData: {
             ...state.activeAssetData,
             [key]: value,
-        }
+        },
     })),
     setFinalAssetContexts: (value) => set({ finalAssetContexts: value }),
     setFinalAtOICaps: (value) => set({ finalAtOICaps: value }),
     setAggregatedClearingHouseState: (value) => set({ aggregatedClearingHouseState: value }),
+    setRawClearinghouseStates: (value) => set({ rawClearinghouseStates: value }),
     setPerpMetaAssets: (value) => set({ perpMetaAssets: value }),
-    setHip3DisplayToFull: (value) => set({ hip3DisplayToFull: value })
+    setAllPerpMetaAssets: (value) => set({ allPerpMetaAssets: value }),
+    setHip3Assets: (value) => set({ hip3Assets: value }),
+    setHip3MarketPrefixes: (value) => set({ hip3MarketPrefixes: value }),
 }));
 
 /**
@@ -625,7 +776,8 @@ const useUserSelection$1 = create((set, get) => ({
 }));
 
 const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
-    const { setAllMids, setActiveAssetData, upsertActiveAssetData, setCandleData, deleteCandleSymbol, deleteActiveAssetData, addCandleData, setFinalAssetContexts, setFinalAtOICaps, setAggregatedClearingHouseState, } = useHyperliquidData();
+    const { setAllMids, setActiveAssetData, upsertActiveAssetData, setCandleData, deleteCandleSymbol, deleteActiveAssetData, addCandleData, setFinalAssetContexts, setFinalAtOICaps, setAggregatedClearingHouseState, setRawClearinghouseStates, } = useHyperliquidData();
+    const { setSpotState } = useUserData();
     const { candleInterval } = useUserSelection$1();
     const longTokens = useUserSelection$1((s) => s.longTokens);
     const shortTokens = useUserSelection$1((s) => s.shortTokens);
@@ -644,9 +796,9 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
         try {
             const message = JSON.parse(event.data);
             // Handle subscription responses
-            if ("success" in message || "error" in message) {
+            if ('success' in message || 'error' in message) {
                 if (message.error) {
-                    console.error("[HyperLiquid WS] Subscription error:", message.error);
+                    console.error('[HyperLiquid WS] Subscription error:', message.error);
                     setLastError(message.error);
                 }
                 else {
@@ -655,30 +807,44 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
                 return;
             }
             // Handle channel data messages
-            if ("channel" in message && "data" in message) {
+            if ('channel' in message && 'data' in message) {
                 const response = message;
                 switch (response.channel) {
-                    case "webData3":
+                    case 'webData3':
                         const webData3 = response.data;
                         // finalAssetContexts now sourced from allDexsAssetCtxs channel
                         const finalAtOICaps = webData3.perpDexStates.flatMap((dex) => dex.perpsAtOpenInterestCap);
                         setFinalAtOICaps(finalAtOICaps);
                         break;
-                    case "allDexsAssetCtxs":
+                    case 'allDexsAssetCtxs':
                         {
                             const data = response.data;
-                            const finalAssetContexts = (data.ctxs || []).flatMap(([, ctxs]) => ctxs || []);
+                            // Filter out hyna to match perpMetaAssets filtering
+                            const FILTERED_DEX_PREFIXES = ['hyna'];
+                            const filtered = (data.ctxs || [])
+                                .filter(([prefix]) => !FILTERED_DEX_PREFIXES.includes((prefix || '').toLowerCase()))
+                                .sort((a, b) => {
+                                // Sort to match perpMetaAssets order: default market first, then alphabetically
+                                const prefixA = a[0] || '';
+                                const prefixB = b[0] || '';
+                                if (prefixA === '' && prefixB !== '')
+                                    return -1;
+                                if (prefixA !== '' && prefixB === '')
+                                    return 1;
+                                return prefixA.localeCompare(prefixB);
+                            });
+                            const finalAssetContexts = filtered.flatMap(([, ctxs]) => ctxs || []);
                             setFinalAssetContexts(finalAssetContexts);
                         }
                         break;
-                    case "allDexsClearinghouseState":
+                    case 'allDexsClearinghouseState':
                         {
                             const data = response.data;
                             const states = (data.clearinghouseStates || [])
                                 .map(([, s]) => s)
                                 .filter(Boolean);
-                            const sum = (values) => values.reduce((acc, v) => acc + (parseFloat(v || "0") || 0), 0);
-                            const toStr = (n) => Number.isFinite(n) ? n.toString() : "0";
+                            const sum = (values) => values.reduce((acc, v) => acc + (parseFloat(v || '0') || 0), 0);
+                            const toStr = (n) => Number.isFinite(n) ? n.toString() : '0';
                             const assetPositions = states.flatMap((s) => s.assetPositions || []);
                             const crossMaintenanceMarginUsed = toStr(sum(states.map((s) => s.crossMaintenanceMarginUsed)));
                             const crossMarginSummary = {
@@ -704,22 +870,41 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
                                 withdrawable,
                             };
                             setAggregatedClearingHouseState(aggregatedClearingHouseState);
+                            setRawClearinghouseStates(data.clearinghouseStates || null);
                         }
                         break;
-                    case "allMids":
+                    case 'allMids':
                         {
                             const data = response.data;
-                            const remapped = {
-                                mids: Object.fromEntries(
-                                // only support non hip-3 and xyz market
-                                Object.entries(data.mids || {})
-                                    .filter(([k, v]) => !k.includes(":") || k.includes("xyz:"))
-                                    .map(([k, v]) => [toDisplaySymbol(k), v])),
-                            };
-                            setAllMids(remapped);
+                            // Keep BOTH normalized prefixed keys AND display symbol keys
+                            // This ensures xyz:TSLA and flx:TSLA are stored separately,
+                            // while also maintaining backward compatibility with non-prefixed lookups
+                            const mids = {};
+                            Object.entries(data.mids || {}).forEach(([k, v]) => {
+                                // Normalize prefixed keys to lowercase prefix (e.g., "XYZ:TSLA" -> "xyz:TSLA")
+                                // This matches how we look up tokens in the SDK
+                                let normalizedKey = k;
+                                if (k.includes(':')) {
+                                    const [prefix, ...rest] = k.split(':');
+                                    normalizedKey = `${prefix.toLowerCase()}:${rest.join(':')}`;
+                                }
+                                // Store with normalized key
+                                mids[normalizedKey] = v;
+                                // Also store with original key for backward compatibility
+                                if (k !== normalizedKey) {
+                                    mids[k] = v;
+                                }
+                                // Also store with display symbol for backward compatibility
+                                const displayKey = toDisplaySymbol(k);
+                                // Only set display key if it doesn't already exist (avoid overwriting market-specific prices)
+                                if (!(displayKey in mids)) {
+                                    mids[displayKey] = v;
+                                }
+                            });
+                            setAllMids({ mids });
                         }
                         break;
-                    case "activeAssetData":
+                    case 'activeAssetData':
                         {
                             const assetData = response.data;
                             const symbol = toDisplaySymbol(assetData.coin);
@@ -730,14 +915,22 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
                             upsertActiveAssetData(symbol, normalized);
                         }
                         break;
-                    case "candle":
+                    case 'candle':
                         {
                             const candleDataItem = response.data;
-                            const symbol = toDisplaySymbol(candleDataItem.s || "");
+                            const symbol = toDisplaySymbol(candleDataItem.s || '');
                             const normalized = { ...candleDataItem, s: symbol };
                             addCandleData(symbol, normalized);
                         }
                         break;
+                    case 'spotState':
+                        {
+                            const spotStateData = response.data;
+                            if (spotStateData === null || spotStateData === void 0 ? void 0 : spotStateData.spotState) {
+                                setSpotState(spotStateData.spotState);
+                            }
+                        }
+                        break;
                     default:
                         console.warn(`[HyperLiquid WS] Unknown channel: ${response.channel}`);
                 }
@@ -745,7 +938,7 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
         }
         catch (error) {
             const errorMessage = `Failed to parse message: ${error instanceof Error ? error.message : String(error)}`;
-            console.error("[HyperLiquid WS] Parse error:", errorMessage, "Raw message:", event.data);
+            console.error('[HyperLiquid WS] Parse error:', errorMessage, 'Raw message:', event.data);
             setLastError(errorMessage);
         }
     }, [
@@ -755,6 +948,8 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
         setFinalAssetContexts,
         setFinalAtOICaps,
         setAggregatedClearingHouseState,
+        setRawClearinghouseStates,
+        setSpotState,
     ]);
     const connect = useCallback(() => {
         if (!enabled)
@@ -785,7 +980,7 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
                 if (!manualCloseRef.current && reconnectAttemptsRef.current < 5) {
                     reconnectAttemptsRef.current += 1;
                     if (reconnectAttemptsRef.current === 5) {
-                        console.error("[HyperLiquid WS] Reconnection stopped after 5 attempts");
+                        console.error('[HyperLiquid WS] Reconnection stopped after 5 attempts');
                     }
                     setTimeout(() => connect(), 3000);
                 }
@@ -853,6 +1048,17 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
                 },
             };
             sendJsonMessage(unsubscribeMessage);
+            // Unsubscribe from spotState for previous address
+            if (subscribedAddress !== DEFAULT_ADDRESS) {
+                const unsubscribeSpotState = {
+                    method: 'unsubscribe',
+                    subscription: {
+                        type: 'spotState',
+                        user: subscribedAddress,
+                    },
+                };
+                sendJsonMessage(unsubscribeSpotState);
+            }
             const unsubscribeAllDexsClearinghouseState = {
                 method: "unsubscribe",
                 subscription: {
@@ -896,11 +1102,26 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
         sendJsonMessage(subscribeAllDexsClearinghouseState);
         sendJsonMessage(subscribeAllMids);
         sendJsonMessage(subscribeAllDexsAssetCtxs);
+        // Subscribe to spotState for real-time spot balances (USDH, USDC, etc.)
+        // Only subscribe if we have a real user address (not the default)
+        if (userAddress !== DEFAULT_ADDRESS) {
+            const subscribeSpotState = {
+                method: 'subscribe',
+                subscription: {
+                    type: 'spotState',
+                    user: userAddress,
+                },
+            };
+            sendJsonMessage(subscribeSpotState);
+        }
         setSubscribedAddress(userAddress);
         // Clear previous data when address changes
         if (subscribedAddress && subscribedAddress !== userAddress) {
             // clear aggregatedClearingHouseState
             setAggregatedClearingHouseState(null);
+            setRawClearinghouseStates(null);
+            // clear spotState
+            setSpotState(null);
         }
     }, [
         isConnected,
@@ -908,6 +1129,8 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
         subscribedAddress,
         sendJsonMessage,
         setAggregatedClearingHouseState,
+        setRawClearinghouseStates,
+        setSpotState,
     ]);
     // Handle token subscriptions for activeAssetData
     useEffect(() => {
@@ -1104,20 +1327,112 @@ const useAccountSummary = () => {
     return { data: calculated, isLoading };
 };
 
+function findAssetMeta$4(coinName, perpMetaAssets, knownPrefix, desiredCollateral) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    if (!perpMetaAssets) {
+        return { collateralToken: 'USDC', marketPrefix: null };
+    }
+    if (desiredCollateral) {
+        const collateralMatch = perpMetaAssets.find((a) => a.name === coinName && a.collateralToken === desiredCollateral);
+        if (collateralMatch) {
+            return {
+                collateralToken: (_a = collateralMatch.collateralToken) !== null && _a !== void 0 ? _a : 'USDC',
+                marketPrefix: (_b = collateralMatch.marketPrefix) !== null && _b !== void 0 ? _b : null,
+            };
+        }
+    }
+    if (coinName.includes(':')) {
+        const [prefix, symbol] = coinName.split(':');
+        const exactMatch = perpMetaAssets.find((a) => {
+            var _a;
+            return a.name === symbol &&
+                ((_a = a.marketPrefix) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === prefix.toLowerCase();
+        });
+        if (exactMatch) {
+            return {
+                collateralToken: (_c = exactMatch.collateralToken) !== null && _c !== void 0 ? _c : 'USDC',
+                marketPrefix: (_d = exactMatch.marketPrefix) !== null && _d !== void 0 ? _d : null,
+            };
+        }
+    }
+    if (knownPrefix) {
+        const exactMatch = perpMetaAssets.find((a) => {
+            var _a;
+            return a.name === coinName &&
+                ((_a = a.marketPrefix) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === knownPrefix.toLowerCase();
+        });
+        if (exactMatch) {
+            return {
+                collateralToken: (_e = exactMatch.collateralToken) !== null && _e !== void 0 ? _e : 'USDC',
+                marketPrefix: (_f = exactMatch.marketPrefix) !== null && _f !== void 0 ? _f : null,
+            };
+        }
+    }
+    const exactMatch = perpMetaAssets.find((a) => a.name === coinName && !a.marketPrefix);
+    if (exactMatch) {
+        return {
+            collateralToken: (_g = exactMatch.collateralToken) !== null && _g !== void 0 ? _g : 'USDC',
+            marketPrefix: (_h = exactMatch.marketPrefix) !== null && _h !== void 0 ? _h : null,
+        };
+    }
+    const hip3Matches = perpMetaAssets.filter((a) => a.name === coinName && a.marketPrefix);
+    if (hip3Matches.length > 0) {
+        if (desiredCollateral) {
+            const collateralMatch = hip3Matches.find((a) => a.collateralToken === desiredCollateral);
+            if (collateralMatch) {
+                return {
+                    collateralToken: (_j = collateralMatch.collateralToken) !== null && _j !== void 0 ? _j : 'USDC',
+                    marketPrefix: (_k = collateralMatch.marketPrefix) !== null && _k !== void 0 ? _k : null,
+                };
+            }
+        }
+        const usdHMatch = hip3Matches.find((a) => a.collateralToken === 'USDH');
+        const chosen = usdHMatch !== null && usdHMatch !== void 0 ? usdHMatch : hip3Matches[0];
+        return {
+            collateralToken: (_l = chosen.collateralToken) !== null && _l !== void 0 ? _l : 'USDC',
+            marketPrefix: (_m = chosen.marketPrefix) !== null && _m !== void 0 ? _m : null,
+        };
+    }
+    return { collateralToken: 'USDC', marketPrefix: null };
+}
+function enrichTradeHistoryAssets(assets, perpMetaAssets) {
+    return assets.map((asset) => {
+        var _a;
+        if (asset.marketPrefix && asset.collateralToken) {
+            return asset;
+        }
+        const meta = findAssetMeta$4(asset.coin, perpMetaAssets, asset.marketPrefix, asset.collateralToken);
+        return {
+            ...asset,
+            marketPrefix: asset.marketPrefix || meta.marketPrefix,
+            collateralToken: (_a = asset.collateralToken) !== null && _a !== void 0 ? _a : meta.collateralToken,
+        };
+    });
+}
+function enrichTradeHistories(histories, perpMetaAssets) {
+    return histories.map((history) => ({
+        ...history,
+        closedLongAssets: enrichTradeHistoryAssets(history.closedLongAssets, perpMetaAssets),
+        closedShortAssets: enrichTradeHistoryAssets(history.closedShortAssets, perpMetaAssets),
+    }));
+}
 const useTradeHistories = () => {
     const context = useContext(PearHyperliquidContext);
     if (!context) {
         throw new Error('useTradeHistories must be used within a PearHyperliquidProvider');
     }
     const tradeHistories = useUserData((state) => state.tradeHistories);
+    const allPerpMetaAssets = useHyperliquidData((state) => state.allPerpMetaAssets);
     const isLoading = useMemo(() => {
         return tradeHistories === null && context.isConnected;
     }, [tradeHistories, context.isConnected]);
-    return { data: tradeHistories, isLoading };
+    const enrichedTradeHistories = useMemo(() => {
+        if (!tradeHistories)
+            return null;
+        return enrichTradeHistories(tradeHistories, allPerpMetaAssets);
+    }, [tradeHistories, allPerpMetaAssets]);
+    return { data: enrichedTradeHistories, isLoading };
 };
-/**
- * Hook to access open orders with loading state
- */
 const useOpenOrders = () => {
     const context = useContext(PearHyperliquidContext);
     if (!context) {
@@ -1146,21 +1461,51 @@ const useWebData = () => {
     const perpMetaAssets = useHyperliquidData((state) => state.perpMetaAssets);
     const aggregatedClearinghouseState = useHyperliquidData((state) => state.aggregatedClearingHouseState);
     const finalAtOICaps = useHyperliquidData((state) => state.finalAtOICaps);
-    const hip3Assets = useHyperliquidData((state) => state.hip3DisplayToFull);
+    const hip3Assets = useHyperliquidData((state) => state.hip3Assets);
+    const hip3MarketPrefixes = useHyperliquidData((state) => state.hip3MarketPrefixes);
     let marketDataBySymbol = {};
     if (finalAssetContexts && perpMetaAssets) {
         const result = {};
+        // Build a map of display name -> asset context index (for unique display names)
+        const displayNameToContextIndex = new Map();
+        const seenNames = new Set();
+        let contextIndex = 0;
+        // First pass: map unique display names to their context index
         for (let index = 0; index < perpMetaAssets.length; index++) {
             const name = perpMetaAssets[index].name;
-            result[name] = {
-                asset: finalAssetContexts[index],
-                universe: perpMetaAssets[index],
-            };
+            if (!seenNames.has(name)) {
+                seenNames.add(name);
+                if (contextIndex < finalAssetContexts.length) {
+                    displayNameToContextIndex.set(name, contextIndex);
+                    contextIndex++;
+                }
+            }
+        }
+        // Second pass: create nested entries for all market variants
+        for (let index = 0; index < perpMetaAssets.length; index++) {
+            const universeAsset = perpMetaAssets[index];
+            const displayName = universeAsset.name;
+            const marketPrefix = universeAsset.marketPrefix;
+            const ctxIndex = displayNameToContextIndex.get(displayName);
+            if (ctxIndex !== undefined) {
+                const assetContext = finalAssetContexts[ctxIndex];
+                // Initialize the symbol entry if it doesn't exist
+                if (!result[displayName]) {
+                    result[displayName] = {};
+                }
+                // Use marketPrefix as key for HIP-3 assets, "default" for regular assets
+                const variantKey = marketPrefix || 'default';
+                result[displayName][variantKey] = {
+                    asset: assetContext,
+                    universe: universeAsset,
+                };
+            }
         }
         marketDataBySymbol = result;
     }
     return {
         hip3Assets,
+        hip3MarketPrefixes,
         clearinghouseState: aggregatedClearinghouseState,
         perpsAtOpenInterestCap: finalAtOICaps,
         marketDataBySymbol,
@@ -1175,19 +1520,30 @@ const useWebData = () => {
 class TokenMetadataExtractor {
     /**
      * Extracts comprehensive token metadata
-     * @param symbol - Token symbol
+     * @param symbol - Token symbol (base symbol without prefix, e.g., "TSLA")
      * @param perpMetaAssets - Aggregated universe assets (flattened across dexes)
      * @param finalAssetContexts - Aggregated asset contexts (flattened across dexes)
      * @param allMids - AllMids data containing current prices
      * @param activeAssetData - Optional active asset data containing leverage information
+     * @param marketPrefix - Optional market prefix (e.g., "xyz", "flx") for HIP3 multi-market assets
      * @returns TokenMetadata or null if token not found
      */
-    static extractTokenMetadata(symbol, perpMetaAssets, finalAssetContexts, allMids, activeAssetData) {
+    static extractTokenMetadata(symbol, perpMetaAssets, finalAssetContexts, allMids, activeAssetData, marketPrefix) {
         if (!perpMetaAssets || !finalAssetContexts || !allMids) {
             return null;
         }
         // Find token index in aggregated universe
-        const universeIndex = perpMetaAssets.findIndex(asset => asset.name === symbol);
+        // For HIP3 assets, match both name AND marketPrefix
+        const universeIndex = perpMetaAssets.findIndex((asset) => {
+            if (asset.name !== symbol)
+                return false;
+            // If marketPrefix is specified, match it; otherwise match assets without prefix
+            if (marketPrefix) {
+                return asset.marketPrefix === marketPrefix;
+            }
+            // No prefix specified - match non-HIP3 asset (no marketPrefix) or first matching asset
+            return !asset.marketPrefix;
+        });
         if (universeIndex === -1) {
             return null;
         }
@@ -1196,9 +1552,20 @@ class TokenMetadataExtractor {
         if (!assetCtx) {
             return null;
         }
-        // Get current price from allMids
-        const currentPriceStr = allMids.mids[symbol];
-        const currentPrice = currentPriceStr ? parseFloat(currentPriceStr) : 0;
+        // Get current price - prefer assetCtx.midPx as it's already index-matched,
+        // fall back to allMids lookup if midPx is null
+        const prefixedKeyColon = marketPrefix ? `${marketPrefix}:${symbol}` : null;
+        let currentPrice = 0;
+        // Primary source: assetCtx.midPx (already properly indexed)
+        if (assetCtx.midPx) {
+            currentPrice = parseFloat(assetCtx.midPx);
+        }
+        // Fallback: allMids lookup with multiple key formats for HIP3 markets
+        if (!currentPrice || isNaN(currentPrice)) {
+            const currentPriceStr = (prefixedKeyColon && allMids.mids[prefixedKeyColon]) ||
+                allMids.mids[symbol];
+            currentPrice = currentPriceStr ? parseFloat(currentPriceStr) : 0;
+        }
         // Get previous day price
         const prevDayPrice = parseFloat(assetCtx.prevDayPx);
         // Calculate 24h price change
@@ -1209,7 +1576,11 @@ class TokenMetadataExtractor {
         const markPrice = parseFloat(assetCtx.markPx);
         const oraclePrice = parseFloat(assetCtx.oraclePx);
         // Extract leverage info from activeAssetData if available
-        const tokenActiveData = activeAssetData === null || activeAssetData === void 0 ? void 0 : activeAssetData[symbol];
+        // Try prefixed key first (e.g., "xyz:TSLA"), then fall back to plain symbol
+        const activeDataKey = prefixedKeyColon && (activeAssetData === null || activeAssetData === void 0 ? void 0 : activeAssetData[prefixedKeyColon])
+            ? prefixedKeyColon
+            : symbol;
+        const tokenActiveData = activeAssetData === null || activeAssetData === void 0 ? void 0 : activeAssetData[activeDataKey];
         const leverage = tokenActiveData === null || tokenActiveData === void 0 ? void 0 : tokenActiveData.leverage;
         const maxTradeSzs = tokenActiveData === null || tokenActiveData === void 0 ? void 0 : tokenActiveData.maxTradeSzs;
         const availableToTrade = tokenActiveData === null || tokenActiveData === void 0 ? void 0 : tokenActiveData.availableToTrade;
@@ -1227,21 +1598,27 @@ class TokenMetadataExtractor {
             leverage,
             maxTradeSzs,
             availableToTrade,
+            collateralToken: universeAsset.collateralToken,
         };
     }
     /**
      * Extracts metadata for multiple tokens
-     * @param symbols - Array of token symbols
+     * @param tokens - Array of token objects with symbol and optional marketPrefix
      * @param perpMetaAssets - Aggregated universe assets
      * @param finalAssetContexts - Aggregated asset contexts
      * @param allMids - AllMids data
      * @param activeAssetData - Optional active asset data containing leverage information
-     * @returns Record of symbol to TokenMetadata
+     * @returns Record of unique key to TokenMetadata. Key is "{prefix}:{symbol}" for HIP3 assets, or just "{symbol}" otherwise
      */
-    static extractMultipleTokensMetadata(symbols, perpMetaAssets, finalAssetContexts, allMids, activeAssetData) {
+    static extractMultipleTokensMetadata(tokens, perpMetaAssets, finalAssetContexts, allMids, activeAssetData) {
         const result = {};
-        for (const symbol of symbols) {
-            result[symbol] = this.extractTokenMetadata(symbol, perpMetaAssets, finalAssetContexts, allMids, activeAssetData);
+        for (const token of tokens) {
+            // Use a unique key that includes the prefix for HIP3 assets
+            // This ensures xyz:TSLA and flx:TSLA get separate entries
+            const resultKey = token.marketPrefix
+                ? `${token.marketPrefix}:${token.symbol}`
+                : token.symbol;
+            result[resultKey] = this.extractTokenMetadata(token.symbol, perpMetaAssets, finalAssetContexts, allMids, activeAssetData, token.marketPrefix);
         }
         return result;
     }
@@ -1254,10 +1631,30 @@ class TokenMetadataExtractor {
     static isTokenAvailable(symbol, perpMetaAssets) {
         if (!perpMetaAssets)
             return false;
-        return perpMetaAssets.some(asset => asset.name === symbol);
+        return perpMetaAssets.some((asset) => asset.name === symbol);
     }
 }
 
+/**
+ * Parse a token string that may have a market prefix (e.g., "xyz:GOOGL" -> { prefix: "xyz", symbol: "GOOGL" })
+ * This allows us to keep the full name (xyz:GOOGL) for URLs/tags while extracting just the symbol for SDK lookups.
+ */
+function parseTokenWithPrefix(token) {
+    if (token.includes(":")) {
+        const [prefix, ...rest] = token.split(":");
+        const symbol = rest.join(":").toUpperCase();
+        return {
+            prefix: prefix.toLowerCase(),
+            symbol,
+            fullName: `${prefix.toLowerCase()}:${symbol}`,
+        };
+    }
+    return {
+        prefix: null,
+        symbol: token.toUpperCase(),
+        fullName: token.toUpperCase(),
+    };
+}
 const useTokenSelectionMetadataStore = create((set) => ({
     isPriceDataReady: false,
     isLoading: true,
@@ -1273,17 +1670,59 @@ const useTokenSelectionMetadataStore = create((set) => ({
     maxLeverage: 0,
     minMargin: 0,
     leverageMatched: true,
-    recompute: ({ perpMetaAssets, finalAssetContexts, allMids, activeAssetData, marketData, longTokens, shortTokens }) => {
-        const isPriceDataReady = !!(perpMetaAssets && finalAssetContexts && allMids);
-        // Compute metadata when ready
-        const longSymbols = longTokens.map((t) => t.symbol);
-        const shortSymbols = shortTokens.map((t) => t.symbol);
-        const longTokensMetadata = isPriceDataReady
-            ? TokenMetadataExtractor.extractMultipleTokensMetadata(longSymbols, perpMetaAssets, finalAssetContexts, allMids, activeAssetData)
+    recompute: ({ perpMetaAssets, finalAssetContexts, allMids, activeAssetData, marketData, longTokens, shortTokens, }) => {
+        const isPriceDataReady = !!(perpMetaAssets &&
+            finalAssetContexts &&
+            allMids);
+        // Parse tokens - handle prefixed tokens like "xyz:GOOGL" by extracting the symbol and market prefix
+        // The full name (xyz:GOOGL) is kept as the metadata key for UI consistency
+        const parsedLongTokens = longTokens.map((t) => ({
+            ...t,
+            parsed: parseTokenWithPrefix(t.symbol),
+        }));
+        const parsedShortTokens = shortTokens.map((t) => ({
+            ...t,
+            parsed: parseTokenWithPrefix(t.symbol),
+        }));
+        // Extract base symbols with their market prefixes for SDK lookups
+        // This ensures xyz:TSLA and flx:TSLA get different market data
+        const longTokensForLookup = parsedLongTokens.map((t) => ({
+            symbol: t.parsed.symbol,
+            marketPrefix: t.parsed.prefix,
+        }));
+        const shortTokensForLookup = parsedShortTokens.map((t) => ({
+            symbol: t.parsed.symbol,
+            marketPrefix: t.parsed.prefix,
+        }));
+        // Also extract just the base symbols (without prefix) for lookups that don't support prefixes
+        const longBaseSymbols = longTokensForLookup.map((t) => t.symbol);
+        const shortBaseSymbols = shortTokensForLookup.map((t) => t.symbol);
+        // Get metadata using base symbols with market prefix for proper market differentiation
+        const longBaseMetadata = isPriceDataReady
+            ? TokenMetadataExtractor.extractMultipleTokensMetadata(longTokensForLookup, perpMetaAssets, finalAssetContexts, allMids, activeAssetData)
             : {};
-        const shortTokensMetadata = isPriceDataReady
-            ? TokenMetadataExtractor.extractMultipleTokensMetadata(shortSymbols, perpMetaAssets, finalAssetContexts, allMids, activeAssetData)
+        const shortBaseMetadata = isPriceDataReady
+            ? TokenMetadataExtractor.extractMultipleTokensMetadata(shortTokensForLookup, perpMetaAssets, finalAssetContexts, allMids, activeAssetData)
             : {};
+        // Re-map metadata using original full names (with prefix) as keys for UI consistency
+        // The extractor now keys by "{prefix}:{symbol}" for prefixed tokens, which matches our parsed.fullName
+        const longTokensMetadata = {};
+        parsedLongTokens.forEach((t) => {
+            var _a;
+            // Use the full name (e.g., "xyz:TSLA") as the lookup key since extractor uses the same format
+            const lookupKey = t.parsed.prefix
+                ? `${t.parsed.prefix}:${t.parsed.symbol}`
+                : t.parsed.symbol;
+            longTokensMetadata[t.symbol] = (_a = longBaseMetadata[lookupKey]) !== null && _a !== void 0 ? _a : null;
+        });
+        const shortTokensMetadata = {};
+        parsedShortTokens.forEach((t) => {
+            var _a;
+            const lookupKey = t.parsed.prefix
+                ? `${t.parsed.prefix}:${t.parsed.symbol}`
+                : t.parsed.symbol;
+            shortTokensMetadata[t.symbol] = (_a = shortBaseMetadata[lookupKey]) !== null && _a !== void 0 ? _a : null;
+        });
         // Determine loading state
         const allTokens = [...longTokens, ...shortTokens];
         const isLoading = (() => {
@@ -1291,26 +1730,33 @@ const useTokenSelectionMetadataStore = create((set) => ({
                 return true;
             if (allTokens.length === 0)
                 return false;
-            const allMetadata = { ...longTokensMetadata, ...shortTokensMetadata };
+            const allMetadata = {
+                ...longTokensMetadata,
+                ...shortTokensMetadata,
+            };
             return allTokens.some((token) => !allMetadata[token.symbol]);
         })();
         // Open interest and volume (from market data for matching asset basket)
+        // Use base symbols (without prefix) for matching against market data
         const { openInterest, volume } = (() => {
             const empty = { openInterest: "0", volume: "0" };
             if (!(marketData === null || marketData === void 0 ? void 0 : marketData.active) || (!longTokens.length && !shortTokens.length))
                 return empty;
-            const selectedLong = longTokens.map((t) => t.symbol).sort();
-            const selectedShort = shortTokens.map((t) => t.symbol).sort();
+            const selectedLong = longBaseSymbols.slice().sort();
+            const selectedShort = shortBaseSymbols.slice().sort();
             const match = marketData.active.find((item) => {
                 const longs = [...item.longAssets].sort();
                 const shorts = [...item.shortAssets].sort();
-                if (longs.length !== selectedLong.length || shorts.length !== selectedShort.length)
+                if (longs.length !== selectedLong.length ||
+                    shorts.length !== selectedShort.length)
                     return false;
                 const longsEqual = longs.every((s, i) => s.asset === selectedLong[i]);
                 const shortsEqual = shorts.every((s, i) => s.asset === selectedShort[i]);
                 return longsEqual && shortsEqual;
             });
-            return match ? { openInterest: match.openInterest, volume: match.volume } : empty;
+            return match
+                ? { openInterest: match.openInterest, volume: match.volume }
+                : empty;
         })();
         // Price ratio (only when exactly one long and one short)
         const { priceRatio, priceRatio24h } = (() => {
@@ -1390,17 +1836,27 @@ const useTokenSelectionMetadataStore = create((set) => ({
             return totalFunding;
         })();
         // Max leverage (maximum across all tokens)
+        // Use tokens with their market prefixes for proper lookup in perpMetaAssets
         const maxLeverage = (() => {
             if (!perpMetaAssets)
                 return 0;
-            const allTokenSymbols = [...longTokens, ...shortTokens].map((t) => t.symbol);
-            if (allTokenSymbols.length === 0)
+            const allTokensForLookup = [
+                ...longTokensForLookup,
+                ...shortTokensForLookup,
+            ];
+            if (allTokensForLookup.length === 0)
                 return 0;
             let maxLev = 0;
-            allTokenSymbols.forEach((symbol) => {
-                const tokenUniverse = perpMetaAssets.find((u) => u.name === symbol);
-                if (tokenUniverse === null || tokenUniverse === void 0 ? void 0 : tokenUniverse.maxLeverage)
-                    maxLev = Math.max(maxLev, tokenUniverse.maxLeverage);
+            allTokensForLookup.forEach(({ symbol, marketPrefix }) => {
+                // Match by both name AND marketPrefix for HIP3 assets
+                const tokenUniverse = perpMetaAssets.find((u) => u.name === symbol &&
+                    (marketPrefix
+                        ? u.marketPrefix === marketPrefix
+                        : !u.marketPrefix));
+                // Fallback to just matching by name if no exact match
+                const fallbackUniverse = tokenUniverse || perpMetaAssets.find((u) => u.name === symbol);
+                if (fallbackUniverse === null || fallbackUniverse === void 0 ? void 0 : fallbackUniverse.maxLeverage)
+                    maxLev = Math.max(maxLev, fallbackUniverse.maxLeverage);
             });
             return maxLev;
         })();
@@ -1412,7 +1868,10 @@ const useTokenSelectionMetadataStore = create((set) => ({
         // Whether all tokens have matching leverage
         const leverageMatched = (() => {
             const allTokensArr = [...longTokens, ...shortTokens];
-            const allMetadata = { ...longTokensMetadata, ...shortTokensMetadata };
+            const allMetadata = {
+                ...longTokensMetadata,
+                ...shortTokensMetadata,
+            };
             if (allTokensArr.length === 0)
                 return true;
             const tokensWithLev = allTokensArr.filter((token) => { var _a; return (_a = allMetadata[token.symbol]) === null || _a === void 0 ? void 0 : _a.leverage; });
@@ -5597,8 +6056,8 @@ function addAuthInterceptors(params) {
 /**
  * Fetch historical candle data from HyperLiquid API
  */
-const fetchHistoricalCandles = async (coin, startTime, endTime, interval, displayToFull) => {
-    const backendCoin = toBackendSymbol(coin, displayToFull);
+const fetchHistoricalCandles = async (coin, startTime, endTime, interval, hip3Assets) => {
+    const backendCoin = toBackendSymbol(coin, hip3Assets);
     const request = {
         req: { coin: backendCoin, startTime, endTime, interval },
         type: 'candleSnapshot',
@@ -5757,10 +6216,10 @@ const useHistoricalPriceData = () => {
             setTokenLoading(token.symbol, true);
         });
         try {
-            const displayToFull = useHyperliquidData.getState().hip3DisplayToFull;
+            const hip3Assets = useHyperliquidData.getState().hip3Assets;
             const fetchPromises = tokensToFetch.map(async (token) => {
                 try {
-                    const response = await fetchHistoricalCandles(token.symbol, startTime, endTime, interval, displayToFull);
+                    const response = await fetchHistoricalCandles(token.symbol, startTime, endTime, interval, hip3Assets);
                     addHistoricalPriceData(token.symbol, interval, response.data, { start: startTime, end: endTime });
                     return { symbol: token.symbol, candles: response.data, success: true };
                 }
@@ -6449,14 +6908,14 @@ function useAutoSyncFills(options) {
  * @throws MinimumPositionSizeError if any asset has less than $11 USD value
  * @throws MaxAssetsPerLegError if any leg exceeds the maximum allowed assets (15)
  */
-async function createPosition(baseUrl, payload, displayToFull) {
+async function createPosition(baseUrl, payload, hip3Assets) {
     // Validate maximum assets per leg before creating position
     validateMaxAssetsPerLeg(payload.longAssets, payload.shortAssets);
     // Validate minimum asset size before creating position
     validateMinimumAssetSize(payload.usdValue, payload.longAssets, payload.shortAssets);
     const url = joinUrl(baseUrl, "/positions");
     // Translate display symbols to backend format
-    const mapAssets = (arr) => arr === null || arr === void 0 ? void 0 : arr.map((a) => ({ ...a, asset: toBackendSymbol(a.asset, displayToFull) }));
+    const mapAssets = (arr) => arr === null || arr === void 0 ? void 0 : arr.map((a) => ({ ...a, asset: toBackendSymbol(a.asset, hip3Assets) }));
     const translatedPayload = {
         ...payload,
         longAssets: mapAssets(payload.longAssets),
@@ -6555,9 +7014,9 @@ async function adjustPosition(baseUrl, positionId, payload) {
         throw toApiError(error);
     }
 }
-async function adjustAdvancePosition(baseUrl, positionId, payload, displayToFull) {
+async function adjustAdvancePosition(baseUrl, positionId, payload, hip3Assets) {
     const url = joinUrl(baseUrl, `/positions/${positionId}/adjust-advance`);
-    const mapAssets = (arr) => arr === null || arr === void 0 ? void 0 : arr.map((a) => ({ ...a, asset: toBackendSymbol(a.asset, displayToFull) }));
+    const mapAssets = (arr) => arr === null || arr === void 0 ? void 0 : arr.map((a) => ({ ...a, asset: toBackendSymbol(a.asset, hip3Assets) }));
     const translatedPayload = (payload || []).map((item) => ({
         longAssets: mapAssets(item.longAssets),
         shortAssets: mapAssets(item.shortAssets),
@@ -6640,10 +7099,11 @@ const calculatePositionAsset = (asset, currentPrice, totalInitialPositionSize, l
         positionValue: currentNotional,
         unrealizedPnl: unrealizedPnl,
         entryPositionValue: entryNotional,
-        initialWeight: totalInitialPositionSize > 0
-            ? entryNotional / totalInitialPositionSize
-            : 0,
+        initialWeight: totalInitialPositionSize > 0 ? entryNotional / totalInitialPositionSize : 0,
         fundingPaid: (_a = asset.fundingPaid) !== null && _a !== void 0 ? _a : 0,
+        // Preserve market metadata from raw asset (if provided by backend)
+        marketPrefix: asset.marketPrefix,
+        collateralToken: asset.collateralToken,
     };
 };
 const buildPositionValue = (rawPositions, clearinghouseState, allMids) => {
@@ -6732,36 +7192,108 @@ const buildPositionValue = (rawPositions, clearinghouseState, allMids) => {
     });
 };
 
+function findAssetMeta$3(coinName, perpMetaAssets, knownPrefix, desiredCollateral) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    if (!perpMetaAssets) {
+        return { collateralToken: 'USDC', marketPrefix: null };
+    }
+    if (desiredCollateral) {
+        const collateralMatch = perpMetaAssets.find((a) => a.name === coinName && a.collateralToken === desiredCollateral);
+        if (collateralMatch) {
+            return {
+                collateralToken: (_a = collateralMatch.collateralToken) !== null && _a !== void 0 ? _a : 'USDC',
+                marketPrefix: (_b = collateralMatch.marketPrefix) !== null && _b !== void 0 ? _b : null,
+            };
+        }
+    }
+    if (coinName.includes(':')) {
+        const [prefix, symbol] = coinName.split(':');
+        const exactMatch = perpMetaAssets.find((a) => {
+            var _a;
+            return a.name === symbol &&
+                ((_a = a.marketPrefix) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === prefix.toLowerCase();
+        });
+        if (exactMatch) {
+            return {
+                collateralToken: (_c = exactMatch.collateralToken) !== null && _c !== void 0 ? _c : 'USDC',
+                marketPrefix: (_d = exactMatch.marketPrefix) !== null && _d !== void 0 ? _d : null,
+            };
+        }
+    }
+    if (knownPrefix) {
+        const exactMatch = perpMetaAssets.find((a) => {
+            var _a;
+            return a.name === coinName &&
+                ((_a = a.marketPrefix) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === knownPrefix.toLowerCase();
+        });
+        if (exactMatch) {
+            return {
+                collateralToken: (_e = exactMatch.collateralToken) !== null && _e !== void 0 ? _e : 'USDC',
+                marketPrefix: (_f = exactMatch.marketPrefix) !== null && _f !== void 0 ? _f : null,
+            };
+        }
+    }
+    const regularAsset = perpMetaAssets.find((a) => a.name === coinName && !a.marketPrefix);
+    if (regularAsset) {
+        return {
+            collateralToken: (_g = regularAsset.collateralToken) !== null && _g !== void 0 ? _g : 'USDC',
+            marketPrefix: null,
+        };
+    }
+    const hip3Asset = perpMetaAssets.find((a) => a.name === coinName && a.marketPrefix);
+    if (hip3Asset) {
+        return {
+            collateralToken: (_h = hip3Asset.collateralToken) !== null && _h !== void 0 ? _h : 'USDC',
+            marketPrefix: (_j = hip3Asset.marketPrefix) !== null && _j !== void 0 ? _j : null,
+        };
+    }
+    return { collateralToken: 'USDC', marketPrefix: null };
+}
+function enrichPositionAssets(assets, perpMetaAssets) {
+    return assets.map((asset) => {
+        var _a;
+        if (asset.marketPrefix && asset.collateralToken) {
+            return asset;
+        }
+        const meta = findAssetMeta$3(asset.coin, perpMetaAssets, asset.marketPrefix, asset.collateralToken);
+        return {
+            ...asset,
+            marketPrefix: asset.marketPrefix || meta.marketPrefix,
+            collateralToken: (_a = asset.collateralToken) !== null && _a !== void 0 ? _a : meta.collateralToken,
+        };
+    });
+}
+function enrichPositions(positions, perpMetaAssets) {
+    return positions.map((position) => ({
+        ...position,
+        longAssets: enrichPositionAssets(position.longAssets, perpMetaAssets),
+        shortAssets: enrichPositionAssets(position.shortAssets, perpMetaAssets),
+    }));
+}
 function usePosition() {
     const context = useContext(PearHyperliquidContext);
     if (!context) {
         throw new Error('usePosition must be used within a PearHyperliquidProvider');
     }
     const { apiBaseUrl, isConnected } = context;
-    const displayToFull = useHyperliquidData((s) => s.hip3DisplayToFull);
-    // Create position API action
+    const hip3Assets = useHyperliquidData((s) => s.hip3Assets);
     const createPosition$1 = async (payload) => {
-        return createPosition(apiBaseUrl, payload, displayToFull);
+        return createPosition(apiBaseUrl, payload, hip3Assets);
     };
-    // Update TP/SL risk parameters for a position
     const updateRiskParameters$1 = async (positionId, payload) => {
         return updateRiskParameters(apiBaseUrl, positionId, payload);
     };
-    // Close a position (MARKET or TWAP)
     const closePosition$1 = async (positionId, payload) => {
         return closePosition(apiBaseUrl, positionId, payload);
     };
-    // Close all positions (MARKET or TWAP)
     const closeAllPositions$1 = async (payload) => {
         return closeAllPositions(apiBaseUrl, payload);
     };
-    // Adjust a position (REDUCE/INCREASE by %; MARKET or LIMIT)
     const adjustPosition$1 = async (positionId, payload) => {
         return adjustPosition(apiBaseUrl, positionId, payload);
     };
-    // Adjust to absolute target sizes per asset, optionally adding new assets
     const adjustAdvancePosition$1 = async (positionId, payload) => {
-        return adjustAdvancePosition(apiBaseUrl, positionId, payload, displayToFull);
+        return adjustAdvancePosition(apiBaseUrl, positionId, payload, hip3Assets);
     };
     const updateLeverage$1 = async (positionId, leverage) => {
         return updateLeverage(apiBaseUrl, positionId, { leverage });
@@ -6770,22 +7302,46 @@ function usePosition() {
     const userOpenPositions = useUserData((state) => state.rawOpenPositions);
     const aggregatedClearingHouseState = useHyperliquidData((state) => state.aggregatedClearingHouseState);
     const allMids = useHyperliquidData((state) => state.allMids);
+    const allPerpMetaAssets = useHyperliquidData((state) => state.allPerpMetaAssets);
     const isLoading = useMemo(() => {
         return userOpenPositions === null && isConnected;
     }, [userOpenPositions, isConnected]);
     const openPositions = useMemo(() => {
         if (!userOpenPositions || !aggregatedClearingHouseState || !allMids)
             return null;
-        return buildPositionValue(userOpenPositions, aggregatedClearingHouseState, allMids);
-    }, [userOpenPositions, aggregatedClearingHouseState, allMids]);
-    return { createPosition: createPosition$1, updateRiskParameters: updateRiskParameters$1, closePosition: closePosition$1, closeAllPositions: closeAllPositions$1, adjustPosition: adjustPosition$1, adjustAdvancePosition: adjustAdvancePosition$1, updateLeverage: updateLeverage$1, openPositions, isLoading };
+        const positions = buildPositionValue(userOpenPositions, aggregatedClearingHouseState, allMids);
+        return enrichPositions(positions, allPerpMetaAssets);
+    }, [
+        userOpenPositions,
+        aggregatedClearingHouseState,
+        allMids,
+        allPerpMetaAssets,
+    ]);
+    return {
+        createPosition: createPosition$1,
+        updateRiskParameters: updateRiskParameters$1,
+        closePosition: closePosition$1,
+        closeAllPositions: closeAllPositions$1,
+        adjustPosition: adjustPosition$1,
+        adjustAdvancePosition: adjustAdvancePosition$1,
+        updateLeverage: updateLeverage$1,
+        openPositions,
+        isLoading,
+    };
 }
 
 async function adjustOrder(baseUrl, orderId, payload) {
     const url = joinUrl(baseUrl, `/orders/${orderId}/adjust`);
     try {
-        const resp = await apiClient.put(url, payload, { headers: { 'Content-Type': 'application/json' }, timeout: 60000 });
-        return { data: resp.data, status: resp.status, headers: resp.headers };
+        const resp = await apiClient.put(url, payload, {
+            headers: { 'Content-Type': 'application/json' },
+            timeout: 60000,
+        });
+        return {
+            data: resp.data,
+            status: resp.status,
+            headers: resp.headers,
+        };
     }
     catch (error) {
         throw toApiError(error);
@@ -6794,8 +7350,14 @@ async function adjustOrder(baseUrl, orderId, payload) {
 async function cancelOrder(baseUrl, orderId) {
     const url = joinUrl(baseUrl, `/orders/${orderId}/cancel`);
     try {
-        const resp = await apiClient.delete(url, { timeout: 60000 });
-        return { data: resp.data, status: resp.status, headers: resp.headers };
+        const resp = await apiClient.delete(url, {
+            timeout: 60000,
+        });
+        return {
+            data: resp.data,
+            status: resp.status,
+            headers: resp.headers,
+        };
     }
     catch (error) {
         throw toApiError(error);
@@ -6805,19 +7367,129 @@ async function cancelTwapOrder(baseUrl, orderId) {
     const url = joinUrl(baseUrl, `/orders/${orderId}/twap/cancel`);
     try {
         const resp = await apiClient.post(url, {}, { headers: { 'Content-Type': 'application/json' }, timeout: 60000 });
-        return { data: resp.data, status: resp.status, headers: resp.headers };
+        return {
+            data: resp.data,
+            status: resp.status,
+            headers: resp.headers,
+        };
+    }
+    catch (error) {
+        throw toApiError(error);
+    }
+}
+/**
+ * Execute a spot order (swap) using Pear Hyperliquid service
+ * POST /orders/spot
+ */
+async function executeSpotOrder(baseUrl, payload) {
+    const url = joinUrl(baseUrl, '/orders/spot');
+    try {
+        const resp = await apiClient.post(url, payload, {
+            headers: { 'Content-Type': 'application/json' },
+            timeout: 60000,
+        });
+        return {
+            data: resp.data,
+            status: resp.status,
+            headers: resp.headers,
+        };
     }
     catch (error) {
         throw toApiError(error);
     }
 }
 
+function findAssetMeta$2(assetName, perpMetaAssets, knownPrefix, desiredCollateral) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    if (!perpMetaAssets) {
+        return { collateralToken: 'USDC', marketPrefix: null };
+    }
+    if (desiredCollateral) {
+        const collateralMatch = perpMetaAssets.find((a) => a.name === assetName && a.collateralToken === desiredCollateral);
+        if (collateralMatch) {
+            return {
+                collateralToken: (_a = collateralMatch.collateralToken) !== null && _a !== void 0 ? _a : 'USDC',
+                marketPrefix: (_b = collateralMatch.marketPrefix) !== null && _b !== void 0 ? _b : null,
+            };
+        }
+    }
+    if (assetName.includes(':')) {
+        const [prefix, symbol] = assetName.split(':');
+        const exactMatch = perpMetaAssets.find((a) => {
+            var _a;
+            return a.name === symbol &&
+                ((_a = a.marketPrefix) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === prefix.toLowerCase();
+        });
+        if (exactMatch) {
+            return {
+                collateralToken: (_c = exactMatch.collateralToken) !== null && _c !== void 0 ? _c : 'USDC',
+                marketPrefix: (_d = exactMatch.marketPrefix) !== null && _d !== void 0 ? _d : null,
+            };
+        }
+    }
+    if (knownPrefix) {
+        const exactMatch = perpMetaAssets.find((a) => {
+            var _a;
+            return a.name === assetName &&
+                ((_a = a.marketPrefix) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === knownPrefix.toLowerCase();
+        });
+        if (exactMatch) {
+            return {
+                collateralToken: (_e = exactMatch.collateralToken) !== null && _e !== void 0 ? _e : 'USDC',
+                marketPrefix: (_f = exactMatch.marketPrefix) !== null && _f !== void 0 ? _f : null,
+            };
+        }
+    }
+    const regularAsset = perpMetaAssets.find((a) => a.name === assetName && !a.marketPrefix);
+    if (regularAsset) {
+        return {
+            collateralToken: (_g = regularAsset.collateralToken) !== null && _g !== void 0 ? _g : 'USDC',
+            marketPrefix: null,
+        };
+    }
+    const hip3Assets = perpMetaAssets.filter((a) => a.name === assetName && a.marketPrefix);
+    if (hip3Assets.length > 0) {
+        if (desiredCollateral) {
+            const collateralMatch = hip3Assets.find((a) => a.collateralToken === desiredCollateral);
+            if (collateralMatch) {
+                return {
+                    collateralToken: (_h = collateralMatch.collateralToken) !== null && _h !== void 0 ? _h : 'USDC',
+                    marketPrefix: (_j = collateralMatch.marketPrefix) !== null && _j !== void 0 ? _j : null,
+                };
+            }
+        }
+        const usdHMatch = hip3Assets.find((a) => a.collateralToken === 'USDH');
+        const chosen = usdHMatch !== null && usdHMatch !== void 0 ? usdHMatch : hip3Assets[0];
+        return {
+            collateralToken: (_k = chosen.collateralToken) !== null && _k !== void 0 ? _k : 'USDC',
+            marketPrefix: (_l = chosen.marketPrefix) !== null && _l !== void 0 ? _l : null,
+        };
+    }
+    return { collateralToken: 'USDC', marketPrefix: null };
+}
+function enrichOrderAssets$1(assets, perpMetaAssets) {
+    if (!assets)
+        return [];
+    return assets.map((asset) => {
+        var _a;
+        if (asset.marketPrefix && asset.collateralToken) {
+            return asset;
+        }
+        const meta = findAssetMeta$2(asset.asset, perpMetaAssets, asset.marketPrefix, asset.collateralToken);
+        return {
+            ...asset,
+            marketPrefix: asset.marketPrefix || meta.marketPrefix,
+            collateralToken: (_a = asset.collateralToken) !== null && _a !== void 0 ? _a : meta.collateralToken,
+        };
+    });
+}
 function useOrders() {
     const context = useContext(PearHyperliquidContext);
     if (!context)
         throw new Error('useOrders must be used within a PearHyperliquidProvider');
     const { apiBaseUrl } = context;
     const openOrders = useUserData((state) => state.openOrders);
+    const allPerpMetaAssets = useHyperliquidData((state) => state.allPerpMetaAssets);
     const isLoading = useMemo(() => openOrders === null && context.isConnected, [openOrders, context.isConnected]);
     const { openPositions } = usePosition();
     const positionsById = useMemo(() => {
@@ -6836,19 +7508,27 @@ function useOrders() {
             const isTpSl = ord.orderType === 'TP' || ord.orderType === 'SL';
             const hasAssets = ((_b = (_a = ord.longAssets) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 || ((_d = (_c = ord.shortAssets) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0;
             const pos = positionsById.get((_e = ord.positionId) !== null && _e !== void 0 ? _e : '');
-            if (!isTpSl || !pos)
-                return ord;
-            const mapAssets = (arr) => arr.map((a) => ({ asset: a.coin, weight: a.initialWeight }));
-            if (!hasAssets) {
-                return {
-                    ...ord,
+            let enrichedOrd = {
+                ...ord,
+                longAssets: enrichOrderAssets$1(ord.longAssets, allPerpMetaAssets),
+                shortAssets: enrichOrderAssets$1(ord.shortAssets, allPerpMetaAssets),
+            };
+            if (isTpSl && !hasAssets && pos) {
+                const mapAssets = (arr) => arr.map((a) => ({
+                    asset: a.coin,
+                    weight: a.initialWeight,
+                    marketPrefix: a.marketPrefix,
+                    collateralToken: a.collateralToken,
+                }));
+                enrichedOrd = {
+                    ...enrichedOrd,
                     longAssets: mapAssets(pos.longAssets),
                     shortAssets: mapAssets(pos.shortAssets),
                 };
             }
-            return ord;
+            return enrichedOrd;
         });
-    }, [openOrders, positionsById]);
+    }, [openOrders, positionsById, allPerpMetaAssets]);
     const adjustOrder$1 = async (orderId, payload) => {
         return adjustOrder(apiBaseUrl, orderId, payload);
     };
@@ -6858,16 +7538,156 @@ function useOrders() {
     const cancelTwapOrder$1 = async (orderId) => {
         return cancelTwapOrder(apiBaseUrl, orderId);
     };
-    return { adjustOrder: adjustOrder$1, cancelOrder: cancelOrder$1, cancelTwapOrder: cancelTwapOrder$1, openOrders: enrichedOpenOrders, isLoading };
+    return {
+        adjustOrder: adjustOrder$1,
+        cancelOrder: cancelOrder$1,
+        cancelTwapOrder: cancelTwapOrder$1,
+        openOrders: enrichedOpenOrders,
+        isLoading,
+    };
+}
+
+/**
+ * Hook for executing spot orders (swaps) on Hyperliquid
+ * Use this to swap between USDC and USDH or other spot assets
+ */
+function useSpotOrder() {
+    const context = useContext(PearHyperliquidContext);
+    if (!context) {
+        throw new Error('useSpotOrder must be used within a PearHyperliquidProvider');
+    }
+    const { apiBaseUrl } = context;
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const resetError = useCallback(() => {
+        setError(null);
+    }, []);
+    const executeSpotOrder$1 = useCallback(async (payload) => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const response = await executeSpotOrder(apiBaseUrl, payload);
+            return response;
+        }
+        catch (err) {
+            const apiError = err;
+            setError(apiError);
+            throw apiError;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [apiBaseUrl]);
+    return {
+        executeSpotOrder: executeSpotOrder$1,
+        isLoading,
+        error,
+        resetError,
+    };
 }
 
+function findAssetMeta$1(assetName, perpMetaAssets, knownPrefix, desiredCollateral) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    if (!perpMetaAssets) {
+        return { collateralToken: 'USDC', marketPrefix: null };
+    }
+    if (desiredCollateral) {
+        const collateralMatch = perpMetaAssets.find((a) => a.name === assetName && a.collateralToken === desiredCollateral);
+        if (collateralMatch) {
+            return {
+                collateralToken: (_a = collateralMatch.collateralToken) !== null && _a !== void 0 ? _a : 'USDC',
+                marketPrefix: (_b = collateralMatch.marketPrefix) !== null && _b !== void 0 ? _b : null,
+            };
+        }
+    }
+    if (assetName.includes(':')) {
+        const [prefix, symbol] = assetName.split(':');
+        const exactMatch = perpMetaAssets.find((a) => {
+            var _a;
+            return a.name === symbol &&
+                ((_a = a.marketPrefix) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === prefix.toLowerCase();
+        });
+        if (exactMatch) {
+            return {
+                collateralToken: (_c = exactMatch.collateralToken) !== null && _c !== void 0 ? _c : 'USDC',
+                marketPrefix: (_d = exactMatch.marketPrefix) !== null && _d !== void 0 ? _d : null,
+            };
+        }
+    }
+    if (knownPrefix) {
+        const exactMatch = perpMetaAssets.find((a) => {
+            var _a;
+            return a.name === assetName &&
+                ((_a = a.marketPrefix) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === knownPrefix.toLowerCase();
+        });
+        if (exactMatch) {
+            return {
+                collateralToken: (_e = exactMatch.collateralToken) !== null && _e !== void 0 ? _e : 'USDC',
+                marketPrefix: (_f = exactMatch.marketPrefix) !== null && _f !== void 0 ? _f : null,
+            };
+        }
+    }
+    const regularAsset = perpMetaAssets.find((a) => a.name === assetName && !a.marketPrefix);
+    if (regularAsset) {
+        return {
+            collateralToken: (_g = regularAsset.collateralToken) !== null && _g !== void 0 ? _g : 'USDC',
+            marketPrefix: null,
+        };
+    }
+    const hip3Assets = perpMetaAssets.filter((a) => a.name === assetName && a.marketPrefix);
+    if (hip3Assets.length > 0) {
+        if (desiredCollateral) {
+            const collateralMatch = hip3Assets.find((a) => a.collateralToken === desiredCollateral);
+            if (collateralMatch) {
+                return {
+                    collateralToken: (_h = collateralMatch.collateralToken) !== null && _h !== void 0 ? _h : 'USDC',
+                    marketPrefix: (_j = collateralMatch.marketPrefix) !== null && _j !== void 0 ? _j : null,
+                };
+            }
+        }
+        const usdHMatch = hip3Assets.find((a) => a.collateralToken === 'USDH');
+        const chosen = usdHMatch !== null && usdHMatch !== void 0 ? usdHMatch : hip3Assets[0];
+        return {
+            collateralToken: (_k = chosen.collateralToken) !== null && _k !== void 0 ? _k : 'USDC',
+            marketPrefix: (_l = chosen.marketPrefix) !== null && _l !== void 0 ? _l : null,
+        };
+    }
+    return { collateralToken: 'USDC', marketPrefix: null };
+}
+function enrichOrderAssets(assets, perpMetaAssets) {
+    if (!assets)
+        return [];
+    return assets.map((asset) => {
+        var _a;
+        if (asset.marketPrefix && asset.collateralToken) {
+            return asset;
+        }
+        const meta = findAssetMeta$1(asset.asset, perpMetaAssets, asset.marketPrefix, asset.collateralToken);
+        return {
+            ...asset,
+            marketPrefix: asset.marketPrefix || meta.marketPrefix,
+            collateralToken: (_a = asset.collateralToken) !== null && _a !== void 0 ? _a : meta.collateralToken,
+        };
+    });
+}
+function enrichTwapOrders(orders, perpMetaAssets) {
+    return orders.map((order) => ({
+        ...order,
+        longAssets: enrichOrderAssets(order.longAssets, perpMetaAssets),
+        shortAssets: enrichOrderAssets(order.shortAssets, perpMetaAssets),
+    }));
+}
 function useTwap() {
-    const twapDetails = useUserData(state => state.twapDetails);
+    const twapDetails = useUserData((state) => state.twapDetails);
+    const allPerpMetaAssets = useHyperliquidData((state) => state.allPerpMetaAssets);
     const context = useContext(PearHyperliquidContext);
     if (!context)
         throw new Error('useTwap must be used within a PearHyperliquidProvider');
     const { apiBaseUrl } = context;
-    const orders = useMemo(() => twapDetails !== null && twapDetails !== void 0 ? twapDetails : [], [twapDetails]);
+    const orders = useMemo(() => {
+        const rawOrders = twapDetails !== null && twapDetails !== void 0 ? twapDetails : [];
+        return enrichTwapOrders(rawOrders, allPerpMetaAssets);
+    }, [twapDetails, allPerpMetaAssets]);
     const cancelTwap$1 = async (orderId) => {
         return cancelTwap(apiBaseUrl, orderId);
     };
@@ -6950,59 +7770,170 @@ function useNotifications() {
     };
 }
 
-// Base selector for the full market-data payload
+// Helper to find asset metadata from perpMetaAssets
+function findAssetMeta(assetName, perpMetaAssets) {
+    var _a, _b, _c, _d;
+    if (!perpMetaAssets) {
+        return { collateralToken: 'USDC', marketPrefix: null };
+    }
+    // Try exact match first (for prefixed assets like "xyz:TSLA")
+    const exactMatch = perpMetaAssets.find((a) => a.name === assetName);
+    if (exactMatch) {
+        return {
+            collateralToken: (_a = exactMatch.collateralToken) !== null && _a !== void 0 ? _a : 'USDC',
+            marketPrefix: (_b = exactMatch.marketPrefix) !== null && _b !== void 0 ? _b : null,
+        };
+    }
+    // Try matching by base symbol (for non-prefixed names in data)
+    const baseMatch = perpMetaAssets.find((a) => {
+        const baseName = a.name.includes(':') ? a.name.split(':')[1] : a.name;
+        return baseName === assetName;
+    });
+    if (baseMatch) {
+        return {
+            collateralToken: (_c = baseMatch.collateralToken) !== null && _c !== void 0 ? _c : 'USDC',
+            marketPrefix: (_d = baseMatch.marketPrefix) !== null && _d !== void 0 ? _d : null,
+        };
+    }
+    return { collateralToken: 'USDC', marketPrefix: null };
+}
+// Enrich a single asset with metadata
+function enrichAsset(asset, perpMetaAssets) {
+    const meta = findAssetMeta(asset.asset, perpMetaAssets);
+    return {
+        ...asset,
+        collateralToken: meta.collateralToken,
+        marketPrefix: meta.marketPrefix,
+    };
+}
+// Enrich a basket item with collateral info
+function enrichBasketItem(item, perpMetaAssets) {
+    const enrichedLongs = item.longAssets.map((a) => enrichAsset(a, perpMetaAssets));
+    const enrichedShorts = item.shortAssets.map((a) => enrichAsset(a, perpMetaAssets));
+    // Determine collateral type
+    const allAssets = [...enrichedLongs, ...enrichedShorts];
+    const hasUsdc = allAssets.some((a) => a.collateralToken === 'USDC');
+    const hasUsdh = allAssets.some((a) => a.collateralToken === 'USDH');
+    let collateralType = 'USDC';
+    if (hasUsdc && hasUsdh) {
+        collateralType = 'MIXED';
+    }
+    else if (hasUsdh) {
+        collateralType = 'USDH';
+    }
+    return {
+        ...item,
+        longAssets: enrichedLongs,
+        shortAssets: enrichedShorts,
+        collateralType,
+    };
+}
+/**
+ * Filter baskets by collateral type
+ * - 'USDC': Only baskets where ALL assets use USDC (collateralType === 'USDC')
+ * - 'USDH': Only baskets where ALL assets use USDH (collateralType === 'USDH')
+ * - 'ALL' or undefined: No filtering, returns all baskets
+ */
+function filterByCollateral(baskets, filter) {
+    if (!filter || filter === 'ALL') {
+        return baskets;
+    }
+    return baskets.filter((basket) => {
+        if (filter === 'USDC') {
+            // Include baskets that are purely USDC or have USDC assets
+            return (basket.collateralType === 'USDC' || basket.collateralType === 'MIXED');
+        }
+        if (filter === 'USDH') {
+            // Include baskets that are purely USDH or have USDH assets
+            return (basket.collateralType === 'USDH' || basket.collateralType === 'MIXED');
+        }
+        return true;
+    });
+}
+// Base selector for the full market-data payload (raw from WS)
 const useMarketDataPayload = () => {
     return useMarketData((s) => s.marketData);
 };
-// Full payload for 'market-data-all' channel
+// Full payload for 'market-data-all' channel (raw from WS)
 const useMarketDataAllPayload = () => {
     return useMarketData((s) => s.marketDataAll);
 };
-// Active baskets
-const useActiveBaskets = () => {
-    var _a;
+// Access perpMetaAssets for enrichment
+const usePerpMetaAssets = () => {
+    return useHyperliquidData((s) => s.perpMetaAssets);
+};
+// Active baskets (with collateral and market prefix info)
+const useActiveBaskets = (collateralFilter) => {
     const data = useMarketDataPayload();
-    return (_a = data === null || data === void 0 ? void 0 : data.active) !== null && _a !== void 0 ? _a : [];
+    const perpMetaAssets = usePerpMetaAssets();
+    return useMemo(() => {
+        if (!(data === null || data === void 0 ? void 0 : data.active))
+            return [];
+        const enriched = data.active.map((item) => enrichBasketItem(item, perpMetaAssets));
+        return filterByCollateral(enriched, collateralFilter);
+    }, [data, perpMetaAssets, collateralFilter]);
 };
-// Top gainers (optional limit override)
-const useTopGainers = (limit) => {
+// Top gainers (with collateral and market prefix info)
+const useTopGainers = (limit, collateralFilter) => {
     const data = useMarketDataPayload();
+    const perpMetaAssets = usePerpMetaAssets();
     return useMemo(() => {
         var _a;
         const list = (_a = data === null || data === void 0 ? void 0 : data.topGainers) !== null && _a !== void 0 ? _a : [];
-        return typeof limit === 'number' ? list.slice(0, Math.max(0, limit)) : list;
-    }, [data, limit]);
+        const limited = typeof limit === 'number' ? list.slice(0, Math.max(0, limit)) : list;
+        const enriched = limited.map((item) => enrichBasketItem(item, perpMetaAssets));
+        return filterByCollateral(enriched, collateralFilter);
+    }, [data, perpMetaAssets, limit, collateralFilter]);
 };
-// Top losers (optional limit override)
-const useTopLosers = (limit) => {
+// Top losers (with collateral and market prefix info)
+const useTopLosers = (limit, collateralFilter) => {
     const data = useMarketDataPayload();
+    const perpMetaAssets = usePerpMetaAssets();
     return useMemo(() => {
         var _a;
         const list = (_a = data === null || data === void 0 ? void 0 : data.topLosers) !== null && _a !== void 0 ? _a : [];
-        return typeof limit === 'number' ? list.slice(0, Math.max(0, limit)) : list;
-    }, [data, limit]);
+        const limited = typeof limit === 'number' ? list.slice(0, Math.max(0, limit)) : list;
+        const enriched = limited.map((item) => enrichBasketItem(item, perpMetaAssets));
+        return filterByCollateral(enriched, collateralFilter);
+    }, [data, perpMetaAssets, limit, collateralFilter]);
 };
-// Highlighted baskets
-const useHighlightedBaskets = () => {
-    var _a;
+// Highlighted baskets (with collateral and market prefix info)
+const useHighlightedBaskets = (collateralFilter) => {
     const data = useMarketDataPayload();
-    return (_a = data === null || data === void 0 ? void 0 : data.highlighted) !== null && _a !== void 0 ? _a : [];
+    const perpMetaAssets = usePerpMetaAssets();
+    return useMemo(() => {
+        if (!(data === null || data === void 0 ? void 0 : data.highlighted))
+            return [];
+        const enriched = data.highlighted.map((item) => enrichBasketItem(item, perpMetaAssets));
+        return filterByCollateral(enriched, collateralFilter);
+    }, [data, perpMetaAssets, collateralFilter]);
 };
-// Watchlist baskets (from market-data payload when subscribed with address)
-const useWatchlistBaskets = () => {
-    var _a;
+// Watchlist baskets (with collateral and market prefix info)
+const useWatchlistBaskets = (collateralFilter) => {
     const data = useMarketDataPayload();
-    return (_a = data === null || data === void 0 ? void 0 : data.watchlist) !== null && _a !== void 0 ? _a : [];
+    const perpMetaAssets = usePerpMetaAssets();
+    return useMemo(() => {
+        if (!(data === null || data === void 0 ? void 0 : data.watchlist))
+            return [];
+        const enriched = data.watchlist.map((item) => enrichBasketItem(item, perpMetaAssets));
+        return filterByCollateral(enriched, collateralFilter);
+    }, [data, perpMetaAssets, collateralFilter]);
 };
-// All baskets (from market-data-all)
-const useAllBaskets = () => {
-    var _a;
+// All baskets (with collateral and market prefix info)
+const useAllBaskets = (collateralFilter) => {
     const dataAll = useMarketDataAllPayload();
-    return (_a = dataAll === null || dataAll === void 0 ? void 0 : dataAll.all) !== null && _a !== void 0 ? _a : [];
+    const perpMetaAssets = usePerpMetaAssets();
+    return useMemo(() => {
+        if (!(dataAll === null || dataAll === void 0 ? void 0 : dataAll.all))
+            return [];
+        const enriched = dataAll.all.map((item) => enrichBasketItem(item, perpMetaAssets));
+        return filterByCollateral(enriched, collateralFilter);
+    }, [dataAll, perpMetaAssets, collateralFilter]);
 };
 // Find a basket by its exact asset composition (order-insensitive)
 const useFindBasket = (longs, shorts) => {
     const data = useMarketDataPayload();
+    const perpMetaAssets = usePerpMetaAssets();
     return useMemo(() => {
         if (!data)
             return undefined;
@@ -7016,17 +7947,28 @@ const useFindBasket = (longs, shorts) => {
             : '';
         const lKey = normalize(longs);
         const sKey = normalize(shorts);
-        const match = (item) => normalize(item.longAssets) === lKey && normalize(item.shortAssets) === sKey;
-        return data.active.find(match) || data.highlighted.find(match);
-    }, [data, longs, shorts]);
+        const match = (item) => normalize(item.longAssets) === lKey &&
+            normalize(item.shortAssets) === sKey;
+        const found = data.active.find(match) || data.highlighted.find(match);
+        return found
+            ? enrichBasketItem(found, perpMetaAssets)
+            : undefined;
+    }, [data, longs, shorts, perpMetaAssets]);
 };
 
-async function toggleWatchlist(baseUrl, longAssets, shortAssets, displayToFull) {
+async function toggleWatchlist(baseUrl, longAssets, shortAssets, hip3Assets) {
     const url = joinUrl(baseUrl, '/watchlist');
-    const mapAssets = (arr) => arr.map(a => ({ ...a, asset: toBackendSymbol(a.asset, displayToFull) }));
+    const mapAssets = (arr) => arr.map((a) => ({ ...a, asset: toBackendSymbol(a.asset, hip3Assets) }));
     try {
-        const response = await apiClient.post(url, { longAssets: mapAssets(longAssets), shortAssets: mapAssets(shortAssets) }, { headers: { 'Content-Type': 'application/json' } });
-        return { data: response.data, status: response.status, headers: response.headers };
+        const response = await apiClient.post(url, {
+            longAssets: mapAssets(longAssets),
+            shortAssets: mapAssets(shortAssets),
+        }, { headers: { 'Content-Type': 'application/json' } });
+        return {
+            data: response.data,
+            status: response.status,
+            headers: response.headers,
+        };
     }
     catch (error) {
         throw toApiError(error);
@@ -7038,11 +7980,11 @@ function useWatchlist() {
     if (!context)
         throw new Error('useWatchlist must be used within a PearHyperliquidProvider');
     const { apiBaseUrl, isConnected } = context;
-    const displayToFull = useHyperliquidData((s) => s.hip3DisplayToFull);
+    const hip3Assets = useHyperliquidData((s) => s.hip3Assets);
     const marketData = useMarketDataPayload();
     const isLoading = useMemo(() => !marketData && isConnected, [marketData, isConnected]);
     const toggle = async (longAssets, shortAssets) => {
-        const resp = await toggleWatchlist(apiBaseUrl, longAssets, shortAssets, displayToFull);
+        const resp = await toggleWatchlist(apiBaseUrl, longAssets, shortAssets, hip3Assets);
         // Server will push updated market-data over WS; nothing to set here
         return resp;
     };
@@ -7296,16 +8238,111 @@ function useAuth() {
     };
 }
 
+const useAllUserBalances = () => {
+    const spotState = useUserData((state) => state.spotState);
+    const aggregatedClearingHouseState = useHyperliquidData((state) => state.aggregatedClearingHouseState);
+    const rawClearinghouseStates = useHyperliquidData((state) => state.rawClearinghouseStates);
+    const activeAssetData = useHyperliquidData((state) => state.activeAssetData);
+    const { longTokensMetadata, shortTokensMetadata } = useTokenSelectionMetadata();
+    return useMemo(() => {
+        const isLoading = !spotState || !aggregatedClearingHouseState;
+        // Helper function to truncate to 2 decimal places without rounding
+        const truncateToTwoDecimals = (value) => {
+            return Math.floor(value * 100) / 100;
+        };
+        // Get spot balances from spotState
+        let spotUsdcBal = undefined;
+        let spotUsdhBal = undefined;
+        if (spotState) {
+            const balances = spotState.balances || [];
+            for (const balance of balances) {
+                const total = parseFloat(balance.total || '0');
+                if (balance.coin === 'USDC') {
+                    spotUsdcBal = truncateToTwoDecimals(total);
+                }
+                if (balance.coin === 'USDH') {
+                    spotUsdhBal = truncateToTwoDecimals(total);
+                }
+            }
+        }
+        let availableToTradeUsdhFromAsset = 0;
+        // This activeAssetData only contains data for SELECTED tokens (user's long and short Tokens)
+        // It does NOT contain data for all tokens, so we cannot reliably use it for available to trade as used on hl trade page
+        // so intead, we rely on rawClearinghouseStates which provides market-specific data
+        // if (activeAssetData) {
+        //   Object.values(activeAssetData).forEach((assetData) => {
+        //     if (!assetData.availableToTrade) return;
+        //     const coinSymbol = assetData.coin;
+        //     const availableValue = truncateToTwoDecimals(
+        //       parseFloat(assetData.availableToTrade[0] || '0'),
+        //     );
+        //     // Determine collateral type based on market prefix
+        //     // HIP3 markets have prefix: "xyz:SYMBOL", "flx:SYMBOL", "vntl:SYMBOL", etc.
+        //     if (coinSymbol.includes(':')) {
+        //       const prefix = coinSymbol.split(':')[0];
+        //       if (prefix === 'xyz') {
+        //         // xyz markets use USDC
+        //         availableToTradeUsdcFromAsset = availableValue;
+        //       } else {
+        //         // flx, vntl, hyna and other markets use USDH
+        //         availableToTradeUsdhFromAsset = availableValue;
+        //       }
+        //     } else {
+        //       // Regular markets without prefix are automatically USDC
+        //       availableToTradeUsdcFromAsset = availableValue;
+        //     }
+        //   });
+        // }
+        // Calculate USDC available to trade
+        // Priority 1: Use value from activeAssetData if available (> 0)
+        // Priority 2: Calculate from USDC-specific clearinghouseState (empty prefix)
+        let availableToTradeUsdcValue = undefined;
+        if (rawClearinghouseStates) {
+            // Find USDC market (empty prefix)
+            const usdcMarket = rawClearinghouseStates.find(([prefix]) => prefix === '');
+            const usdcState = usdcMarket === null || usdcMarket === void 0 ? void 0 : usdcMarket[1];
+            if (usdcState === null || usdcState === void 0 ? void 0 : usdcState.marginSummary) {
+                const accountValue = parseFloat(usdcState.marginSummary.accountValue || '0');
+                const totalMarginUsed = parseFloat(usdcState.marginSummary.totalMarginUsed || '0');
+                const calculatedValue = Math.max(0, accountValue - totalMarginUsed);
+                availableToTradeUsdcValue = truncateToTwoDecimals(calculatedValue);
+            }
+        }
+        // Calculate USDH available to trade
+        // Priority 1: Use value from activeAssetData if available (> 0)
+        // Priority 2: Use spot USDH balance
+        const availableToTradeUsdhValue = availableToTradeUsdhFromAsset > 0
+            ? availableToTradeUsdhFromAsset
+            : spotUsdhBal;
+        return {
+            spotUsdcBalance: spotUsdcBal,
+            availableToTradeUsdc: availableToTradeUsdcValue,
+            spotUsdhBalance: spotUsdhBal,
+            availableToTradeUsdh: availableToTradeUsdhValue,
+            isLoading,
+        };
+    }, [
+        spotState,
+        aggregatedClearingHouseState,
+        rawClearinghouseStates,
+        activeAssetData,
+        longTokensMetadata,
+        shortTokensMetadata,
+    ]);
+};
+
 const PearHyperliquidContext = createContext(undefined);
 /**
  * React Provider for PearHyperliquidClient
  */
-const PearHyperliquidProvider = ({ children, apiBaseUrl = "https://hl-ui.pearprotocol.io", clientId = "PEARPROTOCOLUI", wsUrl = "wss://hl-ui.pearprotocol.io/ws", }) => {
+const PearHyperliquidProvider = ({ children, apiBaseUrl = 'https://hl-ui.pearprotocol.io', clientId = 'PEARPROTOCOLUI', wsUrl = 'wss://hl-ui.pearprotocol.io/ws', }) => {
     const address = useUserData((s) => s.address);
     const setAddress = useUserData((s) => s.setAddress);
     const perpsMetaAssets = useHyperliquidData((state) => state.perpMetaAssets);
     const setPerpMetaAssets = useHyperliquidData((state) => state.setPerpMetaAssets);
-    const setHip3DisplayToFull = useHyperliquidData((state) => state.setHip3DisplayToFull);
+    const setAllPerpMetaAssets = useHyperliquidData((state) => state.setAllPerpMetaAssets);
+    const setHip3Assets = useHyperliquidData((state) => state.setHip3Assets);
+    const setHip3MarketPrefixes = useHyperliquidData((state) => state.setHip3MarketPrefixes);
     const websocketsEnabled = useMemo(() => Array.isArray(perpsMetaAssets) && perpsMetaAssets.length > 0, [perpsMetaAssets]);
     const { isConnected, lastError } = useHyperliquidWebSocket({
         wsUrl,
@@ -7320,32 +8357,107 @@ const PearHyperliquidProvider = ({ children, apiBaseUrl = "https://hl-ui.pearpro
         if (perpsMetaAssets === null) {
             fetchAllPerpMetas()
                 .then((res) => {
-                // Only show HL and XYZ for now as other are using USDH collateral and need more work
-                const aggregatedPerpMetas = res.data
-                    .slice(0, 2)
-                    .flatMap((item) => item.universe);
-                const hip3Map = new Map();
-                const displayToFull = new Map();
-                const cleanedPerpMetas = aggregatedPerpMetas.map((asset) => {
-                    var _a;
-                    const [maybePrefix, maybeMarket] = asset.name.split(":");
-                    if (maybeMarket) {
-                        const prefix = maybePrefix.toLowerCase();
-                        const market = maybeMarket;
-                        const existing = (_a = hip3Map.get(prefix)) !== null && _a !== void 0 ? _a : [];
-                        hip3Map.set(prefix, [...existing, market]);
-                        displayToFull.set(market, `${prefix}:${market}`);
-                        return { ...asset, name: market };
-                    }
-                    return asset;
+                const assetToMarkets = new Map();
+                const marketPrefixes = new Map();
+                const FILTERED_PREFIXES = ['hyna'];
+                // Group assets by market prefix to match WebSocket flattening order
+                // WebSocket sends in order: "", "flx", "hyna", "vntl", "xyz" (we filter out hyna)
+                const assetsByPrefix = new Map();
+                const allAssetsByPrefix = new Map();
+                res.data.forEach((item) => {
+                    const collateralToken = item.collateralToken === 360 ? 'USDH' : 'USDC';
+                    item.universe.forEach((asset) => {
+                        var _a;
+                        const [maybePrefix, maybeMarket] = asset.name.split(':');
+                        if (maybeMarket) {
+                            // HIP3 asset with market prefix
+                            const prefix = maybePrefix.toLowerCase();
+                            const displayName = maybeMarket;
+                            const fullName = `${prefix}:${displayName}`;
+                            marketPrefixes.set(fullName, prefix);
+                            if (!FILTERED_PREFIXES.includes(prefix)) {
+                                const existingMarkets = (_a = assetToMarkets.get(displayName)) !== null && _a !== void 0 ? _a : [];
+                                if (!existingMarkets.includes(fullName)) {
+                                    assetToMarkets.set(displayName, [
+                                        ...existingMarkets,
+                                        fullName,
+                                    ]);
+                                }
+                            }
+                            const assetWithMeta = {
+                                ...asset,
+                                name: displayName,
+                                marketPrefix: prefix,
+                                collateralToken,
+                            };
+                            // Group by market prefix
+                            const allList = allAssetsByPrefix.get(prefix) || [];
+                            allList.push(assetWithMeta);
+                            allAssetsByPrefix.set(prefix, allList);
+                            if (!FILTERED_PREFIXES.includes(prefix)) {
+                                const cleanedList = assetsByPrefix.get(prefix) || [];
+                                cleanedList.push(assetWithMeta);
+                                assetsByPrefix.set(prefix, cleanedList);
+                            }
+                        }
+                        else {
+                            // Default market asset (no prefix)
+                            const assetWithMeta = {
+                                ...asset,
+                                collateralToken,
+                            };
+                            // Add to default market group ("")
+                            const defaultList = assetsByPrefix.get('') || [];
+                            defaultList.push(assetWithMeta);
+                            assetsByPrefix.set('', defaultList);
+                            const allDefaultList = allAssetsByPrefix.get('') || [];
+                            allDefaultList.push(assetWithMeta);
+                            allAssetsByPrefix.set('', allDefaultList);
+                        }
+                    });
+                });
+                // Flatten in consistent order: default market first, then HIP3 markets alphabetically
+                // This ensures both REST API and WebSocket data align properly
+                const cleanedPrefixes = Array.from(assetsByPrefix.keys()).sort((a, b) => {
+                    // Empty prefix (default market) always comes first
+                    if (a === '' && b !== '')
+                        return -1;
+                    if (a !== '' && b === '')
+                        return 1;
+                    // HIP3 markets sorted alphabetically
+                    return a.localeCompare(b);
                 });
-                setHip3DisplayToFull(displayToFull);
+                const allPrefixes = Array.from(allAssetsByPrefix.keys()).sort((a, b) => {
+                    if (a === '' && b !== '')
+                        return -1;
+                    if (a !== '' && b === '')
+                        return 1;
+                    return a.localeCompare(b);
+                });
+                const cleanedPerpMetas = [];
+                const allPerpMetas = [];
+                cleanedPrefixes.forEach((prefix) => {
+                    const assets = assetsByPrefix.get(prefix) || [];
+                    cleanedPerpMetas.push(...assets);
+                });
+                allPrefixes.forEach((prefix) => {
+                    const assets = allAssetsByPrefix.get(prefix) || [];
+                    allPerpMetas.push(...assets);
+                });
+                setHip3Assets(assetToMarkets);
+                setHip3MarketPrefixes(marketPrefixes);
                 setPerpMetaAssets(cleanedPerpMetas);
+                setAllPerpMetaAssets(allPerpMetas);
             })
                 .catch(() => { });
         }
-    }, [perpsMetaAssets, setPerpMetaAssets, setHip3DisplayToFull]);
-    // Auth methods now sourced from useAuth hook
+    }, [
+        perpsMetaAssets,
+        setPerpMetaAssets,
+        setAllPerpMetaAssets,
+        setHip3Assets,
+        setHip3MarketPrefixes,
+    ]);
     useAutoSyncFills({
         baseUrl: apiBaseUrl,
         address,
@@ -7383,7 +8495,7 @@ const PearHyperliquidProvider = ({ children, apiBaseUrl = "https://hl-ui.pearpro
 function usePearHyperliquid() {
     const ctx = useContext(PearHyperliquidContext);
     if (!ctx)
-        throw new Error("usePearHyperliquid must be used within a PearHyperliquidProvider");
+        throw new Error('usePearHyperliquid must be used within a PearHyperliquidProvider');
     return ctx;
 }
 
@@ -7474,4 +8586,4 @@ function mapCandleIntervalToTradingViewInterval(interval) {
     }
 }
 
-export { AccountSummaryCalculator, ConflictDetector, MAX_ASSETS_PER_LEG, MINIMUM_ASSET_USD_VALUE, MaxAssetsPerLegError, MinimumPositionSizeError, PearHyperliquidProvider, TokenMetadataExtractor, adjustAdvancePosition, adjustOrder, adjustPosition, calculateMinimumPositionValue, calculateWeightedRatio, cancelOrder, cancelTwap, cancelTwapOrder, closeAllPositions, closePosition, computeBasketCandles, createCandleLookups, createPosition, getCompleteTimestamps, getPortfolio, mapCandleIntervalToTradingViewInterval, mapTradingViewIntervalToCandleInterval, markNotificationReadById, markNotificationsRead, toggleWatchlist, updateLeverage, updateRiskParameters, useAccountSummary, useActiveBaskets, useAgentWallet, useAllBaskets, useAuth, useAutoSyncFills, useBasketCandles, useFindBasket, useHighlightedBaskets, useHistoricalPriceData, useHistoricalPriceDataStore, useHyperliquidNativeWebSocket, useHyperliquidWebSocket, useMarketData, useMarketDataAllPayload, useMarketDataPayload, useNotifications, useOpenOrders, useOrders, usePearHyperliquid, usePerformanceOverlays, usePortfolio, usePosition, useTokenSelectionMetadata, useTopGainers, useTopLosers, useTradeHistories, useTwap, useUserSelection, useWatchlist, useWatchlistBaskets, useWebData, validateMaxAssetsPerLeg, validateMinimumAssetSize, validatePositionSize };
+export { AccountSummaryCalculator, ConflictDetector, MAX_ASSETS_PER_LEG, MINIMUM_ASSET_USD_VALUE, MaxAssetsPerLegError, MinimumPositionSizeError, PearHyperliquidProvider, TokenMetadataExtractor, adjustAdvancePosition, adjustOrder, adjustPosition, calculateMinimumPositionValue, calculateWeightedRatio, cancelOrder, cancelTwap, cancelTwapOrder, closeAllPositions, closePosition, computeBasketCandles, createCandleLookups, createPosition, executeSpotOrder, getAvailableMarkets, getCompleteTimestamps, getMarketPrefix, getPortfolio, isHip3Market, mapCandleIntervalToTradingViewInterval, mapTradingViewIntervalToCandleInterval, markNotificationReadById, markNotificationsRead, toBackendSymbol, toBackendSymbolWithMarket, toDisplaySymbol, toggleWatchlist, updateLeverage, updateRiskParameters, useAccountSummary, useActiveBaskets, useAgentWallet, useAllBaskets, useAllUserBalances, useAuth, useAutoSyncFills, useBasketCandles, useFindBasket, useHighlightedBaskets, useHistoricalPriceData, useHistoricalPriceDataStore, useHyperliquidNativeWebSocket, useHyperliquidWebSocket, useMarketData, useMarketDataAllPayload, useMarketDataPayload, useNotifications, useOpenOrders, useOrders, usePearHyperliquid, usePerformanceOverlays, usePerpMetaAssets, usePortfolio, usePosition, useSpotOrder, useTokenSelectionMetadata, useTopGainers, useTopLosers, useTradeHistories, useTwap, useUserSelection, useWatchlist, useWatchlistBaskets, useWebData, validateMaxAssetsPerLeg, validateMinimumAssetSize, validatePositionSize };