Merge pull request #11182 from hassnian/issue-11131

feat: Display Swap in Item View & Profile View

components/collection/activity/Activity.vue

@@ -42,7 +42,7 @@
         :class="{ 'my-7': !isBreadCrumbsShowing }"
       >
       <Events
-        :events="sortedEventsWithOffersDesc"
+        :events="filteredEvents"
         :loading="loading"
       />
     </div>
@@ -72,7 +72,7 @@ const isBreadCrumbsShowing = computed(
 
 const collectionId = computed(() => route.params.id.toString())
 
-const { events, flippers, owners, offers, loading } = useCollectionActivity({
+const { events, flippers, owners, loading } = useCollectionActivity({
   collectionId,
 })
 
@@ -83,17 +83,12 @@ const InteractionIncluded = [
   Interaction.SEND,
 ]
 
-const filteredEvents = computed(() =>
-  events.value.filter(event =>
-    InteractionIncluded.includes(event.interaction as Interaction),
-  ),
-)
-const withOffers = computed(() => [...filteredEvents.value, ...offers.value])
-
 // newest events first (bigger timestamp first)
-const sortedEventsWithOffersDesc = computed(() =>
-  // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-  withOffers.value.sort((a, b) => b.timestamp - a.timestamp),
+const filteredEvents = computed(() =>
+  events.value
+    .filter(event =>
+      InteractionIncluded.includes(event.interaction as Interaction),
+    ).sort((a, b) => b.timestamp - a.timestamp),
 )
 
 useResizeObserver(wrapper, (entry) => {

components/collection/activity/events/EventRow.vue

@@ -14,13 +14,10 @@
 <script setup lang="ts">
 import EventRowDesktop from './eventRow/EventRowDesktop.vue'
 import EventRowTablet from './eventRow/EventRowTablet.vue'
-import type {
-  InteractionWithNFT,
-  Offer,
-} from '@/composables/collectionActivity/types'
+import type { InteractionWithNFT } from '@/composables/collectionActivity/types'
 
 defineProps<{
-  event: InteractionWithNFT | Offer
+  event: InteractionWithNFT
   variant: 'Touch' | 'Desktop'
 }>()
 </script>

components/collection/activity/events/Events.vue

@@ -51,18 +51,13 @@ import { isAnyActivityFilterActive, isAnyEventTypeFilterActive } from '../utils'
 import EventRow from './EventRow.vue'
 import { blank, getFromAddress, getToAddress } from './eventRow/common'
 import { mintInteraction } from '@/composables/collectionActivity/helpers'
-import type {
-  InteractionWithNFT,
-  Offer } from '@/composables/collectionActivity/types'
-import {
-  OfferInteraction,
-} from '@/composables/collectionActivity/types'
+import type { InteractionWithNFT } from '@/composables/collectionActivity/types'
 import ResponsiveTable from '@/components/shared/ResponsiveTable.vue'
 import { toSubstrateAddress } from '@/services/profile'
 
 const props = withDefaults(
   defineProps<{
-    events: (InteractionWithNFT | Offer)[]
+    events: InteractionWithNFT[]
     loading: boolean
   }>(),
   {
@@ -92,7 +87,6 @@ const filteredEvents = computed(() => {
     [mintInteraction()]: is(query?.mint as string),
     [Interaction.LIST]: is(query?.listing as string),
     [Interaction.SEND]: is(query?.transfer as string),
-    [OfferInteraction]: is(query?.offer as string),
   }
 
   const identityIds = profiles.value?.map(profile => profile?.address) || []
@@ -127,7 +121,7 @@ const eventsAddresses = computed(() => {
 
 const { data: profiles } = useProfiles('profiles', eventsAddresses, { staleTime: 1000 * 60 * 5 })
 
-const displayedEvents = ref<(InteractionWithNFT | Offer)[]>([])
+const displayedEvents = ref<InteractionWithNFT[]>([])
 
 const displayMoreEvents = () => {
   offset.value += 10

components/collection/activity/events/eventRow/EventRowDesktop.vue

@@ -104,18 +104,15 @@ import {
   interactionNameMap,
 } from './common'
 import EventTag from './EventTag.vue'
-import type {
-  InteractionWithNFT,
-  Offer,
-} from '@/composables/collectionActivity/types'
+import type { InteractionWithNFT } from '@/composables/collectionActivity/types'
 import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
 import IdentityIndex from '@/components/identity/IdentityIndex.vue'
 
 const NuxtImg = resolveComponent('NuxtImg')
 
 const { urlPrefix } = usePrefix()
 const props = defineProps<{
-  event: InteractionWithNFT | Offer
+  event: InteractionWithNFT
 }>()
 
 const avatar = ref<string>()

components/collection/activity/events/eventRow/EventRowTablet.vue

@@ -94,17 +94,14 @@ import {
   getToAddress,
   interactionNameMap,
 } from './common'
-import type {
-  InteractionWithNFT,
-  Offer,
-} from '@/composables/collectionActivity/types'
+import type { InteractionWithNFT } from '@/composables/collectionActivity/types'
 import IdentityIndex from '@/components/identity/IdentityIndex.vue'
 
 const NuxtImg = resolveComponent('NuxtImg')
 
 const { urlPrefix } = usePrefix()
 const props = defineProps<{
-  event: InteractionWithNFT | Offer
+  event: InteractionWithNFT
 }>()
 
 const avatar = ref<string>()

components/collection/activity/events/eventRow/common.ts

@@ -1,9 +1,7 @@
 import { Interaction } from '@kodadot1/minimark/v1'
-import type {
-  InteractionWithNFT,
-  Offer } from '@/composables/collectionActivity/types'
 import {
-  OfferInteraction,
+  type InteractionWithNFT,
+  TradeInteraction,
 } from '@/composables/collectionActivity/types'
 import { parseNftAvatar } from '@/utils/nft'
 import { mintInteraction } from '@/composables/collectionActivity/helpers'
@@ -25,6 +23,8 @@ export const interactionNameMap = ({
     MINT: 'Mint',
     SEND: 'Transfer',
     Offer: 'Offer',
+    [TradeInteraction.OFFER]: 'Offer',
+    [TradeInteraction.SWAP]: 'Swap',
   }
 
   if (distinguishBuyAndSell) {
@@ -44,43 +44,42 @@ export const getInteractionColor = (
     [mintInteraction()]: 'bg-k-yellow',
     [Interaction.LIST]: 'bg-k-blue-accent',
     [Interaction.BUY]: distinguishBuyAndSell ? buyColor : sellColor,
-    [OfferInteraction]: 'bg-k-green-accent',
     [Interaction.SEND]: 'bg-background-color',
+    [TradeInteraction.OFFER]: 'bg-k-green-accent',
+    [TradeInteraction.SWAP]: 'bg-k-green-accent',
     SELL: sellColor,
   }[interaction]
 }
 
 export const getAmount = (
-  event: InteractionWithNFT | Offer,
+  event: InteractionWithNFT,
 ): string | number => {
   switch (event.interaction) {
     case mintInteraction():
       return blank
     case Interaction.LIST:
     case Interaction.BUY:
       return (event as InteractionWithNFT).meta
-    case OfferInteraction:
-      return (event as Offer).price
     default:
       return blank
   }
 }
 
-export const getFromAddress = (event: InteractionWithNFT | Offer): string => {
+export const getFromAddress = (event: InteractionWithNFT): string => {
   const interaction = event.interaction
   if (interaction === mintInteraction()) {
     return blank
   }
   if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
     return (event as InteractionWithNFT).currentOwner
   }
-  if (interaction === OfferInteraction || interaction === Interaction.LIST) {
-    return (event as Offer).caller
+  if (interaction === Interaction.LIST) {
+    return event.caller
   }
   return blank
 }
 
-export const getToAddress = (event: InteractionWithNFT | Offer): string => {
+export const getToAddress = (event: InteractionWithNFT): string => {
   const interaction = event.interaction
   if (interaction === mintInteraction() || interaction === Interaction.BUY) {
     return event.caller
@@ -91,5 +90,5 @@ export const getToAddress = (event: InteractionWithNFT | Offer): string => {
   return blank
 }
 export const getNFTAvatar = (
-  event: InteractionWithNFT | Offer,
+  event: InteractionWithNFT,
 ): Promise<string> => parseNftAvatar(event.nft)

components/common/CartItemDetails.vue

@@ -48,7 +48,7 @@
 <script setup lang="ts">
 import { parseNftAvatar } from '@/utils/nft'
 import type { ListCartItem } from '@/stores/listingCart'
-import type { MakingOfferItem } from '@/components/offer/types'
+import type { MakingOfferItem } from '@/components/trade/types'
 import BasicImage from '@/components/shared/view/BasicImage.vue'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 

components/common/shoppingCart/utils.ts

@@ -5,7 +5,7 @@ import { useFiatStore } from '@/stores/fiat'
 import { sum } from '@/utils/math'
 import type { NFT, TokenId } from '@/types'
 import { chainPropListOf } from '@/utils/config/chain.config'
-import type { MakingOfferItem } from '@/components/offer/types'
+import type { MakingOfferItem } from '@/components/trade/types'
 
 export const prefixToToken = {
   ahk: 'KSM',

components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemOffer.vue

@@ -13,7 +13,7 @@
         class="w-[calc(10rem+55px)]"
         @click="onMakeOfferClick"
       />
-      <MakeOffer />
+      <TradeMakeOfferModal />
     </div>
   </GalleryItemPriceSection>
 </template>
@@ -24,7 +24,6 @@ import type { NFT } from '@/types'
 import { nftToOfferItem } from '@/components/common/shoppingCart/utils'
 import { usePreferencesStore } from '@/stores/preferences'
 import { useMakingOfferStore } from '@/stores/makeOffer'
-import MakeOffer from '@/components/offer/MakeOffer.vue'
 import GalleryItemPriceSection from '@/components/gallery/GalleryItemAction/GalleryItemActionSection.vue'
 import type { NFTOffer } from '@/composables/useNft'
 import { doAfterCheckCurrentChainVM } from '@/components/common/ConnectWallet/openReconnectWalletModal'

components/gallery/GalleryItemTabsPanel/GalleryItemOffers.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="h-full flex flex-col">
-    <GalleryItemOffersTable
+    <GalleryItemTradesTable
       :nft-id="nftId"
+      :type="TradeType.OFFER"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import GalleryItemOffersTable from './GalleryItemOffersTable.vue'
+import GalleryItemTradesTable from './GalleryItemTradesTable.vue'
+import { TradeType } from '@/composables/useTrades'
 
 defineProps<{
   nftId: string

components/gallery/GalleryItemTabsPanel/GalleryItemSwaps.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="h-full flex flex-col">
+    <GalleryItemTradesTable
+      :nft-id="nftId"
+      :type="TradeType.SWAP"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import GalleryItemTradesTable from './GalleryItemTradesTable.vue'
+import { TradeType } from '@/composables/useTrades'
+
+defineProps<{
+  nftId: string
+}>()
+</script>

components/gallery/GalleryItemTabsPanel/GalleryItemTabsPanel.vue

@@ -31,9 +31,22 @@
       />
     </NeoTabItem>
 
-    <!-- chart -->
+    <!-- swaps -->
     <NeoTabItem
+      v-if="offerVisible(urlPrefix)"
       value="3"
+      :label="$t('swaps')"
+      data-testid="offers-activity"
+    >
+      <GalleryItemSwaps
+        v-if="nft?.id"
+        :nft-id="nft.id"
+      />
+    </NeoTabItem>
+
+    <!-- chart -->
+    <NeoTabItem
+      value="4"
       :label="$t('tabs.chart')"
       class="p-5"
     >
@@ -46,6 +59,7 @@
 import { NeoTabItem, NeoTabs } from '@kodadot1/brick'
 import GalleryItemActivity from './GalleryItemActivity.vue'
 import GalleryItemOffers from './GalleryItemOffers.vue'
+import GalleryItemSwaps from './GalleryItemSwaps.vue'
 import GalleryItemChart from './GalleryItemChart.vue'
 import { offerVisible } from '@/utils/config/permission.config'