@pear-protocol/hyperliquid-sdk 0.0.59 → 0.0.60-beta-usdh

package/dist/index.js

@@ -71,18 +71,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, }) => {
@@ -318,10 +371,11 @@ const useHyperliquidData = create((set, get) => ({
     finalAtOICaps: null,
     aggregatedClearingHouseState: null,
     perpMetaAssets: null,
-    hip3DisplayToFull: new Map(),
+    hip3Assets: new Map(),
+    hip3MarketPrefixes: new Map(),
     setAllMids: (value) => set({ allMids: value }),
     setActiveAssetData: (value) => set((state) => ({
-        activeAssetData: typeof value === 'function' ? value(state.activeAssetData) : value
+        activeAssetData: typeof value === 'function' ? value(state.activeAssetData) : value,
     })),
     deleteActiveAssetData: (key) => {
         set((state) => {
@@ -356,13 +410,14 @@ 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 })
+    setHip3Assets: (value) => set({ hip3Assets: value }),
+    setHip3MarketPrefixes: (value) => set({ hip3MarketPrefixes: value }),
 }));
 
 const DEFAULT_STATE = {
@@ -503,11 +558,11 @@ 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 { 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 +600,7 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
                                 .map((dex) => dex.clearinghouseState)
                                 .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 = {
@@ -578,17 +633,42 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
                     case 'allMids':
                         {
                             const data = response.data;
-                            const remapped = {
-                                mids: Object.fromEntries(Object.entries(data.mids || {}).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;
@@ -610,7 +690,14 @@ 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,
+    ]);
     const connect = useCallback(() => {
         if (!enabled)
             return;
@@ -733,7 +820,13 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
             // clear aggregatedClearingHouseState
             setAggregatedClearingHouseState(null);
         }
-    }, [isConnected, address, subscribedAddress, sendJsonMessage, setAggregatedClearingHouseState]);
+    }, [
+        isConnected,
+        address,
+        subscribedAddress,
+        sendJsonMessage,
+        setAggregatedClearingHouseState,
+    ]);
     // Handle token subscriptions for activeAssetData
     useEffect(() => {
         if (!isConnected || !address)
@@ -742,7 +835,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: {
@@ -754,7 +847,7 @@ const useHyperliquidNativeWebSocket = ({ address, enabled = true, }) => {
             sendJsonMessage(unsubscribeMessage);
         });
         // Subscribe to new tokens
-        tokensToSubscribe.forEach(token => {
+        tokensToSubscribe.forEach((token) => {
             const subscribeMessage = {
                 method: 'subscribe',
                 subscription: {
@@ -769,7 +862,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)
@@ -778,7 +878,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: {
@@ -819,12 +919,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,
@@ -946,21 +1055,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,
@@ -975,30 +1114,60 @@ 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);
-        if (universeIndex === -1) {
+        // 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 no exact match found and prefix was specified, try finding the specific market variant
+        const finalIndex = universeIndex === -1 && marketPrefix
+            ? perpMetaAssets.findIndex((asset) => asset.name === symbol && asset.marketPrefix === marketPrefix)
+            : universeIndex;
+        // Fallback: if still not found and no prefix, find first matching by name (for backward compatibility)
+        const resolvedIndex = finalIndex === -1
+            ? perpMetaAssets.findIndex((asset) => asset.name === symbol)
+            : finalIndex;
+        if (resolvedIndex === -1) {
             return null;
         }
-        const universeAsset = perpMetaAssets[universeIndex];
-        const assetCtx = finalAssetContexts[universeIndex];
+        const universeAsset = perpMetaAssets[resolvedIndex];
+        const assetCtx = finalAssetContexts[resolvedIndex];
         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
@@ -1009,7 +1178,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;
@@ -1027,21 +1200,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;
     }
@@ -1054,10 +1233,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,
@@ -1067,23 +1266,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 = (() => {
@@ -1091,26 +1332,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 } = (() => {
@@ -1190,17 +1438,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;
         })();
@@ -1212,7 +1470,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; });
@@ -5397,8 +5658,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',
@@ -5557,10 +5818,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 };
                 }
@@ -6329,12 +6590,12 @@ function validatePositionSize(usdValue, longAssets, shortAssets) {
  * 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 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),
@@ -6433,9 +6694,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),
@@ -6560,16 +6821,62 @@ const buildPositionValue = (rawPositions, clearinghouseState, allMids) => {
     });
 };
 
+// Helper to find asset metadata from perpMetaAssets
+function findAssetMeta$1(coinName, 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 === coinName);
+    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 === coinName;
+    });
+    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 position assets with market prefix and collateral token
+function enrichPositionAssets(assets, perpMetaAssets) {
+    return assets.map((asset) => {
+        const meta = findAssetMeta$1(asset.coin, perpMetaAssets);
+        return {
+            ...asset,
+            marketPrefix: meta.marketPrefix,
+            collateralToken: meta.collateralToken,
+        };
+    });
+}
+// Enrich all positions with market metadata
+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);
+    const hip3Assets = useHyperliquidData((s) => s.hip3Assets);
     // Create position API action
     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) => {
@@ -6589,21 +6896,33 @@ function usePosition() {
     };
     // 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 perpMetaAssets = useHyperliquidData((state) => state.perpMetaAssets);
     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);
+        // Enrich with market prefix and collateral token
+        return enrichPositions(positions, perpMetaAssets);
+    }, [userOpenPositions, aggregatedClearingHouseState, allMids, perpMetaAssets]);
+    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) {
@@ -6775,59 +7094,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;
@@ -6841,17 +7271,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);
@@ -6863,11 +7304,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;
     };
@@ -7121,7 +7562,8 @@ const PearHyperliquidProvider = ({ children, apiBaseUrl = 'https://hl-v2.pearpro
     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 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,
@@ -7134,29 +7576,64 @@ const PearHyperliquidProvider = ({ children, apiBaseUrl = 'https://hl-v2.pearpro
     });
     useEffect(() => {
         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;
+            fetchAllPerpMetas()
+                .then((res) => {
+                // Maps for multi-market assets
+                const assetToMarkets = new Map(); // TSLA -> ["xyz:TSLA", "flx:TSLA"]
+                const marketPrefixes = new Map(); // "xyz:TSLA" -> "xyz"
+                const cleanedPerpMetas = [];
+                // Process each market group (different collateral tokens)
+                res.data.forEach((item) => {
+                    // Convert numeric collateral token to human-readable name
+                    const collateralToken = item.collateralToken === 360 ? 'USDH' : 'USDC';
+                    item.universe.forEach((asset) => {
+                        var _a;
+                        const [maybePrefix, maybeMarket] = asset.name.split(':');
+                        if (maybeMarket) {
+                            // HIP-3 market with prefix (e.g., "xyz:TSLA")
+                            const prefix = maybePrefix.toLowerCase();
+                            const displayName = maybeMarket;
+                            const fullName = `${prefix}:${displayName}`;
+                            // Store full market name with prefix
+                            marketPrefixes.set(fullName, prefix);
+                            // Track all markets for this asset
+                            const existingMarkets = (_a = assetToMarkets.get(displayName)) !== null && _a !== void 0 ? _a : [];
+                            if (!existingMarkets.includes(fullName)) {
+                                assetToMarkets.set(displayName, [
+                                    ...existingMarkets,
+                                    fullName,
+                                ]);
+                            }
+                            // Add asset with all metadata INCLUDING collateral token for THIS specific market
+                            // Important: We keep ALL variants so each market+collateral combo is tracked
+                            cleanedPerpMetas.push({
+                                ...asset,
+                                name: displayName, // Use display name for UI
+                                marketPrefix: prefix, // Which market (xyz, flx, etc)
+                                collateralToken, // "USDC" or "USDH"
+                            });
+                        }
+                        else {
+                            // Regular market without prefix
+                            cleanedPerpMetas.push({
+                                ...asset,
+                                collateralToken, // "USDC" or "USDH"
+                            });
+                        }
+                    });
                 });
-                setHip3DisplayToFull(displayToFull);
+                setHip3Assets(assetToMarkets);
+                setHip3MarketPrefixes(marketPrefixes);
                 setPerpMetaAssets(cleanedPerpMetas);
-            }).catch(() => { });
+            })
+                .catch(() => { });
         }
-    }, [perpsMetaAssets, setPerpMetaAssets, setHip3DisplayToFull]);
+    }, [
+        perpsMetaAssets,
+        setPerpMetaAssets,
+        setHip3Assets,
+        setHip3MarketPrefixes,
+    ]);
     // Auth methods now sourced from useAuth hook
     useAutoSyncFills({
         baseUrl: apiBaseUrl,
@@ -7177,10 +7654,14 @@ const PearHyperliquidProvider = ({ children, apiBaseUrl = 'https://hl-v2.pearpro
         nativeIsConnected,
         nativeLastError,
     }), [
-        apiBaseUrl, wsUrl,
-        address, setAddress,
-        isConnected, lastError,
-        nativeIsConnected, nativeLastError,
+        apiBaseUrl,
+        wsUrl,
+        address,
+        setAddress,
+        isConnected,
+        lastError,
+        nativeIsConnected,
+        nativeLastError,
     ]);
     return (jsx(PearHyperliquidContext.Provider, { value: contextValue, children: children }));
 };
@@ -7282,4 +7763,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, MINIMUM_ASSET_USD_VALUE, MinimumPositionSizeError, PearHyperliquidProvider, TokenMetadataExtractor, adjustAdvancePosition, adjustOrder, adjustPosition, calculateMinimumPositionValue, calculateWeightedRatio, cancelOrder, cancelTwap, cancelTwapOrder, closeAllPositions, closePosition, computeBasketCandles, createCandleLookups, createPosition, 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, useTokenSelectionMetadata, useTopGainers, useTopLosers, useTradeHistories, useTwap, useUserSelection, useWatchlist, useWatchlistBaskets, useWebData, validateMinimumAssetSize, validatePositionSize };