feat: New swap tables & Swap Modal follow up

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

@@ -1,8 +1,5 @@
 import { Interaction } from '@kodadot1/minimark/v1'
-import {
-  type InteractionWithNFT,
-  TradeInteraction,
-} from '@/composables/collectionActivity/types'
+import { type InteractionWithNFT } from '@/composables/collectionActivity/types'
 import { parseNftAvatar } from '@/utils/nft'
 import { mintInteraction } from '@/composables/collectionActivity/helpers'
 
@@ -23,8 +20,6 @@ export const interactionNameMap = ({
     MINT: 'Mint',
     SEND: 'Transfer',
     Offer: 'Offer',
-    [TradeInteraction.OFFER]: 'Offer',
-    [TradeInteraction.SWAP]: 'Swap',
   }
 
   if (distinguishBuyAndSell) {
@@ -45,8 +40,6 @@ export const getInteractionColor = (
     [Interaction.LIST]: 'bg-k-blue-accent',
     [Interaction.BUY]: distinguishBuyAndSell ? buyColor : sellColor,
     [Interaction.SEND]: 'bg-background-color',
-    [TradeInteraction.OFFER]: 'bg-k-green-accent',
-    [TradeInteraction.SWAP]: 'bg-k-green-accent',
     SELL: sellColor,
   }[interaction]
 }

components/gallery/GalleryItemTabsPanel/GalleryItemTradesTable.vue

@@ -21,40 +21,22 @@
     >
       <!-- item -->
       <NeoTableColumn
-        v-if="type === TradeType.SWAP"
+        v-if="isTradeSwap(type)"
         v-slot="{ row }: {row: TradeNftItem}"
         width="20%"
         field="item"
-        :label="$t('activity.event.item')"
+        :label="$t('offer.offer')"
       >
-        <div class="flex-1 text-clip">
-          <div class="flex items-center gap-4">
-            <nuxt-link
-              :to="`/${urlPrefix}/gallery/${row.offered.id}`"
-            >
-              <BaseMediaItem
-                class="border border-k-shade w-[2.25rem] h-[2.25rem] !shadow-none"
-                :alt="row.offered.name"
-                :src="sanitizeIpfsUrl(row.offered.image)"
-                preview
-                is-detail
-              />
-            </nuxt-link>
-            <nuxt-link
-              class="text-ellipsis inline-block"
-              :to="`/${urlPrefix}/gallery/${row.offered.id}`"
-            >
-              <span class="text-clip">
-                {{ row.offered.name }}
-              </span>
-            </nuxt-link>
-          </div>
-        </div>
+        <TradeActivityTableRowItem
+          :item="row.offered"
+          :surcharge="row.surcharge ? { amount: row.price, direction: row.surcharge } : undefined"
+          container-spacing="gap-3"
+        />
       </NeoTableColumn>
 
       <!-- price -->
       <NeoTableColumn
-        v-if="type === TradeType.OFFER"
+        v-if="isTradeOffer(type)"
         v-slot="{ row }: {row: TradeNftItem}"
         width="20%"
         field="price"
@@ -69,24 +51,12 @@
         </p>
       </NeoTableColumn>
 
-      <!-- expiration -->
-      <NeoTableColumn
-        v-slot="{ row }: {row: TradeNftItem}"
-        width="15%"
-        field="expiration"
-        :label="$t('expiration')"
-      >
-        <p class="capitalize">
-          {{ row.expirationDate ? formatToNow(row.expirationDate, false) : '--' }}
-        </p>
-      </NeoTableColumn>
-
       <!-- from -->
       <NeoTableColumn
-        v-slot="{ row }: {row: TradeNftItem}"
+        v-slot="{ row } : {row: TradeNftItem}"
         width="20%"
         field="caller"
-        :label="$t('tabs.tabActivity.from')"
+        :label=" isTradeOffer(type) ? $t('tabs.tabActivity.from') : $t('swap.counterparty')"
       >
         <div class="flex items-center gap-2">
           <ProfileAvatar
@@ -105,15 +75,27 @@
         </div>
       </NeoTableColumn>
 
+      <!-- expiration -->
+      <NeoTableColumn
+        v-slot="{ row }: { row: TradeNftItem }"
+        width="15%"
+        field="expiration"
+        :label="$t('expiration')"
+      >
+        <TradeExpiration :trade="row" />
+      </NeoTableColumn>
+
       <!-- action -->
       <NeoTableColumn
         v-slot="{ row }"
         width="10%"
       >
         <TradeOwnerButton
           class="max-md:!w-full"
+          detailed
           :trade="row as TradeNftItem"
-          @click:main="selectOffer"
+          @click:main="selectTrade"
+          @click:counter-swap="counterSwap(row)"
         />
       </NeoTableColumn>
     </NeoTable>
@@ -138,11 +120,9 @@ import {
   NeoTable,
   NeoTableColumn,
 } from '@kodadot1/brick'
-import { type TradeNftItem, TradeType } from '@/components/trade/types'
-import { formatToNow } from '@/utils/format/time'
+import type { TradeType, TradeNftItem } from '@/components/trade/types'
 import Identity from '@/components/identity/IdentityIndex.vue'
 import useSubscriptionGraphql from '@/composables/useSubscriptionGraphql'
-import { sanitizeIpfsUrl } from '@/utils/ipfs'
 
 const props = defineProps<{
   nftId: string
@@ -175,7 +155,7 @@ useSubscriptionGraphql({
   },
 })
 
-const selectOffer = (offer: TradeNftItem) => {
+const selectTrade = (offer: TradeNftItem) => {
   selectedTrade.value = offer
   isTradeModalOpen.value = true
 }

components/shared/gallery/NeoTag.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- NeoTag -->
   <div
     attached
     closable
@@ -22,7 +21,7 @@
 import { NeoIcon } from '@kodadot1/brick'
 
 type TagSize = 'small' | 'medium'
-type TagVariant = 'primary' | 'k-blue' | 'transparent'
+type TagVariant = 'primary' | 'k-blue' | 'k-blue-2' | 'transparent' | 'k-green' | 'k-purple' | 'k-grey' | 'k-orange'
 
 withDefaults(
   defineProps<{
@@ -64,8 +63,32 @@ const onClose = () => {
   }
 
   &--k-blue {
-    border: 1px solid var(--k-blue);
-    background-color: var(--blue-light-hover-color);
+    border: 1px solid var(--k-blue) !important;
+    background-color: var(--blue-light-hover-color) !important;
+  }
+
+  &--k-blue-2 {
+    color: var(--k-blue) !important;
+    background-color: var(--blue-light-hover-color) !important;
+  }
+
+  &--k-purple {
+    color: var(--k-purple) !important;
+    background-color: var(--k-purple-accent) !important;
+  }
+
+  &--k-orange {
+    color: var(--k-orange4) !important;
+    background-color: var(--k-yellow-light) !important;
+  }
+
+  &--k-green {
+    color: var(--k-green) !important;
+    background-color: var(--k-green-accent-2) !important;
+  }
+
+  &--k-grey {
+    @apply text-neutral-7 bg-neutral-3 dark:bg-neutral-11 #{!important};
   }
 
   &.tag-size {

components/trade/ActivityTable/RowItem.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+    v-if="item"
+    class="flex items-center justify-between w-min"
+    :class="containerSpacing"
+  >
+    <nuxt-link
+      :to="itemPath"
+      class="h-[50px]"
+    >
+      <BaseMediaItem
+        class="border border-k-shade w-[3.125rem] h-[3.125rem] !shadow-none"
+        :alt="item.name"
+        :src="image"
+        :animation-src="!image ? animationUrl : undefined"
+        preview
+        is-detail
+      />
+    </nuxt-link>
+
+    <div class="flex flex-col justify-between">
+      <nuxt-link
+        class="is-ellipsis inline-block"
+        :to="itemPath"
+      >
+        <span class="font-bold overflow-hidden">
+          {{ item.name }}
+        </span>
+      </nuxt-link>
+
+      <TradeActivityTableSurchargeTag :value="surcharge" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { fetchNft } from '@/components/items/ItemsGrid/useNftActions'
+import type { SwapSurcharge } from '@/composables/transaction/types'
+
+type ItemMedia = { image: string, animationUrl: string }
+
+const props = withDefaults(
+  defineProps<{
+    item: { id: string, name: string } | undefined
+    surcharge: SwapSurcharge | undefined
+    containerSpacing?: string
+  }>(),
+  {
+    containerSpacing: 'gap-5',
+  },
+)
+
+const image = ref()
+const animationUrl = ref()
+
+const { urlPrefix } = usePrefix()
+
+const itemPath = computed(() => `/${urlPrefix.value}/gallery/${props.id}`)
+
+const getItem = async (id: string): Promise<ItemMedia> => {
+  const nft = await fetchNft(id)
+
+  if (!nft.metadata) {
+    return {
+      image: '',
+      animationUrl: '',
+    }
+  }
+
+  const meta = await getNftMetadata(nft)
+
+  return {
+    image: meta.image,
+    animationUrl: meta.animationUrl,
+  }
+}
+
+watch(() => props.item?.id, async (id) => {
+  if (id) {
+    const item = await getItem(id)
+    image.value = item.image
+    animationUrl.value = item.animationUrl
+  }
+}, { immediate: true })
+</script>

components/trade/ActivityTable/RowItemCollection.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="bg-neutral-3 dark:bg-neutral-11 flex flex-col rounded-xl h-full !px-3">
+    <span class="text-k-grey capitalize"> {{ $t('trades.anyNftFrom') }} </span>
+    <div class="flex items-center gap-2">
+      <nuxt-link
+        :to="`/${urlPrefix}/collection/${considered.id}`"
+        class="font-bold"
+      >{{ considered.name }}
+      </nuxt-link>
+
+      <TradeActivityTableSurchargeTag :value="surcharge" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TradeConsidered } from '@/components/trade/types'
+import type { SwapSurcharge } from '@/composables/transaction/types'
+
+defineProps<{
+  considered: TradeConsidered
+  surcharge: SwapSurcharge | undefined
+}>()
+
+const { urlPrefix } = usePrefix()
+</script>

components/trade/ActivityTable/SurchargeTag.vue

@@ -0,0 +1,33 @@
+<template>
+  <NeoTag
+    v-if="config"
+    size="small"
+    :variant="config.variant"
+    class="w-min"
+  >
+    <span> {{ config.label }} </span>
+  </NeoTag>
+</template>
+
+<script setup lang="ts">
+import NeoTag from '@/components/shared/gallery/NeoTag.vue'
+import type { SwapSurcharge } from '@/composables/transaction/types'
+
+const props = defineProps<{
+  value: SwapSurcharge | undefined
+}>()
+
+const { $i18n } = useNuxtApp()
+const { format: formatPrice } = useFormatAmount()
+const { amount } = formatPrice(props.value?.amount || '')
+
+const config = computed(() => {
+  if (!props.value) {
+    return
+  }
+
+  return props.value.direction === 'Receive'
+    ? ({ label: $i18n.t('trades.requests', [amount]), variant: 'k-orange' as const })
+    : ({ label: `+${amount}`, variant: 'k-blue-2' as const })
+})
+</script>