From fdfb9f97ee6bdd0d84f41cf3a33728c9be65d41b Mon Sep 17 00:00:00 2001
From: shunab <mkrishnashuban@gmail.com>
Date: Sat, 6 Jun 2026 22:44:39 +0100
Subject: [PATCH] feat(exchange): add Hyperliquid spot markets

Load spotMeta alongside perp meta, resolve @index symbols to readable
pair labels for search and UI, and keep wire ids for subscriptions.
---
 src/components/SearchDialog.vue          |  10 +-
 src/components/chart/MarketsOverlay.vue  |   7 +-
 src/components/settings/Exchange.vue     |   4 +-
 src/components/trades/TradesSettings.vue |   4 +-
 src/components/trades/tradesFeed.ts      |  14 ++-
 src/services/productsService.ts          | 112 ++++++++++++++++++++++-
 src/store/app.ts                         |   1 +
 src/worker/exchanges/hyperliquid.ts      |  71 ++++++++++++--
 8 files changed, 199 insertions(+), 24 deletions(-)

diff --git a/src/components/SearchDialog.vue b/src/components/SearchDialog.vue
index ed45548db..492fa5307 100644
--- a/src/components/SearchDialog.vue
+++ b/src/components/SearchDialog.vue
@@ -227,7 +227,7 @@
             </template>
             <template v-else>
               <i class="mr4" :class="`icon-${market.exchange}`"></i>
-              {{ market.pair }}
+              {{ market.displayPair || market.pair }}
             </template>
           </button>
         </template>
@@ -332,7 +332,7 @@
                 :class="'icon-' + market.exchange"
               ></td>
               <td v-text="market.exchange"></td>
-              <td v-text="market.pair"></td>
+              <td v-text="market.displayPair || market.pair"></td>
               <td v-text="market.type"></td>
               <td class="text-center">
                 <i
@@ -408,6 +408,7 @@ import {
   getExchangeSymbols,
   ensureIndexedProducts,
   parseMarket,
+  productMatchesSearchQuery,
   stripStableQuote
 } from '@/services/productsService'
 import ToggableSection from '@/components/framework/ToggableSection.vue'
@@ -662,7 +663,7 @@ export default {
         .filter(
           product =>
             selection.indexOf(product.id) === -1 &&
-            queryFilter.test(product.local)
+            productMatchesSearchQuery(product, queryFilter)
         )
         .reduce((groups, product) => {
           let localPair
@@ -711,7 +712,8 @@ export default {
       } else {
         return this.filteredProducts.filter(
           product =>
-            selection.indexOf(product.id) === -1 && queryFilter.test(product.id)
+            selection.indexOf(product.id) === -1 &&
+            productMatchesSearchQuery(product, queryFilter)
         )
       }
     },
diff --git a/src/components/chart/MarketsOverlay.vue b/src/components/chart/MarketsOverlay.vue
index 276ac02e6..88f9d39ac 100644
--- a/src/components/chart/MarketsOverlay.vue
+++ b/src/components/chart/MarketsOverlay.vue
@@ -35,7 +35,7 @@
               @click.stop.prevent
             />
             <div></div>
-            <span>{{ market }}</span>
+            <span>{{ formatMarket(market) }}</span>
           </label>
         </div>
       </div>
@@ -57,6 +57,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-component'
+import { formatMarketForDisplay } from '@/services/productsService'
 
 @Component({
   name: 'MarketsOverlay',
@@ -103,6 +104,10 @@ export default class MarketsOverlay extends Vue {
   toggleMarkets(type) {
     this.$store.dispatch(this.paneId + '/toggleMarkets', { type })
   }
+
+  formatMarket(marketId: string) {
+    return formatMarketForDisplay(marketId)
+  }
 }
 </script>
 
diff --git a/src/components/settings/Exchange.vue b/src/components/settings/Exchange.vue
index 421ef1719..19778f1ce 100644
--- a/src/components/settings/Exchange.vue
+++ b/src/components/settings/Exchange.vue
@@ -25,7 +25,9 @@
       <div class="form-group" v-if="markets.length">
         <div>
           <div v-for="market in markets" :key="market.id" class="d-flex">
-            <div class="-fill -center">{{ market.pair }}</div>
+            <div class="-fill -center">
+              {{ market.displayPair || market.pair }}
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/trades/TradesSettings.vue b/src/components/trades/TradesSettings.vue
index f3d82cc35..5e6406c12 100644
--- a/src/components/trades/TradesSettings.vue
+++ b/src/components/trades/TradesSettings.vue
@@ -548,9 +548,11 @@ export default class TradesSettings extends Vue {
       const multiplier = (this.$store.state[this.paneId] as TradesPaneState)
         .multipliers[marketKey]
 
+      const product = this.$store.state.panes.marketsListeners[marketKey]
+
       return {
         exchange,
-        pair,
+        pair: product?.displayPair || pair,
         multiplier: !isNaN(multiplier) ? multiplier : 1,
         identifier: marketKey
       }
diff --git a/src/components/trades/tradesFeed.ts b/src/components/trades/tradesFeed.ts
index 28f0a1ea0..08d50dd59 100644
--- a/src/components/trades/tradesFeed.ts
+++ b/src/components/trades/tradesFeed.ts
@@ -1,6 +1,10 @@
 import audioService, { AudioFunction } from '@/services/audioService'
 import gifsService from '@/services/gifsService'
-import { formatAmount, formatMarketPrice } from '@/services/productsService'
+import {
+  formatAmount,
+  formatMarketPrice,
+  getMarketDisplayPair
+} from '@/services/productsService'
 import store from '@/store'
 import { SlippageMode, Trade } from '@/types/types'
 import {
@@ -301,10 +305,10 @@ export default class TradesFeed {
     let pairName = ''
 
     if (this.showPairs) {
-      pairName = `<div class="trade__pair">${trade.pair.replace(
-        '_',
-        ' '
-      )}</div>`
+      pairName = `<div class="trade__pair">${getMarketDisplayPair(
+        trade.exchange,
+        trade.pair
+      ).replace('_', ' ')}</div>`
     }
 
     return `<li class="trade -${trade.exchange} -${trade.side} -level-${
diff --git a/src/services/productsService.ts b/src/services/productsService.ts
index e810c5a72..3d9f451a0 100644
--- a/src/services/productsService.ts
+++ b/src/services/productsService.ts
@@ -29,6 +29,7 @@ const REVERSE_MATCH_REGEX = /(\w+)[^a-z0-9]/i
 const COMMON_FUTURES_SUFFIX_REGEX = /[HUZ_-]\d{2}/
 const PARSE_MARKET_REGEX = /([^:]*):(.*)/
 const BITUNIX_PERP_REGEX = /[A-Z]/
+const HYPERLIQUID_SPOT_REGEX = /^@|\//
 
 const stablecoins = [
   'USDT',
@@ -83,6 +84,8 @@ const promisesOfProducts = {}
 
 export const indexedProducts = {}
 
+const hyperliquidSpotPairLabels: { [pair: string]: string } = {}
+
 export const marketDecimals = {}
 
 /**
@@ -291,6 +294,14 @@ export async function getExchangeSymbols(
   const data = await requestExchangeProductsData(exchangeId, forceFetch)
 
   if (data) {
+    if (
+      exchangeId === 'HYPERLIQUID' &&
+      !Array.isArray(data) &&
+      data.spotPairLabels
+    ) {
+      Object.assign(hyperliquidSpotPairLabels, data.spotPairLabels)
+    }
+
     if (Array.isArray(data)) {
       symbols = data
     } else {
@@ -309,6 +320,62 @@ export function parseMarket(market: string) {
   return market.match(PARSE_MARKET_REGEX).slice(1, 3)
 }
 
+function finalizeProduct(product) {
+  if (product.exchange === 'HYPERLIQUID' && product.type === 'spot') {
+    const label = hyperliquidSpotPairLabels[product.pair]
+
+    if (label) {
+      product.displayPair = label
+    } else if (product.pair.includes('/')) {
+      product.displayPair = product.pair
+    } else if (product.base && product.quote) {
+      product.displayPair = `${product.base}/${product.quote}`
+    }
+  }
+
+  return product
+}
+
+export function getMarketDisplayPair(
+  exchangeId: string,
+  pair: string,
+  product?: { displayPair?: string; type?: string }
+) {
+  if (product?.displayPair) {
+    return product.displayPair
+  }
+
+  if (exchangeId === 'HYPERLIQUID') {
+    const label = hyperliquidSpotPairLabels[pair]
+
+    if (label) {
+      return label
+    }
+  }
+
+  return pair
+}
+
+export function formatMarketForDisplay(marketId: string) {
+  const [exchange, pair] = parseMarket(marketId)
+
+  if (!exchange || !pair) {
+    return marketId
+  }
+
+  return `${exchange}:${getMarketDisplayPair(exchange, pair)}`
+}
+
+export function productMatchesSearchQuery(product, queryFilter: RegExp) {
+  return (
+    queryFilter.test(product.id) ||
+    queryFilter.test(product.local) ||
+    queryFilter.test(product.base) ||
+    queryFilter.test(product.quote) ||
+    (product.displayPair && queryFilter.test(product.displayPair))
+  )
+}
+
 export function getMarketProduct(exchangeId, symbol, noStable?: boolean) {
   const id = exchangeId + ':' + symbol
 
@@ -319,10 +386,13 @@ export function getMarketProduct(exchangeId, symbol, noStable?: boolean) {
   } else if (
     exchangeId === 'BINANCE_FUTURES' ||
     exchangeId === 'DYDX' ||
-    exchangeId === 'HYPERLIQUID' ||
     exchangeId === 'ASTER'
   ) {
     type = 'perp'
+  } else if (exchangeId === 'MEXC' && UNDERSCORE_REGEX.test(symbol)) {
+    type = 'perp'
+  } else if (exchangeId === 'HYPERLIQUID') {
+    type = HYPERLIQUID_SPOT_REGEX.test(symbol) ? 'spot' : 'perp'
   } else if (exchangeId === 'COINBASE' && COINBASE_INTX_REGEX.test(symbol)) {
     type = 'perp'
   } else if (exchangeId === 'BITFINEX' && BITFINEX_PERP_REGEX.test(symbol)) {
@@ -331,8 +401,6 @@ export function getMarketProduct(exchangeId, symbol, noStable?: boolean) {
     type = 'future'
   } else if (exchangeId === 'BITMART' && !UNDERSCORE_REGEX.test(symbol)) {
     type = 'perp'
-  } else if (exchangeId === 'MEXC' && UNDERSCORE_REGEX.test(symbol)) {
-    type = 'perp'
   } else if (exchangeId === 'HUOBI' && DASH_REGEX.test(symbol)) {
     type = 'perp'
   } else if (
@@ -384,6 +452,10 @@ export function getMarketProduct(exchangeId, symbol, noStable?: boolean) {
     localSymbol = localSymbol.replace(KUCOIN_SUFFIX_REGEX, '')
   } else if (exchangeId === 'COINBASE' && type === 'perp') {
     localSymbol = localSymbol.replace(COINBASE_INTX_REGEX, '')
+  } else if (exchangeId === 'HYPERLIQUID' && type === 'spot') {
+    if (hyperliquidSpotPairLabels[symbol]) {
+      localSymbol = hyperliquidSpotPairLabels[symbol]
+    }
   } else if (exchangeId === 'HYPERLIQUID') {
     localSymbol = localSymbol.replace(/^k/, '') + 'USD'
   } else if (exchangeId === 'PHEMEX') {
@@ -425,6 +497,36 @@ export function getMarketProduct(exchangeId, symbol, noStable?: boolean) {
       }
     }
   }
+  if (!match && exchangeId === 'HYPERLIQUID' && type === 'spot') {
+    const label = hyperliquidSpotPairLabels[symbol]
+
+    if (label && label.includes('/')) {
+      const [base, quote] = label.split('/')
+
+      return finalizeProduct({
+        id,
+        base,
+        quote,
+        pair: symbol,
+        local: noStable ? stripStablePair(base + quote) : base + quote,
+        exchange: exchangeId,
+        type
+      })
+    }
+
+    if (HYPERLIQUID_SPOT_REGEX.test(symbol)) {
+      return finalizeProduct({
+        id,
+        base: symbol,
+        quote: 'USDC',
+        pair: symbol,
+        local: symbol,
+        exchange: exchangeId,
+        type
+      })
+    }
+  }
+
   if (!match) {
     return null
   }
@@ -446,7 +548,7 @@ export function getMarketProduct(exchangeId, symbol, noStable?: boolean) {
     localSymbolAlpha = base + quote
   }
 
-  return {
+  return finalizeProduct({
     id,
     base,
     quote,
@@ -454,7 +556,7 @@ export function getMarketProduct(exchangeId, symbol, noStable?: boolean) {
     local: localSymbolAlpha,
     exchange: exchangeId,
     type
-  }
+  })
 }
 
 export async function getApiSupportedMarkets() {
diff --git a/src/store/app.ts b/src/store/app.ts
index 1b8ebcc40..a3d31f30f 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -32,6 +32,7 @@ export interface Product {
   base: string
   quote: string
   local: string
+  displayPair?: string
 }
 
 export interface ListenedProduct extends Product {
diff --git a/src/worker/exchanges/hyperliquid.ts b/src/worker/exchanges/hyperliquid.ts
index 0cc947d57..a92b24355 100644
--- a/src/worker/exchanges/hyperliquid.ts
+++ b/src/worker/exchanges/hyperliquid.ts
@@ -1,7 +1,37 @@
-import Exchange from '../exchange'
+import Exchange, { Api } from '../exchange'
+
+type SpotMeta = {
+  tokens: { name: string }[]
+  universe: { name: string; tokens: number[]; isDelisted?: boolean }[]
+}
+
+function buildSpotPairLabels(spotMeta: SpotMeta) {
+  const labels: { [pair: string]: string } = {}
+
+  if (!spotMeta?.tokens?.length || !spotMeta?.universe?.length) {
+    return labels
+  }
+
+  for (const product of spotMeta.universe) {
+    if (product.isDelisted) {
+      continue
+    }
+
+    const base = spotMeta.tokens[product.tokens[0]]
+    const quote = spotMeta.tokens[product.tokens[1]]
+
+    if (base && quote) {
+      labels[product.name] = `${base.name}/${quote.name}`
+    }
+  }
+
+  return labels
+}
 
 export default class HYPERLIQUID extends Exchange {
   id = 'HYPERLIQUID'
+  spotPairLabels: { [pair: string]: string } = {}
+
   protected endpoints: { [id: string]: any } = {
     PRODUCTS: [
       {
@@ -9,6 +39,12 @@ export default class HYPERLIQUID extends Exchange {
         method: 'POST',
         data: JSON.stringify({ type: 'meta' }),
         proxy: false
+      },
+      {
+        url: 'https://api.hyperliquid.xyz/info',
+        method: 'POST',
+        data: JSON.stringify({ type: 'spotMeta' }),
+        proxy: false
       }
     ]
   }
@@ -17,19 +53,32 @@ export default class HYPERLIQUID extends Exchange {
     return 'wss://api.hyperliquid.xyz/ws'
   }
 
-  formatProducts(response) {
+  formatProducts(responses) {
     const products = []
+    const perpResponse = Array.isArray(responses) ? responses[0] : responses
+    const spotResponse = Array.isArray(responses) ? responses[1] : null
 
-    const perpResponse = response
-
-    if (perpResponse && perpResponse.universe && perpResponse.universe.length) {
+    if (perpResponse?.universe?.length) {
       for (const product of perpResponse.universe) {
-        products.push(product.name)
+        if (!product.isDelisted) {
+          products.push(product.name)
+        }
+      }
+    }
+
+    if (spotResponse?.universe?.length) {
+      this.spotPairLabels = buildSpotPairLabels(spotResponse)
+
+      for (const product of spotResponse.universe) {
+        if (!product.isDelisted) {
+          products.push(product.name)
+        }
       }
     }
 
     return {
-      products
+      products,
+      spotPairLabels: this.spotPairLabels
     }
   }
 
@@ -100,4 +149,12 @@ export default class HYPERLIQUID extends Exchange {
       side: t.side === 'B' ? 'buy' : 'sell'
     }
   }
+
+  onApiCreated(api: Api) {
+    this.startKeepAlive(api, { method: 'ping' }, 20000)
+  }
+
+  onApiRemoved(api: Api) {
+    this.stopKeepAlive(api)
+  }
 }