feat: Massburn

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

components/common/ItemBurnModal.vue

@@ -0,0 +1,57 @@
+<template>
+  <UserCartModal
+    ref="userCartModal"
+    mode="burn"
+    :title="$t('transaction.burnNft', items.length)"
+    :signing-title="$t('mint.nft.burning', items.length)"
+    :get-action="getAction"
+    :label="label"
+    :disabled="!acknowledged"
+    @reset="acknowledged = false"
+  >
+    <template #body>
+      <hr class="!mt-4 !mb-5">
+    </template>
+
+    <template #action-button-top>
+      <div class="mb-4">
+        <NeoCheckbox
+          v-model="acknowledged"
+          class="!flex items-center"
+          label-class="!pl-3 text-sm capitalize"
+          :label="$t('burning.agree')"
+        />
+      </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'
+import { type UserCartModalExpose } from '@/components/common/userCart/UserCartModal.vue'
+
+const { $i18n } = useNuxtApp()
+const { urlPrefix } = usePrefix()
+
+const acknowledged = ref(false)
+const userCartModal = ref<UserCartModalExpose>()
+
+const items = computed(() => userCartModal.value?.items || [])
+const abi = computed(() => userCartModal.value?.abi)
+
+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),
+  urlPrefix: urlPrefix.value,
+  abi: abi.value,
+})
+</script>

components/common/ItemTransferModal.vue

@@ -0,0 +1,114 @@
+<template>
+  <UserCartModal
+    ref="userCartModal"
+    mode="transfer"
+    :title="$t('transaction.transferNft', items.length)"
+    :signing-title="$t('transaction.transferingNft', items.length)"
+    :get-action="getAction"
+    :label="label"
+    :disabled="disabled"
+    :loading="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 !pb-12"
+        placeholder="Enter wallet address"
+        with-address-check
+        @check="isValid => isAddressValid = isValid"
+      />
+    </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'
+import { type UserCartModalExpose } from '@/components/common/userCart/UserCartModal.vue'
+
+const { $i18n } = useNuxtApp()
+const { urlPrefix } = usePrefix()
+const { accountId } = useAuth()
+
+const userCartModal = ref<UserCartModalExpose>()
+const address = ref('')
+const isAddressValid = ref(false)
+
+const items = computed(() => userCartModal.value?.items || [])
+const abi = computed(() => userCartModal.value?.abi)
+
+const label = 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(() => getChainAddress(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,
+  })),
+})
+
+const reset = () => {
+  address.value = ''
+  isAddressValid.value = false
+}
+
+const getChainAddress = (value: string) => {
+  try {
+    return toSubstrateAddress(value)
+  }
+  catch (error) {
+    return null
+  }
+}
+</script>