feat: delete collection nfts with auto-teleport

components/collection/HeroButtonDeleteNfts.vue

@@ -1,86 +1,55 @@
 <template>
-  <SigningModal
-    :title="$t('moreActions.deletingNfts')"
-    :is-loading="isLoading"
-    :status="status"
-    @try-again="deleteNfts"
-  />
-
-  <NeoDropdownItem @click="deleteNfts()">
+  <NeoDropdownItem
+    :disabled="!canDelete"
+    @click="deleteNfts"
+  >
     {{ $i18n.t('moreActions.deleteNfts') }}
   </NeoDropdownItem>
 </template>
 
 <script setup lang="ts">
 import { NeoDropdownItem } from '@kodadot1/brick'
-import { Interaction } from '@/utils/shoppingActions'
+import type { NFTWithMetadata } from '@/composables/useNft'
+import nftEntitiesByIDs from '@/queries/subsquid/general/nftEntitiesByIDs.graphql'
 
-type NftIds = {
-  nfts?: {
-    id: string
-  }[]
-}
+const props = defineProps<{
+  collection: any
+}>()
 
-const route = useRoute()
 const { $i18n } = useNuxtApp()
-const { urlPrefix } = usePrefix()
+const { client } = usePrefix()
 const { accountId } = useAuth()
 
-const {
-  transaction,
-  status,
-  isLoading: isTransactionLoading,
-  blockNumber,
-} = useTransaction()
+const { listNftByNftWithMetadata } = useListingCartModal()
+const preferencesStore = usePreferencesStore()
 
-const id = route.params.id.toString()
-const isLoading = ref(false)
-const unsubscribeSubscription = ref(() => {})
+const collectionId = computed(() => props.collection.id)
 
-const { data } = useGraphql({
+const { data } = useGraphql<{ nfts?: { id: string }[] }>({
   queryName: 'nftIdListByCollection',
   variables: {
-    id: id,
+    id: collectionId.value,
     search: [{ currentOwner_eq: accountId.value }],
   },
 })
 
-const deleteNfts = async () => {
-  const nfts = (data.value as NftIds).nfts
-  const ids = nfts?.map(nft => nft.id)
+const nftIds = computed(() => data.value?.nfts?.map(nft => nft.id) || [])
 
-  if (ids?.length) {
-    isLoading.value = true
+const { result: nfts } = useQuery<{ nftEntities: NFTWithMetadata[] }>(
+  nftEntitiesByIDs,
+  computed(() => ({
+    ids: nftIds.value,
+  })),
+  computed(() => ({
+    clientId: client.value,
+  })),
+)
 
-    await transaction({
-      interaction: Interaction.CONSUME,
-      nftIds: ids,
-      urlPrefix: urlPrefix.value,
-    })
+const canDelete = computed(() => Boolean(nfts.value?.nftEntities?.length))
 
-    unsubscribeSubscription.value()
-    unsubscribeSubscription.value = useSubscriptionGraphql({
-      query: `
-      nftEntities(where: {collection: {id_eq: "${id}"}, burned_eq: false}) {
-        id
-        name
-      }
-    `,
-      onChange: ({ data }) => {
-        if (
-          data.nftEntities.length === 0
-          || status.value === TransactionStatus.Finalized
-        ) {
-          isLoading.value = false
-        }
-      },
-    })
-  }
-}
+const deleteNfts = async () => {
+  nfts.value?.nftEntities?.forEach(nft => listNftByNftWithMetadata(nft))
 
-watch([isTransactionLoading, blockNumber], ([loading, block]) => {
-  if (!loading && !block) {
-    isLoading.value = false
-  }
-})
+  preferencesStore.setOpenedUserCartModal('burn', { silent: true })
+}
 </script>

components/collection/HeroButtons.vue

@@ -95,13 +95,9 @@
           <!-- related: #5792 -->
           <div v-if="isOwner && !hasOperationsDisabled(urlPrefix)">
             <CollectionHeroButtonAddNfts />
-            <CollectionHeroButtonDeleteNfts />
-            <CollectionHeroButtonDeleteCollection
-              :collection="collection"
-            />
-            <CollectionHeroButtonEditCollection
-              :collection="collection"
-            />
+            <CollectionHeroButtonDeleteNfts :collection="collection" />
+            <CollectionHeroButtonDeleteCollection :collection="collection" />
+            <CollectionHeroButtonEditCollection :collection="collection" />
           </div>
           <CollectionHeroButtonRefreshMetadata v-if="isOwner" />
           <NeoDropdownItem disabled>

components/common/listingCart/ListingCartMini.vue

@@ -1,7 +1,7 @@
 <template>
   <transition name="slide">
     <div
-      v-if="listingCartStore.count"
+      v-if="listingCartStore.count && !preferencesStore.getIsUserCartSilentMode"
       class="fixed right-24 bottom-9 z-[998]"
     >
       <div class="inline-flex items-center">

components/common/userCart/UserCartModal.vue

@@ -80,9 +80,10 @@ const loadingAbi = computed(() => (isEvm.value ? !abi.value : false))
 const loading = computed(() => (props.loading || loadingAbi.value))
 
 const onClose = () => {
-  preferencesStore.userCartModal = undefined
+  preferencesStore.setClosedUserCartModal()
   onModalAnimation(() => {
     listingCartStore.clearListedItems()
+    preferencesStore.userCartModal = undefined
     emit('reset')
   })
 }

components/items/ItemsGrid/ItemsGridImage.vue

@@ -10,7 +10,7 @@
     :show-timestamp="showTimestamp"
     :hide-collection-popover="hideCollectionPopover"
     :lazy-loading="lazyLoading"
-    :class="{ 'in-cart-border': shoppingCartStore.isItemInCart(nft.id) || isSelectActionItemInCart }"
+    :class="{ 'in-cart-border': !preferencesStore.getIsUserCartSilentMode && (shoppingCartStore.isItemInCart(nft.id) || isSelectActionItemInCart) }"
     :show-action-on-hover="!showActionSection"
     :link="NuxtLink"
     bind-key="to"

components/items/ItemsGrid/ItemsGridImageTokenEntity.vue

@@ -10,8 +10,9 @@
     :hide-media-info="hideMediaInfo"
     :class="{
       'in-cart-border':
-        shoppingCartStore.isItemInCart(nftForShoppingCart.id)
-        || listingCartStore.isItemInCart(entity.id),
+        !preferencesStore.getIsUserCartSilentMode
+        && (shoppingCartStore.isItemInCart(nftForShoppingCart.id)
+          || listingCartStore.isItemInCart(entity.id)),
     }"
     :show-action-on-hover="!showActionSection"
     :link="NuxtLink"

i18n/locales/en.json

@@ -1468,7 +1468,6 @@
     "addNfts": "Add NFTs",
     "deleteCollection": "Delete Collection",
     "deleteNfts": "Delete NFTs",
-    "deletingNfts": "Deleting NFTs",
     "download": "Download",
     "editCollection": "Edit Collection",
     "refereshCollectionMetdata": "Refresh Metadata",

stores/preferences.ts

@@ -48,7 +48,7 @@ interface State {
   mobileFilterCollapseOpen: boolean
   shoppingCartCollapseOpen: boolean
   listingCartModalOpen: boolean
-  userCartModal: { open: boolean, mode: UserCartMode } | undefined
+  userCartModal: { open: boolean, mode: UserCartMode, silent?: boolean } | undefined
   makeOfferModalOpen: boolean
   completePurchaseModal: CompletePurchaseModalState
   triggerBuySuccess: boolean
@@ -141,6 +141,7 @@ export const usePreferencesStore = defineStore('preferences', {
     getIsPartyMode(): boolean {
       return this.getHasUserNotSetPartyMode ? true : this.partyMode!
     },
+    getIsUserCartSilentMode: state => Boolean(state.userCartModal?.silent),
   },
   actions: {
     setSidebarFilterCollapse(payload) {
@@ -238,8 +239,13 @@ export const usePreferencesStore = defineStore('preferences', {
     setNewsletterSubscription(subscription: NewsletterSubscription) {
       this.newsletterSubscription = subscription
     },
-    setOpenedUserCartModal(mode: UserCartMode) {
-      this.userCartModal = { mode, open: true }
+    setOpenedUserCartModal(mode: UserCartMode, { silent = false } = {}) {
+      this.userCartModal = { mode, open: true, silent }
+    },
+    setClosedUserCartModal() {
+      if (this.userCartModal) {
+        this.userCartModal = { mode: this.userCartModal.mode, open: false, silent: this.userCartModal.silent }
+      }
     },
     setTriggerOfferSuccess(payload: boolean) {
       this.triggerOfferSuccess = payload