revert back to unstacked nft cards

components/items/ItemsGrid/ItemsGridImage.vue

@@ -19,7 +19,7 @@
  :media-player-cover="mediaPlayerCover"
  media-hover-on-cover-play>
  <template #action>
- <div v-if="!isOwner && isAvailbleToBuy" class="is-flex">
+ <div v-if="!isOwner && Number(nft?.price)" class="is-flex">
  <NeoButton
  :label="buyLabel"
  data-testid="item-buy"
@@ -63,7 +63,6 @@ import {
 } from '@/components/common/shoppingCart/utils'
 import { isOwner as checkOwner } from '@/utils/account'
 import { useCollectionDetails } from '@/components/collection/utils/useCollectionDetails'
-import { ItemsGridEntity, NFTStack } from './useItemsGrid'
 import useNftMetadata, { useNftCardIcon } from '@/composables/useNft'
 
 const { urlPrefix } = usePrefix()
@@ -76,7 +75,7 @@ const preferencesStore = usePreferencesStore()
 const { $i18n } = useNuxtApp()
 
 const props = defineProps<{
- nft: ItemsGridEntity
+ nft: NFTWithMetadata
  variant?: NftCardVariant
 }>()
 
@@ -85,11 +84,6 @@ const { showCardIcon, cardIcon } = useNftCardIcon(computed(() => props.nft))
 const { stats } = useCollectionDetails({
  collectionId: props.nft?.collection?.id || props.nft?.collectionId,
 })
-const isStack = computed(() => (props.nft as NFTStack).count > 1)
-
-const variant = computed(() =>
- isStack.value ? `stacked-${props.variant}` : props.variant
-)
 
 const { nft: nftMetadata } = useNftMetadata(props.nft)
 
@@ -109,27 +103,10 @@ const buyLabel = computed(function () {
  )
 })
 
-const nftStack = computed(() =>
- isStack.value ? (props.nft as NFTStack).nfts : [props.nft]
-)
-
-const isAvailbleToBuy = computed(() =>
- nftStack.value.some((nft) => Number(nft.price) > 0)
-)
-const anyAvailableForListing = computed(() =>
- nftStack.value.some((nft) => !Number(nft.price))
-)
-
-const nftForShoppingCart = computed(() => {
- return nftStack.value
- .toSorted((a, b) => Number(a.price) - Number(b.price))
- .find((nft) => Number(nft.price) > 0) as NFTWithMetadata
-})
-
 const listLabel = computed(() => {
- const label = anyAvailableForListing.value
- ? $i18n.t('listingCart.listForSale')
- : $i18n.t('transaction.price.change')
+ const label = Number(props.nft.price)
+ ? $i18n.t('transaction.price.change')
+ : $i18n.t('listingCart.listForSale')
  return label + (listingCartStore.isItemInCart(props.nft.id) ? ' ✓' : '')
 })
 
@@ -153,38 +130,32 @@ const onCancelPurchase = () => {
 }
 
 const onClickBuy = () => {
- if (isAvailbleToBuy.value) {
- shoppingCartStore.setItemToBuy(
- nftToShoppingCardItem(nftForShoppingCart.value)
- )
- doAfterLogin({
- onLoginSuccess: openCompletePurcahseModal,
- onCancel: onCancelPurchase,
- })
- }
+ shoppingCartStore.setItemToBuy(nftToShoppingCardItem(props.nft))
+ doAfterLogin({
+ onLoginSuccess: openCompletePurcahseModal,
+ onCancel: onCancelPurchase,
+ })
 }
 
 const onClickShoppingCart = () => {
- if (shoppingCartStore.isItemInCart(nftForShoppingCart.value.id)) {
- shoppingCartStore.removeItem(nftForShoppingCart.value.id)
+ if (shoppingCartStore.isItemInCart(props.nft.id)) {
+ shoppingCartStore.removeItem(props.nft.id)
  } else {
- shoppingCartStore.setItem(nftToShoppingCardItem(nftForShoppingCart.value))
+ shoppingCartStore.setItem(nftToShoppingCardItem(props.nft))
  }
 }
 
 const onClickListingCart = () => {
- nftStack.value.forEach((nft) => {
- if (listingCartStore.isItemInCart(nft.id)) {
- listingCartStore.removeItem(nft.id)
- } else {
- listingCartStore.setItem(
- nftToListingCartItem(
- nft,
- String(stats.value.collectionFloorPrice ?? '')
- )
+ if (listingCartStore.isItemInCart(props.nft.id)) {
+ listingCartStore.removeItem(props.nft.id)
+ } else {
+ listingCartStore.setItem(
+ nftToListingCartItem(
+ props.nft,
+ String(stats.value.collectionFloorPrice ?? '')
  )
- }
- })
+ )
+ }
 }
 </script>
 

components/items/ItemsGrid/useItemsGrid.ts

@@ -32,11 +32,10 @@ export function useFetchSearch({
 }) {
  const { $apollo } = useNuxtApp()
  const { client, urlPrefix } = usePrefix()
- const { isAssetHub } = useIsChain(urlPrefix)
 
  const route = useRoute()
 
- const nfts = ref<ItemsGridEntity[]>([])
+ const nfts = ref<NFTWithMetadata[]>([])
  const loadedPages = ref([] as number[])
 
  const { searchParams } = useSearchParams()
@@ -68,9 +67,6 @@ export function useFetchSearch({
  return prefix
  }
  }
- const notCollectionPage = computed(
- () => route.name !== 'prefix-collection-id'
- )
 
  const variables = search?.length
  ? { search }
@@ -80,12 +76,7 @@ export function useFetchSearch({
  priceMax: Number(route.query.max),
  }
 
- const queryPathBase = getQueryPath(client.value)
- const usingTokenEntities = computed(
- () => notCollectionPage.value && isAssetHub.value
- )
-
- const queryPath = usingTokenEntities.value ? 'chain-ahk' : queryPathBase
+ const queryPath = getQueryPath(client.value)
 
  const query = await resolveQueryPath(queryPath, 'nftListWithSearch')
  const result = await $apollo.query({
@@ -101,38 +92,17 @@ export function useFetchSearch({
  : ['blockNumber_DESC'],
  },
  })
- const extractBaseName = (input: string): string => {
- const regex = / #\d+$/
- return input.replace(regex, '')
- }
-
- const handleToken = (token: any) => {
- return {
- ...token.nfts[0],
- name: extractBaseName(token.nfts[0].name),
- count: token.nfts.length,
- floorPrice: Math.min(
- ...token.nfts.map((nft) => Number(nft.price))
- ).toString(),
- nfts: token.nfts,
- }
- }
 
  // handle results
- const nftEntities = usingTokenEntities.value
- ? result.data.tokenEntities.map(handleToken)
- : result.data.nFTEntities
- const nftEntitiesConnection = usingTokenEntities.value
- ? result.data.tokenEntitiesConnection
- : result.data.nftEntitiesConnection
+ const { nFTEntities, nftEntitiesConnection } = result.data
 
  total.value = nftEntitiesConnection.totalCount
 
  if (!loadedPages.value.includes(page)) {
  if (loadDirection === 'up') {
- nfts.value = nftEntities.concat(nfts.value)
+ nfts.value = nFTEntities.concat(nfts.value)
  } else {
- nfts.value = nfts.value.concat(nftEntities)
+ nfts.value = nfts.value.concat(nFTEntities)
  }
  loadedPages.value.push(page)
  }
@@ -221,6 +191,10 @@ export const updatePotentialNftsForListingCart = async (nfts: NFT[]) => {
  )
  .map((nft) => {
  const collectionId = nft.collection?.id ?? nft.collectionId ?? ''
+ console.log(
+ 'collection floor price',
+ statsById[collectionId]?.collectionFloorPrice
+ )
  return nftToListingCartItem(
  nft,
  String(statsById[collectionId]?.collectionFloorPrice ?? '')

composables/useNft.ts

@@ -24,12 +24,6 @@ export type ItemResources = {
  resources?: NftResources[]
 }
 
-export type Stack = {
- count: number
- floorPrice: string
- nfts: NFTWithMetadata[]
-}
-
 export type NFTWithMetadata = NFT &
  NFTMetadata & { meta: BaseNFTMeta } & ItemResources
 

libs/ui/src/components/NeoNftCard/NeoNftCard.vue

@@ -106,8 +106,9 @@ const props = withDefaults(
  }
 )
 
-const isStacked = computed(() =>
- props.variant ? props.variant.includes('stacked') : false
+const isStacked = computed(
+ () => false
+ // props.variant ? props.variant.includes('stacked') : false
 )
 
 const isMinimal = computed(() =>