Merge branch 'issue-11116' into issue-11385

components/gallery/GalleryItemTabsPanel/GalleryItemTradesTable.vue

@@ -113,7 +113,7 @@
         <TradeOwnerButton
           class="max-md:!w-full"
           :trade="row as TradeNftItem"
-          @click="selectOffer"
+          @click:main="selectOffer"
         />
       </NeoTableColumn>
     </NeoTable>
@@ -138,7 +138,6 @@ import {
   NeoTable,
   NeoTableColumn,
 } from '@kodadot1/brick'
-import type { UnwrapRef } from 'vue'
 import { type TradeNftItem, TradeType } from '@/components/trade/types'
 import { formatToNow } from '@/utils/format/time'
 import Identity from '@/components/identity/IdentityIndex.vue'
@@ -154,10 +153,14 @@ const { urlPrefix } = usePrefix()
 const { format } = useFormatAmount()
 
 const isTradeModalOpen = ref(false)
-const loading = ref(false)
-const trades = ref<UnwrapRef<ReturnType<typeof useTrades>['items']>>([])
 const selectedTrade = ref<TradeNftItem>()
-const stopWatch = ref(() => {})
+const tradeIds = ref()
+
+const { items: trades, loading } = useTrades({
+  where: computed(() => ({ id_in: tradeIds.value })),
+  disabled: computed(() => !Array.isArray(tradeIds.value)),
+  type: props.type,
+})
 
 useSubscriptionGraphql({
   query: `
@@ -168,18 +171,7 @@ useSubscriptionGraphql({
     id
   }`,
   onChange: ({ data }) => {
-    stopWatch.value?.()
-    trades.value = []
-
-    const { items: tradesData, loading: tradesLoading } = useTrades({
-      where: { id_in: data.items?.map(trade => trade.id) },
-      type: props.type,
-    })
-
-    stopWatch.value = watchEffect(() => {
-      loading.value = tradesLoading.value
-      trades.value = tradesData.value
-    })
+    tradeIds.value = data.items?.map(trade => trade.id)
   },
 })
 

components/trade/overviewModal/Details.vue

@@ -45,6 +45,7 @@
 <script setup lang="ts">
 import { useIsTradeOverview } from './utils'
 import { formatToNow } from '@/utils/format/time'
+import { blank } from '@/components/collection/activity/events/eventRow/common'
 import { type TradeNftItem } from '@/components/trade/types'
 import type { NFT } from '@/types'
 
@@ -57,14 +58,22 @@ const { decimals, chainSymbol } = useChain()
 const { isMyTrade, isIncomingTrade } = useIsTradeOverview(computed(() => props.trade))
 
 const getFormattedDifference = (a: number, b: number) => {
+  if (b === 0 && a === 0) {
+    return blank
+  }
+
+  if (b === 0 && a > 0) {
+    return '+100%'
+  }
+
   const diff = ((b - a) / b) * 100
 
   return diff > 0
     ? `-${diff.toFixed()}%`
     : `+${Math.abs(diff).toFixed()}%`
 }
 
-const floorPrice = computed(() => Number(props.desired?.collection.floorPrice[0].price) || 0)
+const floorPrice = computed(() => Number(props.desired?.collection.floorPrice[0]?.price) || 0)
 const diff = computed(() => getFormattedDifference(Number(props.trade.price || 0), floorPrice.value))
 
 const { formatted: formmatedOffer, usd: offerUsd } = useAmount(