Merge pull request #11410 from kodadot/issue-11331-0

feat: Create Collection Atomic Swap

Author: Jarsen136

components/collection/CollectionTrades.vue

@@ -12,14 +12,31 @@
         :key="key"
         :query="tradeQuery"
         :type="tradeType"
-      />
+      >
+        <template
+          v-if="collectionId"
+          #action
+        >
+          <CreateCollectionSwapButton
+            v-if="isTradeSwap(tradeType)"
+            :collection-id="collectionId"
+          />
+          <CreateCollectionOfferButton
+            v-else-if="isTradeOffer(tradeType)"
+            :collection-id="collectionId"
+          />
+        </template>
+      </TradeActivityTable>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 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

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']"

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)
 }

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'

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

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

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
   }>(),

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 props = defineProps<{
+  collectionId: string
+}>()
+
+const { $i18n } = useNuxtApp()
+
+const collectionId = computed(() => props.collectionId)
+const swapStore = useAtomicSwapStore()
+
+const { collection } = useCollectionMinimal({
+  collectionId: collectionId,
+})
+const { onTradeActionClick } = useTradeActionClick()
+
+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>

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"
+            :removable="!(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,20 +145,40 @@ 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()
 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

components/swap/PreviewItem.vue

@@ -22,6 +22,7 @@
     </div>
 
     <NeoButton
+      v-if="removable"
       size="small"
       variant="icon"
       icon="xmark"
@@ -35,9 +36,15 @@ import { NeoButton } from '@kodadot1/brick'
 
 const emit = defineEmits(['remove'])
 
-defineProps<{
-  name?: string
-  image: string
-  imageClass?: string
-}>()
+withDefaults(
+  defineProps<{
+    name?: string
+    image: string
+    imageClass?: string
+    removable?: boolean
+  }>(),
+  {
+    removable: true,
+  },
+)
 </script>

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>