@pear-protocol/hyperliquid-sdk 0.0.65 → 0.0.66-usdh-2

package/dist/index.js

@@ -23,6 +23,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 +44,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 +56,7 @@ const useUserData = create((set) => ({
         accountSummary: null,
         twapDetails: null,
         notifications: null,
+        spotState: null,
     }),
     setUserExtraAgents: (value) => set({ userExtraAgents: value }),
 }));
@@ -71,18 +74,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, displayToFull) {
+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 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 +155,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 +175,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 +199,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 +220,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 +237,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 +263,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 +288,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 +365,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 +374,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 +391,7 @@ const useHyperliquidWebSocket = ({ wsUrl, address, enabled = true, }) => {
             sendMessage(JSON.stringify({
                 action: 'unsubscribe',
                 address: lastSubscribedAddress,
-                channels: addressSpecificChannels
+                channels: addressSpecificChannels,
             }));
             setLastSubscribedAddress(null);
         }
@@ -294,7 +399,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]);
@@ -318,10 +423,12 @@ const useHyperliquidData = create((set, get) => ({
     finalAtOICaps: null,
     aggregatedClearingHouseState: 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,15 +463,130 @@ 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 }),
     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 }),
 }));
 
+/**
+ * Minimum USD value required per asset when creating a position
+ */
+const MINIMUM_ASSET_USD_VALUE = 11;
+/**
+ * Maximum number of assets allowed per leg (long or short) in a position
+ */
+const MAX_ASSETS_PER_LEG = 15;
+/**
+ * Validation error for minimum position size
+ */
+class MinimumPositionSizeError extends Error {
+    constructor(assetName, assetValue, minimumRequired) {
+        super(`Asset "${assetName}" has a USD value of $${assetValue.toFixed(2)}, which is below the minimum required value of $${minimumRequired.toFixed(2)}`);
+        this.assetName = assetName;
+        this.assetValue = assetValue;
+        this.minimumRequired = minimumRequired;
+        this.name = "MinimumPositionSizeError";
+    }
+}
+/**
+ * Validation error for exceeding maximum assets per leg
+ */
+class MaxAssetsPerLegError extends Error {
+    constructor(leg, assetCount, maxAllowed) {
+        super(`Maximum ${maxAllowed} assets allowed per leg. Your ${leg} leg has ${assetCount} assets. Please reduce the number of assets to continue.`);
+        this.leg = leg;
+        this.assetCount = assetCount;
+        this.maxAllowed = maxAllowed;
+        this.name = "MaxAssetsPerLegError";
+    }
+}
+/**
+ * Validates that each leg doesn't exceed the maximum number of assets
+ * @param longAssets Array of long assets
+ * @param shortAssets Array of short assets
+ * @throws MaxAssetsPerLegError if any leg exceeds the maximum allowed assets
+ */
+function validateMaxAssetsPerLeg(longAssets, shortAssets) {
+    const longCount = (longAssets === null || longAssets === void 0 ? void 0 : longAssets.length) || 0;
+    const shortCount = (shortAssets === null || shortAssets === void 0 ? void 0 : shortAssets.length) || 0;
+    if (longCount > MAX_ASSETS_PER_LEG) {
+        throw new MaxAssetsPerLegError("long", longCount, MAX_ASSETS_PER_LEG);
+    }
+    if (shortCount > MAX_ASSETS_PER_LEG) {
+        throw new MaxAssetsPerLegError("short", shortCount, MAX_ASSETS_PER_LEG);
+    }
+}
+/**
+ * Validates that each asset in a position has at least the minimum USD value
+ * @param usdValue Total USD value for the position
+ * @param longAssets Array of long assets with weights
+ * @param shortAssets Array of short assets with weights
+ * @throws MinimumPositionSizeError if any asset has less than the minimum USD value
+ */
+function validateMinimumAssetSize(usdValue, longAssets, shortAssets) {
+    var _a;
+    const allAssets = [...(longAssets || []), ...(shortAssets || [])];
+    if (allAssets.length === 0) {
+        return; // No assets to validate
+    }
+    // Calculate total weight
+    const totalWeight = allAssets.reduce((sum, asset) => { var _a; return sum + ((_a = asset.weight) !== null && _a !== void 0 ? _a : 0); }, 0);
+    // If weights are not provided or sum to 0, assume equal distribution
+    const hasWeights = totalWeight > 0;
+    const equalWeight = hasWeights ? 0 : 1 / allAssets.length;
+    // Validate each asset
+    for (const asset of allAssets) {
+        const weight = hasWeights ? (_a = asset.weight) !== null && _a !== void 0 ? _a : 0 : equalWeight;
+        const assetUsdValue = usdValue * weight;
+        if (assetUsdValue < MINIMUM_ASSET_USD_VALUE) {
+            throw new MinimumPositionSizeError(asset.asset, assetUsdValue, MINIMUM_ASSET_USD_VALUE);
+        }
+    }
+}
+/**
+ * Calculates the minimum USD value required for a position based on the number of assets
+ * @param longAssets Array of long assets
+ * @param shortAssets Array of short assets
+ * @returns The minimum total USD value required
+ */
+function calculateMinimumPositionValue(longAssets, shortAssets) {
+    const totalAssets = ((longAssets === null || longAssets === void 0 ? void 0 : longAssets.length) || 0) + ((shortAssets === null || shortAssets === void 0 ? void 0 : shortAssets.length) || 0);
+    if (totalAssets === 0) {
+        return 0;
+    }
+    return MINIMUM_ASSET_USD_VALUE * totalAssets;
+}
+/**
+ * Validates and provides a user-friendly error message with suggestions
+ * @param usdValue Total USD value for the position
+ * @param longAssets Array of long assets with weights
+ * @param shortAssets Array of short assets with weights
+ * @returns Validation result with success flag and optional error message
+ */
+function validatePositionSize(usdValue, longAssets, shortAssets) {
+    try {
+        validateMinimumAssetSize(usdValue, longAssets, shortAssets);
+        return { valid: true };
+    }
+    catch (error) {
+        if (error instanceof MinimumPositionSizeError) {
+            const minimumRequired = calculateMinimumPositionValue(longAssets, shortAssets);
+            return {
+                valid: false,
+                error: error.message,
+                minimumRequired,
+            };
+        }
+        throw error;
+    }
+}
+
 const DEFAULT_STATE = {
     longTokens: [
         { symbol: "HYPE", weight: 25 },
@@ -413,14 +635,23 @@ const useUserSelection$1 = create((set, get) => ({
             }
         });
     },
+    canAddToken: (isLong) => {
+        const currentTokens = isLong ? get().longTokens : get().shortTokens;
+        return currentTokens.length < MAX_ASSETS_PER_LEG;
+    },
     addToken: (isLong) => {
         const currentTokens = isLong ? get().longTokens : get().shortTokens;
+        // Check if we've reached the maximum number of assets per leg
+        if (currentTokens.length >= MAX_ASSETS_PER_LEG) {
+            return false;
+        }
         const newIndex = currentTokens.length;
         set((prev) => ({
             ...prev,
             selectorConfig: { isLong, index: newIndex },
             openTokenSelector: true,
         }));
+        return true;
     },
     removeToken: (isLong, index) => {
         set((prev) => {
@@ -503,11 +734,12 @@ 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, } = useHyperliquidData();
+    const { setSpotState } = useUserData();
     const { candleInterval } = useUserSelection$1();
     const longTokens = useUserSelection$1((s) => s.longTokens);
     const shortTokens = useUserSelection$1((s) => s.shortTokens);
-    const selectedTokenSymbols = useMemo(() => ([...longTokens, ...shortTokens].map((t) => t.symbol)), [longTokens, shortTokens]);
+    const selectedTokenSymbols = useMemo(() => [...longTokens, ...shortTokens].map((t) => t.symbol), [longTokens, shortTokens]);
     const [lastError, setLastError] = useState(null);
     const [subscribedAddress, setSubscribedAddress] = useState(null);
     const [subscribedTokens, setSubscribedTokens] = useState([]);
@@ -545,7 +777,21 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
                     case 'allDexsAssetCtxs':
                         {
                             const data = response.data;
-                            const finalAssetContexts = (data.ctxs || []).flatMap(([, ctxs]) => ctxs || []);
+                            // Filter out vntl and hyna to match perpMetaAssets filtering
+                            const FILTERED_DEX_PREFIXES = ['vntl', '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;
@@ -556,7 +802,7 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
                                 .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 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 = {
@@ -587,19 +833,42 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
                     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':
                         {
                             const assetData = response.data;
                             const symbol = toDisplaySymbol(assetData.coin);
-                            const normalized = { ...assetData, coin: symbol };
+                            const normalized = {
+                                ...assetData,
+                                coin: symbol,
+                            };
                             upsertActiveAssetData(symbol, normalized);
                         }
                         break;
@@ -611,6 +880,14 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
                             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}`);
                 }
@@ -621,7 +898,15 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
             console.error('[HyperLiquid WS] Parse error:', errorMessage, 'Raw message:', event.data);
             setLastError(errorMessage);
         }
-    }, [setAllMids, upsertActiveAssetData, addCandleData, setFinalAssetContexts, setFinalAtOICaps, setAggregatedClearingHouseState]);
+    }, [
+        setAllMids,
+        upsertActiveAssetData,
+        addCandleData,
+        setFinalAssetContexts,
+        setFinalAtOICaps,
+        setAggregatedClearingHouseState,
+        setSpotState,
+    ]);
     const connect = useCallback(() => {
         if (!enabled)
             return;
@@ -719,6 +1004,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: {
@@ -762,13 +1058,34 @@ 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);
+            // clear spotState
+            setSpotState(null);
         }
-    }, [isConnected, address, subscribedAddress, sendJsonMessage, setAggregatedClearingHouseState]);
+    }, [
+        isConnected,
+        address,
+        subscribedAddress,
+        sendJsonMessage,
+        setAggregatedClearingHouseState,
+        setSpotState,
+    ]);
     // Handle token subscriptions for activeAssetData
     useEffect(() => {
         if (!isConnected || !address)
@@ -777,7 +1094,7 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
         const tokensToSubscribe = effectiveTokens.filter((token) => token && !subscribedTokens.includes(token));
         const tokensToUnsubscribe = subscribedTokens.filter((token) => !effectiveTokens.includes(token));
         // Unsubscribe from tokens no longer in the list
-        tokensToUnsubscribe.forEach(token => {
+        tokensToUnsubscribe.forEach((token) => {
             const unsubscribeMessage = {
                 method: 'unsubscribe',
                 subscription: {
@@ -789,7 +1106,7 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
             sendJsonMessage(unsubscribeMessage);
         });
         // Subscribe to new tokens
-        tokensToSubscribe.forEach(token => {
+        tokensToSubscribe.forEach((token) => {
             const subscribeMessage = {
                 method: 'subscribe',
                 subscription: {
@@ -804,7 +1121,14 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
             setSubscribedTokens(effectiveTokens.filter((token) => token));
             tokensToSubscribe.forEach((token) => deleteActiveAssetData(token));
         }
-    }, [isConnected, address, selectedTokenSymbols, subscribedTokens, sendJsonMessage, setActiveAssetData]);
+    }, [
+        isConnected,
+        address,
+        selectedTokenSymbols,
+        subscribedTokens,
+        sendJsonMessage,
+        setActiveAssetData,
+    ]);
     // Handle candle subscriptions for tokens and interval changes
     useEffect(() => {
         if (!isConnected)
@@ -813,7 +1137,7 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
         // Unsubscribe from previous candle subscriptions if interval changed
         const prevInterval = prevCandleIntervalRef.current;
         if (prevInterval && prevInterval !== candleInterval) {
-            subscribedCandleTokens.forEach(token => {
+            subscribedCandleTokens.forEach((token) => {
                 const unsubscribeMessage = {
                     method: 'unsubscribe',
                     subscription: {
@@ -854,12 +1178,21 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
             sendJsonMessage(subscribeMessage);
         });
         // Update subscribed state
-        if (tokensToSubscribe.length > 0 || tokensToUnsubscribe.length > 0 || prevInterval !== candleInterval) {
+        if (tokensToSubscribe.length > 0 ||
+            tokensToUnsubscribe.length > 0 ||
+            prevInterval !== candleInterval) {
             setSubscribedCandleTokens(effectiveTokens.filter((token) => token));
             prevCandleIntervalRef.current = candleInterval;
             tokensToUnsubscribe.forEach((token) => deleteCandleSymbol(token));
         }
-    }, [isConnected, selectedTokenSymbols, candleInterval, subscribedCandleTokens, sendJsonMessage, setCandleData]);
+    }, [
+        isConnected,
+        selectedTokenSymbols,
+        candleInterval,
+        subscribedCandleTokens,
+        sendJsonMessage,
+        setCandleData,
+    ]);
     return {
         isConnected,
         lastError,
@@ -948,20 +1281,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) {
@@ -990,21 +1415,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,
@@ -1019,19 +1474,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;
         }
@@ -1040,9 +1506,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
@@ -1053,7 +1530,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;
@@ -1071,21 +1552,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;
     }
@@ -1098,10 +1585,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,
@@ -1111,23 +1618,65 @@ const useTokenSelectionMetadataStore = create((set) => ({
     weightedRatio24h: 1,
     priceRatio: 1,
     priceRatio24h: 1,
-    openInterest: "0",
-    volume: "0",
+    openInterest: '0',
+    volume: '0',
     sumNetFunding: 0,
     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 = (() => {
@@ -1135,26 +1684,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" };
+            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 } = (() => {
@@ -1234,17 +1790,27 @@ const useTokenSelectionMetadataStore = create((set) => ({
             return totalFunding;
         })();
         // Max leverage (minimum 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 minLev = Infinity;
-            allTokenSymbols.forEach((symbol) => {
-                const tokenUniverse = perpMetaAssets.find((u) => u.name === symbol);
-                if (tokenUniverse === null || tokenUniverse === void 0 ? void 0 : tokenUniverse.maxLeverage)
-                    minLev = Math.min(minLev, 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)
+                    minLev = Math.min(minLev, fallbackUniverse.maxLeverage);
             });
             return minLev === Infinity ? 0 : minLev;
         })();
@@ -1256,7 +1822,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; });
@@ -5441,8 +6010,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',
@@ -5601,10 +6170,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 };
                 }
@@ -6288,97 +6857,19 @@ function useAutoSyncFills(options) {
 }
 
 /**
- * Minimum USD value required per asset when creating a position
- */
-const MINIMUM_ASSET_USD_VALUE = 11;
-/**
- * Validation error for minimum position size
- */
-class MinimumPositionSizeError extends Error {
-    constructor(assetName, assetValue, minimumRequired) {
-        super(`Asset "${assetName}" has a USD value of $${assetValue.toFixed(2)}, which is below the minimum required value of $${minimumRequired.toFixed(2)}`);
-        this.assetName = assetName;
-        this.assetValue = assetValue;
-        this.minimumRequired = minimumRequired;
-        this.name = "MinimumPositionSizeError";
-    }
-}
-/**
- * Validates that each asset in a position has at least the minimum USD value
- * @param usdValue Total USD value for the position
- * @param longAssets Array of long assets with weights
- * @param shortAssets Array of short assets with weights
- * @throws MinimumPositionSizeError if any asset has less than the minimum USD value
+ * Create a position (MARKET/LIMIT/TWAP) using Pear Hyperliquid service
+ * Authorization is derived from headers (Axios defaults or browser localStorage fallback)
+ * @throws MinimumPositionSizeError if any asset has less than $11 USD value
+ * @throws MaxAssetsPerLegError if any leg exceeds the maximum allowed assets (15)
  */
-function validateMinimumAssetSize(usdValue, longAssets, shortAssets) {
-    var _a;
-    const allAssets = [...(longAssets || []), ...(shortAssets || [])];
-    if (allAssets.length === 0) {
-        return; // No assets to validate
-    }
-    // Calculate total weight
-    const totalWeight = allAssets.reduce((sum, asset) => { var _a; return sum + ((_a = asset.weight) !== null && _a !== void 0 ? _a : 0); }, 0);
-    // If weights are not provided or sum to 0, assume equal distribution
-    const hasWeights = totalWeight > 0;
-    const equalWeight = hasWeights ? 0 : 1 / allAssets.length;
-    // Validate each asset
-    for (const asset of allAssets) {
-        const weight = hasWeights ? (_a = asset.weight) !== null && _a !== void 0 ? _a : 0 : equalWeight;
-        const assetUsdValue = usdValue * weight;
-        if (assetUsdValue < MINIMUM_ASSET_USD_VALUE) {
-            throw new MinimumPositionSizeError(asset.asset, assetUsdValue, MINIMUM_ASSET_USD_VALUE);
-        }
-    }
-}
-/**
- * Calculates the minimum USD value required for a position based on the number of assets
- * @param longAssets Array of long assets
- * @param shortAssets Array of short assets
- * @returns The minimum total USD value required
- */
-function calculateMinimumPositionValue(longAssets, shortAssets) {
-    const totalAssets = ((longAssets === null || longAssets === void 0 ? void 0 : longAssets.length) || 0) + ((shortAssets === null || shortAssets === void 0 ? void 0 : shortAssets.length) || 0);
-    if (totalAssets === 0) {
-        return 0;
-    }
-    return MINIMUM_ASSET_USD_VALUE * totalAssets;
-}
-/**
- * Validates and provides a user-friendly error message with suggestions
- * @param usdValue Total USD value for the position
- * @param longAssets Array of long assets with weights
- * @param shortAssets Array of short assets with weights
- * @returns Validation result with success flag and optional error message
- */
-function validatePositionSize(usdValue, longAssets, shortAssets) {
-    try {
-        validateMinimumAssetSize(usdValue, longAssets, shortAssets);
-        return { valid: true };
-    }
-    catch (error) {
-        if (error instanceof MinimumPositionSizeError) {
-            const minimumRequired = calculateMinimumPositionValue(longAssets, shortAssets);
-            return {
-                valid: false,
-                error: error.message,
-                minimumRequired,
-            };
-        }
-        throw error;
-    }
-}
-
-/**
- * Create a position (MARKET/LIMIT/TWAP) using Pear Hyperliquid service
- * Authorization is derived from headers (Axios defaults or browser localStorage fallback)
- * @throws MinimumPositionSizeError if any asset has less than $11 USD value
- */
-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),
@@ -6477,9 +6968,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),
@@ -6542,6 +7033,9 @@ const calculatePositionAsset = (asset, currentPrice, totalInitialPositionSize, l
         entryPositionValue: entryNotional,
         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) => {
@@ -6604,57 +7098,151 @@ 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);
     };
-    // Open positions using WS data, with derived values
     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, 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,
+        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);
@@ -6663,8 +7251,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);
@@ -6674,19 +7268,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(() => {
@@ -6705,19 +7409,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);
     };
@@ -6727,16 +7439,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);
     };
@@ -6819,59 +7671,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;
@@ -6885,17 +7848,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);
@@ -6907,11 +7881,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;
     };
@@ -7165,16 +8139,48 @@ function useAuth() {
     };
 }
 
+const useSpotBalances = () => {
+    const spotState = useUserData((state) => state.spotState);
+    return useMemo(() => {
+        if (!spotState) {
+            return {
+                usdhBalance: undefined,
+                spotUsdcBalance: undefined,
+                isLoading: true,
+            };
+        }
+        const balances = spotState.balances || [];
+        let usdhBal = 0;
+        let spotUsdcBal = 0;
+        for (const balance of balances) {
+            const total = parseFloat(balance.total || '0');
+            if (balance.coin === 'USDH') {
+                usdhBal = total;
+            }
+            if (balance.coin === 'USDC') {
+                spotUsdcBal = total;
+            }
+        }
+        return {
+            usdhBalance: usdhBal,
+            spotUsdcBalance: spotUsdcBal,
+            isLoading: false,
+        };
+    }, [spotState]);
+};
+
 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,
@@ -7189,32 +8195,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 = ['vntl', 'hyna'];
+                // Group assets by market prefix to match WebSocket flattening order
+                // WebSocket sends in order: "", "flx", "hyna", "vntl", "xyz"
+                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);
+                });
+                const allPrefixes = Array.from(allAssetsByPrefix.keys()).sort((a, b) => {
+                    if (a === '' && b !== '')
+                        return -1;
+                    if (a !== '' && b === '')
+                        return 1;
+                    return a.localeCompare(b);
                 });
-                setHip3DisplayToFull(displayToFull);
+                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,
@@ -7252,7 +8333,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;
 }
 
@@ -7343,4 +8424,4 @@ function mapCandleIntervalToTradingViewInterval(interval) {
     }
 }
 
-export { AccountSummaryCalculator, ConflictDetector, MINIMUM_ASSET_USD_VALUE, MinimumPositionSizeError, PearHyperliquidProvider, TokenMetadataExtractor, adjustAdvancePosition, adjustOrder, adjustPosition, calculateMinimumPositionValue, calculateWeightedRatio, cancelOrder, cancelTwap, cancelTwapOrder, closeAllPositions, closePosition, computeBasketCandles, createCandleLookups, createPosition, getCompleteTimestamps, getPortfolio, mapCandleIntervalToTradingViewInterval, mapTradingViewIntervalToCandleInterval, markNotificationReadById, markNotificationsRead, toggleWatchlist, 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, 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, updateRiskParameters, useAccountSummary, useActiveBaskets, useAgentWallet, useAllBaskets, useAuth, useAutoSyncFills, useBasketCandles, useFindBasket, useHighlightedBaskets, useHistoricalPriceData, useHistoricalPriceDataStore, useHyperliquidNativeWebSocket, useHyperliquidWebSocket, useMarketData, useMarketDataAllPayload, useMarketDataPayload, useNotifications, useOpenOrders, useOrders, usePearHyperliquid, usePerformanceOverlays, usePerpMetaAssets, usePortfolio, usePosition, useSpotBalances, useSpotOrder, useTokenSelectionMetadata, useTopGainers, useTopLosers, useTradeHistories, useTwap, useUserSelection, useWatchlist, useWatchlistBaskets, useWebData, validateMaxAssetsPerLeg, validateMinimumAssetSize, validatePositionSize };