feat: Signing modal consistency

components/buy/Buy.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
-    <Loader v-if="!usingAutoTeleport" v-model="isLoading" :status="status" />
+    <SigningModal
+      v-if="!usingAutoTeleport"
+      v-model="isLoading"
+      :title="$t('buyModal.buyingNft', itemCount)"
+      :status="status" />
+
     <ConfirmPurchaseModal
       :loading="!hasSyncedPrices"
       :action="autoteleportAction"
@@ -15,7 +20,6 @@ import { useShoppingCartStore } from '@/stores/shoppingCart'
 import { usePreferencesStore } from '@/stores/preferences'
 import { useFiatStore } from '@/stores/fiat'
 
-import Loader from '@/components/shared/Loader.vue'
 import ConfirmPurchaseModal from '@/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue'
 import { Actions, TokenToBuy } from '@/composables/transaction/types'
 import { ShoppingCartItem } from '@/components/common/shoppingCart/types'
@@ -41,6 +45,7 @@ const nftSubscription = reactive<{
 const hasSyncedPrices = ref(false)
 const usingAutoTeleport = ref(false)
 const buyAction = ref<Actions>(emptyObject<Actions>())
+const itemCount = ref(1)
 
 const autoteleportAction = computed<AutoTeleportAction>(() => ({
   action: buyAction.value,
@@ -91,6 +96,7 @@ const handleConfirm = async ({
   autoteleport,
 }: AutoTeleportActionButtonConfirmEvent) => {
   usingAutoTeleport.value = autoteleport
+  itemCount.value = isShoppingCartMode.value ? items.value.length : 1
 
   if (!isShoppingCartMode.value) {
     shoppingCartStore.removeItemToBuy()

components/collection/HeroButtonDeleteCollection.vue

@@ -1,4 +1,9 @@
 <template>
+  <SigningModal
+    v-model="isLoading"
+    :title="$t('confirmDeleteCollection.deletingCollection')"
+    :status="status" />
+
   <NeoDropdownItem @click="confirmDeleteModalActive = true">
     {{ $i18n.t('moreActions.deleteCollection') }}
   </NeoDropdownItem>
@@ -14,15 +19,16 @@ import { NeoDropdownItem } from '@kodadot1/brick'
 import ConfirmDeleteCollectionModal from './ConfirmDeleteCollectionModal.vue'
 
 const route = useRoute()
-const { $i18n, $updateLoader } = useNuxtApp()
-const { transaction } = useTransaction()
+const { $i18n } = useNuxtApp()
+const { transaction, status } = useTransaction()
 const { urlPrefix } = usePrefix()
 const { accountId } = useAuth()
 
 const confirmDeleteModalActive = ref(false)
+const isLoading = ref(false)
 
 const deleteCollection = async () => {
-  $updateLoader(true)
+  isLoading.value = true
   const id = route.params.id.toString()
 
   await transaction({
@@ -40,7 +46,7 @@ const deleteCollection = async () => {
     `,
     onChange: ({ data }) => {
       if (data.collectionEntity.burned) {
-        $updateLoader(false)
+        isLoading.value = false
         navigateTo(`/${urlPrefix.value}/u/${accountId.value}?tab=collections`)
       }
     },

components/collection/HeroButtonDeleteNfts.vue

@@ -1,4 +1,9 @@
 <template>
+  <SigningModal
+    v-model="isLoading"
+    :status="status"
+    :title="$t('moreActions.deletingNfts')" />
+
   <NeoDropdownItem @click="deleteNfts()">
     {{ $i18n.t('moreActions.deleteNfts') }}
   </NeoDropdownItem>
@@ -9,11 +14,12 @@ import { NFTs } from '@/composables/transaction/types'
 import { NeoDropdownItem } from '@kodadot1/brick'
 
 const route = useRoute()
-const { $i18n, $updateLoader } = useNuxtApp()
+const { $i18n } = useNuxtApp()
 const { transaction, status } = useTransaction()
 const { urlPrefix } = usePrefix()
 const { accountId } = useAuth()
 
+const isLoading = ref(false)
 const id = route.params.id.toString()
 
 type NftIds = {
@@ -31,7 +37,7 @@ const { data } = useGraphql({
 })
 
 const deleteNfts = async () => {
-  $updateLoader(true)
+  isLoading.value = true
   const nfts = (data.value as NftIds).nfts
   const ids = nfts?.map((nft) => nft.id)
 
@@ -54,7 +60,7 @@ const deleteNfts = async () => {
           data.nftEntities.length === 0 ||
           status.value === TransactionStatus.Finalized
         ) {
-          $updateLoader(false)
+          isLoading.value = false
         }
       },
     })

components/collection/drop/HolderOfGenerative.vue

@@ -1,5 +1,8 @@
 <template>
-  <Loader v-model="isLoading" :status="status" />
+  <SigningModal
+    v-model="isLoading"
+    :title="$t('mint.nft.minting')"
+    :status="status" />
 
   <CollectionDropGenerativeLayout
     :collection-id="collectionId"
@@ -36,7 +39,6 @@ import { useDropMinimumFunds, useDropStatus } from '@/components/drops/useDrops'
 import { fetchNft } from '@/components/items/ItemsGrid/useNftActions'
 import holderOfCollectionById from '@/queries/subsquid/general/holderOfCollectionById.graphql'
 import unlockableCollectionById from '@/queries/subsquid/general/unlockableCollectionById.graphql'
-import Loader from '@/components/shared/Loader.vue'
 import useGenerativeDropMint, {
   type UnlockableCollectionById,
 } from '@/composables/drop/useGenerativeDropMint'
@@ -196,10 +198,10 @@ const mintButtonLabel = computed(() => {
         : $i18n.t('mint.unlockable.notEligibility')
       : $i18n.t('mint.unlockable.checkEligibility')
 })
-const mintButtonDisabled = computed(
+const mintButtonDisabled = computed<boolean>(
   () =>
     !mintCountAvailable.value ||
-    disabledByBackend.value ||
+    Boolean(disabledByBackend.value) ||
     (isLogIn.value &&
       Boolean(
         !selectedImage.value ||

components/collection/drop/modal/DropConfirmModal.vue

@@ -22,14 +22,14 @@
         @resend="handleConfirmationEmailResend"
         @check="handleEmailSubscriptionCheck" />
 
-      <WaitingDrop
+      <SigningModalBody
         v-else-if="isClaimingDropStep"
         :title="$t('drops.preparingYourNft')"
         :subtitle="est">
         <p class="py-5 capitalize">
           {{ $t('drops.stayTuned') }}
         </p>
-      </WaitingDrop>
+      </SigningModalBody>
 
       <SuccessfulDrop
         v-else-if="isSuccessfulDropStep"
@@ -44,7 +44,6 @@ import { NeoModal } from '@kodadot1/brick'
 import ModalBody from '@/components/shared/modals/ModalBody.vue'
 import EmailSignup from './newsletter/EmailSignup.vue'
 import ConfirmEmail from './newsletter/ConfirmEmail.vue'
-import WaitingDrop from './shared/WaitingDrop.vue'
 import SuccessfulDrop from './shared/SuccessfulDrop.vue'
 import type { DropMintedNft } from '@/composables/drop/useGenerativeDropMint'
 import {

components/collection/drop/modal/PaidMint.vue

@@ -22,17 +22,10 @@
         @confirm="handleConfirm"
         @close="handleModalClose" />
 
-      <WaitingDrop
+      <SigningModalBody
         v-else-if="isSigningStep"
         :title="$t('autoTeleport.steps.paid_drop.title')"
-        :subtitle="transactionStatus">
-        <div class="py-5 flex items-start">
-          <NeoIcon icon="lightbulb" size="small" class="mr-2 is-block" />
-          <p
-            v-dompurify-html="$t('autoTeleport.tip')"
-            class="text-xs capitalize" />
-        </div>
-      </WaitingDrop>
+        :subtitle="transactionStatus" />
 
       <SuccessfulDrop
         v-else-if="isSuccessfulDropStep"
@@ -44,13 +37,12 @@
 </template>
 
 <script setup lang="ts">
-import { NeoIcon, NeoModal } from '@kodadot1/brick'
+import { NeoModal } from '@kodadot1/brick'
 import ModalBody from '@/components/shared/modals/ModalBody.vue'
 import { AutoTeleportActionButtonConfirmEvent } from '@/components/common/autoTeleport/AutoTeleportActionButton.vue'
 import type { ToMintNft } from '../PaidGenerative.vue'
 import type { AutoTeleportAction } from '@/composables/autoTeleport/types'
 import MintOverview from './paid/MintOverview.vue'
-import WaitingDrop from './shared/WaitingDrop.vue'
 import SuccessfulDrop from './shared/SuccessfulDrop.vue'
 import type { DropMintedNft } from '@/composables/drop/useGenerativeDropMint'
 import { usePreloadMintedNftCover } from './utils'

components/common/itemTransfer/ItemTransferModal.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <Loader v-model="isLoading" :status="status" />
+    <SigningModal
+      v-model="isLoading"
+      :title="$t('transaction.transferingNft')"
+      :status="status" />
+
     <NeoModal :value="isModalActive" scroll="clip" @close="onClose">
       <div class="modal-width">
         <header

components/common/listingCart/ListingCartModal.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
-    <Loader v-if="!autoTeleport" v-model="isLoading" :status="status" />
+    <SigningModal
+      v-if="!autoTeleport"
+      v-model="isLoading"
+      :title="$t('listingCart.listingNft', itemCount)"
+      :status="status" />
+
     <NeoModal
       :value="preferencesStore.listingCartModalOpen"
       scroll="clip"
@@ -96,6 +101,7 @@ const fixedPrice = ref()
 const floorPricePercentAdjustment = ref()
 const autoTeleport = ref(false)
 const autoteleportButton = ref()
+const itemCount = ref(listingCartStore.count)
 
 const loadingAutoTeleport = computed(() => !autoteleportButton.value?.isReady)
 
@@ -204,6 +210,7 @@ const getAction = (items: ListCartItem[]): Actions => {
 async function confirm({ autoteleport }: AutoTeleportActionButtonConfirmEvent) {
   try {
     autoTeleport.value = autoteleport
+    itemCount.value = listingCartStore.count
 
     if (!autoteleport) {
       await transaction(getAction(listingCartStore.itemsInChain))

components/create/CreateCollection.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="is-centered" :class="{ columns: classColumn }">
-    <Loader v-if="!autoTeleport" v-model="isLoading" :status="status" />
+    <SigningModal
+      v-if="!autoTeleport"
+      v-model="isLoading"
+      :title="$t('mint.collection.minting')"
+      :status="status" />
+
     <MintConfirmModal
       v-model="confirmModal"
       :auto-teleport-actions="actions"

components/create/CreateNft.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="is-centered columns">
-    <Loader v-if="!autoTeleport" v-model="isLoading" :status="status" />
+    <SigningModal
+      v-if="!autoTeleport"
+      v-model="isLoading"
+      :title="$t('mint.nft.minting')"
+      :status="status" />
+
     <MintConfirmModal
       v-model="modalShowStatus"
       :auto-teleport-actions="autoTeleportActions"

components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <Loader v-model="isLoading" :status="status" />
+    <SigningModal
+      v-model="isLoading"
+      :status="status"
+      :title="$t('mint.nft.burning')" />
+
     <NeoDropdown position="bottom-left" :mobile-modal="false">
       <template #trigger="{ active }">
         <NeoButton
@@ -32,7 +36,6 @@ import { NeoButton, NeoDropdown, NeoDropdownItem } from '@kodadot1/brick'
 import { Interaction } from '@kodadot1/minimark/v1'
 import { downloadImage } from '@/utils/download'
 import { toOriginalContentUrl } from '@/utils/ipfs'
-import Loader from '@/components/shared/Loader.vue'
 import { isMobileDevice } from '@/utils/extension'
 
 const { $i18n, $consola } = useNuxtApp()

components/shared/SigningModal/SigningModal.vue

@@ -0,0 +1,55 @@
+<template>
+  <NeoModal
+    :value="isModalActive"
+    :can-cancel="['outside', 'escape']"
+    scroll="clip"
+    @close="onClose">
+    <ModalBody :title="$t('drops.signTransaction')" @close="onClose">
+      <SigningModalBody
+        :title="title"
+        :subtitle="subtitle"
+        :show-subtitle-dots="isLoading" />
+    </ModalBody>
+  </NeoModal>
+</template>
+<script setup lang="ts">
+import { NeoModal } from '@kodadot1/brick'
+import ModalBody from '@/components/shared/modals/ModalBody.vue'
+import { TransactionStatus } from '@/composables/useTransactionStatus'
+
+const props = defineProps<{
+  modelValue: boolean
+  status: TransactionStatus
+  title: string
+}>()
+
+const { $i18n } = useNuxtApp()
+
+const isModalActive = useVModel(props, 'modelValue')
+
+const statusTransalationsKeys: Partial<Record<TransactionStatus, string>> = {
+  [TransactionStatus.Finalized]: 'transactionSteps.completed',
+  [TransactionStatus.IPFS]: 'transactionSteps.uploading',
+}
+
+const isLoading = computed(() =>
+  [
+    TransactionStatus.Block,
+    TransactionStatus.Casting,
+    TransactionStatus.Sign,
+    TransactionStatus.Broadcast,
+  ].includes(props.status),
+)
+
+const subtitle = computed(() =>
+  isLoading.value
+    ? $i18n.t('transactionSteps.loading')
+    : $i18n.t(
+        statusTransalationsKeys[props.status] || 'transactionSteps.waiting',
+      ),
+)
+
+const onClose = () => {
+  isModalActive.value = false
+}
+</script>