Change settings

src/components/AssetTabs.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="flex gap-2 flex-wrap">
     <button
-      v-for="a in orderedAssets" :key="a"
+      v-for="code in orderedAssets" :key="code"
       class="px-3 py-1 rounded-full border flex items-center gap-2"
-      :class="a===modelValue ? 'bg-black text-white' : 'bg-white'"
-      @click="$emit('update:modelValue', a)"
+      :class="code===modelValue ? 'bg-black text-white' : 'bg-white'"
+      @click="$emit('update:modelValue', code)"
     >
-      <img v-if="logos[a]" :src="logos[a]" alt="" class="h-4 w-4 object-contain" />
-      <span>{{ a }}</span>
+      <img :src="iconFor(code)" alt="" class="h-4 w-4 object-contain" @error="hide($event)" />
+      <span>{{ code }}</span>
     </button>
   </div>
 </template>
@@ -16,36 +16,33 @@
 import { computed } from 'vue'
 import { dataService } from '../lib/dataService'
 
-// import the logos you actually have in /src/assets (add/remove as needed)
-import AAPL from '@/assets/AAPL.png'
-import MSFT from '@/assets/MSFT.png'
-import BTC  from '@/assets/BTC.png'
-import ETH  from '@/assets/ETH.png'
-import BMRN from '@/assets/BMRN.png'
-import MRNA from '@/assets/MRNA.png'
-import TSLA from '@/assets/TSLA.png'
-
 const props = defineProps({
   modelValue: { type: String, default: '' },
-  preferredOrder: { type: Array, default: () => ['BTC','ETH','SOL','BNB','DOGE','XRP','AAPL','MSFT','BMRN','MRNA','TSLA'] }
+  // 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 emit = defineEmits(['update:modelValue'])
 
-const logos = {
-  AAPL, MSFT, BTC, ETH, BMRN, MRNA, TSLA
-}
+// 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 availableAssets = computed(() => {
+// Only assets that exist in current data
+const available = computed(() => {
   const rows = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
-  return [...new Set(rows.map(r => r.asset))]  // only assets you actually have
+  return Array.from(new Set(rows.map(r => r.asset)))
 })
 
+// Deterministic ordering (without touching AssetsFilter.vue)
 const orderedAssets = computed(() => {
-  const present = new Set(availableAssets.value)
+  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 list = [...primary, ...extras]
-  // keep current selection if possible, else default to first
   if (!list.includes(props.modelValue) && list.length) emit('update:modelValue', list[0])
   return list
 })