From d670f92a917a785574f343c7d8e7f29a78661865 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Sun, 16 Feb 2025 18:58:39 +0100
Subject: [PATCH 1/5] feat: Create Collection Atomic Swap

---
 components/collection/CollectionTrades.vue    |  3 +-
 .../GalleryItemTrade.vue                      | 21 +-------
 .../swap/CreateCollectionSwapButton.vue       | 49 +++++++++++++++++
 components/swap/Preview.vue                   | 44 ++++++++-------
 components/swap/PreviewItem.vue               |  2 +
 components/swap/banner/CollectionPreview.vue  | 53 +++++++++++++++++++
 components/swap/banner/accounts.vue           | 12 ++++-
 .../swap/collection/DestinationProfile.vue    | 35 ++++++++++++
 components/swap/layout/index.vue              |  1 +
 components/swap/review.vue                    | 40 +++++++++++++-
 components/trade/TradeActivityTable.vue       |  4 +-
 .../transaction/transactionCreateSwap.ts      |  2 +-
 composables/transaction/types.ts              |  4 +-
 composables/useTradeActionClick.ts            | 28 ++++++++++
 i18n/locales/en.json                          |  4 ++
 middleware/redirects.global.ts                |  5 ++
 middleware/swap.ts                            | 24 +++++----
 pages/[prefix]/swap/collection/[id]/index.vue | 10 ++++
 stores/atomicSwaps.ts                         |  6 ++-
 utils/swap.ts                                 | 21 ++++++--
 20 files changed, 304 insertions(+), 64 deletions(-)
 create mode 100644 components/swap/CreateCollectionSwapButton.vue
 create mode 100644 components/swap/banner/CollectionPreview.vue
 create mode 100644 components/swap/collection/DestinationProfile.vue
 create mode 100644 composables/useTradeActionClick.ts
 create mode 100644 pages/[prefix]/swap/collection/[id]/index.vue

diff --git a/components/collection/CollectionTrades.vue b/components/collection/CollectionTrades.vue
index be9de7d98c..05c2c65588 100644
--- a/components/collection/CollectionTrades.vue
+++ b/components/collection/CollectionTrades.vue
@@ -12,6 +12,7 @@
         :key="key"
         :query="tradeQuery"
         :type="tradeType"
+        :enable-collection-swap="tradeType === TradeType.SWAP"
       />
     </div>
   </div>
@@ -19,7 +20,7 @@
 
 <script setup lang="ts">
 import { type TradeTableQuery } from '@/components/trade/TradeActivityTable.vue'
-import type { TradeType } from '@/components/trade/types'
+import { TradeType } from '@/components/trade/types'
 
 defineProps<{
   tradeType: TradeType
diff --git a/components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemTrade.vue b/components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemTrade.vue
index 366f464262..77d178661a 100644
--- a/components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemTrade.vue
+++ b/components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemTrade.vue
@@ -41,7 +41,6 @@ import { usePreferencesStore } from '@/stores/preferences'
 import { useMakingOfferStore } from '@/stores/makeOffer'
 import GalleryItemPriceSection from '@/components/gallery/GalleryItemAction/GalleryItemActionSection.vue'
 import type { NFTOffer } from '@/composables/useNft'
-import { doAfterCheckCurrentChainVM } from '@/components/common/ConnectWallet/openReconnectWalletModal'
 
 const props = defineProps<{
   nft: NFT
@@ -51,10 +50,9 @@ const props = defineProps<{
 const preferencesStore = usePreferencesStore()
 const makeOfferStore = useMakingOfferStore()
 const swapStore = useAtomicSwapStore()
-const { doAfterLogin } = useDoAfterlogin()
-const { isCurrentAccount, isLogIn } = useAuth()
+const { isCurrentAccount } = useAuth()
 const isOwner = computed(() => isCurrentAccount(props.nft?.currentOwner))
-
+const { onTradeActionClick } = useTradeActionClick(isOwner)
 const highestOfferPrice = computed(() => props.highestOffer?.price || '')
 
 const openOfferModal = () => {
@@ -65,21 +63,6 @@ const openOfferModal = () => {
   preferencesStore.setMakeOfferModalOpen(true)
 }
 
-const onTradeActionClick = (cb: () => void) => {
-  const fn = () => {
-    if (!isOwner.value) {
-      cb()
-    }
-  }
-
-  if (isLogIn.value) {
-    doAfterCheckCurrentChainVM(fn)
-  }
-  else {
-    doAfterLogin({ onLoginSuccess: fn })
-  }
-}
-
 const onMakeOfferClick = () => {
   onTradeActionClick(openOfferModal)
 }
diff --git a/components/swap/CreateCollectionSwapButton.vue b/components/swap/CreateCollectionSwapButton.vue
new file mode 100644
index 0000000000..5de0c554a7
--- /dev/null
+++ b/components/swap/CreateCollectionSwapButton.vue
@@ -0,0 +1,49 @@
+<template>
+  <NeoButton
+    variant="secondary"
+    class=""
+    @click="onCreateCollectionSwapClick"
+  >
+    {{ $t('swap.createCollectionSwap') }}
+  </NeoButton>
+</template>
+
+<script lang="ts" setup>
+import { NeoButton } from '@kodadot1/brick'
+import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
+
+const route = useRoute()
+const { $i18n } = useNuxtApp()
+
+const collectionId = computed(() => route.params.id.toString())
+const swapStore = useAtomicSwapStore()
+const { isCurrentAccount } = useAuth()
+
+const isCollectionOwner = computed(() => isCurrentAccount(collection.value.currentOwner))
+
+const { collection } = useCollectionMinimal({
+  collectionId: collectionId,
+})
+const { onTradeActionClick } = useTradeActionClick(isCollectionOwner)
+
+const onCreateCollectionSwapClick = () => {
+  onTradeActionClick(() => {
+    const swap = swapStore.createSwap(collectionId.value!, {
+      isCollectionSwap: true,
+      desired: [
+        {
+          id: null,
+          collectionId: collectionId.value!,
+          name: $i18n.t('swap.anyNftFromCollection', [collection.value?.name]),
+          sn: null,
+          meta: {
+            image: collection.value?.meta?.image,
+          },
+        },
+      ],
+
+    })
+    navigateToSwap(swap)
+  })
+}
+</script>
diff --git a/components/swap/Preview.vue b/components/swap/Preview.vue
index 1b913bdddd..7782c5de64 100644
--- a/components/swap/Preview.vue
+++ b/components/swap/Preview.vue
@@ -24,7 +24,7 @@
           </span>
 
           <a
-            v-if="count"
+            v-if="count && !isCollectionSwapDesired"
             @click="clearAll"
           >
             {{ $t('shoppingCart.clearAll') }}
@@ -46,6 +46,7 @@
             :name="nft.name"
             :image="sanitizeIpfsUrl(nft.meta.image)"
             image-class="border border-k-shade"
+            :hide-remove="isCollectionSwap && nft.id === null"
             @remove="swapStore.removeStepItem(nft.id)"
           />
 
@@ -107,7 +108,7 @@
             size="large"
             label="Next"
             variant="primary"
-            :disabled
+            :disabled="disabled"
             no-shadow
             expanded
             @click="onNext"
@@ -133,23 +134,6 @@ type StepDetails = {
   surchargeDirection: SwapSurchargeDirection
 }
 
-const stepDetailsMap: Partial<Record<SwapStep, StepDetails>> = {
-  [SwapStep.DESIRED]: {
-    title: 'swap.yourSwapList',
-    surchargeTitle: 'swap.requestToken',
-    nextRouteName: getSwapStepRouteName(SwapStep.OFFERED),
-    backRouteName: getSwapStepRouteName(SwapStep.COUNTERPARTY),
-    surchargeDirection: 'Receive',
-  },
-  [SwapStep.OFFERED]: {
-    title: 'swap.yourOffer',
-    surchargeTitle: 'swap.addToken',
-    nextRouteName: getSwapStepRouteName(SwapStep.REVIEW),
-    backRouteName: getSwapStepRouteName(SwapStep.DESIRED),
-    surchargeDirection: 'Send',
-  },
-}
-
 const props = defineProps<{
   step: SwapStep
 }>()
@@ -161,6 +145,24 @@ const { accountId } = useAuth()
 const { decimals } = useChain()
 const { urlPrefix } = usePrefix()
 const { getChainIcon } = useIcon()
+const isCollectionSwap = computed(() => swap.value.isCollectionSwap)
+
+const stepDetailsMap: ComputedRef<Partial<Record<SwapStep, StepDetails>>> = computed(() => ({
+  [SwapStep.DESIRED]: {
+    title: 'swap.yourSwapList',
+    surchargeTitle: 'swap.requestToken',
+    nextRouteName: getSwapStepRouteName(SwapStep.OFFERED, isCollectionSwap.value),
+    backRouteName: getSwapStepRouteName(SwapStep.COUNTERPARTY, isCollectionSwap.value),
+    surchargeDirection: 'Receive',
+  },
+  [SwapStep.OFFERED]: {
+    title: 'swap.yourOffer',
+    surchargeTitle: 'swap.addToken',
+    nextRouteName: getSwapStepRouteName(SwapStep.REVIEW, isCollectionSwap.value),
+    backRouteName: getSwapStepRouteName(SwapStep.DESIRED, isCollectionSwap.value),
+    surchargeDirection: 'Send',
+  },
+}))
 
 const target = ref()
 const amount = ref()
@@ -168,13 +170,15 @@ const itemsContainer = ref()
 
 const isTargetVisible = useElementVisibility(target)
 const stepItems = computed(() => swapStore.getStepItems(props.step))
-const stepDetails = computed(() => stepDetailsMap[props.step] as StepDetails)
+const stepDetails = computed(() => stepDetailsMap.value[props.step] as StepDetails)
 const title = computed(() => $i18n.t(stepDetails.value.title))
 const surchargeTitle = computed(() => $i18n.t(stepDetails.value.surchargeTitle))
 const surchargeDisabled = computed(() => Boolean(swap.value.surcharge))
 const stepHasSurcharge = computed(() => swap.value.surcharge?.direction === stepDetails.value.surchargeDirection)
 const count = computed(() => stepItems.value.length + (stepHasSurcharge.value ? 1 : 0))
 const isOverOneToOneSwap = computed(() => swap.value.offered.length > swap.value.desired.length && props.step === SwapStep.OFFERED)
+const isCollectionSwapDesired = computed(() => isCollectionSwap.value && props.step === SwapStep.DESIRED)
+
 const disabled = computed(() => {
   if ((!accountId.value && props.step === SwapStep.OFFERED) || isOverOneToOneSwap.value) {
     return true
diff --git a/components/swap/PreviewItem.vue b/components/swap/PreviewItem.vue
index 64a29f9e85..f49a6dfb98 100644
--- a/components/swap/PreviewItem.vue
+++ b/components/swap/PreviewItem.vue
@@ -22,6 +22,7 @@
     </div>
 
     <NeoButton
+      v-if="!hideRemove"
       size="small"
       variant="icon"
       icon="xmark"
@@ -39,5 +40,6 @@ defineProps<{
   name?: string
   image: string
   imageClass?: string
+  hideRemove?: boolean
 }>()
 </script>
diff --git a/components/swap/banner/CollectionPreview.vue b/components/swap/banner/CollectionPreview.vue
new file mode 100644
index 0000000000..8001b397aa
--- /dev/null
+++ b/components/swap/banner/CollectionPreview.vue
@@ -0,0 +1,53 @@
+<template>
+  <div
+    class="rounded-full min-w-[236px] h-[62px] md:w-auto border border-k-shade inline-flex justify-start px-2.5"
+    data-testid="drop-created-by-container"
+  >
+    <div class="flex items-center">
+      <div
+        class="rounded-full overflow-hidden bg-background-color border"
+        :style="{
+          width: `${imageSize}px`,
+          height: `${imageSize}px`,
+          padding: `${Math.round(imageSize / 16)}px`,
+        }"
+      >
+        <BaseMediaItem
+          :src="sanitizeIpfsUrl(collection.meta?.image)"
+          :image-component="NuxtImg"
+          :sizes="`${imageSize}px`"
+          title="User Avatar"
+          class="object-cover overflow-hidden rounded-full h-full w-full !shadow-none"
+          inner-class="object-cover"
+        />
+      </div>
+      <div class="ml-3.5">
+        <NuxtLink :to="`/${urlPrefix}/collection/${collectionId}`">
+          {{ collection.name }}
+        </NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
+import { sanitizeIpfsUrl } from '@/utils/ipfs'
+
+const NuxtImg = resolveComponent('NuxtImg')
+
+const props = withDefaults(
+  defineProps<{
+    collectionId: string
+    imageSize?: number
+  }>(),
+  {
+    imageSize: 48,
+  },
+)
+
+const { urlPrefix } = usePrefix()
+const { collection } = useCollectionMinimal({
+  collectionId: computed(() => props.collectionId),
+})
+</script>
diff --git a/components/swap/banner/accounts.vue b/components/swap/banner/accounts.vue
index 74bd74fdde..888508f9ec 100644
--- a/components/swap/banner/accounts.vue
+++ b/components/swap/banner/accounts.vue
@@ -7,6 +7,7 @@
       <CollectionDropCreatedBy
         v-if="creator"
         :address="creator"
+        :show-popover="false"
       />
       <Auth v-else />
     </div>
@@ -21,7 +22,15 @@
       <div class="font-bold text-xl capitalize">
         {{ $t('swap.counterparty') }}
       </div>
-      <CollectionDropCreatedBy :address="counterparty" />
+      <SwapBannerCollectionPreview
+        v-if="isCollectionSwap"
+        :collection-id="counterparty"
+      />
+      <CollectionDropCreatedBy
+        v-else
+        :address="counterparty"
+        :show-popover="false"
+      />
     </div>
   </div>
 </template>
@@ -32,5 +41,6 @@ import { NeoIcon } from '@kodadot1/brick'
 defineProps<{
   creator?: string
   counterparty: string
+  isCollectionSwap?: boolean
 }>()
 </script>
diff --git a/components/swap/collection/DestinationProfile.vue b/components/swap/collection/DestinationProfile.vue
new file mode 100644
index 0000000000..fa344e98ce
--- /dev/null
+++ b/components/swap/collection/DestinationProfile.vue
@@ -0,0 +1,35 @@
+<template>
+  <SwapLayoutSelection>
+    <template #title>
+      <SwapBannerTitle
+        step="2/4"
+        :title="$t('swap.collectionSwapPreview')"
+        :subtitle="$t('swap.collectionSwapDescription')"
+      />
+    </template>
+
+    <SwapGridList
+      :query="query"
+    />
+
+    <template #preview>
+      <SwapPreview :step="SwapStep.DESIRED" />
+    </template>
+  </SwapLayoutSelection>
+</template>
+
+<script setup lang="ts">
+import { SwapStep } from '@/components/swap/types'
+
+const { accountId } = useAuth()
+const route = useRoute()
+const collectionId = computed(() => route.params.id.toString())
+
+const query = reactive({
+  collection: {
+    id_eq: collectionId.value,
+  },
+  currentOwner_not_eq: accountId.value,
+  burned_eq: false,
+})
+</script>
diff --git a/components/swap/layout/index.vue b/components/swap/layout/index.vue
index 7c7a3e8037..b473919865 100644
--- a/components/swap/layout/index.vue
+++ b/components/swap/layout/index.vue
@@ -6,6 +6,7 @@
       <SwapBannerAccounts
         :creator="swap.creator"
         :counterparty="swap.counterparty"
+        :is-collection-swap="swap.isCollectionSwap"
       />
     </div>
 
diff --git a/components/swap/review.vue b/components/swap/review.vue
index 28b831bfaf..9a8089c04b 100644
--- a/components/swap/review.vue
+++ b/components/swap/review.vue
@@ -55,7 +55,36 @@
             {{ $t('swap.reviewCounterpartyAccept') }}
           </p>
 
+          <div
+            v-if="swap.isCollectionSwap"
+            class="flex flex-col gap-4 !my-10"
+          >
+            <DynamicGrid
+              :grid-section="GridSection.PROFILE_GALLERY"
+              grid-size="medium"
+              :mobile-cols="2"
+              class="my-5"
+            >
+              <ItemsGridImage
+                v-for="(nft, index) in desiredNfts"
+                :key="index"
+                :nft="nft"
+                hide-action
+                collection-popover-hide
+                hide-listing
+                skeleton-variant="primary"
+                hide-video-controls
+                variant="minimal"
+              />
+
+              <SwapSurchargeCard
+                v-if="surcharge?.direction === 'Receive'"
+                :surcharge="surcharge"
+              />
+            </DynamicGrid>
+          </div>
           <SwapGridList
+            v-else
             :query="desiredQuery"
             class="!my-10"
             :surcharge="surcharge?.direction === 'Receive' ? surcharge : undefined"
@@ -84,7 +113,7 @@
           size="large"
           no-shadow
           :label="$t('swap.modifyOffer')"
-          @click="router.push({ name: 'prefix-swap-id', params: { id: swap.counterparty }, query: { swapId: swap.id } })"
+          @click="onModifyOfferClick"
         />
 
         <NeoButton
@@ -110,6 +139,9 @@
 <script setup lang="ts">
 import { NeoIcon, NeoButton } from '@kodadot1/brick'
 import { successMessage } from '@/utils/notification'
+import ItemsGridImage from '@/components/items/ItemsGrid/ItemsGridImage.vue'
+import type { NFTWithMetadata } from '@/composables/useNft'
+import { SwapStep } from '@/components/swap/types'
 
 const router = useRouter()
 const { $i18n } = useNuxtApp()
@@ -122,6 +154,8 @@ const { swap } = storeToRefs(swapStore)
 const offeredQuery = computed(() => ({ id_in: swap.value?.offered.map(item => item.id) }))
 const desiredQuery = computed(() => ({ id_in: swap.value?.desired.map(item => item.id) }))
 
+const desiredNfts = computed(() => swap.value?.desired as NFTWithMetadata[])
+
 const toTokenToSwap = (item: SwapItem) => ({
   id: item.id,
   collectionId: item.collectionId,
@@ -130,6 +164,10 @@ const toTokenToSwap = (item: SwapItem) => ({
 
 const surcharge = computed(() => swap.value?.surcharge)
 
+const onModifyOfferClick = () => {
+  router.push({ name: getSwapStepRouteName(SwapStep.DESIRED, swap.value?.isCollectionSwap), params: { id: swap.value?.counterparty }, query: { swapId: swap.value?.id } })
+}
+
 const submit = () => {
   if (!swap.value) {
     return
diff --git a/components/trade/TradeActivityTable.vue b/components/trade/TradeActivityTable.vue
index 90aa9ad09b..0b13eb2bd4 100644
--- a/components/trade/TradeActivityTable.vue
+++ b/components/trade/TradeActivityTable.vue
@@ -22,6 +22,7 @@
           </div>
         </NeoButton>
       </div>
+      <CreateCollectionSwapButton v-if="enableCollectionSwap" />
     </div>
 
     <hr class="mb-10 mt-0">
@@ -100,6 +101,7 @@
 <script lang="ts" setup>
 import { NeoButton } from '@kodadot1/brick'
 import type { TradeType, TradeNftItem } from '@/components/trade/types'
+import CreateCollectionSwapButton from '@/components/swap/CreateCollectionSwapButton.vue'
 
 type TradeTabType = 'outgoing' | 'incoming'
 export type TradeTableQuery = Record<TradeTabType, string>
@@ -107,11 +109,11 @@ export type TradeTableQuery = Record<TradeTabType, string>
 const props = defineProps<{
   type: TradeType
   query: TradeTableQuery
+  enableCollectionSwap?: boolean
 }>()
 
 const route = useRoute()
 const { replaceUrl } = useReplaceUrl()
-
 const dataKey = TRADES_QUERY_MAP[props.type].dataKey
 
 const selectedTrade = ref<TradeNftItem>()
diff --git a/composables/transaction/transactionCreateSwap.ts b/composables/transaction/transactionCreateSwap.ts
index db0e08ea13..7a52181fb7 100644
--- a/composables/transaction/transactionCreateSwap.ts
+++ b/composables/transaction/transactionCreateSwap.ts
@@ -18,7 +18,7 @@ async function execCreateSwapStatmine({ item, api, executeTransaction, isLoading
 
       const swap = api.tx.nfts.createSwap(
         offeredCollectionId,
-        offeredItem,
+        offeredItem as string,
         desiredCollectionId,
         desiredItem,
         item.surcharge
diff --git a/composables/transaction/types.ts b/composables/transaction/types.ts
index 21813d1121..cd8a105887 100644
--- a/composables/transaction/types.ts
+++ b/composables/transaction/types.ts
@@ -190,9 +190,9 @@ export type SwapSurchargeDirection = 'Send' | 'Receive'
 export type SwapSurcharge = { amount: string, direction: SwapSurchargeDirection }
 
 export type TokenToSwap = {
-  id: string
+  id: string | null
   collectionId: string
-  sn: string
+  sn: string | null
 }
 
 export type ActionSwap = {
diff --git a/composables/useTradeActionClick.ts b/composables/useTradeActionClick.ts
new file mode 100644
index 0000000000..b84bc9be63
--- /dev/null
+++ b/composables/useTradeActionClick.ts
@@ -0,0 +1,28 @@
+import { useIdentityStore } from '@/stores/identity'
+import { doAfterCheckCurrentChainVM } from '@/components/common/ConnectWallet/openReconnectWalletModal'
+
+export default function (isOwner: ComputedRef<boolean>) {
+  const identityStore = useIdentityStore()
+  const { doAfterLogin } = useDoAfterlogin()
+
+  const isLogIn = computed(() => Boolean(identityStore.getAuthAddress))
+
+  const onTradeActionClick = (cb: () => void) => {
+    const fn = () => {
+      if (!isOwner.value) {
+        cb()
+      }
+    }
+
+    if (isLogIn.value) {
+      doAfterCheckCurrentChainVM(fn)
+    }
+    else {
+      doAfterLogin({ onLoginSuccess: fn })
+    }
+  }
+
+  return {
+    onTradeActionClick,
+  }
+}
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 301ff89c1f..4fc99a2d2c 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1839,13 +1839,17 @@
   "swap": {
     "acceptSwap": "Accepting Swap",
     "addToken": "Add Token",
+    "anyNftFromCollection": "Any NFT from \"{0}\" Collection",
     "beginSwap": "Begin Swap offer",
     "cantSwapWithYourself": "You can't swap with yourself",
     "clickOnNft": "Click on any NFT to add it to your swap list.",
+    "collectionSwapDescription": "Any NFT from this collection will be offered in the swap",
+    "collectionSwapPreview": "Collection Swap",
     "connectTrader": "Connect with a trader",
     "connectTraderInfo": "Enter the wallet address of the trader you want to engage with, and we’ll guide you through the secure process of making a swap offer.",
     "counterSwap": "Counter Swap",
     "counterparty": "Counterparty",
+    "createCollectionSwap": "Create Collection Swap",
     "createSwap": "Create Swap",
     "created": "Swap Created",
     "creatingSwap": "Creating Swap",
diff --git a/middleware/redirects.global.ts b/middleware/redirects.global.ts
index 63396564ce..9f1dd8ff63 100644
--- a/middleware/redirects.global.ts
+++ b/middleware/redirects.global.ts
@@ -1,5 +1,6 @@
 import { type Prefix } from '@kodadot1/static'
 import type { RouteLocationRaw, RouteLocationNormalizedLoadedGeneric } from 'vue-router'
+import { isAddress } from '@polkadot/util-crypto'
 import { createVisible, transferVisible, teleportVisible, migrateVisible, swapVisible } from '@/utils/config/permission.config'
 
 type ReplaceRouteItemCondition = (route: RouteLocationNormalizedLoadedGeneric) => boolean
@@ -14,6 +15,10 @@ const getFormatAddressRouteCondition = (cond: ReplaceRouteItemCondition, { addre
     cond,
     replaceRoute: ({ params, name, query }) => {
       const address = params[addressKey].toString()
+
+      if (!isAddress(address)) {
+        return
+      }
       const prefix = params.prefix.toString() as Prefix
 
       return execByVm({
diff --git a/middleware/swap.ts b/middleware/swap.ts
index 810d7e2cce..537ecb790c 100644
--- a/middleware/swap.ts
+++ b/middleware/swap.ts
@@ -1,4 +1,5 @@
 import { type Prefix } from '@kodadot1/static'
+import { isAddress } from '@polkadot/util-crypto'
 import { SwapStep } from '@/components/swap/types'
 
 export default defineNuxtRouteMiddleware((to) => {
@@ -9,13 +10,10 @@ export default defineNuxtRouteMiddleware((to) => {
   const swapId = to.query.swapId?.toString()
   const id = to.params.id?.toString()
   const routeName = to.name?.toString()
-
   if (!id || !routeName) {
     return navigateTo({ name: getSwapStepRouteName(SwapStep.COUNTERPARTY) })
   }
 
-  const routeStep = SWAP_ROUTE_NAME_STEP_MAP[routeName]
-
   const foundSwap = items.value
     .filter(item =>
       item.counterparty === id
@@ -24,24 +22,28 @@ export default defineNuxtRouteMiddleware((to) => {
     )[0]
 
   if (!foundSwap) {
-    return navigateTo({
-      name: getSwapStepRouteName(SwapStep.DESIRED),
-      params: { id, prefix },
-      query: { swapId: swapStore.createSwap(id).id },
-    })
+    if (isAddress(id)) {
+      return navigateTo({
+        name: getSwapStepRouteName(SwapStep.DESIRED),
+        params: { id, prefix },
+        query: { swapId: swapStore.createSwap(id).id },
+      })
+    }
+    return navigateTo({ name: getSwapStepRouteName(SwapStep.COUNTERPARTY, true), params: { id, prefix } })
   }
+  const isCollectionSwap = foundSwap.isCollectionSwap
 
   swap.value = foundSwap
 
   const swapStep = getSwapStep(swap.value)
 
   if (swapStep === SwapStep.CREATED) {
-    return navigateTo({ name: getSwapStepRouteName(SwapStep.COUNTERPARTY), params: { prefix } })
+    return navigateTo({ name: getSwapStepRouteName(SwapStep.COUNTERPARTY, isCollectionSwap), params: { prefix } })
   }
-
+  const routeStep = getRouteNameStepMap(isCollectionSwap)[routeName]
   step.value = routeStep
 
   if (routeStep > swapStep) {
-    return navigateTo({ name: getSwapStepRouteName(swapStep), params: { id, prefix }, query: { swapId: swap.value.id } })
+    return navigateTo({ name: getSwapStepRouteName(swapStep, isCollectionSwap), params: { id, prefix }, query: { swapId: swap.value.id } })
   }
 })
diff --git a/pages/[prefix]/swap/collection/[id]/index.vue b/pages/[prefix]/swap/collection/[id]/index.vue
new file mode 100644
index 0000000000..f6ba535df6
--- /dev/null
+++ b/pages/[prefix]/swap/collection/[id]/index.vue
@@ -0,0 +1,10 @@
+<template>
+  <SwapCollectionDestinationProfile />
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'background-layout',
+  middleware: ['swap'],
+})
+</script>
diff --git a/stores/atomicSwaps.ts b/stores/atomicSwaps.ts
index 92f6ca7a94..a4beb5b9ea 100644
--- a/stores/atomicSwaps.ts
+++ b/stores/atomicSwaps.ts
@@ -18,13 +18,14 @@ export type AtomicSwap = {
   surcharge?: SwapSurcharge
   duration: number
   blockNumber?: string
+  isCollectionSwap?: boolean
 } & CartItem
 
 export type SwapItem = {
-  id: string
+  id: string | null
   name: string
   collectionId: string
-  sn: string
+  sn: string | null
   meta: any
 }
 
@@ -62,6 +63,7 @@ export const useAtomicSwapStore = defineStore('atomicSwap', () => {
     const newAtomicSwap: AtomicSwap = {
       id: window.crypto.randomUUID().split('-')[0],
       counterparty,
+      isCollectionSwap: false,
       offered: [],
       desired: [],
       createdAt: Date.now(),
diff --git a/utils/swap.ts b/utils/swap.ts
index f94c3d53ac..083fe702de 100644
--- a/utils/swap.ts
+++ b/utils/swap.ts
@@ -2,22 +2,33 @@ import { SwapStep } from '@/components/swap/types'
 import type { TradeToken, TradeNftItem } from '@/components/trade/types'
 import type { NFT } from '@/types'
 
-export const SWAP_ROUTE_NAME_STEP_MAP = {
+const SWAP_ROUTE_NAME_STEP_MAP = {
   'prefix-swap': SwapStep.COUNTERPARTY,
   'prefix-swap-id': SwapStep.DESIRED,
   'prefix-swap-id-offer': SwapStep.OFFERED,
   'prefix-swap-id-review': SwapStep.REVIEW,
 }
 
+const COLLECTION_SWAP_ROUTE_NAME_STEP_MAP = {
+  'prefix-collection-id-swaps': SwapStep.COUNTERPARTY,
+  'prefix-swap-collection-id': SwapStep.DESIRED,
+  'prefix-swap-id-offer': SwapStep.OFFERED,
+  'prefix-swap-id-review': SwapStep.REVIEW,
+}
+
 export const ATOMIC_SWAP_PAGES = [
   'prefix-swap-id',
+  'prefix-swap-collection-id',
   'prefix-swap-id-offer',
   'prefix-swap-id-review',
 ]
 
-export const getSwapStepRouteName = (step: SwapStep) => {
-  const index = Object.values(SWAP_ROUTE_NAME_STEP_MAP).findIndex(name => name === step)
-  return Object.keys(SWAP_ROUTE_NAME_STEP_MAP)[index]
+export const getRouteNameStepMap = (isCollectionSwap?: boolean) => isCollectionSwap ? COLLECTION_SWAP_ROUTE_NAME_STEP_MAP : SWAP_ROUTE_NAME_STEP_MAP
+
+export const getSwapStepRouteName = (step: SwapStep, isCollectionSwap?: boolean) => {
+  const routeNameStepMap = getRouteNameStepMap(isCollectionSwap)
+  const index = Object.values(routeNameStepMap).findIndex(name => name === step)
+  return Object.keys(routeNameStepMap)[index]
 }
 
 export const getSwapStep = (swap: AtomicSwap): SwapStep => {
@@ -48,7 +59,7 @@ export const getStepItemsKey = (step: SwapStep) => {
 
 export const navigateToSwap = (swap: AtomicSwap) => {
   navigateTo({
-    name: 'prefix-swap-id',
+    name: getSwapStepRouteName(SwapStep.DESIRED, swap.isCollectionSwap),
     params: { id: swap.counterparty },
     query: { swapId: swap.id },
   })

From 8366465a4e7dda2f5638ddf441ccf6b04f15fe13 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Mon, 17 Feb 2025 10:38:21 +0100
Subject: [PATCH 2/5] refactor: props

---
 components/collection/CollectionTrades.vue    | 11 ++++--
 components/collection/drop/ItemsGrid.vue      |  2 +-
 components/items/ItemsGrid/ItemsGrid.vue      |  6 +--
 components/items/ItemsGrid/ItemsGridImage.vue |  4 +-
 components/shared/nftCard/NftCard.vue         |  4 +-
 components/shared/nftCard/NftMediaInfo.vue    |  6 +--
 components/swap/Preview.vue                   |  2 +-
 components/swap/PreviewItem.vue               | 17 +++++---
 components/swap/collection/SwapGridList.vue   | 39 +++++++++++++++++++
 components/swap/review.vue                    | 33 +---------------
 components/trade/TradeActivityTable.vue       |  4 +-
 11 files changed, 73 insertions(+), 55 deletions(-)
 create mode 100644 components/swap/collection/SwapGridList.vue

diff --git a/components/collection/CollectionTrades.vue b/components/collection/CollectionTrades.vue
index 05c2c65588..1c4b0b9605 100644
--- a/components/collection/CollectionTrades.vue
+++ b/components/collection/CollectionTrades.vue
@@ -12,15 +12,20 @@
         :key="key"
         :query="tradeQuery"
         :type="tradeType"
-        :enable-collection-swap="tradeType === TradeType.SWAP"
-      />
+      >
+        <template #action>
+          <CreateCollectionSwapButton v-if="isTradeSwap(tradeType)" />
+        </template>
+      </TradeActivityTable>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { type TradeTableQuery } from '@/components/trade/TradeActivityTable.vue'
-import { TradeType } from '@/components/trade/types'
+import type { TradeType } from '@/components/trade/types'
+import { isTradeSwap } from '@/composables/useTradeType'
+import CreateCollectionSwapButton from '@/components/swap/CreateCollectionSwapButton.vue'
 
 defineProps<{
   tradeType: TradeType
diff --git a/components/collection/drop/ItemsGrid.vue b/components/collection/drop/ItemsGrid.vue
index d5d7f9e442..51f6c78574 100644
--- a/components/collection/drop/ItemsGrid.vue
+++ b/components/collection/drop/ItemsGrid.vue
@@ -26,7 +26,7 @@
     <ItemsGrid
       :search="itemsGridSearch"
       :grid-size="'medium'"
-      collection-popover-hide
+      hide-collection-popover
       hide-listing
       show-timestamp
       :reset-search-query-params="['sort']"
diff --git a/components/items/ItemsGrid/ItemsGrid.vue b/components/items/ItemsGrid/ItemsGrid.vue
index 56550f2dfb..fb827b274d 100644
--- a/components/items/ItemsGrid/ItemsGrid.vue
+++ b/components/items/ItemsGrid/ItemsGrid.vue
@@ -26,7 +26,7 @@
           :hide-media-info="hideMediaInfo"
           :hide-action="hideNFTHoverAction"
           :show-timestamp="showTimestamp"
-          :collection-popover-hide="collectionPopoverHide"
+          :hide-collection-popover="hideCollectionPopover"
           :hide-listing="hideListing"
           :lazy-loading="
             shouldLazyLoad({
@@ -148,7 +148,7 @@ const props = defineProps<{
   loadingOtherNetwork?: boolean
   showTimestamp?: boolean
   hideHoverAction?: boolean
-  collectionPopoverHide?: boolean
+  hideCollectionPopover?: boolean
   hideListing?: boolean
   linkTarget?: string
   fetchOnchainData?: boolean
@@ -284,7 +284,7 @@ const getSkeletonVariant = (slotProps) => {
   if (slotProps.isMobileVariant || slotProps.grid === 'small') {
     return 'minimal'
   }
-  if (props.collectionPopoverHide) {
+  if (props.hideCollectionPopover) {
     return 'slim'
   }
   return 'primary'
diff --git a/components/items/ItemsGrid/ItemsGridImage.vue b/components/items/ItemsGrid/ItemsGridImage.vue
index 49f4ced94b..fce29d86cf 100644
--- a/components/items/ItemsGrid/ItemsGridImage.vue
+++ b/components/items/ItemsGrid/ItemsGridImage.vue
@@ -8,7 +8,7 @@
     :variant="variant"
     :hide-media-info="hideMediaInfo"
     :show-timestamp="showTimestamp"
-    :collection-popover-hide="collectionPopoverHide"
+    :hide-collection-popover="hideCollectionPopover"
     :lazy-loading="lazyLoading"
     :class="{ 'in-cart-border': shoppingCartStore.isItemInCart(nft.id) || isSelectActionItemInCart }"
     :show-action-on-hover="!showActionSection"
@@ -104,7 +104,7 @@ const props = defineProps<{
   hideVideoControls?: boolean
   hideListing?: boolean
   showTimestamp?: boolean
-  collectionPopoverHide?: boolean
+  hideCollectionPopover?: boolean
   lazyLoading?: boolean
   skeletonVariant: string
   linkTarget?: string
diff --git a/components/shared/nftCard/NftCard.vue b/components/shared/nftCard/NftCard.vue
index 60f31bac65..74fc3c1428 100644
--- a/components/shared/nftCard/NftCard.vue
+++ b/components/shared/nftCard/NftCard.vue
@@ -59,7 +59,7 @@
         :prefix="prefix"
         :show-price="showPrice"
         :show-timestamp="showTimestamp"
-        :collection-popover-hide="collectionPopoverHide"
+        :hide-collection-popover="hideCollectionPopover"
         :collection-popover-show-delay="collectionPopoverShowDelay"
       />
     </component>
@@ -125,7 +125,7 @@ const props = withDefaults(
     prefix: string
     showPrice?: boolean
     showTimestamp?: boolean
-    collectionPopoverHide?: boolean
+    hideCollectionPopover?: boolean
     collectionPopoverShowDelay?: number
     variant?: NftCardVariant
     placeholder?: string
diff --git a/components/shared/nftCard/NftMediaInfo.vue b/components/shared/nftCard/NftMediaInfo.vue
index fcbe8b75a2..faa0f72aef 100644
--- a/components/shared/nftCard/NftMediaInfo.vue
+++ b/components/shared/nftCard/NftMediaInfo.vue
@@ -4,7 +4,7 @@
     :class="[
       `nft-media-info__${variant}`,
       {
-        'nft-media-info__slim': collectionPopoverHide,
+        'nft-media-info__slim': hideCollectionPopover,
       },
     ]"
   >
@@ -17,7 +17,7 @@
       <CollectionDetailsPopover
         v-if="
           !isMinimal
-            && !collectionPopoverHide
+            && !hideCollectionPopover
             && (nft.collection.name || nft.collection.id)
         "
         :show-delay="collectionPopoverShowDelay"
@@ -74,7 +74,7 @@ const props = withDefaults(
     prefix: string
     showPrice?: boolean
     showTimestamp?: boolean
-    collectionPopoverHide?: boolean
+    hideCollectionPopover?: boolean
     collectionPopoverShowDelay?: number
     variant?: NftCardVariant
   }>(),
diff --git a/components/swap/Preview.vue b/components/swap/Preview.vue
index 7782c5de64..c3c1566055 100644
--- a/components/swap/Preview.vue
+++ b/components/swap/Preview.vue
@@ -46,7 +46,7 @@
             :name="nft.name"
             :image="sanitizeIpfsUrl(nft.meta.image)"
             image-class="border border-k-shade"
-            :hide-remove="isCollectionSwap && nft.id === null"
+            :removable="!(isCollectionSwap && nft.id === null)"
             @remove="swapStore.removeStepItem(nft.id)"
           />
 
diff --git a/components/swap/PreviewItem.vue b/components/swap/PreviewItem.vue
index f49a6dfb98..ccb0ce5814 100644
--- a/components/swap/PreviewItem.vue
+++ b/components/swap/PreviewItem.vue
@@ -36,10 +36,15 @@ import { NeoButton } from '@kodadot1/brick'
 
 const emit = defineEmits(['remove'])
 
-defineProps<{
-  name?: string
-  image: string
-  imageClass?: string
-  hideRemove?: boolean
-}>()
+withDefaults(
+  defineProps<{
+    name?: string
+    image: string
+    imageClass?: string
+    removable?: boolean
+  }>(),
+  {
+    removable: true,
+  },
+)
 </script>
diff --git a/components/swap/collection/SwapGridList.vue b/components/swap/collection/SwapGridList.vue
new file mode 100644
index 0000000000..750ba60a78
--- /dev/null
+++ b/components/swap/collection/SwapGridList.vue
@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="flex flex-col gap-4 !my-10"
+  >
+    <DynamicGrid
+      :grid-section="GridSection.PROFILE_GALLERY"
+      grid-size="medium"
+      :mobile-cols="2"
+      class="my-5"
+    >
+      <ItemsGridImage
+        v-for="(nft, index) in desiredNfts"
+        :key="index"
+        :nft="nft"
+        hide-action
+        hide-collection-popover
+        hide-listing
+        skeleton-variant="primary"
+        hide-video-controls
+        variant="minimal"
+      />
+
+      <SwapSurchargeCard
+        v-if="surcharge?.direction === 'Receive'"
+        :surcharge="surcharge"
+      />
+    </DynamicGrid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ItemsGridImage from '@/components/items/ItemsGrid/ItemsGridImage.vue'
+import type { NFTWithMetadata } from '@/composables/useNft'
+
+const swapStore = useAtomicSwapStore()
+const { swap } = storeToRefs(swapStore)
+const surcharge = computed(() => swap.value?.surcharge)
+const desiredNfts = computed(() => swap.value?.desired as NFTWithMetadata[])
+</script>
diff --git a/components/swap/review.vue b/components/swap/review.vue
index 9a8089c04b..39331091bc 100644
--- a/components/swap/review.vue
+++ b/components/swap/review.vue
@@ -55,34 +55,9 @@
             {{ $t('swap.reviewCounterpartyAccept') }}
           </p>
 
-          <div
+          <SwapCollectionSwapGridList
             v-if="swap.isCollectionSwap"
-            class="flex flex-col gap-4 !my-10"
-          >
-            <DynamicGrid
-              :grid-section="GridSection.PROFILE_GALLERY"
-              grid-size="medium"
-              :mobile-cols="2"
-              class="my-5"
-            >
-              <ItemsGridImage
-                v-for="(nft, index) in desiredNfts"
-                :key="index"
-                :nft="nft"
-                hide-action
-                collection-popover-hide
-                hide-listing
-                skeleton-variant="primary"
-                hide-video-controls
-                variant="minimal"
-              />
-
-              <SwapSurchargeCard
-                v-if="surcharge?.direction === 'Receive'"
-                :surcharge="surcharge"
-              />
-            </DynamicGrid>
-          </div>
+          />
           <SwapGridList
             v-else
             :query="desiredQuery"
@@ -139,8 +114,6 @@
 <script setup lang="ts">
 import { NeoIcon, NeoButton } from '@kodadot1/brick'
 import { successMessage } from '@/utils/notification'
-import ItemsGridImage from '@/components/items/ItemsGrid/ItemsGridImage.vue'
-import type { NFTWithMetadata } from '@/composables/useNft'
 import { SwapStep } from '@/components/swap/types'
 
 const router = useRouter()
@@ -154,8 +127,6 @@ const { swap } = storeToRefs(swapStore)
 const offeredQuery = computed(() => ({ id_in: swap.value?.offered.map(item => item.id) }))
 const desiredQuery = computed(() => ({ id_in: swap.value?.desired.map(item => item.id) }))
 
-const desiredNfts = computed(() => swap.value?.desired as NFTWithMetadata[])
-
 const toTokenToSwap = (item: SwapItem) => ({
   id: item.id,
   collectionId: item.collectionId,
diff --git a/components/trade/TradeActivityTable.vue b/components/trade/TradeActivityTable.vue
index 0b13eb2bd4..9a4ab4a4b5 100644
--- a/components/trade/TradeActivityTable.vue
+++ b/components/trade/TradeActivityTable.vue
@@ -22,7 +22,7 @@
           </div>
         </NeoButton>
       </div>
-      <CreateCollectionSwapButton v-if="enableCollectionSwap" />
+      <slot name="action" />
     </div>
 
     <hr class="mb-10 mt-0">
@@ -101,7 +101,6 @@
 <script lang="ts" setup>
 import { NeoButton } from '@kodadot1/brick'
 import type { TradeType, TradeNftItem } from '@/components/trade/types'
-import CreateCollectionSwapButton from '@/components/swap/CreateCollectionSwapButton.vue'
 
 type TradeTabType = 'outgoing' | 'incoming'
 export type TradeTableQuery = Record<TradeTabType, string>
@@ -109,7 +108,6 @@ export type TradeTableQuery = Record<TradeTabType, string>
 const props = defineProps<{
   type: TradeType
   query: TradeTableQuery
-  enableCollectionSwap?: boolean
 }>()
 
 const route = useRoute()

From f637628adbafcb753c1cb91421559268cfe9781d Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Mon, 17 Feb 2025 13:53:09 +0100
Subject: [PATCH 3/5] feat: Create Collection Atomic Offer

---
 components/collection/CollectionTrades.vue    | 10 ++-
 .../swap/CreateCollectionSwapButton.vue       | 12 ++--
 .../makeOffer/CreateCollectionOfferButton.vue | 66 +++++++++++++++++++
 components/trade/makeOffer/MakeOfferModal.vue |  5 +-
 .../trade/makeOffer/MakeOfferSingleItem.vue   |  6 +-
 components/trade/types.ts                     |  4 +-
 composables/useTradeActionClick.ts            |  4 +-
 i18n/locales/en.json                          |  2 +
 .../collectionByIdMinimalWithRoyalty.graphql  |  7 ++
 .../highestOfferByCollectionId.graphql        |  8 +++
 10 files changed, 111 insertions(+), 13 deletions(-)
 create mode 100644 components/trade/makeOffer/CreateCollectionOfferButton.vue
 create mode 100644 queries/subsquid/general/highestOfferByCollectionId.graphql

diff --git a/components/collection/CollectionTrades.vue b/components/collection/CollectionTrades.vue
index 1c4b0b9605..107efcba06 100644
--- a/components/collection/CollectionTrades.vue
+++ b/components/collection/CollectionTrades.vue
@@ -14,7 +14,14 @@
         :type="tradeType"
       >
         <template #action>
-          <CreateCollectionSwapButton v-if="isTradeSwap(tradeType)" />
+          <CreateCollectionSwapButton
+            v-if="isTradeSwap(tradeType) && collectionId"
+            :collection-id="collectionId"
+          />
+          <CreateCollectionOfferButton
+            v-if="isTradeOffer(tradeType) && collectionId"
+            :collection-id="collectionId"
+          />
         </template>
       </TradeActivityTable>
     </div>
@@ -26,6 +33,7 @@ import { type TradeTableQuery } from '@/components/trade/TradeActivityTable.vue'
 import type { TradeType } from '@/components/trade/types'
 import { isTradeSwap } from '@/composables/useTradeType'
 import CreateCollectionSwapButton from '@/components/swap/CreateCollectionSwapButton.vue'
+import CreateCollectionOfferButton from '@/components/trade/makeOffer/CreateCollectionOfferButton.vue'
 
 defineProps<{
   tradeType: TradeType
diff --git a/components/swap/CreateCollectionSwapButton.vue b/components/swap/CreateCollectionSwapButton.vue
index 5de0c554a7..6a1ba93b75 100644
--- a/components/swap/CreateCollectionSwapButton.vue
+++ b/components/swap/CreateCollectionSwapButton.vue
@@ -12,19 +12,19 @@
 import { NeoButton } from '@kodadot1/brick'
 import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
 
-const route = useRoute()
+const props = defineProps<{
+  collectionId: string
+}>()
+
 const { $i18n } = useNuxtApp()
 
-const collectionId = computed(() => route.params.id.toString())
+const collectionId = computed(() => props.collectionId)
 const swapStore = useAtomicSwapStore()
-const { isCurrentAccount } = useAuth()
-
-const isCollectionOwner = computed(() => isCurrentAccount(collection.value.currentOwner))
 
 const { collection } = useCollectionMinimal({
   collectionId: collectionId,
 })
-const { onTradeActionClick } = useTradeActionClick(isCollectionOwner)
+const { onTradeActionClick } = useTradeActionClick()
 
 const onCreateCollectionSwapClick = () => {
   onTradeActionClick(() => {
diff --git a/components/trade/makeOffer/CreateCollectionOfferButton.vue b/components/trade/makeOffer/CreateCollectionOfferButton.vue
new file mode 100644
index 0000000000..98ddff2e55
--- /dev/null
+++ b/components/trade/makeOffer/CreateCollectionOfferButton.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <NeoButton
+      variant="secondary"
+      @click="onCreateCollectionOfferClick"
+    >
+      {{ $t('offer.createCollectionOffer') }}
+    </NeoButton>
+    <TradeMakeOfferModal />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NeoButton } from '@kodadot1/brick'
+import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
+import { useMakingOfferStore } from '@/stores/makeOffer'
+import type { MakingOfferItem } from '@/components/trade/types'
+
+const { $i18n } = useNuxtApp()
+
+const props = defineProps<{
+  collectionId: string
+}>()
+const preferencesStore = usePreferencesStore()
+const collectionId = computed(() => props.collectionId)
+const makeOfferStore = useMakingOfferStore()
+
+const { data: collectionOfferData } = useGraphql({
+  queryName: 'highestOfferByCollectionId',
+  variables: {
+    id: collectionId.value,
+  },
+})
+
+const { collection } = useCollectionMinimal({
+  collectionId: collectionId,
+})
+
+const { onTradeActionClick } = useTradeActionClick()
+const { urlPrefix } = usePrefix()
+const highestOfferPrice = computed(() => (collectionOfferData.value as unknown as { offers: NFTOffer[] })?.offers[0]?.price)
+
+const openOfferModal = () => {
+  makeOfferStore.clear()
+  const item = {
+    id: null,
+    name: $i18n.t('offer.anyNftFromCollection'),
+    highestOffer: highestOfferPrice.value,
+    urlPrefix: urlPrefix.value,
+    collection: collection.value,
+    metadata: collection.value?.metadata,
+    meta: {
+      image: collection.value?.meta?.image,
+    },
+    sn: null,
+    currentOwner: collection.value?.currentOwner,
+  }
+  makeOfferStore.setItem(item as MakingOfferItem)
+
+  preferencesStore.setMakeOfferModalOpen(true)
+}
+
+const onCreateCollectionOfferClick = () => {
+  onTradeActionClick(openOfferModal)
+}
+</script>
diff --git a/components/trade/makeOffer/MakeOfferModal.vue b/components/trade/makeOffer/MakeOfferModal.vue
index c89d2c5a6a..0a27abecbd 100644
--- a/components/trade/makeOffer/MakeOfferModal.vue
+++ b/components/trade/makeOffer/MakeOfferModal.vue
@@ -26,7 +26,10 @@
         <div class="px-6 max-h-[50vh] overflow-y-auto">
           <ModalIdentityItem />
 
-          <MakeOfferSingleItem v-if="offerStore.items.length === 1" />
+          <MakeOfferSingleItem
+            v-if="offerStore.items.length === 1"
+            :show-price="Boolean(offerStore.items[0]?.price)"
+          />
         </div>
 
         <div class="border-t pt-5 pb-4 px-6">
diff --git a/components/trade/makeOffer/MakeOfferSingleItem.vue b/components/trade/makeOffer/MakeOfferSingleItem.vue
index 09c642c301..d7f6bf1151 100644
--- a/components/trade/makeOffer/MakeOfferSingleItem.vue
+++ b/components/trade/makeOffer/MakeOfferSingleItem.vue
@@ -2,7 +2,10 @@
   <div class="py-5">
     <CartItemDetails :nft="item">
       <template #right>
-        <div class="flex items-end">
+        <div
+          v-if="showPrice"
+          class="flex items-end"
+        >
           {{ itemPrice }}
         </div>
       </template>
@@ -61,6 +64,7 @@ const emit = defineEmits([
 
 const props = defineProps<{
   offerPrice?: number
+  showPrice?: boolean
 }>()
 
 const offerPrice = useVModel(props, 'offerPrice')
diff --git a/components/trade/types.ts b/components/trade/types.ts
index 1dc3658c69..467cfe3aea 100644
--- a/components/trade/types.ts
+++ b/components/trade/types.ts
@@ -11,13 +11,13 @@ export type MakingOfferItem = {
   highestOffer?: string
   offerPrice?: string
   offerExpiration?: number
-  id: string
+  id: string | null
   name: string
   currentOwner: string
   collection: EntityWithId & CollectionFloorPrice
   meta?: NFTMetadata
   metadata: string
-  sn: string
+  sn: string | null
 }
 
 export enum TradeStatus {
diff --git a/composables/useTradeActionClick.ts b/composables/useTradeActionClick.ts
index b84bc9be63..4242acad34 100644
--- a/composables/useTradeActionClick.ts
+++ b/composables/useTradeActionClick.ts
@@ -1,7 +1,7 @@
 import { useIdentityStore } from '@/stores/identity'
 import { doAfterCheckCurrentChainVM } from '@/components/common/ConnectWallet/openReconnectWalletModal'
 
-export default function (isOwner: ComputedRef<boolean>) {
+export default function (disabled?: ComputedRef<boolean>) {
   const identityStore = useIdentityStore()
   const { doAfterLogin } = useDoAfterlogin()
 
@@ -9,7 +9,7 @@ export default function (isOwner: ComputedRef<boolean>) {
 
   const onTradeActionClick = (cb: () => void) => {
     const fn = () => {
-      if (!isOwner.value) {
+      if (!disabled || !disabled.value) {
         cb()
       }
     }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 4fc99a2d2c..c79cedabe0 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1522,9 +1522,11 @@
     "notifications": "Notifications"
   },
   "offer": {
+    "anyNftFromCollection": "Any NFT",
     "bestOffer": "Best Offer",
     "cancelOffer": "Cancel Offer",
     "collectionFloorPrice": "Collection Floor",
+    "createCollectionOffer": "Create Collection Offer",
     "emptyInput": "Please enter your offer",
     "expiration": "Offer Expiration",
     "floorDifference": "Floor Difference",
diff --git a/queries/subsquid/general/collectionByIdMinimalWithRoyalty.graphql b/queries/subsquid/general/collectionByIdMinimalWithRoyalty.graphql
index 20cb384607..d0aed4649b 100644
--- a/queries/subsquid/general/collectionByIdMinimalWithRoyalty.graphql
+++ b/queries/subsquid/general/collectionByIdMinimalWithRoyalty.graphql
@@ -19,5 +19,12 @@ query collectionByIdMinimalWithRoyalty($id: String!) {
     name
     currentOwner
     createdAt
+    floorPrice: nfts(
+      where: { burned_eq: false, price_not_eq: "0" }
+      orderBy: price_ASC
+      limit: 1
+    ) {
+      price
+    }
   }
 }
diff --git a/queries/subsquid/general/highestOfferByCollectionId.graphql b/queries/subsquid/general/highestOfferByCollectionId.graphql
new file mode 100644
index 0000000000..5e66a57662
--- /dev/null
+++ b/queries/subsquid/general/highestOfferByCollectionId.graphql
@@ -0,0 +1,8 @@
+query highestOfferByCollectionId($id: String!) {
+  offers(where: {status_eq: ACTIVE, desired: {collectionId_eq: $id}}, orderBy: price_DESC, limit: 1) {
+    expiration
+    status
+    price
+    id
+  }
+}
\ No newline at end of file

From aa621ec31af122dd2d6adce86316aaae29a28110 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Tue, 18 Feb 2025 15:25:35 +0100
Subject: [PATCH 4/5] chore: types

---
 components/collection/CollectionTrades.vue               | 9 ++++++---
 .../trade/makeOffer/CreateCollectionOfferButton.vue      | 4 ++--
 composables/useTradeActionClick.ts                       | 2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/collection/CollectionTrades.vue b/components/collection/CollectionTrades.vue
index 107efcba06..821a7af9c7 100644
--- a/components/collection/CollectionTrades.vue
+++ b/components/collection/CollectionTrades.vue
@@ -13,13 +13,16 @@
         :query="tradeQuery"
         :type="tradeType"
       >
-        <template #action>
+        <template
+          v-if="collectionId"
+          #action
+        >
           <CreateCollectionSwapButton
-            v-if="isTradeSwap(tradeType) && collectionId"
+            v-if="isTradeSwap(tradeType)"
             :collection-id="collectionId"
           />
           <CreateCollectionOfferButton
-            v-if="isTradeOffer(tradeType) && collectionId"
+            v-else-if="isTradeOffer(tradeType)"
             :collection-id="collectionId"
           />
         </template>
diff --git a/components/trade/makeOffer/CreateCollectionOfferButton.vue b/components/trade/makeOffer/CreateCollectionOfferButton.vue
index 98ddff2e55..3e72c570e0 100644
--- a/components/trade/makeOffer/CreateCollectionOfferButton.vue
+++ b/components/trade/makeOffer/CreateCollectionOfferButton.vue
@@ -25,7 +25,7 @@ const preferencesStore = usePreferencesStore()
 const collectionId = computed(() => props.collectionId)
 const makeOfferStore = useMakingOfferStore()
 
-const { data: collectionOfferData } = useGraphql({
+const { data: collectionOfferData } = useGraphql<{ offers: NFTOffer[] }>({
   queryName: 'highestOfferByCollectionId',
   variables: {
     id: collectionId.value,
@@ -38,7 +38,7 @@ const { collection } = useCollectionMinimal({
 
 const { onTradeActionClick } = useTradeActionClick()
 const { urlPrefix } = usePrefix()
-const highestOfferPrice = computed(() => (collectionOfferData.value as unknown as { offers: NFTOffer[] })?.offers[0]?.price)
+const highestOfferPrice = computed(() => (collectionOfferData.value)?.offers[0]?.price)
 
 const openOfferModal = () => {
   makeOfferStore.clear()
diff --git a/composables/useTradeActionClick.ts b/composables/useTradeActionClick.ts
index 4242acad34..f2d0a4ef2b 100644
--- a/composables/useTradeActionClick.ts
+++ b/composables/useTradeActionClick.ts
@@ -9,7 +9,7 @@ export default function (disabled?: ComputedRef<boolean>) {
 
   const onTradeActionClick = (cb: () => void) => {
     const fn = () => {
-      if (!disabled || !disabled.value) {
+      if (!disabled?.value) {
         cb()
       }
     }

From 563986477dc4c15ee3cdde2a28bb5fd48a3f5827 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Wed, 19 Feb 2025 09:43:28 +0100
Subject: [PATCH 5/5] fix: removable

---
 components/swap/PreviewItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/swap/PreviewItem.vue b/components/swap/PreviewItem.vue
index ccb0ce5814..a0a690c53b 100644
--- a/components/swap/PreviewItem.vue
+++ b/components/swap/PreviewItem.vue
@@ -22,7 +22,7 @@
     </div>
 
     <NeoButton
-      v-if="!hideRemove"
+      v-if="removable"
       size="small"
       variant="icon"
       icon="xmark"