✨ swap page landing

components/collection/utils/types.ts

@@ -18,4 +18,5 @@ export type CollectionEntityMinimal = {
   name: string
   currentOwner: string
   type: string
+  ownerCount?: number
 }

components/common/ChainDropdown.vue

@@ -4,9 +4,10 @@
       <template #trigger="{ active }">
         <NeoButton
           class="chain-dropdown-text"
+          :variant
           :label="
             isMobile || !showNetworkLabel
-              ? selected?.text
+              ? label || selected?.text
               : `Network: ${selected?.text}`
           "
           :icon="active ? 'chevron-up' : 'chevron-down'"
@@ -27,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoDropdown, NeoDropdownItem } from '@kodadot1/brick'
+import { NeoButton, NeoDropdown, NeoDropdownItem, type NeoButtonVariant } from '@kodadot1/brick'
 import { type Prefix } from '@kodadot1/static'
 
 const props = withDefaults(
@@ -36,6 +37,8 @@ const props = withDefaults(
     position?: 'bottom-auto'
     redirect?: boolean
     exclude: Prefix[]
+    variant?: NeoButtonVariant
+    label?: string
   }>(),
   {
     showNetworkLabel: true,

components/common/listingCart/shared/ListingCartPriceInput.vue

@@ -6,12 +6,13 @@
     >
       <input
         v-model="model"
+        :disabled="disabled"
         type="number"
         step="0.01"
         min="0.001"
         pattern="[0-9]+([\.,][0-9]+)?"
         class="indent-2.5 border-none outline-none w-20 bg-background-color text-text-color"
-        :placeholder="$t('price')"
+        :placeholder="placeholder || $t('price')"
       >
       <div class="px-3 flex items-center">
         {{ chainSymbol }}
@@ -35,6 +36,8 @@ const props = defineProps<{
   modelValue?: number | string
   check?: boolean
   fullWidth?: boolean
+  disabled?: boolean
+  placeholder?: string
 }>()
 const emit = defineEmits(['confirm', 'update:modelValue'])
 

components/items/ItemsGrid/ItemsGridImage.vue

@@ -13,7 +13,9 @@
     :class="{
       'in-cart-border':
         shoppingCartStore.isItemInCart(nft.id)
-        || listingCartStore.isItemInCart(nft.id),
+        || listingCartStore.isItemInCart(nft.id)
+        || isAtomicSwapItemSelected
+      ,
     }"
     :show-action-on-hover="!showActionSection"
     :link="NuxtLink"
@@ -26,7 +28,7 @@
       #action
     >
       <div
-        v-if="!isOwner && Number(nft?.price)"
+        v-if="!isOwner && Number(nft?.price) && !showAtomicSwapAction"
         class="flex"
       >
         <NeoButton
@@ -56,15 +58,15 @@
         </NeoButton>
       </div>
       <div
-        v-else-if="isOwner && !hideListing"
+        v-else-if="showSelect"
         class="flex"
       >
         <NeoButton
-          :label="listLabel"
+          :label="selectLabel"
           data-testid="item-buy"
           no-shadow
           class="flex-grow"
-          @click.prevent="onClickListingCart"
+          @click.prevent="onSelect"
         />
       </div>
     </template>
@@ -80,6 +82,7 @@
 // PLEASE FIX bind-key href => to
 import { resolveComponent } from 'vue'
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import useAtomicSwapAction from './useAtomicSwapAction'
 import type { NftCardVariant } from '@/components/shared/nftCard/types'
 import type { NFTWithMetadata } from '@/composables/useNft'
 import { useShoppingCartStore } from '@/stores/shoppingCart'
@@ -111,6 +114,12 @@ const props = defineProps<{
   skeletonVariant: string
 }>()
 
+const {
+  onAtomicSwapSelect,
+  showAtomicSwapAction,
+  isItemSelected: isAtomicSwapItemSelected,
+} = useAtomicSwapAction(props.nft)
+
 const showActionSection = computed(() => {
   return !isLogIn.value && shoppingCartStore.getItemToBuy?.id === props.nft.id
 })
@@ -125,8 +134,6 @@ const buyLabel = computed(function () {
   )
 })
 
-const listLabel = computed(() => listingCartStore.isItemInCart(props.nft.id) ? $i18n.t('remove') : $i18n.t('select'))
-
 const isOwner = computed(() => isCurrentOwner(props.nft?.currentOwner))
 
 const openCompletePurcahseModal = () => {
@@ -155,8 +162,31 @@ const onClickShoppingCart = () => {
     shoppingCartStore.setItem(nftToShoppingCartItem(props.nft))
   }
 }
-const onClickListingCart = () => {
-  listNftByNftWithMetadata(props.nft, { toggle: true })
+
+const onClickListingCart = () => listNftByNftWithMetadata(props.nft, { toggle: true })
+
+// select
+
+const selectLabel = computed(() => {
+  const selected = showAtomicSwapAction.value ? isAtomicSwapItemSelected.value : listingCartStore.isItemInCart(props.nft.id)
+  return selected ? $i18n.t('remove') : $i18n.t('select')
+})
+
+const showSelect = computed(() => {
+  if (showAtomicSwapAction.value) {
+    return true
+  }
+
+  return isOwner.value && !props.hideListing
+})
+
+const onSelect = () => {
+  if (showAtomicSwapAction.value) {
+    onAtomicSwapSelect()
+  }
+  else {
+    onClickListingCart()
+  }
 }
 </script>
 

components/items/ItemsGrid/useAtomicSwapAction.ts

@@ -0,0 +1,45 @@
+import type { NFTWithMetadata } from '@/composables/useNft'
+
+export const ATOMIC_SWAP_PAGES = [
+  'prefix-swap-id',
+  'prefix-swap-id-offer',
+  'prefix-swap-id-review',
+]
+
+export default (nft: NFTWithMetadata) => {
+  const route = useRoute()
+  const atomicSwapStore = useAtomicSwapsStore()
+  const { step, stepItems } = storeToRefs(atomicSwapStore)
+
+  const routeName = computed(() => route.name?.toString() as string)
+
+  const showAtomicSwapAction = computed(() => ATOMIC_SWAP_PAGES.includes(routeName.value))
+
+  const isItemSelected = computed(() => {
+    return step.value === SwapStep.REVIEW ? false : stepItems.value?.some(item => item.id === nft.id)
+  })
+
+  const onAtomicSwapSelect = () => {
+    if (isItemSelected.value) {
+      atomicSwapStore.removeStepItem(nft.id)
+    }
+    else {
+      atomicSwapStore.updateStepItems([
+        ...stepItems.value,
+        {
+          id: nft.id,
+          collectionId: nft.collection.id,
+          sn: nft.sn,
+          name: nft.name,
+          meta: nft.meta,
+        },
+      ])
+    }
+  }
+
+  return {
+    onAtomicSwapSelect,
+    showAtomicSwapAction,
+    isItemSelected,
+  }
+}

components/items/ItemsGrid/useItemsGrid.ts

@@ -4,6 +4,7 @@ import {
   useItemsGridQueryParams,
   useSearchParams,
 } from './utils/useSearchParams'
+import { ATOMIC_SWAP_PAGES } from './useAtomicSwapAction'
 import resolveQueryPath from '@/utils/queryPathResolver'
 import { getDenyList } from '@/utils/prefix'
 import type { NFTWithMetadata, TokenEntity } from '@/composables/useNft'
@@ -25,6 +26,7 @@ const EXCLUDED_TOKEN_USE_PAGES = [
   'prefix-collection-id',
   'prefix-drops-id',
   'prefix-u-id',
+  ...ATOMIC_SWAP_PAGES,
 ]
 
 export function useFetchSearch({

components/items/ItemsGrid/useNftActions.ts

@@ -1,5 +1,4 @@
 import nftById from '@/queries/subsquid/general/nftById.graphql'
-import listCount from '@/queries/subsquid/general/countOfTokenNftsToList.graphql'
 import nftListWithSearch from '@/queries/subsquid/ahk/nftListWithSearch.graphql'
 import type { TokenId } from '@/types'
 
@@ -130,19 +129,15 @@ export const getTokensNfts = async (
 }
 
 export const checkIfAnythingToList = async (entities: TokenEntity[]) => {
-  const { client, urlPrefix } = usePrefix()
   const { accountId } = useAuth()
-  const { data } = await useAsyncQuery<{ count: { totalCount: number } }>({
-    query: listCount,
-    variables: {
-      token: entities.map(({ id }) => id),
-      owner: accountId.value,
-      denyList: getDenyList(urlPrefix.value),
-    },
-    clientId: client.value,
+
+  const count = await getNftCount({
+    token: { id_in: entities.map(n => n.id) },
+    currentOwner_eq: accountId.value,
+    price_eq: 0,
   })
 
-  return data.value.count.totalCount > 0
+  return count > 0
 }
 
 export function useNftActions(entity: TokenEntity) {

components/offer/OfferExpirationSelector.vue

@@ -3,7 +3,7 @@
     v-model="selected"
     aria-role="list"
     :triggers="['click']"
-    position="bottom-left"
+    :position="position"
     append-to-body
     close-menu-on-move
     class="w-full"
@@ -54,9 +54,14 @@ const options = EXPIRATION_DAYS_LIST.map(value => ({
 
 const selectedItem = computed(() => options.find(option => option.value === selected.value))
 
-const props = defineProps<{
-  modelValue?: number
-}>()
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number
+    position?: string
+  }>(), {
+    position: 'bottom-left',
+  },
+)
 
 const emit = defineEmits(['update:modelValue'])