Change settings

src/components/AssetTabs.vue

@@ -1,62 +1,53 @@
-<!-- src/components/AssetTabsPrice.vue -->
 <template>
-  <div class="tabs">
-    <button v-for="code in orderedAssets" :key="code"
-      class="tab" :class="code===modelValue ? 'tab--active' : ''"
-      @click="$emit('update:modelValue', code)">
-      <div class="row">
-        <img :src="iconFor(code)" class="icon" @error="hide($event)" alt="" />
-        <span class="code">{{ code }}</span>
-      </div>
-      <div class="price">{{ fmtUSD(prices[code]) }}</div>
+  <div class="flex gap-2 flex-wrap">
+    <button
+      v-for="code in orderedAssets" :key="code"
+      class="px-3 py-1 rounded-full border flex items-center gap-2"
+      :class="code===modelValue ? 'bg-black text-white' : 'bg-white'"
+      @click="$emit('update:modelValue', code)"
+    >
+      <img :src="iconFor(code)" alt="" class="asset-icon" decoding="async" loading="lazy" @error="hide($event)" />
+      <span>{{ code }}</span>
     </button>
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
-import { dataService } from '../lib/dataService'
-import { pollPrices, subscribePrices, fmtUSD } from '../lib/prices'
+<script setup>
+import { computed } from 'vue'
+import { dataService } from '@/lib/dataService'
 
-const props = defineProps({ modelValue: String })
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  preferredOrder: {
+    type: Array,
+    default: () => ['BTC','ETH','SOL','BNB','DOGE','XRP','AAPL','MSFT','BMRN','MRNA','TSLA']
+  }
+})
 const emit = defineEmits(['update:modelValue'])
 
-const iconFor = (c:string) => new URL(`../assets/images/assets_images/${c}.png`, import.meta.url).href
-const hide = (e:Event)=>((e.target as HTMLImageElement).style.display='none')
+// same pattern as your AssetsFilter.vue
+const iconFor = (assetCode) =>
+  new URL(`../assets/images/assets_images/${assetCode}.png`, import.meta.url).href
+const hide = (e) => { e.target.style.display = 'none' }
 
 const available = computed(() => {
-  const rows = Array.isArray((dataService as any).tableRows) ? (dataService as any).tableRows : []
-  return Array.from(new Set(rows.map((r:any)=>r.asset)))
+  const rows = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
+  return Array.from(new Set(rows.map(r => r.asset)))
 })
-const preferred = ['BTC','ETH','SOL','BNB','DOGE','XRP','AAPL','MSFT','BMRN','MRNA','TSLA']
+
 const orderedAssets = computed(() => {
   const present = new Set(available.value)
-  const primary = preferred.filter(a => present.has(a))
-  const extras  = [...present].filter(a => !preferred.includes(a)).sort()
+  const primary = props.preferredOrder.filter(a => present.has(a))
+  const extras  = [...present].filter(a => !props.preferredOrder.includes(a)).sort()
   const list = [...primary, ...extras]
-  if (list.length && !list.includes(props.modelValue || '')) emit('update:modelValue', list[0])
+  if (!list.includes(props.modelValue) && list.length) emit('update:modelValue', list[0])
   return list
 })
-
-const prices = ref<Record<string, number>>({})
-let unsub: null | (()=>void) = null
-onMounted(async () => {
-  unsub = subscribePrices(m => (prices.value = m))
-  await pollPrices(orderedAssets.value) // starts polling; cheap even if called again
-})
-onBeforeUnmount(()=>unsub?.())
-watch(orderedAssets, (arr)=>pollPrices(arr))
 </script>
 
 <style scoped>
-.tabs{ display:flex; flex-wrap:wrap; gap:8px }
-.tab{
-  background:#fff; border:1px solid #1f2937; border-radius:9999px;
-  padding:8px 12px; min-width:110px; display:flex; flex-direction:column; align-items:center; gap:2px
+.asset-icon{
+  width: 18px; height: 18px; flex: 0 0 18px;
+  object-fit: contain; display: inline-block; vertical-align: middle;
 }
-.tab--active{ background:#111827; color:#fff; border-color:#111827 }
-.row{ display:flex; align-items:center; gap:6px; line-height:1 }
-.icon{ width:18px; height:18px; flex:0 0 18px; object-fit:contain }
-.code{ font-weight:700; letter-spacing:.02em }
-.price{ font-variant-numeric:tabular-nums; font-weight:800; line-height:1.05; margin-top:2px }
 </style>

src/lib/prices.ts

@@ -1,87 +0,0 @@
-// src/lib/prices.ts
-type PriceMap = Record<string, number>
-
-// Map asset code -> provider + symbol
-const MAP: Record<string, { p: 'binance'|'yahoo'; s: string }> = {
-  // crypto (USDT pairs)
-  BTC: { p: 'binance', s: 'BTCUSDT' },
-  ETH: { p: 'binance', s: 'ETHUSDT' },
-  SOL: { p: 'binance', s: 'SOLUSDT' },
-  BNB: { p: 'binance', s: 'BNBUSDT' },
-  DOGE:{ p: 'binance', s: 'DOGEUSDT' },
-  XRP: { p: 'binance', s: 'XRPUSDT' },
-
-  // equities (Yahoo uses plain tickers)
-  AAPL:{ p: 'yahoo',   s: 'AAPL' },
-  MSFT:{ p: 'yahoo',   s: 'MSFT' },
-  BMRN:{ p: 'yahoo',   s: 'BMRN' },
-  MRNA:{ p: 'yahoo',   s: 'MRNA' },
-  TSLA:{ p: 'yahoo',   s: 'TSLA' },
-};
-
-let latest: PriceMap = {};
-const subs = new Set<(m: PriceMap)=>void>();
-const push = () => subs.forEach(fn => fn({ ...latest }));
-
-export function subscribePrices(fn: (m: PriceMap)=>void) {
-  subs.add(fn); fn({ ...latest });
-  return () => subs.delete(fn);
-}
-
-async function fetchBinance(symbol: string) {
-  const r = await fetch(`https://api.binance.com/api/v3/ticker/price?symbol=${encodeURIComponent(symbol)}`);
-  if (!r.ok) throw new Error(`binance ${symbol} ${r.status}`);
-  const j = await r.json(); const n = Number(j?.price);
-  return Number.isFinite(n) ? n : undefined;
-}
-
-async function fetchYahoo(symbolsCsv: string) {
-  const url = `https://query1.finance.yahoo.com/v7/finance/quote?symbols=${encodeURIComponent(symbolsCsv)}`
-  const r = await fetch(url);
-  if (!r.ok) throw new Error(`yahoo ${symbolsCsv} ${r.status}`);
-  const j = await r.json();
-  const out: Record<string, number> = {};
-  for (const it of (j?.quoteResponse?.result ?? [])) {
-    const sym = it?.symbol;
-    const px = Number(it?.regularMarketPrice ?? it?.postMarketPrice ?? it?.preMarketPrice);
-    if (sym && Number.isFinite(px)) out[sym] = px;
-  }
-  return out;
-}
-
-export async function pollPrices(codes: string[], intervalMs = 30000) {
-  const uniq = [...new Set(codes)].filter(c => MAP[c]);
-
-  // split by provider for efficient requests
-  const binanceSyms = uniq.filter(c => MAP[c].p === 'binance').map(c => MAP[c].s);
-  const yahooSyms   = uniq.filter(c => MAP[c].p === 'yahoo').map(c => MAP[c].s);
-
-  async function tick() {
-    try {
-      // Binance: per-symbol (cheap for a handful)
-      await Promise.all(binanceSyms.map(async s => {
-        const px = await fetchBinance(s);
-        const code = Object.entries(MAP).find(([k,v]) => v.s === s)?.[0];
-        if (code && px !== undefined) latest[code] = px;
-      }));
-
-      // Yahoo: batch in one call
-      if (yahooSyms.length) {
-        const batch = await fetchYahoo(yahooSyms.join(','));
-        for (const [sym, px] of Object.entries(batch)) {
-          const code = Object.entries(MAP).find(([k,v]) => v.s === sym)?.[0];
-          if (code && px !== undefined) latest[code] = px;
-        }
-      }
-    } catch { /* ignore transient errors */ }
-    push();
-  }
-
-  await tick();
-  setInterval(tick, intervalMs);
-}
-
-export const fmtUSD = (n?: number) =>
-  typeof n === 'number'
-    ? n.toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
-    : '—';