Merge pull request #9002 from hassnian/issue-8904

feat: Signing modal consistency
kodadot · Jan 26, 2024 · 918139b · 918139b
2 parents 0e16eb1 + c9df787
commit 918139b
Show file tree

Hide file tree

Showing 18 changed files with 327 additions and 102 deletions.
diff --git a/components/buy/Buy.vue b/components/buy/Buy.vue
@@ -1,6 +1,12 @@
 <template>
   <div>
-    <Loader v-if="!usingAutoTeleport" v-model="isLoading" :status="status" />
+    <SigningModal
+      v-if="!usingAutoTeleport"
+      :title="$t('buyModal.buyingNft', itemCount)"
+      :is-loading="isLoading"
+      :status="status"
+      @try-again="handleBuy" />
+
     <ConfirmPurchaseModal
       :loading="!hasSyncedPrices"
       :action="autoteleportAction"
@@ -15,7 +21,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 +46,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 +97,7 @@ const handleConfirm = async ({
   autoteleport,
 }: AutoTeleportActionButtonConfirmEvent) => {
   usingAutoTeleport.value = autoteleport
+  itemCount.value = isShoppingCartMode.value ? items.value.length : 1
 
   if (!isShoppingCartMode.value) {
     shoppingCartStore.removeItemToBuy()

diff --git a/components/collection/HeroButtonDeleteCollection.vue b/components/collection/HeroButtonDeleteCollection.vue
@@ -1,4 +1,10 @@
 <template>
+  <SigningModal
+    :title="$t('confirmDeleteCollection.deletingCollection')"
+    :is-loading="isLoading"
+    :status="status"
+    @try-again="deleteCollection" />
+
   <NeoDropdownItem @click="confirmDeleteModalActive = true">
     {{ $i18n.t('moreActions.deleteCollection') }}
   </NeoDropdownItem>
@@ -14,15 +20,22 @@ 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,
+  blockNumber,
+  isLoading: isTransactionLoading,
+} = useTransaction()
 const { urlPrefix } = usePrefix()
 const { accountId } = useAuth()
 
 const confirmDeleteModalActive = ref(false)
+const isLoading = ref(false)
+const unsubscribeSubscription = ref(() => {})
 
 const deleteCollection = async () => {
-  $updateLoader(true)
+  isLoading.value = true
   const id = route.params.id.toString()
 
   await transaction({
@@ -31,7 +44,8 @@ const deleteCollection = async () => {
     collectionId: id,
   })
 
-  useSubscriptionGraphql({
+  unsubscribeSubscription.value()
+  unsubscribeSubscription.value = useSubscriptionGraphql({
     query: `
       collectionEntity: collectionEntityById(id: "${id}") {
         id
@@ -40,15 +54,24 @@ const deleteCollection = async () => {
     `,
     onChange: ({ data }) => {
       if (data.collectionEntity.burned) {
-        $updateLoader(false)
+        isLoading.value = false
         navigateTo(`/${urlPrefix.value}/u/${accountId.value}?tab=collections`)
       }
     },
+    onError: () => {
+      isLoading.value = false
+    },
   })
 }
 
 const closeAndDelete = () => {
   confirmDeleteModalActive.value = false
   deleteCollection()
 }
+
+watch([isTransactionLoading, blockNumber], ([loading, block]) => {
+  if (!loading && !block) {
+    isLoading.value = false
+  }
+})
 </script>
diff --git a/components/collection/HeroButtonDeleteNfts.vue b/components/collection/HeroButtonDeleteNfts.vue
@@ -1,4 +1,10 @@
 <template>
+  <SigningModal
+    :title="$t('moreActions.deletingNfts')"
+    :is-loading="isLoading"
+    :status="status"
+    @try-again="deleteNfts" />
+
   <NeoDropdownItem @click="deleteNfts()">
     {{ $i18n.t('moreActions.deleteNfts') }}
   </NeoDropdownItem>
@@ -8,20 +14,28 @@
 import { NFTs } from '@/composables/transaction/types'
 import { NeoDropdownItem } from '@kodadot1/brick'
 
-const route = useRoute()
-const { $i18n, $updateLoader } = useNuxtApp()
-const { transaction, status } = useTransaction()
-const { urlPrefix } = usePrefix()
-const { accountId } = useAuth()
-
-const id = route.params.id.toString()
-
 type NftIds = {
   nfts?: {
     id: string
   }[]
 }
 
+const route = useRoute()
+const { $i18n } = useNuxtApp()
+const { urlPrefix } = usePrefix()
+const { accountId } = useAuth()
+
+const {
+  transaction,
+  status,
+  isLoading: isTransactionLoading,
+  blockNumber,
+} = useTransaction()
+
+const id = route.params.id.toString()
+const isLoading = ref(false)
+const unsubscribeSubscription = ref(() => {})
+
 const { data } = useGraphql({
   queryName: 'nftIdListByCollection',
   variables: {
@@ -31,18 +45,20 @@ const { data } = useGraphql({
 })
 
 const deleteNfts = async () => {
-  $updateLoader(true)
   const nfts = (data.value as NftIds).nfts
   const ids = nfts?.map((nft) => nft.id)
 
   if (ids?.length) {
+    isLoading.value = true
+
     await transaction({
       interaction: NFTs.BURN_MULTIPLE,
       nftIds: ids,
       urlPrefix: urlPrefix.value,
     })
 
-    useSubscriptionGraphql({
+    unsubscribeSubscription.value()
+    unsubscribeSubscription.value = useSubscriptionGraphql({
       query: `
       nftEntities(where: {collection: {id_eq: "${id}"}, burned_eq: false}) {
         id
@@ -54,10 +70,16 @@ const deleteNfts = async () => {
           data.nftEntities.length === 0 ||
           status.value === TransactionStatus.Finalized
         ) {
-          $updateLoader(false)
+          isLoading.value = false
         }
       },
     })
   }
 }
+
+watch([isTransactionLoading, blockNumber], ([loading, block]) => {
+  if (!loading && !block) {
+    isLoading.value = false
+  }
+})
 </script>
diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
@@ -1,5 +1,9 @@
 <template>
-  <Loader v-model="isLoading" :status="status" />
+  <SigningModal
+    :title="$t('mint.nft.minting')"
+    :is-loading="isLoading"
+    :status="status"
+    @try-again="mintNft" />
 
   <CollectionDropGenerativeLayout
     :collection-id="collectionId"
@@ -36,7 +40,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'
@@ -197,10 +200,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 ||
@@ -252,6 +255,7 @@ const mintNft = async () => {
     showNotification(`[MINT::ERR] ${e}`, notificationTypes.warn)
     $consola.error(e)
     isTransactionLoading.value = false
+    isLoading.value = false
   }
 }
 

diff --git a/components/collection/drop/modal/DropConfirmModal.vue b/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 {

diff --git a/components/collection/drop/modal/PaidMint.vue b/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'

diff --git a/components/collection/drop/modal/shared/WaitingDrop.vue b/components/collection/drop/modal/shared/WaitingDrop.vue
diff --git a/components/common/itemTransfer/ItemTransferModal.vue b/components/common/itemTransfer/ItemTransferModal.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
-    <Loader v-model="isLoading" :status="status" />
+    <SigningModal
+      :title="$t('transaction.transferingNft')"
+      :is-loading="isLoading"
+      :status="status"
+      @try-again="transfer" />
+
     <NeoModal :value="isModalActive" scroll="clip" @close="onClose">
       <div class="modal-width">
         <header

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
@@ -1,6 +1,12 @@
 <template>
   <div>
-    <Loader v-if="!autoTeleport" v-model="isLoading" :status="status" />
+    <SigningModal
+      v-if="!autoTeleport"
+      :title="$t('listingCart.listingNft', itemCount)"
+      :is-loading="isLoading"
+      :status="status"
+      @try-again="submitListing" />
+
     <NeoModal
       :value="preferencesStore.listingCartModalOpen"
       scroll="clip"
@@ -96,6 +102,8 @@ const fixedPrice = ref()
 const floorPricePercentAdjustment = ref()
 const autoTeleport = ref(false)
 const autoteleportButton = ref()
+const itemCount = ref(listingCartStore.count)
+const items = ref<ListCartItem[]>([])
 
 const loadingAutoTeleport = computed(() => !autoteleportButton.value?.isReady)
 
@@ -201,12 +209,18 @@ const getAction = (items: ListCartItem[]): Actions => {
   }
 }
 
+const submitListing = () => {
+  return transaction(getAction(items.value || []))
+}
+
 async function confirm({ autoteleport }: AutoTeleportActionButtonConfirmEvent) {
   try {
     autoTeleport.value = autoteleport
+    itemCount.value = listingCartStore.count
+    items.value = [...listingCartStore.itemsInChain]
 
     if (!autoteleport) {
-      await transaction(getAction(listingCartStore.itemsInChain))
+      await submitListing()
     }
 
     listingCartStore.clearListedItems()

diff --git a/components/create/CreateCollection.vue b/components/create/CreateCollection.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="is-centered" :class="{ columns: classColumn }">
-    <Loader v-if="!autoTeleport" v-model="isLoading" :status="status" />
+    <SigningModal
+      v-if="!autoTeleport"
+      :title="$t('mint.collection.minting')"
+      :is-loading="isLoading"
+      :status="status"
+      @try-again="createCollection" />
+
     <MintConfirmModal
       v-model="confirmModal"
       :auto-teleport-actions="actions"