From e1c2281a3d1d7ecb8622e3bd3c3eced8854ae8a6 Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Tue, 3 Dec 2024 07:06:46 +0500
Subject: [PATCH 01/17] ref: init `UserCartModal` component

---
 components/common/ItemTransferModal.vue       | 121 +++++++++++++++
 .../UserCartModal.vue}                        | 146 ++++--------------
 .../UserCartMultipleItems.vue}                |   0
 .../UserCartSingleItem.vue}                   |   0
 .../GalleryItemMoreActionBtn.vue              |   1 -
 5 files changed, 149 insertions(+), 119 deletions(-)
 create mode 100644 components/common/ItemTransferModal.vue
 rename components/common/{itemTransfer/ItemTransferModal.vue => userCart/UserCartModal.vue} (60%)
 rename components/common/{itemTransfer/ItemTransferMultipleItems.vue => userCart/UserCartMultipleItems.vue} (100%)
 rename components/common/{itemTransfer/ItemTransferSingleItem.vue => userCart/UserCartSingleItem.vue} (100%)

diff --git a/components/common/ItemTransferModal.vue b/components/common/ItemTransferModal.vue
new file mode 100644
index 0000000000..58e80d34ff
--- /dev/null
+++ b/components/common/ItemTransferModal.vue
@@ -0,0 +1,121 @@
+<template>
+  <UserCartModal
+    ref="userCartModal"
+    v-model="isModalActive"
+    :get-action="getAction"
+    :label="transferItemLabel"
+    :disabled
+    :loading
+    @reset="reset"
+  >
+    <template #body>
+      <hr class="my-4">
+
+      <h2 class="mb-2 font-bold text-text-color capitalize">
+        {{ $t('transaction.transferTo') }}
+      </h2>
+
+      <AddressInput
+        v-model="address"
+        :is-invalid="isYourAddress"
+        label=""
+        class="flex-1"
+        placeholder="Enter wallet address"
+        with-address-check
+        @check="handleAddressCheck"
+      />
+    </template>
+
+    <template #footer>
+      <div class="mt-3 flex justify-between text-k-grey">
+        <NeoIcon
+          icon="circle-info"
+          size="small"
+          class="mr-4"
+        />
+
+        <p class="text-xs">
+          {{ $t('transaction.wrongAddressCannotRecoveredWarning') }}
+        </p>
+      </div>
+    </template>
+  </UserCartModal>
+</template>
+
+<script setup lang="ts">
+import { NeoIcon } from '@kodadot1/brick'
+import { Interaction } from '@kodadot1/minimark/v1'
+import { toSubstrateAddress } from '@/services/profile'
+import AddressInput from '@/components/shared/AddressInput.vue'
+import type { ActionSend } from '@/composables/transaction/types'
+
+const preferencesStore = usePreferencesStore()
+
+const { $i18n } = useNuxtApp()
+const { urlPrefix } = usePrefix()
+const { accountId } = useAuth()
+
+const userCartModal = ref()
+const address = ref('')
+const isAddressValid = ref(false)
+
+const isModalActive = computed(() => preferencesStore.itemTransferCartModalOpen)
+const items = computed(() => userCartModal.value?.items || [] as ListCartItem[])
+const nft = computed(() => items.value[0])
+const abi = useCollectionAbi(computed(() => nft.value?.collection.id))
+
+const transferItemLabel = computed(() => {
+  if (!address.value) {
+    return $i18n.t('transaction.inputAddressFirst')
+  }
+  if (!isAddressValid.value) {
+    return $i18n.t('transaction.addressIncorrect')
+  }
+  if (isYourAddress.value) {
+    return $i18n.t('transaction.selfTransfer')
+  }
+  return $i18n.t('transaction.transferNft')
+})
+
+const isYourAddress = computed(() => accountId.value === getChainAddress(address.value))
+const loading = computed(() => (isEvm(urlPrefix.value) ? !abi.value : false))
+
+const disabled = computed(
+  () =>
+    !address.value
+    || !isAddressValid.value
+    || isYourAddress.value,
+)
+
+const getAction = (): ActionSend => ({
+  interaction: Interaction.SEND,
+  urlPrefix: urlPrefix.value,
+  address: address.value,
+  abi: abi.value,
+  nfts: items.value.map(item => ({
+    id: item.id,
+    sn: item.sn,
+    collectionId: item.collection.id,
+  })),
+  successMessage: $i18n.t('transaction.item.success') as string,
+  errorMessage: $i18n.t('transaction.item.error') as string,
+})
+
+const reset = () => {
+  address.value = ''
+  isAddressValid.value = false
+}
+
+const handleAddressCheck = (isValid: boolean) => {
+  isAddressValid.value = isValid
+}
+
+const getChainAddress = (value: string) => {
+  try {
+    return toSubstrateAddress(value)
+  }
+  catch (error) {
+    return null
+  }
+}
+</script>
diff --git a/components/common/itemTransfer/ItemTransferModal.vue b/components/common/userCart/UserCartModal.vue
similarity index 60%
rename from components/common/itemTransfer/ItemTransferModal.vue
rename to components/common/userCart/UserCartModal.vue
index ff3fdbad16..2617d0e047 100644
--- a/components/common/itemTransfer/ItemTransferModal.vue
+++ b/components/common/userCart/UserCartModal.vue
@@ -6,7 +6,7 @@
       :is-loading="isLoading"
       :status="status"
       close-at-signed
-      @try-again="itemTransfer"
+      @try-again="exectTransaction"
     />
 
     <NeoModal
@@ -26,33 +26,19 @@
           <ModalIdentityItem />
 
           <div>
-            <ItemTransferSingleItem
+            <UserCartSingleItem
               v-if="items.length === 1"
               class="!mt-4"
               :item="nft"
             />
-            <ItemTransferMultipleItems
+            <UserCartMultipleItems
               v-else
               class="!mt-8"
               :items="items"
             />
           </div>
 
-          <hr class="my-4">
-
-          <h2 class="mb-2 font-bold text-text-color capitalize">
-            {{ $t('transaction.transferTo') }}
-          </h2>
-
-          <AddressInput
-            v-model="address"
-            :is-invalid="isYourAddress"
-            label=""
-            class="flex-1"
-            placeholder="Enter wallet address"
-            with-address-check
-            @check="handleAddressCheck"
-          />
+          <slot name="body" />
         </div>
 
         <div class="pt-12 flex flex-col">
@@ -68,7 +54,7 @@
             :fees="{ forceActionAutoFees: true }"
             :actions="actions"
             :disabled="isDisabled"
-            :label="transferItemLabel"
+            :label="label"
             variant="primary"
             no-shadow
             with-shortcut
@@ -78,17 +64,7 @@
             @confirm="handleTransfer"
           />
 
-          <div class="mt-3 flex justify-between text-k-grey">
-            <NeoIcon
-              icon="circle-info"
-              size="small"
-              class="mr-4"
-            />
-
-            <p class="text-xs">
-              {{ $t('transaction.wrongAddressCannotRecoveredWarning') }}
-            </p>
-          </div>
+          <slot name="footer" />
         </div>
       </ModalBody>
     </NeoModal>
@@ -96,53 +72,41 @@
 </template>
 
 <script setup lang="ts">
-import { NeoIcon, NeoModal } from '@kodadot1/brick'
-import { Interaction } from '@kodadot1/minimark/v1'
+import { NeoModal } from '@kodadot1/brick'
 import ModalBody from '@/components/shared/modals/ModalBody.vue'
-import { toSubstrateAddress } from '@/services/profile'
 import ModalIdentityItem from '@/components/shared/ModalIdentityItem.vue'
-import AddressInput from '@/components/shared/AddressInput.vue'
 import type { Actions } from '@/composables/transaction/types'
 import { hasOperationsDisabled } from '@/utils/prefix'
 import useAutoTeleportActionButton from '@/composables/autoTeleport/useAutoTeleportActionButton'
 import type { AutoTeleportAction } from '@/composables/autoTeleport/types'
 import type { AutoTeleportActionButtonConfirmEvent } from '@/components/common/autoTeleport/AutoTeleportActionButton.vue'
 
+const emit = defineEmits(['reset'])
+const props = defineProps<{
+  getAction: () => Actions
+  label: string
+  disabled?: boolean
+  loading?: boolean
+}>()
+
+const isModalActive = defineModel({ type: Boolean, required: true })
+
 const preferencesStore = usePreferencesStore()
 const listingCartStore = useListingCartStore()
+
+const items = ref<ListCartItem[]>([])
+
 const { $i18n } = useNuxtApp()
 const { transaction, status, isLoading, isError, blockNumber, clear: clearTransaction, txHash } = useTransaction()
 const { notification, lastSessionId, updateSession } = useLoadingNotfication()
 const { getTransactionUrl } = useExplorer()
 const { urlPrefix } = usePrefix()
-const { accountId } = useAuth()
-
-const address = ref('')
-const isAddressValid = ref(false)
-const items = ref<ListCartItem[]>([])
-
-const nft = computed(() => items.value[0])
-
-const abi = useCollectionAbi(computed(() => nft.value?.collection.id))
-
-const getAction = (): Actions => ({
-  interaction: Interaction.SEND,
-  urlPrefix: urlPrefix.value,
-  address: address.value,
-  abi: abi.value,
-  nfts: items.value.map(item => ({
-    id: item.id,
-    sn: item.sn,
-    collectionId: item.collection.id,
-  })),
-  successMessage: $i18n.t('transaction.item.success') as string,
-  errorMessage: $i18n.t('transaction.item.error') as string,
-})
 
 const { action, autoTeleport, autoTeleportButton, autoTeleportLoaded, formattedTxFees } = useAutoTeleportActionButton({
-  getActionFn: getAction,
+  getActionFn: props.getAction,
 })
 
+const nft = computed(() => items.value[0])
 const actions = computed<AutoTeleportAction[]>(() => isModalActive.value
   ? [
       {
@@ -158,48 +122,14 @@ const actions = computed<AutoTeleportAction[]>(() => isModalActive.value
     ]
   : [])
 
-const isModalActive = computed(() => preferencesStore.itemTransferCartModalOpen)
-
-const transferItemLabel = computed(() => {
-  if (!address.value) {
-    return $i18n.t('transaction.inputAddressFirst')
-  }
-  if (!isAddressValid.value) {
-    return $i18n.t('transaction.addressIncorrect')
-  }
-  if (isYourAddress.value) {
-    return $i18n.t('transaction.selfTransfer')
-  }
-  return $i18n.t('transaction.transferNft')
-})
-
-const isYourAddress = computed(
-  () => accountId.value === getChainAddress(address.value),
-)
-
-const loading = computed(() => (
-  !autoTeleportLoaded.value
-  || (isEvm(urlPrefix.value) ? !abi.value : false)
-))
-
-const isDisabled = computed(
-  () =>
-    hasOperationsDisabled(urlPrefix.value)
-    || !address.value
-    || !isAddressValid.value
-    || isYourAddress.value,
-)
-
-const reset = () => {
-  address.value = ''
-  isAddressValid.value = false
-}
+const loading = computed(() => (!autoTeleportLoaded.value || props.loading))
+const isDisabled = computed(() => hasOperationsDisabled(urlPrefix.value) || props.disabled)
 
 const closeModal = () => {
   preferencesStore.itemTransferCartModalOpen = false
   onModalAnimation(() => {
     listingCartStore.clearListedItems()
-    reset()
+    emit('reset')
   })
 }
 
@@ -207,28 +137,6 @@ const onClose = () => {
   closeModal()
 }
 
-const handleAddressCheck = (isValid: boolean) => {
-  isAddressValid.value = isValid
-}
-
-const getChainAddress = (value: string) => {
-  try {
-    return toSubstrateAddress(value)
-  }
-  catch (error) {
-    return null
-  }
-}
-
-const itemTransfer = async () => {
-  try {
-    await transaction(action.value)
-  }
-  catch (error) {
-    warningMessage(error)
-  }
-}
-
 const handleTransfer = async ({ autoteleport }: AutoTeleportActionButtonConfirmEvent) => {
   try {
     clearTransaction()
@@ -236,7 +144,7 @@ const handleTransfer = async ({ autoteleport }: AutoTeleportActionButtonConfirmE
     autoTeleport.value = autoteleport
 
     if (!autoteleport) {
-      await itemTransfer()
+      await transaction(action.value)
     }
 
     closeModal()
@@ -281,4 +189,6 @@ useModalIsOpenTracker({
 })
 
 onBeforeMount(closeModal)
+
+defineExpose({ items })
 </script>
diff --git a/components/common/itemTransfer/ItemTransferMultipleItems.vue b/components/common/userCart/UserCartMultipleItems.vue
similarity index 100%
rename from components/common/itemTransfer/ItemTransferMultipleItems.vue
rename to components/common/userCart/UserCartMultipleItems.vue
diff --git a/components/common/itemTransfer/ItemTransferSingleItem.vue b/components/common/userCart/UserCartSingleItem.vue
similarity index 100%
rename from components/common/itemTransfer/ItemTransferSingleItem.vue
rename to components/common/userCart/UserCartSingleItem.vue
diff --git a/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue b/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
index 99f39ddb53..e4ef4dc958 100644
--- a/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
+++ b/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
@@ -73,7 +73,6 @@ import { sanitizeIpfsUrl, toOriginalContentUrl } from '@/utils/ipfs'
 import { isMobileDevice } from '@/utils/extension'
 import { hasOperationsDisabled } from '@/utils/prefix'
 import { refreshOdaTokenMetadata } from '@/services/oda'
-import ItemTransferModal from '@/components/common/itemTransfer/ItemTransferModal.vue'
 import type { NFT } from '@/types'
 import type { Abi } from '@/composables/transaction/types'
 

From 2004e2a814f25320b62f68fb8abe05cd466d868f Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Tue, 3 Dec 2024 19:41:40 +0500
Subject: [PATCH 02/17] fix(UserCartModal.vue): missing `exectTransaction`
 function

---
 components/common/userCart/UserCartModal.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/common/userCart/UserCartModal.vue b/components/common/userCart/UserCartModal.vue
index 2617d0e047..8cf029e42c 100644
--- a/components/common/userCart/UserCartModal.vue
+++ b/components/common/userCart/UserCartModal.vue
@@ -6,7 +6,7 @@
       :is-loading="isLoading"
       :status="status"
       close-at-signed
-      @try-again="exectTransaction"
+      @try-again="execTransaction"
     />
 
     <NeoModal
@@ -137,6 +137,15 @@ const onClose = () => {
   closeModal()
 }
 
+const execTransaction = async () => {
+  try {
+    await transaction(action.value)
+  }
+  catch (error) {
+    warningMessage(error)
+  }
+}
+
 const handleTransfer = async ({ autoteleport }: AutoTeleportActionButtonConfirmEvent) => {
   try {
     clearTransaction()
@@ -144,7 +153,7 @@ const handleTransfer = async ({ autoteleport }: AutoTeleportActionButtonConfirmE
     autoTeleport.value = autoteleport
 
     if (!autoteleport) {
-      await transaction(action.value)
+      await execTransaction()
     }
 
     closeModal()

From 894f666b9e8fc458443d3e0fbaa5f1127956ba58 Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Tue, 3 Dec 2024 19:42:20 +0500
Subject: [PATCH 03/17] fix(ItemTransferModal.vue): `isYourAddress` invalid not
 working

---
 components/common/ItemTransferModal.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/components/common/ItemTransferModal.vue b/components/common/ItemTransferModal.vue
index 58e80d34ff..57d779e279 100644
--- a/components/common/ItemTransferModal.vue
+++ b/components/common/ItemTransferModal.vue
@@ -22,7 +22,7 @@
         class="flex-1"
         placeholder="Enter wallet address"
         with-address-check
-        @check="handleAddressCheck"
+        @check="isValid => isAddressValid = isValid"
       />
     </template>
 
@@ -77,7 +77,7 @@ const transferItemLabel = computed(() => {
   return $i18n.t('transaction.transferNft')
 })
 
-const isYourAddress = computed(() => accountId.value === getChainAddress(address.value))
+const isYourAddress = computed(() => getChainAddress(accountId.value) === getChainAddress(address.value))
 const loading = computed(() => (isEvm(urlPrefix.value) ? !abi.value : false))
 
 const disabled = computed(
@@ -106,10 +106,6 @@ const reset = () => {
   isAddressValid.value = false
 }
 
-const handleAddressCheck = (isValid: boolean) => {
-  isAddressValid.value = isValid
-}
-
 const getChainAddress = (value: string) => {
   try {
     return toSubstrateAddress(value)

From d902547d58b4c19f45a4a7aabcd838f5fa2bc4fd Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Tue, 3 Dec 2024 19:53:18 +0500
Subject: [PATCH 04/17] ref(UserCartModal.vue): `submit` function

---
 components/common/userCart/UserCartModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/common/userCart/UserCartModal.vue b/components/common/userCart/UserCartModal.vue
index 8cf029e42c..ba46a0b30d 100644
--- a/components/common/userCart/UserCartModal.vue
+++ b/components/common/userCart/UserCartModal.vue
@@ -61,7 +61,7 @@
             early-success
             auto-close-modal
             :auto-close-modal-delay-modal="0"
-            @confirm="handleTransfer"
+            @confirm="submit"
           />
 
           <slot name="footer" />
@@ -146,7 +146,7 @@ const execTransaction = async () => {
   }
 }
 
-const handleTransfer = async ({ autoteleport }: AutoTeleportActionButtonConfirmEvent) => {
+const submit = async ({ autoteleport }: AutoTeleportActionButtonConfirmEvent) => {
   try {
     clearTransaction()
 

From f8790a46ba7c23f52bb5b786c1d9fed7eed4f630 Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Tue, 3 Dec 2024 20:02:16 +0500
Subject: [PATCH 05/17] ref(UserCartModal.vue): add `title` and `signingTitle`
 props

---
 components/common/ItemTransferModal.vue      | 6 ++++--
 components/common/userCart/UserCartModal.vue | 8 +++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/common/ItemTransferModal.vue b/components/common/ItemTransferModal.vue
index 57d779e279..062145a404 100644
--- a/components/common/ItemTransferModal.vue
+++ b/components/common/ItemTransferModal.vue
@@ -2,8 +2,10 @@
   <UserCartModal
     ref="userCartModal"
     v-model="isModalActive"
+    :title="$t('transaction.transferNft', items.length)"
+    :signing-title="$t('transaction.transferingNft', items.length)"
     :get-action="getAction"
-    :label="transferItemLabel"
+    :label="label"
     :disabled
     :loading
     @reset="reset"
@@ -64,7 +66,7 @@ const items = computed(() => userCartModal.value?.items || [] as ListCartItem[])
 const nft = computed(() => items.value[0])
 const abi = useCollectionAbi(computed(() => nft.value?.collection.id))
 
-const transferItemLabel = computed(() => {
+const label = computed(() => {
   if (!address.value) {
     return $i18n.t('transaction.inputAddressFirst')
   }
diff --git a/components/common/userCart/UserCartModal.vue b/components/common/userCart/UserCartModal.vue
index ba46a0b30d..164ab99c31 100644
--- a/components/common/userCart/UserCartModal.vue
+++ b/components/common/userCart/UserCartModal.vue
@@ -2,7 +2,7 @@
   <div>
     <SigningModal
       v-if="!autoTeleport"
-      :title="$t('transaction.transferingNft', items.length)"
+      :title="signingTitle"
       :is-loading="isLoading"
       :status="status"
       close-at-signed
@@ -16,7 +16,7 @@
     >
       <ModalBody
         modal-max-height="100vh"
-        :title="$t('transaction.transferNft', items.length)"
+        :title="title"
         content-class="!py-4 !px-8"
         :scrollable="false"
         :loading="loading"
@@ -87,6 +87,8 @@ const props = defineProps<{
   label: string
   disabled?: boolean
   loading?: boolean
+  title: string
+  signingTitle: string
 }>()
 
 const isModalActive = defineModel({ type: Boolean, required: true })
@@ -172,7 +174,7 @@ useTransactionNotification({
   init: () => {
     return notification(({ isSessionState, notify, session }) => {
       return notify({
-        title: ref($i18n.t('transaction.transferingNft', items.value.length)),
+        title: ref(props.signingTitle),
         state: computed(() => session?.value.state as LoadingNotificationState),
         action: computed<NotificationAction | undefined>(() => {
           return isSessionState('succeeded')

From c5d5839e5812f88f3a7e0d2a0fe9c008a9c8abe8 Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Tue, 3 Dec 2024 20:19:19 +0500
Subject: [PATCH 06/17] ref(UserCartModal.vue): add `mode` prop`

---
 components/common/ItemTransferModal.vue        |  5 +----
 .../common/listingCart/ListingCartMini.vue     | 18 +++++++++++++++++-
 components/common/userCart/UserCartModal.vue   |  6 +++---
 stores/preferences.ts                          |  6 ++++--
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/components/common/ItemTransferModal.vue b/components/common/ItemTransferModal.vue
index 062145a404..0e03e5c4f1 100644
--- a/components/common/ItemTransferModal.vue
+++ b/components/common/ItemTransferModal.vue
@@ -1,7 +1,7 @@
 <template>
   <UserCartModal
     ref="userCartModal"
-    v-model="isModalActive"
+    mode="transfer"
     :title="$t('transaction.transferNft', items.length)"
     :signing-title="$t('transaction.transferingNft', items.length)"
     :get-action="getAction"
@@ -51,8 +51,6 @@ import { toSubstrateAddress } from '@/services/profile'
 import AddressInput from '@/components/shared/AddressInput.vue'
 import type { ActionSend } from '@/composables/transaction/types'
 
-const preferencesStore = usePreferencesStore()
-
 const { $i18n } = useNuxtApp()
 const { urlPrefix } = usePrefix()
 const { accountId } = useAuth()
@@ -61,7 +59,6 @@ const userCartModal = ref()
 const address = ref('')
 const isAddressValid = ref(false)
 
-const isModalActive = computed(() => preferencesStore.itemTransferCartModalOpen)
 const items = computed(() => userCartModal.value?.items || [] as ListCartItem[])
 const nft = computed(() => items.value[0])
 const abi = useCollectionAbi(computed(() => nft.value?.collection.id))
diff --git a/components/common/listingCart/ListingCartMini.vue b/components/common/listingCart/ListingCartMini.vue
index 4b72e249b1..b830f71918 100644
--- a/components/common/listingCart/ListingCartMini.vue
+++ b/components/common/listingCart/ListingCartMini.vue
@@ -35,6 +35,22 @@
           </div>
 
           <div class="flex gap-4">
+            <NeoTooltip
+              class="cursor-pointer"
+              position="top"
+              :active="isItemTransferDisabled"
+              :label="$t('toast.unsupportedOperation')"
+            >
+              <NeoButton
+                variant="outlined-rounded"
+                icon="fire-flame-simple"
+                :disabled="isItemTransferDisabled"
+                @click="preferencesStore.userCartModal = undefined"
+              >
+                {{ $t('burn') }}
+              </NeoButton>
+            </NeoTooltip>
+
             <NeoTooltip
               class="cursor-pointer"
               position="top"
@@ -45,7 +61,7 @@
                 variant="outlined-rounded"
                 icon="paper-plane-top"
                 :disabled="isItemTransferDisabled"
-                @click="preferencesStore.itemTransferCartModalOpen = true"
+                @click="preferencesStore.userCartModal = { open: true, mode: 'transfer' }"
               >
                 {{ $t('transfer') }}
               </NeoButton>
diff --git a/components/common/userCart/UserCartModal.vue b/components/common/userCart/UserCartModal.vue
index 164ab99c31..fc44515a5a 100644
--- a/components/common/userCart/UserCartModal.vue
+++ b/components/common/userCart/UserCartModal.vue
@@ -84,6 +84,7 @@ import type { AutoTeleportActionButtonConfirmEvent } from '@/components/common/a
 const emit = defineEmits(['reset'])
 const props = defineProps<{
   getAction: () => Actions
+  mode: UserCartMode
   label: string
   disabled?: boolean
   loading?: boolean
@@ -91,8 +92,6 @@ const props = defineProps<{
   signingTitle: string
 }>()
 
-const isModalActive = defineModel({ type: Boolean, required: true })
-
 const preferencesStore = usePreferencesStore()
 const listingCartStore = useListingCartStore()
 
@@ -108,6 +107,7 @@ const { action, autoTeleport, autoTeleportButton, autoTeleportLoaded, formattedT
   getActionFn: props.getAction,
 })
 
+const isModalActive = computed(() => preferencesStore.userCartModal?.open && preferencesStore.userCartModal.mode === props.mode)
 const nft = computed(() => items.value[0])
 const actions = computed<AutoTeleportAction[]>(() => isModalActive.value
   ? [
@@ -128,7 +128,7 @@ const loading = computed(() => (!autoTeleportLoaded.value || props.loading))
 const isDisabled = computed(() => hasOperationsDisabled(urlPrefix.value) || props.disabled)
 
 const closeModal = () => {
-  preferencesStore.itemTransferCartModalOpen = false
+  preferencesStore.userCartModal = undefined
   onModalAnimation(() => {
     listingCartStore.clearListedItems()
     emit('reset')
diff --git a/stores/preferences.ts b/stores/preferences.ts
index 364f66b4c9..80bbfe0464 100644
--- a/stores/preferences.ts
+++ b/stores/preferences.ts
@@ -41,12 +41,14 @@ type NewsletterSubscription = {
   email?: string
 }
 
+export type UserCartMode = 'transfer'
+
 interface State {
   sidebarFilterCollapseOpen: boolean
   mobileFilterCollapseOpen: boolean
   shoppingCartCollapseOpen: boolean
   listingCartModalOpen: boolean
-  itemTransferCartModalOpen: boolean
+  userCartModal: { open: boolean, mode: UserCartMode } | undefined
   makeOfferModalOpen: boolean
   completePurchaseModal: CompletePurchaseModalState
   triggerBuySuccess: boolean
@@ -81,7 +83,7 @@ export const usePreferencesStore = defineStore('preferences', {
     sidebarFilterCollapseOpen: true,
     mobileFilterCollapseOpen: false,
     listingCartModalOpen: false,
-    itemTransferCartModalOpen: false,
+    userCartModal: undefined,
     makeOfferModalOpen: false,
     shoppingCartCollapseOpen: false,
     completePurchaseModal: {

From 1d91b2b9e35872edb1811cc890b6865eac89f216 Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Wed, 4 Dec 2024 08:02:07 +0500
Subject: [PATCH 07/17] =?UTF-8?q?add:=20=F0=9F=94=A5=20mass=20burn=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/common/ItemBurnModal.vue           | 29 +++++++++++++++++++
 .../common/listingCart/ListingCartMini.vue    | 24 ++++++---------
 components/common/userCart/UserCartModal.vue  |  4 +--
 components/common/userCart/UserCartModals.vue |  4 +++
 layouts/explore-layout.vue                    |  2 +-
 locales/en.json                               |  3 +-
 stores/preferences.ts                         |  2 +-
 utils/config/permission.config.ts             |  6 ++--
 8 files changed, 52 insertions(+), 22 deletions(-)
 create mode 100644 components/common/ItemBurnModal.vue
 create mode 100644 components/common/userCart/UserCartModals.vue

diff --git a/components/common/ItemBurnModal.vue b/components/common/ItemBurnModal.vue
new file mode 100644
index 0000000000..1715086aae
--- /dev/null
+++ b/components/common/ItemBurnModal.vue
@@ -0,0 +1,29 @@
+<template>
+  <UserCartModal
+    ref="userCartModal"
+    mode="burn"
+    :title="$t('transaction.burnNft', items.length)"
+    :signing-title="$t('mint.nft.burning', items.length)"
+    :get-action="getAction"
+    :label="$t('transaction.burnNft', items.length)"
+  />
+</template>
+
+<script setup lang="ts">
+import { type ActionBurnMultipleNFTs, NFTs } from '@/composables/transaction/types'
+
+const { $i18n } = useNuxtApp()
+const { urlPrefix } = usePrefix()
+
+const userCartModal = ref()
+
+const items = computed(() => userCartModal.value?.items || [] as ListCartItem[])
+
+const getAction = (): ActionBurnMultipleNFTs => ({
+  interaction: NFTs.BURN_MULTIPLE,
+  nftIds: items.value.map(item => item.id),
+  urlPrefix: urlPrefix.value,
+  successMessage: $i18n.t('transaction.item.success') as string,
+  errorMessage: $i18n.t('transaction.item.error') as string,
+})
+</script>
diff --git a/components/common/listingCart/ListingCartMini.vue b/components/common/listingCart/ListingCartMini.vue
index b830f71918..0391218fca 100644
--- a/components/common/listingCart/ListingCartMini.vue
+++ b/components/common/listingCart/ListingCartMini.vue
@@ -35,21 +35,14 @@
           </div>
 
           <div class="flex gap-4">
-            <NeoTooltip
-              class="cursor-pointer"
-              position="top"
-              :active="isItemTransferDisabled"
-              :label="$t('toast.unsupportedOperation')"
+            <NeoButton
+              v-if="isBurnAvailable"
+              variant="outlined-rounded"
+              icon="fire-flame-simple"
+              @click="preferencesStore.userCartModal = { open: true, mode: 'burn' }"
             >
-              <NeoButton
-                variant="outlined-rounded"
-                icon="fire-flame-simple"
-                :disabled="isItemTransferDisabled"
-                @click="preferencesStore.userCartModal = undefined"
-              >
-                {{ $t('burn') }}
-              </NeoButton>
-            </NeoTooltip>
+              {{ $t('burn') }}
+            </NeoButton>
 
             <NeoTooltip
               class="cursor-pointer"
@@ -92,12 +85,13 @@
 import { NeoButton, NeoTooltip } from '@kodadot1/brick'
 import { useListingCartStore } from '@/stores/listingCart'
 import { usePreferencesStore } from '@/stores/preferences'
-import { listVisible } from '@/utils/config/permission.config'
+import { listVisible, burnVisible } from '@/utils/config/permission.config'
 
 const listingCartStore = useListingCartStore()
 const preferencesStore = usePreferencesStore()
 const { urlPrefix } = usePrefix()
 
+const isBurnAvailable = computed(() => burnVisible(urlPrefix.value))
 const isItemTransferDisabled = computed(() => isSub(urlPrefix.value) ? false : listingCartStore.count > 1)
 const isListingDisabled = computed(() => !listVisible(urlPrefix.value))
 
diff --git a/components/common/userCart/UserCartModal.vue b/components/common/userCart/UserCartModal.vue
index fc44515a5a..e4c3ac59de 100644
--- a/components/common/userCart/UserCartModal.vue
+++ b/components/common/userCart/UserCartModal.vue
@@ -17,7 +17,7 @@
       <ModalBody
         modal-max-height="100vh"
         :title="title"
-        content-class="!py-4 !px-8"
+        content-class="!pt-4 !pb-5 !px-8"
         :scrollable="false"
         :loading="loading"
         @close="onClose"
@@ -107,7 +107,7 @@ const { action, autoTeleport, autoTeleportButton, autoTeleportLoaded, formattedT
   getActionFn: props.getAction,
 })
 
-const isModalActive = computed(() => preferencesStore.userCartModal?.open && preferencesStore.userCartModal.mode === props.mode)
+const isModalActive = computed(() => Boolean(preferencesStore.userCartModal?.open && preferencesStore.userCartModal?.mode === props.mode))
 const nft = computed(() => items.value[0])
 const actions = computed<AutoTeleportAction[]>(() => isModalActive.value
   ? [
diff --git a/components/common/userCart/UserCartModals.vue b/components/common/userCart/UserCartModals.vue
new file mode 100644
index 0000000000..36bd076844
--- /dev/null
+++ b/components/common/userCart/UserCartModals.vue
@@ -0,0 +1,4 @@
+<template>
+  <ItemTransferModal />
+  <ItemBurnModal />
+</template>
diff --git a/layouts/explore-layout.vue b/layouts/explore-layout.vue
index 7c0bb8a664..bdd9838d24 100644
--- a/layouts/explore-layout.vue
+++ b/layouts/explore-layout.vue
@@ -32,7 +32,7 @@
     <template v-if="listingCartEnabled">
       <ListingCartMini />
       <ListingCartModal />
-      <ItemTransferModal />
+      <UserCartModals />
     </template>
 
     <Loader
diff --git a/locales/en.json b/locales/en.json
index e0df34b649..8bc9b0a6aa 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1289,7 +1289,7 @@
         "label": "Your Awesome Art",
         "message": "This can be image, video, audio, 3D model"
       },
-      "burning": "Burning NFT",
+      "burning": "Burning NFT | Burning NFTs",
       "collection": {
         "label": "Select Collection",
         "message": "Choose a collection to which you want to mint your NFT."
@@ -1946,6 +1946,7 @@
   },
   "transaction": {
     "addressIncorrect": "Address Incorrect",
+    "burnNft": "Burn NFT | Burn NFTs",
     "buy": { "error": "Failed to buy this item" },
     "consume": { "error": "Failed to burn item", "success": "Item burned" },
     "inputAddressFirst": "Input address first",
diff --git a/stores/preferences.ts b/stores/preferences.ts
index 80bbfe0464..35afe63754 100644
--- a/stores/preferences.ts
+++ b/stores/preferences.ts
@@ -41,7 +41,7 @@ type NewsletterSubscription = {
   email?: string
 }
 
-export type UserCartMode = 'transfer'
+export type UserCartMode = 'transfer' | 'burn'
 
 interface State {
   sidebarFilterCollapseOpen: boolean
diff --git a/utils/config/permission.config.ts b/utils/config/permission.config.ts
index fd048f4660..58085cd61e 100644
--- a/utils/config/permission.config.ts
+++ b/utils/config/permission.config.ts
@@ -3,7 +3,6 @@ import type { PartialConfig, Prefix } from './types'
 const hasCreate: PartialConfig = {
   dot: false,
   ksm: false,
-  rmrk: false,
 }
 
 const hasInsight: PartialConfig = {
@@ -24,7 +23,6 @@ const hasMassmintCreate: PartialConfig = {
 
 const hasExplorer: PartialConfig = {
   dot: false,
-  rmrk: false,
   ksm: false,
 }
 
@@ -71,3 +69,7 @@ export const dropsVisible = (prefix: Prefix | string) => {
 export const explorerVisible = (prefix: Prefix | string): boolean => {
   return hasExplorer[prefix] ?? true
 }
+
+export const burnVisible = (prefix: Prefix | string): boolean => {
+  return isSub(prefix as Prefix)
+}

From f46d5d654df4626107ec0403e64fc31f97438434 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Wed, 4 Dec 2024 13:55:30 +0100
Subject: [PATCH 08/17] feat: collection Edit - Limit Name and Image Update

---
 components/collection/EditModal.vue | 46 +++++++++++++++++++----------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/components/collection/EditModal.vue b/components/collection/EditModal.vue
index 62397f8d4a..da1591778b 100644
--- a/components/collection/EditModal.vue
+++ b/components/collection/EditModal.vue
@@ -17,11 +17,16 @@
           required
           :error="!name"
         >
-          <NeoInput
-            v-model="name"
-            required
-            :placeholder="$t('mint.collection.name.placeholder')"
-          />
+          <NonRecommendFieldNotification
+            :show="name && nameChanged"
+            @undo="name = props.collection.name"
+          >
+            <NeoInput
+              v-model="name"
+              required
+              :placeholder="$t('mint.collection.name.placeholder')"
+            />
+          </NonRecommendFieldNotification>
         </NeoField>
 
         <!-- collection description -->
@@ -36,11 +41,16 @@
           />
         </NeoField>
         <CollectionEditSection :title="$t('edit.collection.image.label')">
-          <FormLogoField
-            v-model:file="image"
-            v-model:url="imageUrl"
-            :title="$t('edit.collection.image.message')"
-          />
+          <NonRecommendFieldNotification
+            :show="hasImageChanged"
+            @undo="initLogoImage"
+          >
+            <FormLogoField
+              v-model:file="image"
+              v-model:url="imageUrl"
+              :title="$t('edit.collection.image.message')"
+            />
+          </NonRecommendFieldNotification>
         </CollectionEditSection>
 
         <CollectionEditSection :title="$t('edit.collection.banner.label')">
@@ -165,19 +175,26 @@ const unlimited = ref(true)
 const min = computed(() => props.min || 1)
 const max = ref<number | null>(null)
 
+const nameChanged = computed(() => props.collection.name !== name.value)
+const hasImageChanged = computed(() => (!imageUrl.value && Boolean(props.collection.image)) || Boolean(image.value))
+const originalLogoImageUrl = computed(() => sanitizeIpfsUrl(props.collection.image))
+
 const disabled = computed(() => {
   const hasImage = imageUrl.value
   const isNameFilled = Boolean(name.value)
 
-  const nameChanged = props.collection.name !== name.value
   const descriptionChanged = props.collection.description !== description.value
-  const hasImageChanged = (!imageUrl.value && Boolean(props.collection.image)) || Boolean(image.value)
   const hasBannerChanged = (!bannerUrl.value && Boolean(props.collection.banner)) || Boolean(banner.value)
   const hasMaxChanged = max.value !== props.collection.max
 
-  return !hasImage || !isNameFilled || (!nameChanged && !descriptionChanged && !hasImageChanged && !hasBannerChanged && !hasMaxChanged)
+  return !hasImage || !isNameFilled || (!nameChanged.value && !descriptionChanged && !hasImageChanged.value && !hasBannerChanged && !hasMaxChanged)
 })
 
+const initLogoImage = () => {
+  imageUrl.value = originalLogoImageUrl.value
+  image.value = undefined
+}
+
 const editCollection = async () => {
   emit('submit', {
     name: name.value,
@@ -193,10 +210,9 @@ watch(isModalActive, (value) => {
   if (value && props.collection) {
     name.value = props.collection.name
     description.value = props.collection.description
-    imageUrl.value = sanitizeIpfsUrl(props.collection.image)
     bannerUrl.value = props.collection.banner && sanitizeIpfsUrl(props.collection.banner)
-    image.value = undefined
     banner.value = undefined
+    initLogoImage()
     unlimited.value = !props.collection.max
     max.value = props.collection.max
   }

From aa99edf60fd572896cadd9c79caba7bc4c2a0c76 Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Wed, 4 Dec 2024 18:16:25 +0500
Subject: [PATCH 09/17] ref(transactions): remove `NFTs.BURN_MULTIPLE` action
 and added `ItemBurnModal` to layouts

---
 .../collection/HeroButtonDeleteNfts.vue       |   4 +-
 components/common/ItemBurnModal.vue           |  11 +-
 .../common/listingCart/ListingCartMini.vue    |   4 +-
 components/common/userCart/UserCartModals.vue |   8 +-
 .../GalleryItemMoreActionBtn.vue              |  39 +++--
 components/migrate/steps/SignLoader3.vue      |   6 +-
 composables/transaction/transactionBurn.ts    | 138 +++++-------------
 composables/transaction/types.ts              |  16 +-
 composables/transaction/utils.ts              |   5 +-
 composables/useIsChain.ts                     |   7 +-
 composables/useTransaction.ts                 |  12 +-
 pages/[prefix]/u/[id].vue                     |   2 +-
 stores/preferences.ts                         |   3 +
 utils/gallery/abstractCalls.ts                |  17 ++-
 14 files changed, 100 insertions(+), 172 deletions(-)

diff --git a/components/collection/HeroButtonDeleteNfts.vue b/components/collection/HeroButtonDeleteNfts.vue
index 6e891ac433..6f66c65c08 100644
--- a/components/collection/HeroButtonDeleteNfts.vue
+++ b/components/collection/HeroButtonDeleteNfts.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script setup lang="ts">
+import { Interaction } from '@kodadot1/minimark/v1'
 import { NeoDropdownItem } from '@kodadot1/brick'
-import { NFTs } from '@/composables/transaction/types'
 
 type NftIds = {
   nfts?: {
@@ -53,7 +53,7 @@ const deleteNfts = async () => {
     isLoading.value = true
 
     await transaction({
-      interaction: NFTs.BURN_MULTIPLE,
+      interaction: Interaction.CONSUME,
       nftIds: ids,
       urlPrefix: urlPrefix.value,
     })
diff --git a/components/common/ItemBurnModal.vue b/components/common/ItemBurnModal.vue
index 1715086aae..a7975209c5 100644
--- a/components/common/ItemBurnModal.vue
+++ b/components/common/ItemBurnModal.vue
@@ -10,17 +10,18 @@
 </template>
 
 <script setup lang="ts">
-import { type ActionBurnMultipleNFTs, NFTs } from '@/composables/transaction/types'
+import { Interaction } from '@kodadot1/minimark/v1'
+import { type ActionConsume } from '@/composables/transaction/types'
 
 const { $i18n } = useNuxtApp()
 const { urlPrefix } = usePrefix()
 
-const userCartModal = ref()
+const userCartModal = ref<{ items: ListCartItem[] }>()
 
-const items = computed(() => userCartModal.value?.items || [] as ListCartItem[])
+const items = computed(() => userCartModal.value?.items || [])
 
-const getAction = (): ActionBurnMultipleNFTs => ({
-  interaction: NFTs.BURN_MULTIPLE,
+const getAction = (): ActionConsume => ({
+  interaction: Interaction.CONSUME,
   nftIds: items.value.map(item => item.id),
   urlPrefix: urlPrefix.value,
   successMessage: $i18n.t('transaction.item.success') as string,
diff --git a/components/common/listingCart/ListingCartMini.vue b/components/common/listingCart/ListingCartMini.vue
index 0391218fca..a335e85d5d 100644
--- a/components/common/listingCart/ListingCartMini.vue
+++ b/components/common/listingCart/ListingCartMini.vue
@@ -39,7 +39,7 @@
               v-if="isBurnAvailable"
               variant="outlined-rounded"
               icon="fire-flame-simple"
-              @click="preferencesStore.userCartModal = { open: true, mode: 'burn' }"
+              @click="preferencesStore.setOpenedUserCartModal('burn')"
             >
               {{ $t('burn') }}
             </NeoButton>
@@ -54,7 +54,7 @@
                 variant="outlined-rounded"
                 icon="paper-plane-top"
                 :disabled="isItemTransferDisabled"
-                @click="preferencesStore.userCartModal = { open: true, mode: 'transfer' }"
+                @click="preferencesStore.setOpenedUserCartModal('transfer')"
               >
                 {{ $t('transfer') }}
               </NeoButton>
diff --git a/components/common/userCart/UserCartModals.vue b/components/common/userCart/UserCartModals.vue
index 36bd076844..f3f072cba4 100644
--- a/components/common/userCart/UserCartModals.vue
+++ b/components/common/userCart/UserCartModals.vue
@@ -1,4 +1,10 @@
 <template>
   <ItemTransferModal />
-  <ItemBurnModal />
+  <ItemBurnModal v-if="burnVisible(urlPrefix)" />
 </template>
+
+<script lang="ts" setup>
+import { burnVisible } from '@/utils/config/permission.config'
+
+const { urlPrefix } = usePrefix()
+</script>
diff --git a/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue b/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
index e4ef4dc958..6273b793df 100644
--- a/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
+++ b/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
@@ -4,10 +4,10 @@
       :title="signingModalTitle"
       :is-loading="isLoading"
       :status="status"
-      @try-again="burn"
+      @try-again="tryAgain"
     />
 
-    <ItemTransferModal v-if="canTransfer" />
+    <UserCartModals v-if="canDoActions" />
 
     <NeoDropdown
       position="bottom-left"
@@ -33,7 +33,7 @@
         v-if="isOwner && !hasOperationsDisabled(urlPrefix)"
       >
         <NeoDropdownItem
-          v-if="canTransfer"
+          v-if="canDoActions"
           @click="transfer"
         >
           Transfer NFT
@@ -93,8 +93,9 @@ const props = defineProps<{
   abi?: Abi | null
 }>()
 
-const action = ref('')
+const action = ref<'unlist' | ''>('')
 
+const id = computed(() => route.params.id.toString())
 const isOwner = computed(() => accountId.value === props.nft?.currentOwner)
 const isCollectionOwner = computed(() => accountId.value === props.nft?.collection?.currentOwner)
 const nftId = computed(() => props.nft?.id || '')
@@ -102,7 +103,7 @@ const nftId = computed(() => props.nft?.id || '')
 const { data } = useQuery({
   queryKey: ['nft-with-metadata', nftId],
   queryFn: async () =>
-    nftId.value && canTransfer.value
+    nftId.value && canDoActions.value
       ? (await useAsyncGraphql({
           query: 'nftEntitiesByIDs',
           variables: { ids: [nftId.value] },
@@ -111,12 +112,11 @@ const { data } = useQuery({
 })
 
 const nftWithMetadata = computed<NFTWithMetadata>(() => data.value?.nftEntities?.[0])
-const canTransfer = computed(() => props.nft && isOwner.value)
+const canDoActions = computed(() => props.nft && isOwner.value)
 
 const signingModalTitle = computed(() => {
   return (
     {
-      burn: $i18n.t('mint.nft.burning'),
       unlist: $i18n.t('mint.nft.delisting'),
     }[action.value] || ''
   )
@@ -164,17 +164,12 @@ const downloadMedia = async () => {
 }
 
 const burn = () => {
-  action.value = 'burn'
-  transaction({
-    interaction: Interaction.CONSUME,
-    urlPrefix: urlPrefix.value,
-    nftId: route.params.id as string,
-    nftSn: props.nft?.sn as string,
-    collectionId: props.nft?.collection?.id as string,
-    abi: props.abi,
-    successMessage: $i18n.t('transaction.consume.success') as string,
-    errorMessage: $i18n.t('transaction.consume.error') as string,
-  })
+  openUserCartModal('burn')
+}
+
+const tryAgain = () => {
+  const map = { unlist }
+  map[action.value]?.()
 }
 
 const unlist = () => {
@@ -183,7 +178,7 @@ const unlist = () => {
     interaction: Interaction.LIST,
     urlPrefix: urlPrefix.value,
     token: {
-      nftId: route.params.id as string,
+      nftId: id.value,
       price: '0',
     },
     successMessage: $i18n.t('transaction.unlist.success') as string,
@@ -198,10 +193,12 @@ const refreshMetadata = async () => {
   }
 }
 
-const transfer = () => {
+const openUserCartModal = (mode: UserCartMode) => {
   if (nftWithMetadata.value) {
     listNftByNftWithMetadata(nftWithMetadata.value)
-    preferencesStore.itemTransferCartModalOpen = true
+    preferencesStore.setOpenedUserCartModal(mode)
   }
 }
+
+const transfer = () => openUserCartModal('transfer')
 </script>
diff --git a/components/migrate/steps/SignLoader3.vue b/components/migrate/steps/SignLoader3.vue
index e704859fee..ddc182f8eb 100644
--- a/components/migrate/steps/SignLoader3.vue
+++ b/components/migrate/steps/SignLoader3.vue
@@ -82,8 +82,10 @@
 
 <script setup lang="ts">
 import type { Prefix } from '@kodadot1/static'
+import { Interaction } from '@kodadot1/minimark/v1'
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
-import { Collections, NFTs } from '@/composables/transaction/types'
+import { Collections } from '@/composables/transaction/types'
+import { TransactionStatus } from '@/composables/useTransactionStatus'
 import {
   type Steps,
   iconIdle,
@@ -163,7 +165,7 @@ const burnItems = async () => {
 
   await transaction(
     {
-      interaction: NFTs.BURN_MULTIPLE,
+      interaction: Interaction.CONSUME,
       nftIds: ids,
       urlPrefix: from,
     },
diff --git a/composables/transaction/transactionBurn.ts b/composables/transaction/transactionBurn.ts
index f24e572b59..c76420e73a 100644
--- a/composables/transaction/transactionBurn.ts
+++ b/composables/transaction/transactionBurn.ts
@@ -5,134 +5,74 @@ import {
 } from '@kodadot1/minimark/v2'
 import type { ApiPromise } from '@polkadot/api'
 import type { PalletNftsDestroyWitness } from '@polkadot/types/lookup'
-import type { Prefix } from '@kodadot1/static'
+import type { SubmittableExtrinsicFunction } from '@polkadot/api-base/types'
 import type {
   ActionDeleteCollection,
   ExecuteSubstrateTransactionParams,
-  ActionBurnMultipleNFTs, ActionConsume,
+  ActionConsume,
   ExecuteTransaction,
   Abi,
 } from '@/composables/transaction/types'
-
 import { warningMessage } from '@/utils/notification'
-
 import { isLegacy } from '@/components/unique/utils'
 import {
   assetHubParamResolver,
+  destructTokenId,
   getApiCall,
 } from '@/utils/gallery/abstractCalls'
 
 function execBurnEvm(item: ActionConsume, executeTransaction: ExecuteTransaction) {
+  const { collectionId, nftSn } = destructTokenId(item.nftIds[0])
+
   executeTransaction({
-    address: item.collectionId,
+    address: collectionId,
     abi: item.abi as Abi,
     functionName: 'burn',
-    arg: [item.nftSn],
+    arg: [nftSn],
   })
 }
 
-export function execBurnTx(item: ActionConsume, api, executeTransaction) {
-  if (isEvm(item.urlPrefix as Prefix)) {
-    return execBurnEvm(item, executeTransaction)
-  }
+function execBurnAssetHub(item: ActionConsume, api: ApiPromise, executeTransaction: ExecuteTransaction) {
+  const getApiCallParams = (nftId: string) => {
+    const legacy = isLegacy(nftId)
+    const paramResolver = assetHubParamResolver(legacy)
 
-  if (item.urlPrefix === 'rmrk') {
-    executeTransaction({
-      cb: api.tx.system.remark,
-      arg: [createInteraction(Interaction.CONSUME, item.nftId, '')],
-      successMessage: item.successMessage,
-      errorMessage: item.errorMessage,
-    })
-  }
+    const apiCall = getApiCall(api, item.urlPrefix, Interaction.CONSUME)
+    const params = paramResolver(nftId, Interaction.CONSUME, '')
 
-  if (item.urlPrefix === 'ksm') {
-    executeTransaction({
-      cb: api.tx.system.remark,
-      arg: [
-        createNewInteraction({
-          action: NewInteraction.BURN,
-          payload: { id: item.nftId },
-        }),
-      ],
-      successMessage: item.successMessage,
-      errorMessage: item.errorMessage,
-    })
+    return { apiCall, params }
   }
 
-  // item.urlPrefix === 'ahr'
-  if (item.urlPrefix === 'ahk' || item.urlPrefix === 'ahp') {
-    const legacy = isLegacy(item.nftId)
-    const paramResolver = assetHubParamResolver(legacy)
-    executeTransaction({
-      cb: getApiCall(api, item.urlPrefix, Interaction.CONSUME),
-      arg: paramResolver(item.nftId, Interaction.CONSUME, ''),
-      successMessage: item.successMessage,
-      errorMessage: item.errorMessage,
-    })
+  let cb: SubmittableExtrinsicFunction<'promise'>, arg
+
+  if (item.nftIds.length > 1) {
+    cb = api.tx.utility.batch
+    arg = [
+      item.nftIds.map((nftId) => {
+        const { apiCall, params } = getApiCallParams(nftId)
+        return apiCall(...params)
+      }),
+    ]
+  }
+  else {
+    ({ apiCall: cb, params: arg } = getApiCallParams(item.nftIds[0]))
   }
-}
 
-export function execBurnMultiple(
-  item: ActionBurnMultipleNFTs,
-  api: ApiPromise,
-  executeTransaction: ({
+  executeTransaction({
     cb,
-    arg: [arg],
-    successMessage,
-    errorMessage,
-  }: ExecuteSubstrateTransactionParams) => void,
-) {
-  const cb = api.tx.utility.batch
-
-  if (item.urlPrefix === 'rmrk') {
-    const arg = item.nftIds.map((nftId) => {
-      return api.tx.system.remark(
-        createInteraction(Interaction.CONSUME, nftId, ''),
-      )
-    })
-
-    executeTransaction({
-      cb,
-      arg: [arg],
-      successMessage: item.successMessage,
-      errorMessage: item.errorMessage,
-    })
-  }
+    arg,
+    successMessage: item.successMessage,
+    errorMessage: item.errorMessage,
+  })
+}
 
-  if (item.urlPrefix === 'ksm') {
-    const arg = item.nftIds.map((nftId) => {
-      return api.tx.system.remark(
-        createNewInteraction({
-          action: NewInteraction.BURN,
-          payload: { id: nftId },
-        }),
-      )
-    })
-
-    executeTransaction({
-      cb,
-      arg: [arg],
-      successMessage: item.successMessage,
-      errorMessage: item.errorMessage,
-    })
+export function execBurn(item: ActionConsume, api, executeTransaction) {
+  if (isEvm(item.urlPrefix)) {
+    return execBurnEvm(item, executeTransaction)
   }
-  // item.urlPrefix === 'ahr'
-  if (item.urlPrefix === 'ahk' || item.urlPrefix === 'ahp') {
-    const arg = item.nftIds.map((nftId) => {
-      const legacy = isLegacy(nftId)
-      const paramResolver = assetHubParamResolver(legacy)
-      const apiCall = getApiCall(api, item.urlPrefix, Interaction.CONSUME)
-      const params = paramResolver(nftId, Interaction.CONSUME, '')
-
-      return apiCall(...params)
-    })
-
-    executeTransaction({
-      cb,
-      arg: [arg],
-      successMessage: item.successMessage,
-      errorMessage: item.errorMessage,
-    })
+
+  if (isAssetHub(item.urlPrefix)) {
+    return execBurnAssetHub(item, api, executeTransaction)
   }
 }
 
diff --git a/composables/transaction/types.ts b/composables/transaction/types.ts
index 94a2d8a71e..2377087f92 100644
--- a/composables/transaction/types.ts
+++ b/composables/transaction/types.ts
@@ -123,10 +123,8 @@ export type TokenToMint = BaseTokenType<
 
 export type ActionConsume = {
   interaction: Interaction.CONSUME
-  urlPrefix: string
-  nftId: string
-  nftSn: string
-  collectionId: string
+  urlPrefix: Prefix
+  nftIds: string[]
   abi?: Abi | null
   successMessage?: string
   errorMessage?: string
@@ -277,19 +275,10 @@ export interface ActionDeleteCollection {
 }
 
 export enum NFTs {
-  BURN_MULTIPLE = 'burnMultiple',
   MINT_DROP = 'mintDrop',
   SET_METADATA = 'setMetadata',
 }
 
-export interface ActionBurnMultipleNFTs {
-  interaction: NFTs.BURN_MULTIPLE
-  urlPrefix: string
-  nftIds: string[]
-  successMessage?: string | ((blockNumber: string) => string)
-  errorMessage?: string
-}
-
 export type ActionMetadataSetMetadata = Metadata & { image: File | string }
 
 export interface ActionSetNftMetadata {
@@ -338,7 +327,6 @@ export type Actions =
   | ActionMintToken
   | ActionMintCollection
   | ActionDeleteCollection
-  | ActionBurnMultipleNFTs
   | ActionUpdateCollection
   | ActionSetNftMetadata
   | ActionMintDrop
diff --git a/composables/transaction/utils.ts b/composables/transaction/utils.ts
index 549f928499..f44dddc09b 100644
--- a/composables/transaction/utils.ts
+++ b/composables/transaction/utils.ts
@@ -7,7 +7,6 @@ import {
 } from '../transaction/types'
 import type {
   ActionAcceptOffer,
-  ActionBurnMultipleNFTs,
   ActionBuy,
   ActionConsume,
   ActionDeleteCollection,
@@ -50,7 +49,7 @@ export function isActionValid(action: Actions): boolean {
     [Interaction.MINTNFT]: (action: ActionMintToken) =>
       hasContent(action.token),
     [Interaction.SEND]: (action: ActionSend) => Boolean(action.nfts.length),
-    [Interaction.CONSUME]: (action: ActionConsume) => Boolean(action.nftId),
+    [Interaction.CONSUME]: (action: ActionConsume) => hasContent(action.nftIds),
     [ShoppingActions.MAKE_OFFER]: (action: ActionOffer) =>
       hasContent(action.token),
     [ShoppingActions.WITHDRAW_OFFER]: (action: ActionWithdrawOffer) =>
@@ -67,8 +66,6 @@ export function isActionValid(action: Actions): boolean {
       Boolean(action.collectionId),
     [Collections.UPDATE_COLLECTION]: (action: ActionUpdateCollection) =>
       Boolean(action.collectionId) && (action.update.metadata || action.update.max),
-    [NFTs.BURN_MULTIPLE]: (action: ActionBurnMultipleNFTs) =>
-      hasContent(action.nftIds),
     [NFTs.SET_METADATA]: (action: ActionSetNftMetadata) =>
       hasContent(action.nftSn),
     [NFTs.MINT_DROP]: (action: ActionMintDrop) =>
diff --git a/composables/useIsChain.ts b/composables/useIsChain.ts
index 2d4a33d01e..9a048fc976 100644
--- a/composables/useIsChain.ts
+++ b/composables/useIsChain.ts
@@ -4,17 +4,14 @@ import { vmOf } from '@/utils/config/chain.config'
 
 export const isEvm = (prefix: Prefix) => vmOf(prefix) === 'EVM'
 export const isSub = (prefix: Prefix) => vmOf(prefix) === 'SUB'
+export const isAssetHub = (prefix: Prefix) => prefix === 'ahk' || prefix === 'ahp'// || prefix.value === 'ahr'
 
 export default function (prefix: ComputedRef<Prefix>) {
-  const isAssetHub = computed(
-    () => prefix.value === 'ahk' || prefix.value === 'ahp', // || prefix.value === 'ahr'
-  )
-
   const isBase = computed(() => 'base' === prefix.value)
 
   return {
-    isAssetHub,
     isBase,
+    isAssetHub: computed(() => isAssetHub(prefix.value)),
     isEvm: computed(() => isEvm(prefix.value)),
     isSub: computed(() => isSub(prefix.value)),
   }
diff --git a/composables/useTransaction.ts b/composables/useTransaction.ts
index 33566fd146..0523a527be 100644
--- a/composables/useTransaction.ts
+++ b/composables/useTransaction.ts
@@ -7,8 +7,7 @@ import { execListTx } from './transaction/transactionList'
 import { execSendTx } from './transaction/transactionSend'
 import {
   execBurnCollection,
-  execBurnMultiple,
-  execBurnTx,
+  execBurn,
 } from './transaction/transactionBurn'
 import { execWithdrawSwap } from './transaction/transactionSwapWithdraw'
 import { execAcceptSwap } from './transaction/transactionSwapAccept'
@@ -21,7 +20,6 @@ import { execUpdateCollection } from './transaction/transactionUpdateCollection'
 import { execSetNftMetadata } from './transaction/transactionSetNftMetadata'
 import type {
   ActionAcceptOffer,
-  ActionBurnMultipleNFTs,
   ActionBuy,
   ActionConsume,
   ActionOffer,
@@ -230,7 +228,7 @@ export const executeAction = ({
     [Interaction.SEND]: () =>
       execSendTx(item as ActionSend, api, executeTransaction),
     [ShoppingActions.CONSUME]: () =>
-      execBurnTx(item as ActionConsume, api, executeTransaction),
+      execBurn(item as ActionConsume, api, executeTransaction),
     [ShoppingActions.WITHDRAW_SWAP]: () =>
       execWithdrawSwap(item as ActionWithdrawSwap, api!, executeTransaction),
     [ShoppingActions.ACCEPT_SWAP]: () =>
@@ -271,12 +269,6 @@ export const executeAction = ({
         isLoading,
         status,
       }),
-    [NFTs.BURN_MULTIPLE]: () =>
-      execBurnMultiple(
-        item as ActionBurnMultipleNFTs,
-        api as ApiPromise,
-        executeTransaction,
-      ),
     [NFTs.SET_METADATA]: () =>
       execSetNftMetadata({
         item: item as ActionSetNftMetadata,
diff --git a/pages/[prefix]/u/[id].vue b/pages/[prefix]/u/[id].vue
index 507574966b..25203c4c55 100644
--- a/pages/[prefix]/u/[id].vue
+++ b/pages/[prefix]/u/[id].vue
@@ -3,7 +3,7 @@
     <ProfileDetail />
     <ListingCartMini />
     <ListingCartModal />
-    <ItemTransferModal />
+    <UserCartModals />
   </div>
 </template>
 
diff --git a/stores/preferences.ts b/stores/preferences.ts
index 35afe63754..9ece1816e2 100644
--- a/stores/preferences.ts
+++ b/stores/preferences.ts
@@ -241,6 +241,9 @@ export const usePreferencesStore = defineStore('preferences', {
     setNewsletterSubscription(subscription: NewsletterSubscription) {
       this.newsletterSubscription = subscription
     },
+    setOpenedUserCartModal(mode: UserCartMode) {
+      this.userCartModal = { mode, open: true }
+    },
   },
   persist: true,
 })
diff --git a/utils/gallery/abstractCalls.ts b/utils/gallery/abstractCalls.ts
index a5d2be97af..38a02813ba 100644
--- a/utils/gallery/abstractCalls.ts
+++ b/utils/gallery/abstractCalls.ts
@@ -25,18 +25,23 @@ export const nftActionResolver: CallDictionary = {
   // REVOKE: ['uniques', 'cancelApproval'],
 }
 
+export const destructTokenId = (id: string) => {
+  const sanitized = correctId(id)
+  const [collectionId, nftSn] = sanitized.split('-')
+  return { collectionId, nftSn }
+}
+
 export const uniqueParamResolver = (
   id: string,
   selectedAction: string,
   meta: string | number,
 ): any[] => {
-  const sanitized = correctId(id)
-  const [collectionId, tokenId] = sanitized.split('-')
+  const { collectionId, nftSn } = destructTokenId(id)
   const actions = {
-    SEND: [collectionId, tokenId, meta],
-    CONSUME: [collectionId, tokenId],
-    BUY: [collectionId, tokenId, meta],
-    LIST: [collectionId, tokenId, meta, undefined],
+    SEND: [collectionId, nftSn, meta],
+    CONSUME: [collectionId, nftSn],
+    BUY: [collectionId, nftSn, meta],
+    LIST: [collectionId, nftSn, meta, undefined],
   }
 
   return actions[selectedAction]

From 3b2f0861ce142b6dd75def502e2c1251eafaa175 Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Thu, 5 Dec 2024 11:56:53 +0500
Subject: [PATCH 10/17] fix(ListingCartMini.vue): disable `burn` if it's not
 available

---
 .../common/listingCart/ListingCartMini.vue    | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/components/common/listingCart/ListingCartMini.vue b/components/common/listingCart/ListingCartMini.vue
index a335e85d5d..893e80f5cf 100644
--- a/components/common/listingCart/ListingCartMini.vue
+++ b/components/common/listingCart/ListingCartMini.vue
@@ -35,14 +35,21 @@
           </div>
 
           <div class="flex gap-4">
-            <NeoButton
-              v-if="isBurnAvailable"
-              variant="outlined-rounded"
-              icon="fire-flame-simple"
-              @click="preferencesStore.setOpenedUserCartModal('burn')"
+            <NeoTooltip
+              class="cursor-pointer"
+              position="top"
+              :active="isItemBurnDisabled"
+              :label="$t('toast.unsupportedOperation')"
             >
-              {{ $t('burn') }}
-            </NeoButton>
+              <NeoButton
+                variant="outlined-rounded"
+                icon="fire-flame-curved"
+                :disabled="isItemBurnDisabled"
+                @click="preferencesStore.setOpenedUserCartModal('burn')"
+              >
+                {{ $t('burn') }}
+              </NeoButton>
+            </NeoTooltip>
 
             <NeoTooltip
               class="cursor-pointer"
@@ -90,8 +97,9 @@ import { listVisible, burnVisible } from '@/utils/config/permission.config'
 const listingCartStore = useListingCartStore()
 const preferencesStore = usePreferencesStore()
 const { urlPrefix } = usePrefix()
+const { isEvm } = useIsChain(urlPrefix)
 
-const isBurnAvailable = computed(() => burnVisible(urlPrefix.value))
+const isItemBurnDisabled = computed(() => isEvm.value ? listingCartStore.count > 1 : !burnVisible(urlPrefix.value))
 const isItemTransferDisabled = computed(() => isSub(urlPrefix.value) ? false : listingCartStore.count > 1)
 const isListingDisabled = computed(() => !listVisible(urlPrefix.value))
 

From 75026f8843c1820fa517de80f75dc44688483787 Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Thu, 5 Dec 2024 12:13:18 +0500
Subject: [PATCH 11/17] ref(ItemBurnModal.vue): add `acknowledge` checkbox

---
 components/common/ItemBurnModal.vue          | 31 ++++++++++++++++++--
 components/common/ItemTransferModal.vue      |  2 +-
 components/common/userCart/UserCartModal.vue |  6 ++--
 locales/en.json                              |  2 ++
 utils/config/permission.config.ts            |  8 ++---
 5 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/components/common/ItemBurnModal.vue b/components/common/ItemBurnModal.vue
index a7975209c5..9d16763535 100644
--- a/components/common/ItemBurnModal.vue
+++ b/components/common/ItemBurnModal.vue
@@ -5,21 +5,48 @@
     :title="$t('transaction.burnNft', items.length)"
     :signing-title="$t('mint.nft.burning', items.length)"
     :get-action="getAction"
-    :label="$t('transaction.burnNft', items.length)"
-  />
+    :label="label"
+    :disabled="!acknowledged"
+    @reset="acknowledged = false"
+  >
+    <template #body>
+      <hr class="!mt-4 !mb-5">
+    </template>
+
+    <template #action-button-top>
+      <div class="mb-4 flex items-center">
+        <NeoCheckbox
+          v-model="acknowledged"
+          class="!m-0"
+        />
+        <p class="text-sm capitalize">
+          {{ $t('burning.agree') }}
+        </p>
+      </div>
+    </template>
+  </UserCartModal>
 </template>
 
 <script setup lang="ts">
 import { Interaction } from '@kodadot1/minimark/v1'
+import { NeoCheckbox } from '@kodadot1/brick'
 import { type ActionConsume } from '@/composables/transaction/types'
 
 const { $i18n } = useNuxtApp()
 const { urlPrefix } = usePrefix()
 
+const acknowledged = ref(false)
 const userCartModal = ref<{ items: ListCartItem[] }>()
 
 const items = computed(() => userCartModal.value?.items || [])
 
+const label = computed(() => {
+  if (!acknowledged.value) {
+    return $i18n.t('helper.acknowledgeToContinue')
+  }
+  return $i18n.t('transaction.burnNft', items.value.length)
+})
+
 const getAction = (): ActionConsume => ({
   interaction: Interaction.CONSUME,
   nftIds: items.value.map(item => item.id),
diff --git a/components/common/ItemTransferModal.vue b/components/common/ItemTransferModal.vue
index 0e03e5c4f1..419a1174ac 100644
--- a/components/common/ItemTransferModal.vue
+++ b/components/common/ItemTransferModal.vue
@@ -21,7 +21,7 @@
         v-model="address"
         :is-invalid="isYourAddress"
         label=""
-        class="flex-1"
+        class="flex-1 !pb-12"
         placeholder="Enter wallet address"
         with-address-check
         @check="isValid => isAddressValid = isValid"
diff --git a/components/common/userCart/UserCartModal.vue b/components/common/userCart/UserCartModal.vue
index e4c3ac59de..f7396f6195 100644
--- a/components/common/userCart/UserCartModal.vue
+++ b/components/common/userCart/UserCartModal.vue
@@ -17,7 +17,7 @@
       <ModalBody
         modal-max-height="100vh"
         :title="title"
-        content-class="!pt-4 !pb-5 !px-8"
+        content-class="!pt-4 !pb-6 !px-8"
         :scrollable="false"
         :loading="loading"
         @close="onClose"
@@ -41,7 +41,7 @@
           <slot name="body" />
         </div>
 
-        <div class="pt-12 flex flex-col">
+        <div class="flex flex-col">
           <div class="flex text-k-grey justify-between items-center mb-4">
             <span class="text-xs capitalize">{{
               $t('transfers.networkFee')
@@ -49,6 +49,8 @@
             <span class="text-xs">{{ formattedTxFees }}</span>
           </div>
 
+          <slot name="action-button-top" />
+
           <AutoTeleportActionButton
             ref="autoTeleportButton"
             :fees="{ forceActionAutoFees: true }"
diff --git a/locales/en.json b/locales/en.json
index db87ccf090..e9e2ee069f 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -174,6 +174,7 @@
   "blog": "Blog",
   "bridging": "Bridging",
   "burn": "Burn",
+  "burning": { "agree": "I understand NFT(s) will be permanently destroyed" },
   "buyModal": {
     "amountPurchaseSuccessfully": "{0} NFTs purchased successfully",
     "buyingNft": "Buying NFT | Buying NFTs",
@@ -950,6 +951,7 @@
   "go back": "Go Back",
   "handle": "Handle",
   "helper": {
+    "acknowledgeToContinue": "Acknowledge To Continue",
     "builtOn": "Built on",
     "clickToCreate": "Click here to create collection",
     "indexerReadOnly": "App is in read-only mode, try reload app or visit Discord",
diff --git a/utils/config/permission.config.ts b/utils/config/permission.config.ts
index 58085cd61e..dff45be035 100644
--- a/utils/config/permission.config.ts
+++ b/utils/config/permission.config.ts
@@ -47,7 +47,7 @@ export const migrateVisible = (prefix: Prefix | string): boolean => {
 }
 
 export const offerVisible = (prefix: Prefix | string): boolean => {
-  return ['ahp', 'ahk'].includes(prefix)
+  return isAssetHub(prefix as Prefix)
 }
 
 export const seriesInsightVisible = (prefix: Prefix | string) => {
@@ -63,13 +63,13 @@ export const salesVisible = (prefix: Prefix | string) => {
 }
 
 export const dropsVisible = (prefix: Prefix | string) => {
-  return prefix === 'ahk' || prefix === 'ahp' || isEvm(prefix)
+  return isAssetHub(prefix as Prefix) || isEvm(prefix as Prefix)
 }
 
 export const explorerVisible = (prefix: Prefix | string): boolean => {
   return hasExplorer[prefix] ?? true
 }
 
-export const burnVisible = (prefix: Prefix | string): boolean => {
-  return isSub(prefix as Prefix)
+export const burnVisible = (prefix: Prefix): boolean => {
+  return isSub(prefix) || isEvm(prefix)
 }

From c2dbba7a4c6fde950a2469687b5e81e455502684 Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Thu, 5 Dec 2024 12:50:00 +0500
Subject: [PATCH 12/17] fix(transactions): `burn nft`  on `evm` missing `abi`

---
 components/common/ItemBurnModal.vue          |  5 ++++-
 components/common/ItemTransferModal.vue      |  8 ++++----
 components/common/userCart/UserCartModal.vue | 13 +++++++++++--
 composables/useCollectionAbi.ts              |  8 ++++++--
 4 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/components/common/ItemBurnModal.vue b/components/common/ItemBurnModal.vue
index 9d16763535..ae350f3ac0 100644
--- a/components/common/ItemBurnModal.vue
+++ b/components/common/ItemBurnModal.vue
@@ -31,14 +31,16 @@
 import { Interaction } from '@kodadot1/minimark/v1'
 import { NeoCheckbox } from '@kodadot1/brick'
 import { type ActionConsume } from '@/composables/transaction/types'
+import { type UserCartModalExpose } from '@/components/common/userCart/UserCartModal.vue'
 
 const { $i18n } = useNuxtApp()
 const { urlPrefix } = usePrefix()
 
 const acknowledged = ref(false)
-const userCartModal = ref<{ items: ListCartItem[] }>()
+const userCartModal = ref<UserCartModalExpose>()
 
 const items = computed(() => userCartModal.value?.items || [])
+const abi = computed(() => userCartModal.value?.abi)
 
 const label = computed(() => {
   if (!acknowledged.value) {
@@ -51,6 +53,7 @@ const getAction = (): ActionConsume => ({
   interaction: Interaction.CONSUME,
   nftIds: items.value.map(item => item.id),
   urlPrefix: urlPrefix.value,
+  abi: abi.value,
   successMessage: $i18n.t('transaction.item.success') as string,
   errorMessage: $i18n.t('transaction.item.error') as string,
 })
diff --git a/components/common/ItemTransferModal.vue b/components/common/ItemTransferModal.vue
index 419a1174ac..c818c8aca3 100644
--- a/components/common/ItemTransferModal.vue
+++ b/components/common/ItemTransferModal.vue
@@ -50,18 +50,18 @@ import { Interaction } from '@kodadot1/minimark/v1'
 import { toSubstrateAddress } from '@/services/profile'
 import AddressInput from '@/components/shared/AddressInput.vue'
 import type { ActionSend } from '@/composables/transaction/types'
+import { type UserCartModalExpose } from '@/components/common/userCart/UserCartModal.vue'
 
 const { $i18n } = useNuxtApp()
 const { urlPrefix } = usePrefix()
 const { accountId } = useAuth()
 
-const userCartModal = ref()
+const userCartModal = ref<UserCartModalExpose>()
 const address = ref('')
 const isAddressValid = ref(false)
 
-const items = computed(() => userCartModal.value?.items || [] as ListCartItem[])
-const nft = computed(() => items.value[0])
-const abi = useCollectionAbi(computed(() => nft.value?.collection.id))
+const items = computed(() => userCartModal.value?.items || [])
+const abi = computed(() => userCartModal.value?.abi)
 
 const label = computed(() => {
   if (!address.value) {
diff --git a/components/common/userCart/UserCartModal.vue b/components/common/userCart/UserCartModal.vue
index f7396f6195..b2e57df828 100644
--- a/components/common/userCart/UserCartModal.vue
+++ b/components/common/userCart/UserCartModal.vue
@@ -83,6 +83,11 @@ import useAutoTeleportActionButton from '@/composables/autoTeleport/useAutoTelep
 import type { AutoTeleportAction } from '@/composables/autoTeleport/types'
 import type { AutoTeleportActionButtonConfirmEvent } from '@/components/common/autoTeleport/AutoTeleportActionButton.vue'
 
+export type UserCartModalExpose = {
+  items: ListCartItem[]
+  abi: any
+}
+
 const emit = defineEmits(['reset'])
 const props = defineProps<{
   getAction: () => Actions
@@ -104,6 +109,7 @@ const { transaction, status, isLoading, isError, blockNumber, clear: clearTransa
 const { notification, lastSessionId, updateSession } = useLoadingNotfication()
 const { getTransactionUrl } = useExplorer()
 const { urlPrefix } = usePrefix()
+const { isEvm } = useIsChain(urlPrefix)
 
 const { action, autoTeleport, autoTeleportButton, autoTeleportLoaded, formattedTxFees } = useAutoTeleportActionButton({
   getActionFn: props.getAction,
@@ -111,6 +117,8 @@ const { action, autoTeleport, autoTeleportButton, autoTeleportLoaded, formattedT
 
 const isModalActive = computed(() => Boolean(preferencesStore.userCartModal?.open && preferencesStore.userCartModal?.mode === props.mode))
 const nft = computed(() => items.value[0])
+const abi = useCollectionAbi(computed(() => nft.value?.collection.id), { disabled: !isEvm.value })
+
 const actions = computed<AutoTeleportAction[]>(() => isModalActive.value
   ? [
       {
@@ -126,7 +134,8 @@ const actions = computed<AutoTeleportAction[]>(() => isModalActive.value
     ]
   : [])
 
-const loading = computed(() => (!autoTeleportLoaded.value || props.loading))
+const loadingAbi = computed(() => (isEvm.value ? !abi.value : false))
+const loading = computed(() => (!autoTeleportLoaded.value || props.loading || loadingAbi.value))
 const isDisabled = computed(() => hasOperationsDisabled(urlPrefix.value) || props.disabled)
 
 const closeModal = () => {
@@ -203,5 +212,5 @@ useModalIsOpenTracker({
 
 onBeforeMount(closeModal)
 
-defineExpose({ items })
+defineExpose({ items, abi })
 </script>
diff --git a/composables/useCollectionAbi.ts b/composables/useCollectionAbi.ts
index 8142da1b62..1932adad54 100644
--- a/composables/useCollectionAbi.ts
+++ b/composables/useCollectionAbi.ts
@@ -1,12 +1,16 @@
 import { useQuery } from '@tanstack/vue-query'
 import type { Prefix } from '@kodadot1/static'
+import type { MaybeComputedRef } from '@vueuse/core'
 import { fetchOdaCollectionAbi } from '@/services/oda'
 
-export default (collectionId: Ref<string | undefined>, prefix: Ref<Prefix> = usePrefix().urlPrefix) => {
+export default (collectionId: Ref<string | undefined>, {
+  prefix = usePrefix().urlPrefix,
+  disabled = false,
+}: { prefix?: Ref<Prefix>, disabled?: MaybeComputedRef<boolean> } = {}) => {
   const { data: abi } = useQuery({
     queryKey: ['collection-abi', collectionId],
     queryFn: () => isEvm(prefix.value) ? fetchOdaCollectionAbi(prefix.value, collectionId.value as string) : Promise.resolve(null),
-    enabled: computed(() => Boolean(collectionId.value)),
+    enabled: computed(() => Boolean(collectionId.value) && !unref(disabled)),
   })
 
   return abi

From 63f898e225d45ec3e9dd8b05a383d21fc23c5870 Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Fri, 6 Dec 2024 06:49:40 +0500
Subject: [PATCH 13/17] fix: deepscan local variable not used.

---
 components/common/ItemTransferModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/common/ItemTransferModal.vue b/components/common/ItemTransferModal.vue
index c818c8aca3..d6821220c0 100644
--- a/components/common/ItemTransferModal.vue
+++ b/components/common/ItemTransferModal.vue
@@ -6,8 +6,8 @@
     :signing-title="$t('transaction.transferingNft', items.length)"
     :get-action="getAction"
     :label="label"
-    :disabled
-    :loading
+    :disabled="disabled"
+    :loading="loading"
     @reset="reset"
   >
     <template #body>

From d78ae74c55850bbb6b966999653935ae0adae9ab Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Fri, 6 Dec 2024 07:20:54 +0500
Subject: [PATCH 14/17] ref(codeclimate): Similar blocks of code found in
 multiple locations

---
 components/unique/utils.ts                 |  6 +++---
 composables/transaction/transactionBurn.ts |  4 ++--
 utils/gallery/abstractCalls.ts             | 17 ++++++++---------
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/components/unique/utils.ts b/components/unique/utils.ts
index 50f8b1b134..7755456c00 100644
--- a/components/unique/utils.ts
+++ b/components/unique/utils.ts
@@ -1,15 +1,15 @@
 import BN from 'bn.js'
+import { destructTokenId } from '@/utils/gallery/abstractCalls'
 
 const LEGACY_PREFIX = /^u-/
 
 export const tokenIdToRoute = (
   tokenId: string,
 ): { id: string, item: string } => {
-  const sanitized = correctId(tokenId)
-  const [collection, item] = sanitized.split('-')
+  const { collectionId: id, tokenId: item } = destructTokenId(tokenId)
 
   return {
-    id: collection,
+    id,
     item,
   }
 }
diff --git a/composables/transaction/transactionBurn.ts b/composables/transaction/transactionBurn.ts
index c76420e73a..5bfc9362d4 100644
--- a/composables/transaction/transactionBurn.ts
+++ b/composables/transaction/transactionBurn.ts
@@ -22,13 +22,13 @@ import {
 } from '@/utils/gallery/abstractCalls'
 
 function execBurnEvm(item: ActionConsume, executeTransaction: ExecuteTransaction) {
-  const { collectionId, nftSn } = destructTokenId(item.nftIds[0])
+  const { collectionId, tokenId } = destructTokenId(item.nftIds[0])
 
   executeTransaction({
     address: collectionId,
     abi: item.abi as Abi,
     functionName: 'burn',
-    arg: [nftSn],
+    arg: [tokenId],
   })
 }
 
diff --git a/utils/gallery/abstractCalls.ts b/utils/gallery/abstractCalls.ts
index 38a02813ba..72f7ff63c1 100644
--- a/utils/gallery/abstractCalls.ts
+++ b/utils/gallery/abstractCalls.ts
@@ -27,8 +27,8 @@ export const nftActionResolver: CallDictionary = {
 
 export const destructTokenId = (id: string) => {
   const sanitized = correctId(id)
-  const [collectionId, nftSn] = sanitized.split('-')
-  return { collectionId, nftSn }
+  const [collectionId, tokenId] = sanitized.split('-')
+  return { collectionId, tokenId }
 }
 
 export const uniqueParamResolver = (
@@ -36,12 +36,12 @@ export const uniqueParamResolver = (
   selectedAction: string,
   meta: string | number,
 ): any[] => {
-  const { collectionId, nftSn } = destructTokenId(id)
+  const { collectionId, tokenId } = destructTokenId(id)
   const actions = {
-    SEND: [collectionId, nftSn, meta],
-    CONSUME: [collectionId, nftSn],
-    BUY: [collectionId, nftSn, meta],
-    LIST: [collectionId, nftSn, meta, undefined],
+    SEND: [collectionId, tokenId, meta],
+    CONSUME: [collectionId, tokenId],
+    BUY: [collectionId, tokenId, meta],
+    LIST: [collectionId, tokenId, meta, undefined],
   }
 
   return actions[selectedAction]
@@ -52,8 +52,7 @@ export const nftParamResolver = (
   selectedAction: string,
   meta: string | number,
 ): any[] => {
-  const sanitized = correctId(id)
-  const [collectionId, tokenId] = sanitized.split('-')
+  const { collectionId, tokenId } = destructTokenId(id)
   const actions = {
     SEND: [collectionId, tokenId, meta],
     CONSUME: [collectionId, tokenId],

From 892381a0d46f2e6e46654a229ff0db45e51abd88 Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Fri, 6 Dec 2024 07:52:34 +0500
Subject: [PATCH 15/17] ref(UserCartModal.vue): removed duplicate notification
 by adding `showTransactionNotification` prop

---
 components/common/ItemBurnModal.vue          |  2 -
 components/common/ItemTransferModal.vue      |  2 -
 components/common/userCart/UserCartModal.vue | 59 +++++++++++---------
 3 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/components/common/ItemBurnModal.vue b/components/common/ItemBurnModal.vue
index ae350f3ac0..6c69420cf8 100644
--- a/components/common/ItemBurnModal.vue
+++ b/components/common/ItemBurnModal.vue
@@ -54,7 +54,5 @@ const getAction = (): ActionConsume => ({
   nftIds: items.value.map(item => item.id),
   urlPrefix: urlPrefix.value,
   abi: abi.value,
-  successMessage: $i18n.t('transaction.item.success') as string,
-  errorMessage: $i18n.t('transaction.item.error') as string,
 })
 </script>
diff --git a/components/common/ItemTransferModal.vue b/components/common/ItemTransferModal.vue
index d6821220c0..883d1079a8 100644
--- a/components/common/ItemTransferModal.vue
+++ b/components/common/ItemTransferModal.vue
@@ -96,8 +96,6 @@ const getAction = (): ActionSend => ({
     sn: item.sn,
     collectionId: item.collection.id,
   })),
-  successMessage: $i18n.t('transaction.item.success') as string,
-  errorMessage: $i18n.t('transaction.item.error') as string,
 })
 
 const reset = () => {
diff --git a/components/common/userCart/UserCartModal.vue b/components/common/userCart/UserCartModal.vue
index b2e57df828..91bf85e6f1 100644
--- a/components/common/userCart/UserCartModal.vue
+++ b/components/common/userCart/UserCartModal.vue
@@ -89,7 +89,7 @@ export type UserCartModalExpose = {
 }
 
 const emit = defineEmits(['reset'])
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   getAction: () => Actions
   mode: UserCartMode
   label: string
@@ -97,7 +97,10 @@ const props = defineProps<{
   loading?: boolean
   title: string
   signingTitle: string
-}>()
+  showTransactionNotification?: boolean
+}>(), {
+  showTransactionNotification: true,
+})
 
 const preferencesStore = usePreferencesStore()
 const listingCartStore = useListingCartStore()
@@ -105,7 +108,7 @@ const listingCartStore = useListingCartStore()
 const items = ref<ListCartItem[]>([])
 
 const { $i18n } = useNuxtApp()
-const { transaction, status, isLoading, isError, blockNumber, clear: clearTransaction, txHash } = useTransaction()
+const { transaction, status, isLoading, isError, blockNumber, clear: clearTransaction, txHash } = useTransaction({ disableSuccessNotification: props.showTransactionNotification })
 const { notification, lastSessionId, updateSession } = useLoadingNotfication()
 const { getTransactionUrl } = useExplorer()
 const { urlPrefix } = usePrefix()
@@ -176,31 +179,33 @@ const submit = async ({ autoteleport }: AutoTeleportActionButtonConfirmEvent) =>
   }
 }
 
-useTransactionNotification({
-  status,
-  isError,
-  sessionId: lastSessionId,
-  autoTeleport,
-  updateSession,
-  init: () => {
-    return notification(({ isSessionState, notify, session }) => {
-      return notify({
-        title: ref(props.signingTitle),
-        state: computed(() => session?.value.state as LoadingNotificationState),
-        action: computed<NotificationAction | undefined>(() => {
-          return isSessionState('succeeded')
-            ? ({
-                label: $i18n.t('helper.viewTx'),
-                icon: 'arrow-up-right',
-                url: getTransactionUrl(txHash.value || '', urlPrefix.value) || '',
-              })
-            : undefined
-        }),
-        showIndexerDelayMessage: true,
+if (props.showTransactionNotification) {
+  useTransactionNotification({
+    status,
+    isError,
+    sessionId: lastSessionId,
+    autoTeleport,
+    updateSession,
+    init: () => {
+      return notification(({ isSessionState, notify, session }) => {
+        return notify({
+          title: ref(props.signingTitle),
+          state: computed(() => session?.value.state as LoadingNotificationState),
+          action: computed<NotificationAction | undefined>(() => {
+            return isSessionState('succeeded')
+              ? ({
+                  label: $i18n.t('helper.viewTx'),
+                  icon: 'arrow-up-right',
+                  url: getTransactionUrl(txHash.value || '', urlPrefix.value) || '',
+                })
+              : undefined
+          }),
+          showIndexerDelayMessage: true,
+        })
       })
-    })
-  },
-})
+    },
+  })
+}
 
 useModalIsOpenTracker({
   isOpen: isModalActive,

From c57f661c009196fc55e46128a14b0a49026e94b2 Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Fri, 6 Dec 2024 09:23:56 +0500
Subject: [PATCH 16/17] ref(ItemBurnModal.vue): use `checkbox` label prop

---
 components/common/ItemBurnModal.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/components/common/ItemBurnModal.vue b/components/common/ItemBurnModal.vue
index 6c69420cf8..9e2964d99c 100644
--- a/components/common/ItemBurnModal.vue
+++ b/components/common/ItemBurnModal.vue
@@ -14,14 +14,13 @@
     </template>
 
     <template #action-button-top>
-      <div class="mb-4 flex items-center">
+      <div class="mb-4">
         <NeoCheckbox
           v-model="acknowledged"
-          class="!m-0"
+          class="!flex items-center"
+          label-class="!pl-3 text-sm capitalize"
+          :label="$t('burning.agree')"
         />
-        <p class="text-sm capitalize">
-          {{ $t('burning.agree') }}
-        </p>
       </div>
     </template>
   </UserCartModal>

From f30179d6a46163c8160a640d2eb786b799c53971 Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Sat, 7 Dec 2024 07:31:24 +0500
Subject: [PATCH 17/17] fix(AddressInput.vue): `strict` prop as `optional`

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

diff --git a/components/shared/AddressInput.vue b/components/shared/AddressInput.vue
index 0a5a0122fa..0b2d17f682 100644
--- a/components/shared/AddressInput.vue
+++ b/components/shared/AddressInput.vue
@@ -37,7 +37,7 @@ const props = withDefaults(
     modelValue: string
     label?: string
     emptyOnError?: boolean
-    strict: boolean
+    strict?: boolean
     icon?: string
     placeholder?: string
     disableError?: boolean