Change settings

src/components/AssetTabs.vue

@@ -1,60 +1,62 @@
+<!-- src/components/AssetTabsPrice.vue -->
 <template>
-  <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" @error="hide($event)" />
-      <span>{{ code }}</span>
+  <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>
     </button>
   </div>
 </template>
 
-<script setup>
-import { computed } from 'vue'
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
 import { dataService } from '../lib/dataService'
+import { pollPrices, subscribePrices, fmtUSD } from '../lib/prices'
 
-const props = defineProps({
-  modelValue: { type: String, default: '' },
-  // keep whatever order you want to prefer (others will append)
-  preferredOrder: {
-    type: Array,
-    default: () => ['BTC','ETH','SOL','BNB','DOGE','XRP','AAPL','MSFT','BMRN','MRNA','TSLA']
-  }
-})
+const props = defineProps({ modelValue: String })
 const emit = defineEmits(['update:modelValue'])
 
-// Same pattern as 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 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')
 
-// Only assets that exist in current data
 const available = computed(() => {
-  const rows = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
-  return Array.from(new Set(rows.map(r => r.asset)))
+  const rows = Array.isArray((dataService as any).tableRows) ? (dataService as any).tableRows : []
+  return Array.from(new Set(rows.map((r:any)=>r.asset)))
 })
-
-// Deterministic ordering (without touching AssetsFilter.vue)
+const preferred = ['BTC','ETH','SOL','BNB','DOGE','XRP','AAPL','MSFT','BMRN','MRNA','TSLA']
 const orderedAssets = computed(() => {
   const present = new Set(available.value)
-  const primary = props.preferredOrder.filter(a => present.has(a))
-  const extras  = [...present].filter(a => !props.preferredOrder.includes(a)).sort()
+  const primary = preferred.filter(a => present.has(a))
+  const extras  = [...present].filter(a => !preferred.includes(a)).sort()
   const list = [...primary, ...extras]
-  if (!list.includes(props.modelValue) && list.length) emit('update:modelValue', list[0])
+  if (list.length && !list.includes(props.modelValue || '')) 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>
-.asset-icon{
-  width: 20px !important;   /* set to 16/20/24 to match your filter */
-  height: 20px !important;
-  flex: 0 0 20px;
-  object-fit: contain;
-  display: inline-block;
-  vertical-align: middle;
+.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
 }
+.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

@@ -0,0 +1,65 @@
+// src/lib/prices.ts
+type PriceMap = Record<string, number>
+
+// Map your asset code -> provider + symbol
+const MAP: Record<string, { p: 'binance'|'stooq'; 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 (stooq wants .us)
+  AAPL:{ p: 'stooq',   s: 'aapl.us' },
+  MSFT:{ p: 'stooq',   s: 'msft.us' },
+  BMRN:{ p: 'stooq',   s: 'bmrn.us' },
+  MRNA:{ p: 'stooq',   s: 'mrna.us' },
+  TSLA:{ p: 'stooq',   s: 'tsla.us' },
+};
+
+// --- simple cache + pub/sub
+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)}`);
+  const j = await r.json(); const n = Number(j?.price);
+  return Number.isFinite(n) ? n : undefined;
+}
+
+async function fetchStooq(symbol: string) {
+  const url = `https://stooq.com/q/l/?s=${encodeURIComponent(symbol)}&f=sd2t2ohlcv&h&e=csv`;
+  const r = await fetch(url);
+  const txt = await r.text(); // first line is header; second line has data, column 'Close'
+  const line = txt.split('\n')[1] || '';
+  const cols = line.split(','); // Symbol,Date,Time,Open,High,Low,Close,Volume
+  const n = Number(cols[6]);
+  return Number.isFinite(n) ? n : undefined;
+}
+
+export async function pollPrices(codes: string[], intervalMs = 30000) {
+  const uniq = [...new Set(codes)].filter(c => MAP[c]);
+  async function tick() {
+    await Promise.all(uniq.map(async code => {
+      const { p, s } = MAP[code];
+      const px = p === 'binance' ? await fetchBinance(s) : await fetchStooq(s);
+      if (px !== undefined) latest[code] = px;
+    }));
+    push();
+  }
+  await tick();
+  setInterval(tick, intervalMs);
+}
+
+export const fmtUSD = (n?: number) =>
+  typeof n === 'number'
+    ? n.toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
+    : '—';